JavaScript 面试题

1，js 对字符串操作的方法

concat() - 连接两个或多个字符串，返回一个新字符串
indexOf() - 返回一个字符串中子串第一次出现的索引，如没有则返回 -1
search() - 执行一个正则表达式匹配查找，返回匹配成功字符的索引，否则返回 -1
charAt() - 返回指定索引的字符
substr() - 截取字符串，参数：开始索引，长度
substring() - 截取字符串，参数：开始索引，结束索引
slice() - 截取字符串，参数：开始索引，结束索引
match() - 检查一个字符串是否符合一个正则表达式
split() - 将字符串切割成数组
replace() - 将字符串中匹配正则的字符，用新的字符串替换
toLowerCase() - 将字符串转换成小写
toUpperCase() - 将字符串转换成大写

2，js 对数组操作的方法

concat() - 连接两个或更多数组，返回新数组
join() - 将数组转化成字符串
push() - 在数组的结尾添加一个或多个元素
pop() - 在数组的结尾删除一个元素
unshift() - 在数组开头添加一个或多个元素
shift() - 在数组开头删除元素
slice() - 截取数组，起始位置，结束位置
splice() - 替换数组中元素，三个参数，起始位置，长度，替换的元素
reverse() - 反转数组
sort() - 对数组进行排序

3，获取浏览器URL中查询字符串中的参数

function getURLArgs() {
    var href = window.location.href
    var str = href.split('?')
    if (str[0] == href) {
        return ''
    }
    var argsArr = str[0].split('&')
    var obj = {}
    for(var i=0;i<argsArr.length;i++) {
        var item = argsArr[i].split('=')
        var key = item[0]
        var value = item[1]
        obj[key] = value
    } 
    return obj
}
console.log(getURLArgs())

4，去除 js 中的空格

使用 str.trim() 或jquery 的 $.trim()，只能去除两端的空格
使用 replace 去除字符串中全部的空格

去除开头空格：replace(/^\s*/g, "")
去除结尾空格：replace(/\s*$/g, "")
去除两头的空格：replace(/^\s*|\s*$/)
去除所有空格：replace(/\s*/g, "")

5，js 中如何监测一个变量是否式 string 类型，请写出函数实现

// 1 typeof
typeof(obj) === "string" ? true : false
typeof obj === "string" ? true : false

// 2 constructor
obj.constructor === String ? true : false

// 3
Object.prototype.toString.call(obj) === "[object String]" ? true : false

6，怎样增加、移除、移动、复制、创建和查找节点

1，创建新节点

createDocumentFragMent() - 创建一个 DOM 片段
createElement() - 创建一个具体的元素
createTextNode() - 创建一个文本节点

2，增加、移除、替换、插入

appendChild() - 增加
removeChild() - 移除
replaceChild() - 替换
insertBefore() - 插入

3，查找节点

getElementById() - 根据 ID
getElementsByClassName() - 根据 class 查找
getElementsByName() - 通过元素的属性 name 值进行查找
getElementsByTagName() - 通过元素的标签名进行查找

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

1，在 HTML 元素事件属性中使用

<input type='button' onclick='showInfo(this)' value='点击'>

2，构造函数

function animal(name, color) {
    this.name = name;
    this.color = color
}

3，获取 input 的值

<input type='button' id="text" valu='点击'>
<script>
    var btn = document.getElementById('text')
    btn.onclick = function() {
        console.log(this.value)
    }
</script>

8，比较 typeof 和 instanceof

1，typeof 返回一个字符串，用来说明变量的数据类型

typeof 只能返回如下几个结果：number,string,boolean,function,object,undefined
typeof 来获取一个变量是否存在，如 if(typeof a!="undefined"){ alert('ok') }，而不要使用 if (a){}，如果 a 未声明，则报错
对于 Null 和 Array 等特殊对象使用 typeof 时，一律返回 object，这正是 typeof 的局限性。

2，instanceof：用来定义一个变量是否是某个对象的实例

