JS----ES6
ES6
箭头函数
箭头函数和普通函数的区别
- 外形不同
箭头函数使用 => 定义。
// 普通函数
function demo(){
...
}
// 箭头函数
let demo = () => {
...
}
- 箭头函数都是匿名函数
普通函数可以有匿名函数，也可以有具名函数；箭头函数只有匿名函数。
// 具名函数
function demo(){
...
}
// 匿名函数
let func = function(){
...
}
// 箭头函数
let demo = () => {
...
}
- 箭头函数不可以用于构造函数，不能使用new
- 箭头函数中的this指向不同
①. 箭头函数本身不创建this
在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。
而箭头函数本身没有this，但它在声明时可以捕获其所在上下文的this供自己使用。
let success = "捕获成功"
let func = () => {
console.log(this.success)
}
func()
// 打印：捕获成功
箭头函数在全局作用域声明，所以它捕获全局作用域中的this，this指向window对象
var name = "message1";
function wrap(){
this.name="message2";
let func=() => {
console.log(this.name);
}
func();
}
let en=new wrap();
// 打印：message2
②. 结合call()、apply()方法使用
箭头函数结合call()、apply()方法调用一个函数时，只传入一个参数对this没有影响。
let obj2 = {
a: 10,
b: function(n) {
let f = (n) => n + this.a;
return f(n);
},
c: function(n) {
let f = (n) => n + this.a;
let m = {
a: 20
};
return f.call(m,n);
}
};
console.log(obj2.b(1)); // 11
console.log(obj2.c(1)); // 11
5. 箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()。
let、const、var的区别
- 块级作用域：块级作用域用{}包括，let和const具有块级作用域，var不具有。块级作用域解决了ES5的存在的两个问题：
- 内层变量可能会覆盖外层变量
- 用来计数的循环变量泄露为全局变量
- 变量提升：变量提升就是把变量的声明提升到作用域的最上面去，而不会把赋值也提升上来。
- var声明的变量为全局变量，并会将该变量添加为全局对象的属性。let和const不会
- 初始值设置：var和let可以不设置初始值，const必须设置初始值
- let创建的变量可以修改指针指向（可重新赋值）
const对象可以修改吗？
const保证的并不是值不变，而是const变量指向的内存地址不变，对于基本数据类型，其值就永远保存在变量指向的那个内存地址，因此等同于常量。但对于引用类型的数据（对象和数组），变量指向数据的内存地址，const只能保证这个指针是固定不变的，至于它指向的数据结构是不是可变的，就完全不能控制了。
为什么箭头函数不能作为构造函数
构造函数需要this这个对象，用于接收参来的参数，以及在构造函数的最后将这个this返回。而箭头函数没有this，所以不能作为构造函数。
如果new一个箭头函数会怎么样
因为箭头函数相对于普通函数并没有自己的this指向，而构造函数需要由this，所以箭头函数不能new。
new操作符实现的步骤如下：
- 创建一个对象
- 将构造函数的作用域赋值给新对象（也就是将新对象的__proto__属性指向构造函数的prototype属性）
- 构造函数中的this指向新对象（也就是为这个新对象添加属性和方法）
- 返回新的对象
扩展运算符（…）
扩展运算符对对象实例的拷贝属于浅拷贝
数组运算符可以将数组用逗号分割为一个参数序列，且每次只能打开一层数组。
console.log(...[1, 2, 3]); // 1 2 3
console.log(...[1, [2, 3, 4], 5]); // 1 [ 2, 3, 4 ] 5
console.log(...[1, ...[2, 3, 4], 5]); // 1 2 3 4 5
function add(x, y) {
return x + y;
}
const numbers = [1, 2];
add(...numbers) // 3
// 复制数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1];
对对象与数组的结构的理解
数组的结构
在解构数组时，以元素的位置为匹配条件来提取想要的数据：
const [a, b, c] = [1, 2, 3]
还可以使用空占位的方式，实现对数组中某几个元素的精准提取：
const [a, , c] = [1, 2, 3]
// a: 1, c: 3
对象的解构
const stu = {
name: 'Bob',
age: 24
}
const { name, age } = stu
提取高度嵌套的对象里的指定属性
const school = {
classes: {
stu: {
name: 'Bob',
age: 24,
}
}
}
可以在解构出来的变量名右侧，通过冒号+{目标属性名}这种形式，进一步解构它，一直解构到拿到目标数据为止。
const { classes: { stu: { name } } } = school
console.log(name); // Bob
