前端面试题整理---JS基础

为了督促自己学习,整理了一下前端的面试题

JavaScript:

JavaScript 中如何监测一个变量是String类型?

typeof(obj)==="string";
typeof obj ==="string";
obj.constructor ===string

  JS中清除字符串空格的方法

       方法一:使用正则匹配

// 去除所有的空格
var str1 = strings.replace(/\s*/g,"");
// 去掉两头的空格
var str2 = strings.replace(/(^\s*|\s*$)/g,"");
//去掉左边空格
var str3 = strings.replace(/^\s*/,"");
// 去掉右边空格
var str4 = strings.replace(/\s*$/,"");
实例
var strings = "  this is an apple  ";
// 去除所有的空格
var str1 = strings.replace(/\s*/g,"");
console.log(str1);
// 去掉两头的空格
var str2 = strings.replace(/(^\s*|\s*$)/g,"");
console.log(str2);
//去掉左边空格
var str3 = strings.replace(/^\s*/,"");
console.log(str3);
// 去掉右边空格
var str4 = strings.replace(/\s*$/,"");
console.log(str4)

  方法二:使用str.trim()的方法

       使用具有局限性,只能去除两头的空格,使用trimLeft()、trimRight()分别都只能去除字符串两端的空格

str = strings.trim();

  方法三:使用jQuery$.trim()

$.trim()函数会移除字符串开始和结尾处的所有换行符,空格(包括连续的空格)和制表符(tab)。如果这些空白字符在字符串中间时,它们将被保留,不会被移除

var str = $.trim(str);

 你如何获取浏览器URL中查询字符串中的参数?

  测试地址:http://www.runoob.com/jquery/misc-trim.html?chanelid=123&name=lilei&age=23

var url = ‘http://www.baidu.com?name=lilei&age=26&pwds=123456
unction showHref (holeHref){
    var args = holeHref.split(‘?‘);
    if(args[0] ==holeHref){
        return ""
    }
    var argArr = args[1].split(‘&‘);
    var objs = {};
    for(var i=0;i<argArr.length;i++){
        var arg = argArr[i].split(‘=‘);
        objs[arg[0]] = arg[1];
    }
    return objs
    // var argLastOne = argArr[argArr.length-1];
}
 var href  =showHref(url);
console.log(href[‘age‘]);

  JS字符操作字符串的方法:

concat() --将两个或多个字符串拼接,返回新的字符串

  indexOf()--返回字符串中一个字符串出现的第一个位置,如果没有,返回-1;

  charAt()---返回指定位置的字符;

  lastIndexOf()--返回字符串中一个字符最后一处出现的索引;若没找到,返回-1;

  match()--检查字符串是否符合一个正则表达式;

  substring()--返回字符串从开始位置,到结束位置之间的字符串;

  substr()--返回字符串的一个子字符串,传入的参数是开始位置和长度为length的字符串;

  slice()--提取字符串的一部分,返回新的字符串;

   replace()--用来匹配查找一个正则表达式的字符串;

  split()--将一个字符串按照传入参数分割成几个字符串,并存入数组中

  length--返回字符串的长度,所谓的长度是包含字符的个数

  toLowerCase()--字符串的长度转成小写

  toUpperCase()--字符串的长度转成大写

