web面试篇-js

JavaScript 组成部分

1）ECMAScript 核心js js的基础语法、变量、数据类型、运算符、分支结构、循环结构、函数、对象、数组等
2）DOM 文档对象模型
3）BOM 浏览器对象模型

Js的数据类型

1. 基本数据类型（5个）：number，string，boolean，undefined，null
2. 引用数据类型：object对象数据类型，array数组数据类型，正则表达式，function函数数据类型
3. 两种数据类型的区别：
   1） 基本数据类型存储在栈中，占据空间小，大小固定，被频繁使用，传送的数据无法改变
   2）引用数据类型存储在堆中，占据空间大，大小不固定，在栈中存储了指针，指针指向堆中的起始地址，值是可变的
4. 检测数据类型的方法
   1）检测数据类型的运算符：typeof()
   2）instanceof：检测某个实例是否属于这个类
   3） constructor 获取当前实例的构造器
   4） Object.prototype.toString.call:获取当前实例的所属类信息
5. null和undefined的区别：两者并不恒等

1. Null：只包含一个值，就是null，表示变量中还没有被存储引用类型的数据
   2)undefined：声明变量没有被初始化或赋值，或根本就没有定义该变量，默认为undefined

请指出 JavaScript 宿主对象 (host objects) 和原生对象 (native objects) 的区别？

原生（Naitve）对象：除了内置对象，还包括了一些在运行过程中动态创建的对象(Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、Math等对象)
宿主(host)对象：宿主对象不是引擎的原生对象，而是由宿主框架通过某种机制注册到JavaScript引擎中的对象(DOM和BOM)

JavaScript常见内置对象：

String对象：字符串对象，提供了对字符串进行操作的属性和方法。
Array对象：数组对象，提供了数组操作方面的属性和方法。
Date对象：日期时间对象，可以获取系统的日期时间信息。
Boolean对象：布尔对象，一个布尔变量就是一个布尔对象。(没有可用的属性和方法)
Number对象：数值对象。一个数值变量就是一个数值对象。
Math对象：数学对象，提供了数学运算方面的属性和方法。
Object对象、RegExp对象正则表达式、 Global对象、Function对象。

创建对象的方法

1. 字变量形式

var obj = {
  name: 'Tom',
  age: 10,
  gender: '男'
};

2. 构造方法

//    构造方法定义对象
    function Student(name,age,gender){
        this.name=name;
        this.age=age;
        this.gender=gender;
        this.play= function () {
            console.log("羽毛球");
        }
    }
    var obj=new Student('张三',12,'男');
    console.log(obj);

对象的操作

1. 增：为对象添加新的属性和功能
   1)点语法：对象.属性名称 = 值
   2)中括号：对象[‘属性名称’] = 值
2. 删：删除对象中的某个属性
   1)delete 对象名称.属性名
   2)delete 对象名称[‘属性名’];
   3)如果删除成功，则返回true、否则返回false
3. 改：修改某个属性的值
   1)点语法：对象名称.属性名称 = 新的值
   2)中括号：对象名称[‘属性名称’] = 新的值
4. 查：获取对象中某个属性的值，或者调用对象中某个方法
   1)点语法：对象名称.属性名称、对象名称.方法名称();
   2)中括号的方式：对象名称[‘属性名称’]、对象名称’方法名称’;
   3)区别：点语法后面不可以加变量，但是中括号后面可以加变量
   注意：如果对象的键包含特殊符号，那么只能用中括号

常见内置对象及其方法

1. array数组对象

• 增
  arr.unshift(数组元素1,数组元素2,..)；数组头部增加；返回增加后数组的长度
  arr.push(数组元素1,数组元素2,..)；数组末尾增加；返回增加后数组的长度
  splice（index, 0 ，item1， item2...) 从索引 index 开始增加，增加的内容插入到索引 index 前面；返回被删除的数组
• 删
  arr.shift()；一次只能删除一个数组元素，删除头部元素；返回删除的数组元素
  arr.pop()；一次只能删除一个数组元素，删除尾部元素；返回删除的数组元素
  splice(index, n)；从索引 index 开始删除n个
  splice(index)从索引 index 开始后面的内容全部删除
• 改
  替换
  splice(index， n，item1，item2...) ；从索引 index开始替换 n 个，替换的内容为item1, item2…
• 查

1. map() 方法：数组.map(function(currentValue,index,arr) {});
   作用：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
2. filter方法：数组名称.filter(function(currentValue,index,arr){})
   作用：返回一个新数组，数组中的元素是通过检查指定数组中符合条件的所有元素。
3. find方法:数组名称.find(function(currentValue,index,arr){})
   作用：返回通过测试（函数内判断）的数组的第一个元素的值
4. findIndex方法:数组名称.findIndex(function(currentValue,index,arr))
   作用：返回通过测试（函数内判断）的数组的第一个元素的下标。
