WEB前端面经（二）

1、js的原型和原型链？

（1）原型链的继承例子

function A(){
    this.name = 'zhangsan'
}
A.prototype.getname = function(){
    return this.name
}
function B(){
    this.age = 12
}

//继承
B.prototype = new A()
//（*重要*）子类型需要添加母类型中不存在的方法，或者修改，代码需要放在继承之后
B.prototype.getage = function(){
    return this.age
}

//实例化
var t = new B()
console.log(t.getname())//zhangsan
console.log(t.getage())//12

(2)new一个对象的过程

• 创建一个对象
• this指向这个对象
• 执行代码，即对this赋值
• 返回this

(3)当试图得到某对象的属性时，如果其本身没有这个属性，则去__proto__即这个对象的构造函数的显式原型（prototype）中寻找

(4)原型是什么
js中原型是一个prototype对象，用来表示类型之间的关系

2、js数组方法？

（1）join()

• 将数组元素连接成字符串

var arr = [1,2,3];

console.log(arr.join()); // 1,2,3
console.log(arr.join("-")); // 1-2-3

console.log(arr); // [1, 2, 3]（原数组不变）

• 实现重复字符串

//需注意重复三次，new Array(4)，当数组最后一项为空的时候逗号无效，需要多算一个逗号

console.log(new Array(3 + 1).join('ac1'))//ac1ac1ac1

（2）push() 和 pop()

• push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
• pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

（3） unshift() 和 shift()

• unshift()：将参数添加到原数组开头，并返回数组的长度 。
• shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。

（4） sort()
升序排列数组，sort()会调用每个数组项的toString()方法，转成字符串，再做比较。所以对数字的排序会产生错误，需要通过一个比值函数来修正这个问题。

arr1 = ["Banana", "Orange", "Apple", "Mango"]
console.log(arr1.sort())    //[ 'Apple', 'Banana', 'Mango', 'Orange' ]
arr = [13, 24, 51, 3]
//升序
console.log(arr.sort(function(a,b){return a-b}))    //[ 3, 13, 24, 51 ]
//降序
console.log(arr.sort(function(a,b){return b-a}))    //[ 51, 24, 13, 3 ]

（5）reverse()
反转数组顺序，反转后原数组改变。

（6）concat()
添加参数到副本数组。首先创建数组副本，然后在末尾添加参数，再返回副本，若无参数，则只是复制了一次数组，原数组始终不变。

//参数中有一维数组情况
arr2 = [13, 24, 3]
console.log(arr2.concat(0,4,[5,6])) //[13, 24, 3, 0, 4,  5, 6]

//参数中有二维数组情况
arr2 = [13, 24, 3]
console.log(arr2.concat(0,[4,[5,6]])) //[ 13, 24, 3, 0, 4, [ 5, 6 ] ]

（7）slice()
从原数组中截取某一段，返回一个新数组。传入两个参数时，为左闭右开区间。

（8）splice()
可以实现删除、插入、替换。

• 删除：splice(起始位置，删除个数)
• 插入：splice(起始位置，删除个数0，要插入的项)
• 替换：splice(起始位置，删除个数，要插入的项)

（9）indexOf() 和 lastIndexOf()
查找使用全等操作符，未找到时返回-1

• indexOf(要查找的项，查找起点位置索引):从开头找
• lastIndexOf()(要查找的项，查找起点位置索引):从结尾找

(10)forEach()
对数组进行遍历，无返回值，参数为function。

(11)map()
映射，对数组中每项运行固定函数，返回每次函数调用结果的新数组。

(12)filter()
过滤，数组中每一项运行函数，返回满足过滤条件组成的数组。

(13)every()
判断数组中每一项是否满足条件，如果全部满足才返回true。

(14)some()
判断数组中是否有项满足条件，只要有就返回true。

3、js基本数据类型？
Undefined、Null、Boolean、Number和String

4、css选择器优先级？
内联 > ID选择器 > 类选择器 > 标签选择器。

优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

• 如果存在内联样式，那么 A = 1, 否则 A = 0;
• B 的值等于 ID选择器 出现的次数;
• C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
• D 的值等于 标签选择器 和 伪元素 出现的总次数 。

比较规则是: 从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的

5、typeof返回结果？
undefined（未定义）、boolean（布尔）、number （数字）、string（字符串）、object（对象）、function（函数）

6、undefined和null的区别？

• null为一个空对象指针，typeof(null) = object，为对象原型链的终点
• undefined为声明了一个变量但未初始化
  两者相等但做全等比较时不相等

7、ES6中set和map？

• ES6中提供Set数据容器，是一个能够存储无重复值的有序列表，可以使用has()方法来判断某个值是否存在于Set中

let set = new Set([1,2,3,3,3,3])
console.log(set.size)	//3
set.has(3)	//true
set.delete(1)
set.add(1)

• ES6中提供Map数据结构，能够存放键值对，键的数据类型可以是基本类型数据也可以是对象，而值也可以是任意类型数据。

let map = new Map()
//存值
map.set('title','hello world');
map.set('year','2018');
//长度
console.log(map.size);	 //2
//取值
console.log(map.get('title')); // hello world
//判断是否存在
console.log(map.has('year')); //true
//删除
map.delete('title');
console.log(map.has('title')); //false
//清除所有数据项
map.clear();
console.log(map.size); //0

8、primse？
ES6 原生提供了 Promise 对象，用来传递异步操作消息，有三种状态，Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败），对象的状态不受外界影响，一旦状态改变就不会再变，中途无法取消。

let promise = new Promise((resolve, reject)=>{ 
let boolean = true;
setTimeout(()=>{
 if(boolean){ resolve(/*传入参数*/) }
 else{ rejected(/*传入参数*/) } 
 	}) 
 })

let promise = new Promise((reslove,reject)=>{
}) promise.then((data)=>{ },(err)=>{ })