var str1 = ‘this is an apple‘;
var str2 = ‘ this is a pen‘;
var str3 = ‘THIS IS AN APPLEPEN‘;
// 1、concat()方法
console.log(str1.concat(str2));//this is an apple this is a pen
// 2、indexOf()的方法
console.log(str1.indexOf(‘i‘));//2---第一次出现i的位置
// 3、charAt()
console.log(str1.charAt(3));//s--返回在3位置处的字符
//4、lastIndexOf()
console.log(str1.lastIndexOf(‘p‘));//13---若不传参,则返回-1;否则返回左后一次出现参数的位置
// 5、match()
var reg = /[t|i]/ig;
console.log(str1.match(reg));//[ ‘t‘, ‘i‘, ‘i‘ ]--如果返回null,说明没有符合正则的字符;
// 6、substr()
console.log(str1.substr(2,6));//is is 返回在2位置到6位置处的字符串,包含空格
// 7、slice()
console.log(str1.slice(2,6));//is i 返回在2--6位置之间的字符,含头不含尾
//8、substring()
console.log(str1.substring(2,6));//is i 返回在2--6位置之间的字符,含头不含尾
// 9、split()
console.log(str1.split(‘ ‘));//[ ‘this‘, ‘is‘, ‘an‘, ‘apple‘ ]将字符串按照参数的形式划分成子字符串,返回到数组中
//10、length()
console.log(str2.length);//14
// 11、toLowerCase()
console.log(str3.toLowerCase());//this is an applepen
// 12、toUpperCase()
console.log(str1.toUpperCase());//THIS IS AN APPLE

 怎样添加、创建、移动、复制、查找节点 

1、创建节点

  createDocumentFragment()---创建文档片段

   createElement()--创建一个具体的元素

   createTextNode()--创建文本节点

2、添加、移除、替换、插入

  appendChild()//添加

  removeChild()//移除

  replaceChild()//替换

  insertBefore()//插入

3、查找

getElementById()--根据id属性查找DOM元素

  getElementByName()--根据name属性查找DOM元素

  getElementByTagName()--根据标签名查找DOM属性

写出3个使用this的典型应用  

// 1、this在HTML中的应用
 <input type="button" onclick="showInfo(this)" value="点击一下">
// this--指的是该元素
// 2、构造函数使用
function userThis (name,color){
    this.name = name;
    this.color = color;
}
//事件发生时
var btn = document.getElementById(‘button‘);
 btn.click(function () {
     alert(this.value)
 });
//在apply()/call()求数组中的最值
var numbers = [5,24,64,332,568,97];
var maxNumbers = Math.max.apply(this,numbers);
console.log(maxNumbers);//568
maxNumbers = Math.max.call(this,5,24,64,332,568,97);
console.log(maxNumbers);

   比较typeof与instanceof?

相同点:JavaScript 中 typeof 和instanceof 常用来判断一个,变量是否为空,或者是什么类型的

typeof的定义和用法:返回值是一个字符串,用来说明变量的数据类型

返回值:

①:typeof 一般只能返回如下几个结果:number,boolean,string,function,object,undefined

②:typeof:来获取一个变量是否存在,如 if(typeof a!="undefined"){alert("ok")},而不要去使用 if(a) 因为如果 a 不存在(未声明)则会出错。

③对于Array,Null等特殊对象使用typeof一律返回object,这是该函数的局限性

instanceof定义和用法:instanceof 用于判断一个变量是否属于某个对象的实例

var a = ‘this is a charCode‘;
console.log(typeof a);//string
var b = 0;
console.log(typeof b);//number
var c = true;
console.log(typeof c);//boolean
var d = undefined;
console.log(typeof d);//undefined
var e = [1,2,3,3];
console.log(typeof e);//object
var f = function(){
    alert(‘this‘);
};
console.log(typeof f);//function
var g = {};
g.name = ‘jack‘;
console.log(typeof g);//object
var h = null;
console.log(typeof h);//object

console.log(a instanceof Object)//falseconsole.log(g instanceof Array)//falseconsole.log(e instanceof Array)//trueconsole.log(e instanceof Object)//true数组也属于对象,数组是Object的子类

  

原文地址:https://www.cnblogs.com/bllx/p/8531678.html

时间: 2024-08-29 12:01:39

前端面试题整理---JS基础的相关文章

前端面试题(JS篇)

