前端面试高频考点，ES6知识点汇总！！！

return x + y;

};

console.log(add(1, 2)); //3

//将一般函数改写成箭头函数

function add() {}; //声明形式

const add = function() {}; //函数表达式形式

const add = () => {}; //箭头函数的形式

箭头函数的注意事项

---

🚩注意事项1：单个参数可以省略圆括号

---

//单个参数可以省略圆括号

const add = x => {

return x + 1

};

console.log(add(1)); //2

🚩注意事项2：无参数或多个参数不可以省略圆括号

---

//无参数或多个参数不可以省略圆括号

const add = () => {

return 1 + 1

}

console.log(add()); //2

🚩 注意事项3：单行函数体:可以同时省略{}和return

---

//单行函数体:可以同时省略{}和return

const add = (x, y) => x + y;

console.log(add(1, 2)); //3

//如果箭头函数返回单行对象 可以在{}外面加上()让浏览器不再认为那是函数体的花括号

const add = (x, y) => ({

value: x + y

})

console.log(add(1, 1));

📙 六、非箭头函数中的this指向问题

---

• 全局作用域中的this指向window

• 函数中的this，只有在函数被调用的时候，才有明确的指向

• this指向调用其所在函数的那个对象

• 没有具体调用对象，this指向undefined，在非严格模式下，转向window

📙 七、箭头函数中的this指向问题

---

• 箭头函数没有自己的this

• 箭头函数中的this是通过作用域链查找的

//箭头函数中的this指向问题

//箭头函数没有自己的this

const calc = {

add: () => {

console.log(this);

}

}

calc.add(); //window

//练习

const calc = {

add: function() {

const adder = () => {

console.log(this);

}

adder();

}

}

calc.add();//calc

//练习

const calc = {

add: function() {

const adder = () => {

console.log(this);

}

adder();

}

}

const addFn = calc.add;

addFn(); //undefined->window

🚩不适用箭头函数的场景

---

• 作为构造函数

• 需要this指向调用对象的时候

• 需要使用arguments的时候

📙 八、解构赋值

---

解构赋值：解析某一数据的结构，将我们想要的东西提取出来 赋值给变量

🚩数组解构赋值的原理

---

数组解构赋值的原理：模式（结构）匹配，索引值相同的完成赋值

//模式匹配 索引值完成赋值

const [a, b, c] = [1, 2, 3];

console.log(a, b, c);

//不取的直接用逗号跳过

const [a, [b, , ], e] = [1, [2, 4, 5], 3];

console.log(a, b, e); //1 2 3

🚩数组解构赋值的默认值

---

默认值的基本用法

---

🚩常见的类数组解构赋值

---

//arguments

function func() {

const [a, b] = arguments;

console.log(a, b); //1 2

}

func(1, 2)

//NodeList

const [p1, p2, p3] = document.querySelectorAll(‘p’);

console.log(p1, p2, p3);

//函数参数的结构赋值

const array = [1, 2];

const add = ([x, y]) => x + y;

console.log(add(array)); //3

//交换变量的值

let x = 1;

let y = 2;

[x, y] = [y, x];

console.log(x, y); //2 1

🚩对象的解构赋值

---

//模式匹配，属性名相同的完成赋值

const {

age,

username,

password

} = {

age: 18,

username: ‘Cai’,

password: 123

}

console.log(age, username, password); //18 ‘Cai’ 123

//取别名

const {

age: age,

username: uname

} = {

age: 19,

username: ‘Li’

}

console.log(age, uname); //19 ‘Li’

//对象的属性值严格等于undefined时对应的值才会生效

const {

username = ‘Zhang’, age = 0

} = {

username: ‘alex’

}

console.log(username, age); //alex 0

//如果将一个已经声明的变量用于对象的解构赋值

//整个赋值需要在圆括号中进行

let x = 2;

({

x

} = {

x: 1

})

console.log(x); //1

//函数参数的解构赋值

const Person = ({

age,

username

}) => console.log(username, age); //

Person({

age: 19,

username: ‘Cai’

})

