前端 - ES6的核心语法
let和const
let用来声明变量，它有一下特点：
- 不能重复声明。
- 禁止变量提升。
- 是一个块级作用域。
const用来声明常量，const声明的常量无法被修改，除此之外，它也有let的特点：
- 不能重复声明。
- 禁止变量提升。
- 是一个块级作用域。
模板字符串
ES6中使用反引号来格式化字符串，代替老旧字符串拼接。
<body>
<div id="p1">
</div>
<script>
let id = 'a1';
let name = 'zhangkai';
let html = `<ul>
<li id="${id}">${name}</li>
</ul>`
let div = document.getElementById("p1");
div.innerHTML = html;
</script>
</body>
将需要格式化进去的变量使用 ${} 完成。
函数
扩展运算符
<script>
// es5 求数组的最大值使用apply
const arr = [10, 20, 5, 30]
console.log(Math.max.apply(null, arr)); // 30
// es6扩展运算符更方便
console.log(Math.max(...arr));
</script>
箭头函数
箭头函数，就是使用 => 来定义函数。
<script>
// 使用function定义函数
function(){}
// 使用箭头函数定义函数
()=>{}
</script>
来看示例：
<script>
// 普通方式
let add1 = function (a, b) {
return a + b;
};
console.log(add1(10, 20));
// 箭头函数方式
let add2 = (a, b) => {
return a + b;
};
console.log(add2(10, 20));
// 箭头函数的其它写法，如果只有一个参数
let add3 = a => {
return a + 10;
};
console.log(add3(10));
// 简便写法
// let add4 = a => a + 10;
let add4 = a => (a + 10);
console.log(add4(10));
// 如果有多个参数
// let add5 = (a, b) => (a + b); // 形参位置必须使用括号
let add5 = (a, b) => a + b; // 返回值也可以不加括号
console.log(add5(10, 20));
// 如果没有参数
// let fn = () => "hello zhangkai";
let fn1 = () => "hello zhangkai" + 123;
console.log(fn1());
// 返回对象的写法
let fn2 = id => {
return {
id: id,
name: "zhangkai"
}
};
console.log(fn2(8));
// 上面示例的简便写法
// let fn3 = id => ({
// id: id,
// name: "zhangkai"
// });
let fn3 = id => ({
id: id,
name: "zhangkai"
});
console.log(fn3(8));
// 箭头函数在匿名函数中的应用
let fn4 = (function () {
return function () {
console.log('hello zhangkai');
}
})();
fn4();
let fn5 = (() => {
return () => {
console.log('hello zhangkai');
}
})();
fn5();
</script>
箭头函数中的this指向问题：
<script>
// 箭头函数中没有 this 绑定
// 先来看es5中的this指向取决于调用该函数的上下文对象
// let f1 = {
// id:123,
// init: function () {
// document.addEventListener('click', function (event) {
// // 当你点击页面时，会报错：this.foo is not a function
// console.log(this); // document对象
// this.foo(event.type)
// })
// },
// foo:function(type){
// console.log(`事件类型:${type},当前id:${this.id}`);
// }
// }
// f1.init();
// 如何解决，先使用es5的bind方法改变函数内部对象
// let f1 = {
// id:123,
// init: function () {
// document.addEventListener('click', function (event) {
// console.log(this); // f1对象
// this.foo(event.type)
// }.bind(this), false) // 使用bind将外部的f1的this对象传递给内部的函数使用
// },
// foo:function(type){
// console.log(`事件类型:${type},当前id:${this.id}`);
// }
// }
// f1.init();
// 来看es6的解决办法
let f1 = {
id: 123,
init: function () {
// 箭头函数没有this指向，箭头函数内部this值只能通过查找作用域链来确定
// 所以，可以认为，一旦使用箭头函数，当前函数就不存在作用域
document.addEventListener('click', (event) => {
console.log(this); // f1对象
this.foo(event.type)
})
},
foo: function (type) {
console.log(`事件类型:${type},当前id:${this.id}`);
}
}
f1.init();
</script>
使用箭头的注意事项：
<script>
// 1. 当使用箭头函数时，函数内部没有 arguments 参数了
let f1 = (a, b)=>{
console.log(this); // window 对象
console.log(arguments); // arguments is not defined
return a + b;
};
// f1(1, 2);
// 2. 箭头函数相当于是个语法糖，一个表达式，它并不是一个对象，所以，箭头函数不能使用 new 关键字来实例化对象
let f2 = ()=>{};
// let f3 = new f2(); // f2 is not a constructor
let f4 = function () {};
let f5 = new f4(); // 而function声明的函数却可以
</script>
解构赋值
解构赋值是对赋值运算符的一种扩展，通常操作数组和对象，特点是使代码更加的简洁易读。
<script>
let node = {
name: "zhangkai",
age: 18
}
// es5取值
// let name = node.name;
// let age = node.age;
// console.log(name, age);
// es6使用解构取值
let {
name,
age
} = node;
console.log(name, age);
</script>
that's all