var a = new Array()
alert(a instanceof Array)  // true
alert(a instanceof Object)  // true，因为 Array 是 Object 的子类

9，闭包的理解

定义：一个函数的返回值是另一个函数，而返回的那个函数如果调用了其父函数中的其他变量，如果返回的这个函数在外部被执行，就产生了闭包。
表现形式：使外部函数能够调用函数内部定义的变量
闭包的缺点：滥用闭包，会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成页面性能问题

10，什么是跨域？

由于浏览器的同源策略，凡是发送请求的 url 的协议、域名、端口，三者中任意一个与当前页面的地址不同，即为跨域。

11，跨域请求资源的方法

（1）通过 nginx 代理的方法，将数据发送到后台服务器，通过服务器发送请求，然后将请求的结果传递给前端
（2）通过 webpack 的转发实现，在 config/index.js 文件中的 dev 中加入代码

proxyTable: {
    '/api': {
        target: 'http://127.0.0.1:5757',
        changeOrigin: true  // true 时可用来解决跨域问题
    }
}

（3）CORS【Cross-Origin Resource Sharing】：是现代浏览器支持跨域请求的一种最常用的方式。一般需要后端人员在处理数据请求时，添加允许跨域的相关操作
（4）jsonp：通过动态插入一段 script 标签。浏览器对 script 的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。通过动态创建 script 来获取它域的资源，获取的数据一般是 json 格式的

<script>
    function testjsonp(data) {
        console.log(data.name)  // 获取返回的结果
    }
</script>
<script>
    var _script = document.createElement('script')
    _script.type = "text/javascript"
    _script.src = 'http://locallhost:8888/jsonp?callback=textjsonp'
    document.head.appendChild(_script)
</script>

12，js 面向对象中如何实现继承？
面向对象的基本特征：继承、封装、多态
在 javascript 中实现继承的方法：

原型链（prototype chaining）
call() / apply()：设置函数体内 this 对象的值，区别是：参数的写法，apply(this, [args[0], args[1]…])；call(this, args1, args2 …..)
混合方法【prototype / call() / apply()】
对象冒充

（1）原型链（prototype chaining）

function teacher(name) {
    this.name = name
}
teacher.prototype.sayName = function(){
    console.log("name is :" + this.name)
}
var teacher1 = new teacher('张三')
teacher1.sayName()

function student(name) {
    this.name = name
}
student.propotype = new teacher()
var student = new student('李四')
student.sayName()

// name is : 张三
// name is : 李四

（2）call() / apply()

function teacher(name, age) {
    this.name = name
    this.age = age
    this.sayHi = function(){
        console.log('name: ' + this.name + ', age: ' + this.age)
    }
}

function student(){
    var args = arguments
    teacher.call(this, args[1], args[2])  // 相当于将 teacher 方法中的代码复制到这里
    // teaccher.apply(this, arguments)
}

var teacher1 = new teacher('张三', 11)
teacher1.sayHi()

var student1 = new student('李四', 22)
student1.sayHi()

// name: 张三，age: 11
// name: 李四，age: 22

（3）混合方式【prototype / call() / apply()】

function teacher(name, age){
    this.name = name
    this.age = age
}
teacher.prototype.sayName = function(){
    console.log(this.name)
}
teacher.prototype.sayAge = function(){
    console.log(this.age)
}

function student() {
    teacher.apply(this, arguments)
}
student.prototype = new teacher()

var teacher1 = new teacher('张三', 11)
teacher1.sayName()

var student1 = new student('李四', 22)
student1.sayName()

（4）对象冒充

function teacher(name, age) {
    this.name = name
    this.age = age
    this.sayName = function(){
        console.log(this.name)
    }
}
function student(name, age) {
    this.student = teacher  // 将 teacher 类的构造函数赋值给 this.student
    this.student(name, age)  // js 中实际上是通过对象冒充来实现继承的
    delete this.student  // 移除对 teacher 的引用
}

var student1 = new student('张三', 11)
student1.sayName()

// 张三

猜你喜欢