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

📙 二、const关键字

---

const 关键字用来声明 常量 ，const 声明有以下特点：

声明必须赋初始值

标识符一般为大写（习惯）

不允许重复声明

值不允许修改

有块级作用域

📙const关键字代码说明

---

📙 三、模板字符串

---

模板字符串（template string）是增强版的字符串，用反引号（`）标识

模板字符串特点：

• 字符串中可以出现换行符；

• 可以使用 ${xxx} 形式引用变量

• 对于模板字符串 所有的空格 换行 缩进都会被保留在输出之中 怎么写就怎么输出

一般字符串：“Cai” ‘Lily’

模板字符串：Cai

const username1 = “Cai”;

const username2 = Cai;

console.log(username1, username2); //Cai Cai

console.log(username1 === username2) //true

//输出`和\等特殊字符

// const info = ```;

// console.log(info); //`

// const info = \\;

// console.log(info); //\

只要最后可以得出一个值的就可以通过${}注入到模板字符串中

看下面代码解说

const username = ‘Cai’;

const person = {

age: 19,

sex: ‘Female’

}

const getSex = function(sex) {

return sex === ‘Female’ ? ‘Female’ : ‘Male’

}

//只要最终可以得出一个值的就可以通过${}注入到模板字符串中

const result = ${username},${person.age-1},${getSex(person.sex)};

console.log(result); //Cai,18,Female

📙 四、模板字符串案例练习

---

📙 五、箭头函数

---

ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义

箭头函数的注意点：

---

• 如果形参只有一个，则小括号可以省略

• 函数体如果只有一条语句，则花括号可以省略，并省略return，函数的返回值为该条语句的执行结果

• 箭头函数 this 指向声明时所在作用域下 this 的值

• 箭头函数不能作为构造函数实例化

• 不能使用 arguments

箭头函数的注意事项

---

🚩注意事项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()判断字符串中是否包含某些字符