3.png
一、环境
webpack3.x
二、let、const
1、let
概念：ES6之前，只有两种类型的作用域：全局作用域和函数作用域，但是某些场景需要变量在某个区域使用，所以有了let出现。
不支持let的：IE11或更早的版本
var和let的区别：
（1）块作用域
通过 var 关键词声明的变量没有块作用域。通过let 的有。
（2）重新声明
在相同作用域下let 不可以重新声明，但是处于块内块外let 可以使用同一个变量进行声明，var可以，但是会影响
（3）Windows对象
HTML中，通过 var 关键词定义的全局变量属于 window 对象，
但是通过let 的不是
2、const
不支持const的：IE10或更早版本
注意事项：
（1）JavaScript const必须在声明的时候就赋值，且不能重新赋值；
（2）const常量不允许重新赋值，但是常量对象、常量数组可以更改其属性
（3）不许常量数组更改的话，可以用freeze
eg：
const arr = Object.freeze([‘apple’，‘banana’]); //这样设置不能修改
arr.push（‘orange’） //这是错的，不能修改,因为使用了freeze
注意：不允许将已有的 var 或 let 变量重新声明或重新赋值给 const
三、解构赋值
概念：按照一定的模式，从数组和对象提取值，对变量进行赋值（这个功能非常有用，特别是在做数据交互，使用ajax的时候）
举例：
let [a，b，c] = [12，5，6] //三个一一对应
let [a，b，c] = [12，[5，6]] //a 是5，b是 [5,6]，c是undefined
//对象解构：
//第一种
let json = {
name: 'strive',
age: 18,
job: '前端'
}; //先写一个对象
let {
name,
age,
job
} = json; //让这几个变量指向对象
console.log(name, age, job); //这时可以输出它
//第二种
let {
name,
age = 'jiashe',
job:a
} = { //这里的jiashe是默认值，a是别名
name: 'strive',
age: 18,
job: '前端'
}
console.log(name, age, a);
//交换两数位置
let a = 5;
let b = 4;
console.log(a,b);
[a,b] = [b,a];
console.log(a,b);
注意：解构赋值中，：后面是别名，=后面是默认值；
解构的时候可以给默认值；
函数也可以给默认值；
function show({a='默认1',b='默认'}){
console.log(a,b);
}
show({});
四、字符串模板
优点：可以随意地换行
字符串拼接：let str = 名字是 ${name}，年龄是 ${age} (注意是反单引号)
字符串查找：str.includes(要找的东西) 返回true/false
字符串是否以谁开头：str.startsWith(检测东西)
字符串以谁结尾：str.endsWith(检测东西)
重复字符串：str.repeat(2)
填充字符串：str.padStart(填充完后整个字符串长度，填充东西) 往前填充
str.padEnd（填充完后整个字符串长度，填充东西）往后填充但是这样做需要数个数，这时直接用.length计算出填充长度和原长度，相加就好
五、函数变化
1、函数默认参数
在形参那加 '=默认值' 就可以了
function show({x=0,y=0}={}){
console.log(x,y);
}
show();
2、函数默认参数已经定义了，不能再使用let、const声明
function show(a = 18) {
let a = 10; //错误
console.log(a);
}
show(); //这是错误的
3、扩展运算符：reset运算符 （作用：扩展、剩余）
展开数组：
... :
[1,2,3,4] -> ...[1,2,3,4] ->1,2,3,4
... :
1,2,3,4 -> ...1,2,3,4 -> [1,2,3,4] （传参数列表那，可以传成数组）
注意：剩余参数：必须放到参数末尾
//eg1:
let arr = ['apple', 'banana'];
console.log(arr);
console.log(...arr);
//eg2：
//以前的：
function show() {
let a = Array.prototype.slice.call(arguments);
return a.sort();
}
console.log(show(1, 9, 8, 3, 2));
//现在的：
function show(...a) {
return a.sort();
}
console.log(show(1, 9, 8, 3, 2));
//注意：要使数组按照大小进行排序，需要使用一个排序函数，即Array.sort(排序函数)
//改进后的：
function sort1(a, b) {
return a - b;
}
function show(...a) {
return a.sort(sort1);
}
console.log(show(1, 10, 8, 3, 2));
//eg3：
function show(a, b, c) {
console.log(a, b, c);
}
show(...[1, 9, 8]);
//eg4：
function show(a,b,...c){
console.log(a,b,c);
}
show(1,2,3,4,5,6);
//eg5：将数据进行映射，不改变原数据，常用于接收服务器数据但是不能改变原数据的情况
//用引用会改变原数据
let arr = [1, 2, 3, 4, 5];
let arr2 = [...arr];
let arr3 = Array.from(arr); //另一种方法
console.log(arr, arr2,arr3);
4、箭头函数
形式： => 箭头左边是参数，右边是返回值
完整箭头函数格式：
（）=>{
语句
return
}；
注意事项：
（1）this问题，定义函数所在的对象，指向的是定义时函数所在对象，而不是运行所在的对象
let json = {
id: 1,
show: function () {
setTimeout(() => {
alert(this.id);
}, 2000);
}
};
json.show();
输出：弹出1
（2）箭头函数里面没有arguments，用arguments会报错，用'...'（剩余运算符）
let show = (...args) => {
console.log(args);
}
show(1, 2, 3, 4, 5);
（3）箭头函数不能当构造函数，下面是错误的
let show = ()=>{
this.name = 'abc';
}
let s = show();
alert(s.name);
//上面这个会报错
//Uncaught TypeError: Cannot read property 'name' of undefined
（4）函数参数最后逗号可以用了
// ES2017 函数参数最后逗号可以有了
function show(a,b,c,d,){
console.log(a,b,c,d);
}
show(1,2,3,4,);
网友评论