//复杂的嵌套

const obj = {

x: 1,

y: [1, 2, 3],

z: {

a: 5,

b: 6

}

};

const {

y,

y: [, , ss],

z

} = obj;

console.log(ss, y, z);

🚩字符串的解构赋值

---

//字符串的解构赋值

//按照数组的形式

const [a, b, , , e] = ‘hello’;

console.log(a, b, e); // h e o

//字符串的解构赋值

//按照对象的形式

const {

0: a,

1: b

} = ‘hello’

console.log(a, b); // h e

📙 九、对象字面量的增强与函数参数的默认值

---

//对象字面量

//实例化构造函数生成对象

const person = new Object();

person.age = 18;

person.speak = function() {};

//对象字面量

const person = {

age: 18,

speak: function() {}

}

🚩 属性的简洁表示法:键名和变量或者常量名一样的时候，可以只写一个

//属性的简洁表示法:键名和变量或者常量名一样的时候，可以只写一个

const age = 19;

const person = {

// ‘age’: age

age

};

console.log(person);

🚩 方法的简洁表示法：方法可以省略冒号和function关键字

//方法的简洁表示法

//方法可以省略冒号和function关键字

const person = {

// speak: function() {}

speak() {

}

}

console.log(person);

🚩方括号语法

//方括号语法和点语法

const prop = ‘age’;

const person = {

};

console.log(person);

📙 函数参数的默认值

---

🚩调用函数的时候传参了，就用传递的参数如果没传参，就用默认值

const multiple = (x, y) => {

if (typeof y === ‘undefined’) {

y = 1;

}

return x * y;

}

console.log(multiple(2, 2)); //4

函数参数默认值的注意事项

//默认值的生效条件

// 不传递参数或者明确的传递undefined参数 只有这两种情况下 默认值才会生效

const multiply = (x, y = 1) => x * y

console.log(multiply(2, 0)); //0

console.log(multiply(2, null)); //0

console.log(multiply(2, undefined)); //2

//函数参数的默认值 最好从列表的右边开始

// const multiply = (x = 1, y) => x * y;

// console.log(multiply(undefined, 2)); //2

const multiply = (x, y = 1) => x * y;

console.log(multiply(2)); //2

📙 十、剩余参数

---

🚩剩余参数：剩余参数永远是个数组 即使没有值 也是空数组

// 认识剩余参数

//剩余参数永远是个数组 即使没有值 也是空数组

const add = (x, y, z, …args) => {

console.log(x, y, z, args);

}

add(1, 2, 3, 4, 5)

🚩剩余参数的注意事项

//箭头函数的剩余参数

// 箭头函数的参数部分即使只有一个剩余参数也不能省略圆括号

const add = (…args) => {

}

//使用剩余参数替代arguments获取实际参数

// const add = function() {

// console.log(argments);

// }

//

const add = (…args) => {

console.log(args); //[1, 2]

}

add(1, 2)

//剩余参数的位置

//剩余参数只能是最后一个参数 之后不能再有其他参数 否则会报错

const add = (x, y, …args) => {

console.log(x, y, args);

}

add(1, 2, 3, 4, 5, 6)

🚩剩余参数的应用

---

// 剩余参数与解构赋值结合使用

// const [a, …args] = [1, 2, 3, 4, 5];

// console.log(a, args);

const func = ([num, …args]) => {}

func([1, 2, 3, 4])

const {

x,

y,

…z

} = {

x: 1,

b: 2,

y: 3,

d: 4

}

console.log(x, y, z);

📙 十一、展开运算符

---

//数组展开运算符的基本用法

console.log(Math.min(…[2, 33, 44])); //2

//相当于

console.log(Math.min(3, 33, 22)); //3

🚩区分剩余参数和展开运算符

//区分剩余参数和展开运算符

//剩余参数 2,3,4->:[2,3,4]

//展开运算符: [2,3,4]->2,3,4

const add = (…args) => {

console.log(args);

}

add(1, 2, 3, 4) //[1,2,3,4]