原题地址:http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/ 好吧,最近打算换工作,所以关注比较多的是面试题,这套还不错,留下~~ 1.JS相关问题: 解释下事件代理(基础题) 解释下 JavaScript 中 this 是如何工作的(始终指向调用当前函数的对象) 解释下原型继承的原理. AMD vs. CommonJS? 什么是哈希表? 解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式):f

web前端面试题整理(HTML篇)

web前端面试题整理(HTML篇)需要web前端课程工具和电子书,可以加: 33群105601600;  22群1203428331. h5的改进:新元素画布canvas: HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成音频audio视频video语义性: article,  nav ,  footer, section, aside, hgroup等.时间time 新属性拖放: draggable   <img draggable=&q

各大互联网公司前端面试题(js)

对于巩固复习js更是大有裨益.    初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,Boolean,Number,Undefined, Null 引用数据类型:Object(Array,Date,RegExp,Function) 那么问题来了,如何判断某变量是否为数组数据类型? 方法一.判断其是否具有“数组性质”,如slice()方法.可自己给该变量定义slice方

前端面试题整理(js)

1.HTTP协议的状态消息都有哪些? HTTP状态码是什么: Web服务器用来告诉客户端,发生了什么事. 状态码分类: 1**:信息提示.请求收到,继续处理2**:成功.操作成功收到,分析.接受3**:重定向.完成此请求必须进一步处理4**:客户端错误.请求包含一个错误语法或不能完成5**:服务器错误.服务器执行一个完全有效请求失败 状态码详解: 100(继续):服务器收到的请求不完整,但服务器没有拒绝请求,客户端应重新发送一个完整的请求. 101(切换协议):服务器改用别的协议了 200(成功

【web前端面试题整理08】说说最近几次面试(水)

为什么换工作 换工作简单来讲一般会归纳为钱不够或者人不对,我们团队氛围很不错,所以基本就定位到钱不够了,而我更多是考虑到以后的职业发展,简单说来就是对以后几年的工作有想法,而这种想法实现不一定能在现在的团队获得,在短期内也看不到希望,加之公司职级晋升不合理等考虑,也就自然而然想到了离职. 其实在鞋厂这两年,真的收获了很多东西,也负责了很重要的业务,这些财富可能是其它大公司不一定能给予的,虽然一直级别低点也就没太多在意,直到最近职级福利缩水...... 最初我面试的职级为X,HR给了一套智力题做,

2016年BAT公司常见的Web前端面试题整理

1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,boolean,Number,Undefined 引用数据类型:Object(Array,Date,RegExp,Function,Null) 那么问题来了,如何判断某变量是否为数组数据类型? 方法一.判断其是否具有“数组性质”,如slice()方法.可自己给该变量定义slice方法,故有时会失效 方法二.obj instanceof Array

【web前端面试题整理02】前端面试题第二弹袭来,接招!(转)

前言 今天本来准备先了解下node.js的,但是, 看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端 面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 JavaScript编程题1.实现输出document对象中所有成员的名称和类型:2.如何获得一个DOM元素的绝对位置?(获得元素位置,不依赖框架)3.如何利用JS生成一个table?4.实现预加载一张图片,加载完成后显示在网页中并设定其高度为50px,宽度为50px:5.假设有一个4行td的tabl

2017前端面试题之Js篇(1)

1 . 请解释事件代理 (event delegation) 当需要对很多元素添加事件的时,可以通过将事件添加到它们的父节点通过委托来触发处理函数.其中利用到了浏览器的事件冒泡机制. var delegate = function(client, clientMethod) { return function() { return clientMethod.apply(client, arguments); } } var agentMethod = delegate (client, clie

2019年最新前端面试题,js程序设计题

都说机会是留给有准备的人的. 一年之计在于春,面对众多的前端技术,需要时刻充电自己. 我现在整理一些前端js面试程序题. 1.判断一个字符串中出现最多的字符,并计算出现的次数? 2.用css伪类实现下面的效果 <!DOCTYPE html> <html> <head> <title>button</title> <style type="text/css"> button{background:#000;color