5. some方法：数组名称.some(function(currentValue,index,arr)
   作用：用于检测数组中的元素是否满足指定条件（函数提供）；返回false或true
6. every方法:数组名称.every(function(currentValue,index,arr) {})
   作用：用于检测数组所有元素是否都符合指定条件（通过函数提供）。
7. includes方法：数组.includes(searchElement, fromIndex)
   作用用来判断一个数组是否包含一个指定的值，返回false或true
8. 查找数组元素
   ① arr.indexOf(查找的数组元素,index)
   从前往后查找，返回第一个符合条件的下标；如果查找不到，返回-1
   ② arr.lastIndexOf(查找的数组元素,index)
   从后往前查找，返回后面第一个符合条件的下标；如果查找不到，返回-1

• 数组拼接
  arr.concat(数组1,数组2,..)
  使用concat可以实现数组的克隆，concat（）中不传参数
• 数组的截取
  slice(n，m)；从索引 n 截取到索引 m 但不包括 m ，原数组不发生改变
• 数组转换成字符串
  arr.join('分隔符')：分隔数组，将数组转换为字符串
  toString( ) 把数组转成以逗号分隔的字符串
• 数组翻转
  arr.reverse()；改变原数组
• 数组排序
  arr.sort(function(a, b) {
  return a - b;//升序
  });
  arr.sort(function(a, b) {
  return b - a; //降序
  });

2. String字符串对象

• 增
  ① 字符串.padStart(长度，'用来补位的字符');左侧补位，将字符串扩展到指定的长度
  ② 字符串.padEnd(长度，'指定字符')：右侧补位，将字符串扩展到指定的长度
• 删
  string.trim()；去掉字符串两端多余的空格
• 改
  string.replace('旧字符串','新字符串')；替换字符串
• 查

1. 查找字符串
   indexOf() 从前往后找，找到返回内容的索引，找不到返回-1；
   lastIndexOf() 从后往前找，找到返回内容的索引，找不到返回-1；
   search() 配合正则，从前往后查找，返回第一个符合条件的下标；如果查找不到，返回-1；
   match() 配合正则；从前往后查找，返回符合条件的具体内容；如果查找不到，返回null
2. 判断字符串
   Includes()：判断字符串中是否包含指定的字符
   startsWith():判断字符串是否以某个字符开头
   endsWith()：判断字符串是否以某个字符结尾
3. 通过索引查找字符
   charAt(index):返回指定位置的字符
   charCodeAt(index):返回指定位置的字符的Unicode编码

• 英文字母大小写的转换
  ①toUpperCase():转换为大写
  ②toLowerCase():转换为小写
• 字符串的截取
  slice（n，m） 从索引n 查找到索引m 但不包括m，slice可以取负值
  substring（n，m） 从索引n 查找到索引m ，但不包括m， 不可以取负值
  substr（n，m） 从索引n开始截取m 个
• 字符串转换成数组
  split(‘分隔符’) 把一个字符串分割成字符串数组
• 拼接字符串
  string.concat(str1,str2,...)

3.Date日期对象

1. 年月日周
   var year = date.getFullYear(); //获取年份
   var year = date.getYear();//返回距离1900年的年份
   var month = date.getMonth();//返回的月份，
   注意，返回值是0-11,0表示1月，11表示12月
   var day = date.getDate(); //返回天
   var week = date.getDay(); //返回星期，返回值为0-6,0表示星期日
2. 时分秒
   var hour = date.getHours(); // 返回小时
   var minute = date.getMinutes(); //返回分钟
   var second = date.getSeconds(); //返回秒
   var time = date.getTime();//距离1970年1月1日0时0分0秒的毫秒值
3. 返回日期
   var res = date.toLocaleString(); //包含日期和时间
   var res = date.toLocaleDateString(); //只包含日期
   var res = date.toLocaleTimeString(); //只包含时间

4. Math数学对象

Math.floor（） 向下取整
Math.ceil（） 向上取整
Math.random（） 取0-1之间的随机小数
注：parseInt(Math.random() * (最大值+1-最小值) + 最小值) 取任意数字之间的随机整数
Math.round（） 四舍五入
Math.abs（） 取绝对值
Math.pow（x，y） x的y次幂
Math.sqrt（） 开平方
Math.max（） 取最大值
Math.min（） 取最小值

原型

1. 解决构造方法中，当属性值相同时造成的内存资源浪费；将属性值相同的内容放到公共空间中，即‘原型’
2. 每个函数中都会有一个属性——prototype属性，这个属性指向了一个对象，这个对象就被称为原型对象，简称原型。
3. 如果私有属性和原型中的属性的名称相同，那么私有属性会将原型中的属性屏蔽掉
4. 原型继承 的原理：原型链查找
   1）每个对象的内容会有一个__proto__属性，这个属性指向了创建该对象时的原型对象。
   2）当利用对象去查找某个属性的时候，属性的查找顺序是：先从自身的私有属性中查找，如果私有属性中有要查找的属性，则返回其对应的值，如果私有属性中没有要查找的属性，则沿着__proto__的指向，到原型对象中查找。如果有则返回其对应的值。

prototype，proto，construct，scope的关系与区别

1）每个对象的内容会有一个__proto__和constructor属性
2）prototype属性是函数独有的属性，而函数也是对象的一种，所以函数中有_proto_，prototype与constructor三个属性
3）实例化的对象中不含prototype属性，对象中的__proto__属性指向原型对象，找到对应的公有属性和公有方法
4）constructor属性指向该对象的构造函数

.call 和 .apply 的区别是什么？

1. 区别： 参数的传递方式不同
   1）call的格式：函数.call(借用者，参数1，参数2，参数3...);
   2）apply的格式：函数.apply(借用者，[参数1，参数2，参数3...]);
2. 相同点：
   改变函数体内this的指向，函数的第一个参数代表函数体内的this的指向，即扩展函数的作用域范围

作用域

作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性

作用域链

在每个函数内部都有一个属性，这个属性是[[Scope]]属性，这个属性是不可以操作的。 该属性指向了一个集合，这个集合中保存了当前作用域下面变量对象的地址，以及上级作用域下面的变量对象的地址。这个集合就是作用域链

闭包

1. 定义： 被定义在函数内部的函数，能够访问另一个函数作用域中的变量
2. 不足：
   1）内存泄漏：由于闭包会将上级作用域下面的变量对象保存在内存中，那么如果程序中有大量的闭包，势必造成内存的资源浪费,即内存泄漏（内存泄漏指任何对象在不再拥有或需要它之后仍然存在）；要手动清理闭包，释放内存
   2）this的指向问题：闭包函数是在window作用域下执行的，this指向windows

JavaScript 中 this 是如何工作的

this 永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。
匿名函数或不处于任何对象中的函数指向 window

什么是 “use strict”; ? 使用它的好处和坏处分别是什么？

“use strict”： "严格模式"是一种在JavaScript代码运行时自动实行更严格解析和错误处理的方法。

1. 优点
   ● 消除Javascript语法的一些不严谨之处，减少一些怪异行为;
   ● 消除代码运行的一些不安全之处，保证代码运行的安全；
   ● 提高编译器效率，增加运行速度；
   ● 为未来新版本的Javascript做好铺垫
2. 缺点
   严格模式改变了语义。依赖这些改变可能会导致没有实现严格模式的浏览器中出现问题或者错误

JavaScript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
http,ftp:协议
主机名;localhost
端口名：80:http协议的默认端口
https:默认端口是8083
同源策略带来的麻烦：ajax在不同域名下的请求无法实现
如果说想要请求其他来源的js文件，或者json数据，那么可以通过jsonp来解决

请你谈谈Cookie的弊端

1. Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
2. 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只
   要原样转发cookie就可以达到目的了。
3. 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么 它起不到任何作用。

哪些操作会造成内存泄漏?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
2. 闭包
3. 控制台日志
4. 循环(在两个对象彼此引用且彼此保留时，就会产生一个循环)

创建函数的方法

1. 函数声明方式
function 函数名称() {
函数体;
}
2. 函数表达式方式
var 变量名称 = function() {
函数体;
};
1) 函数表达式方式创建的函数是没有名称的函数
2) 变量中存储的是对函数的引用
3) 函数声明方式和函数表达式方式的区别，函数声明方式定义的函数可以在定义之前调用该函数，但是函数表达式方式定义的函数，不可以在定义之前调用。因为函数声明方式定义的函数有函数声明提升操作，而函数表达式方式定义的操作没有函数声明提升操作，只有变量声明提升操作
3. 利用Function构造方法创建函数
var 变量名称 = new Function(‘参数1’， ‘参数2’， ‘参数3’…);
构造方法Function中的参数可以有多个，那么前面的参数表示函数的形参，最后一个参数表示函数体
调用方式为：变量名称(实参1，实参2，实参3…);
注意：这种方式定义的函数也不可以在定义之前调用，因为它也只有变量声明提升操作

JS中的三种特殊函数

匿名函数，回调函数，匿名自执行函数
具体内容=>JS的三种特殊函数

事件处理的三种方法=> 事件

1. html事件处理程序：以属性的形式添加在标签内
2. DOM0级事件处理程序：元素节点.on事件名称=function(){}
3. DOM2级事件处理程序(兼容性问题）：元素节点.addEventListener('事件名称',function(){ })

事件流，事件冒泡，事件捕获

事件流：所谓事件流，简单说就是页面中事件的执行顺序。 可以分为两个部分：事件冒泡、事件捕获
事件冒泡：从当前元素开始逐步向外扩展（即向根节点）,简单说，事件的执行顺序是从小到大，或从内向外
事件捕获：从根节点开始逐步向当前元素扩展，节点说，事件的执行顺序是从大到小，或从外向内

DOM

BOM