const add = (…args) => {

// console.log(args);

console.log(…args);

}

add(1, 2, 3, 4) //1 2 3 4

console.log([

…[1, 2, 3], 4, 5

]); //[1, 2, 3, 4, 5]

📙 数组展开运算符的应用

---

📙 对象的展开

---

//对象的展开

const apple = {

color: ‘red’,

taste: ‘nice’

}

console.log({…apple

});

console.log({…apple

} === apple); //false

//合并对象

// 新对象拥有全部的属性 相同的属性 后者覆盖前者

const apple = {

color: ‘红色’,

shape: ‘球形’,

taste: ‘甜’

}

const pen = {

color: ‘黑色’,

shape: ‘长方形’,

use: ‘写字’

}

console.log({…apple,

…pen

});

// 对象中属性的展开

// 不对展开对象中的对象属性

const app = {

features: {

taste: ‘甜’

}

}

const pen = {

features: {

color: ‘黑色’,

shape: ‘圆柱形’

},

use: ‘写字’

}

console.log({…app,

…pen

})

📙 十二、Set和Map数据结构

---

//Set

//数组：数组是一系列有序的数据集合

//Set：是一系列无序，没有重复值的数据集合

const s = new Set();

s.add(1);

s.add(2);

//set中不能允许有重复的值

console.log(s);

//set没有下标去标识每一个值，所以set是无序的也不能像数组那样通过下标去访问set的成员

🚩 set实例的属性和方法

---

// set实例的属性和方法

//add方法添加成员

const s = new Set();

s.add(1).add(2).add(3);

console.log(s);

//has方法 判断是否有成员

console.log(s.has(1)); //true

console.log(s.has(100)); //false

//delete删除

s.delete(1);

//使用delete删除不存在的成员，什么都不会发生，也不会报错

s.delete(9);

console.log(s)

//clear方法 一键清除

// s.clear();

// console.log(s)

//forEach

s.forEach(function(value, key, set) {

//Set中value=key

console.log(value, key, set === s)

})

console.log(s)

//size属性

console.log(s.size) //2

🚩 Set构造函数的参数

---

1

2

3

🚩Set 的注意事项

---

什么时候用Set？

---

• 数组或字符串去重时

• 不需要 通过下标访问的时候 只需要遍历时

• 为了使用Set提供的方法和属性的时候(add、 delete、 clear、 has、 forEach 、size等)

🅰️ Set的应用

---

✅ 十三、Map

---

✅Map构造函数的参数

---

✅Map中的注意事项

---

//Map中NaN等于NaN

const s4 = new Map();

s4.set(NaN, 1).set(NaN, 2);

console.log(s4);

//什么时候使用Map

//如果只是需要key-value的结构，或者需要字符串以外的值做键

// 只有模拟现实世界的实体时，才使用对象

const person = {};

✅Set和Map总结

---

✅ 十四、遍历器和for …of

---

//Iterator的作用

//遍历器（迭代器）用来遍历的

//使用

const it = [1, 2]Symbol.iterator;

console.log(it.next()); //{value: 1, done: false}

console.log(it.next()); //{value: 1, done: false}

console.log(it.next()); //{value: undefined, done: true}

//it可遍历对象(可迭代器)

//Symbol.iterator:可遍历对象的生成方法

//什么是iterator？

//Symbol.iterator(可遍历对象生成的方法)->it(可遍历对象)->it.next()->…(直到done为true)

const it = [1, 2, 3]Symbol.iterator;

console.log(it.next());

console.log(it.next());

console.log(it.next());

console.log(it.next());

✅ for …of

---

const it = [1, 2, 3];

for (const item of it) {

console.log(item); // 1 2 3

}

什么是原生可遍历？

---

• 只要有Symbol.iterator方法 并且这个方法可以生成可遍历对象 就是可遍历的

• 只要可遍历，就可以使用for of循环来统一遍历

原生可遍历有哪些？

---

• 数组、字符串、Set、Map、arguments、NodeList

非原生可遍历有哪些？

---

• 一般的对象

✅ 十四、ES6新增的方法

---

🚩字符串中新增的方法

---

includes()判断字符串中是否包含某些字符

🚩padStart（）和padEnd()

---

padStart() 用于头部补全， padEnd() 用于尾部补全 。

参数（接收两个参数）：

第一个参数，当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。

第二个参数，用于补充的字符串，如果字符串长度过长，则会删除后面的多出的字符串，进行补全。

适用场景：

---

//在实际开发中的应用

//显示日期格式

//2020-10-10

//2020-1-2

console.log(‘10’.padStart(2, 0));//10

console.log(‘1’.padStart(2, 0));//01

🚩trimStart()、trimEnd()、trimLeft()、trimRight()、trim()

---

应用场景

---

🚩数组中新增的方法

---

find()和findIndex()函数详解

---

• find()函数用来查找目标元素(查找符合条件的第一个元素)，它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。回调函数有三个参数。value：当前的数组元素。index：当前索引值。arr：数组本身

//find(): 找到满足条件的一个立即返回

console.log([10, 20, 30, 50, 100].find((value, index, arr) => {

return value > 10; //20

}))

• findIndex()函数返回符合条件的值的位置（索引），找不到就返回-1。

//findIndex():找到满足条件的一个，立即返回索引

console.log([10, 20, 30, 50, 100].findIndex((value, index, arr) => {

return value > 10; //1

}))

应用场景

---

🚩对象的新增方法和属性

---

Object.assign(目标对象，源对象1,源对象2,……)用来合并对象，返回的是目标对象

• 同名属性的替换：后面的属性会替换掉前面的属性

• 基本数据类型作为源对象 ，与对象的展开相似 先转换成对象再合并

const apple1 = {

color: [‘红色’, ‘蓝色’],

shape: ‘圆形’,

taste: ‘甜’

}

const pen1 = {

color: [‘黑色’, ‘金色’],

shape: ‘圆柱形’,

use: ‘写字’

}

console.log(Object.assign({}, apple1, pen1))

应用场景：合并默认参数和默认参数

---

//合并默认参数和默认参数

const logUser = userOptions => {

const Default = {

username: ‘Zhangsan’,

age: 0,

sex: ‘male’

}

const options = Object.assign({},

Default, userOptions);

console.log(options);

}

//logUser();

logUser({

username: ‘Cai’

})

🚩 Object.keys（）、Object.values（）、Object.entries（）

---

• Object.keys（）：获取对象中的键

• Object.values（）：获取对象中的值

• Object.entries（）：获取对象的键值

🚩 对象的Object.keys()、Object.values()、Object.entries()与数组的keys()、values()、entries()的方法的区别

---

• 数组的keys()、values()、entries()的方法是实例方法，返回的都是Iterator

• 对象的Object.keys()、Object.values()、Object.entries()等方法是构造方法 返回的是数组

✅ 十五、Promise

---

🚩Promise的基本用法

---

const p = new Promise((resolve, reject) => {

//Promise有三种状态，一是开始pending(未完成)

//执行 resolve变成fulfilled( resolved)已成功

//执行reject变成reject 已失败

//Promise的状态一旦变化了 就不会再改变了

//pending=>fulfilled( resolved)已成功

resolve({

username: ‘li’

});

//pending=>rejected已失败

// reject();

})

//then方法

p.then((data) => {

console.log(‘success’, data);

}, () => {

console.log(‘error’);

})

console.log§;

🚩then（）方法

---

✅ 十五、Promise

---

🚩Promise的基本用法

---

const p = new Promise((resolve, reject) => {

//Promise有三种状态，一是开始pending(未完成)

//执行 resolve变成fulfilled( resolved)已成功

//执行reject变成reject 已失败

//Promise的状态一旦变化了 就不会再改变了

//pending=>fulfilled( resolved)已成功

resolve({

username: ‘li’

});

//pending=>rejected已失败

// reject();

})

//then方法

p.then((data) => {

console.log(‘success’, data);

}, () => {

console.log(‘error’);

})

console.log§;

🚩then（）方法

---