二、ES6新语法

let关键字

1. 变量提升 console.log(age); let age = 38;

image-20200701114547150

1. 作用域 for (var i = 0; i < 10; i++) {} console.log(i); for (let n = 0; i < 10; i++) {} console.log(n);

image-20200701114808765

图中可对比看出，如果用var声明，在循环外部还是可以使用i变量；但用let声明变量，循环外部不可以使用n变量

1. 不可重复声明 let num2 = 10; let num2 = 20; console.log("num2: ", num2);

image-20200701115104294

1. 重新赋值 let num2 = 10; num2 = 20; console.log("num2: ", num2);

image-20200701115202044

const关键字

使用场景

1. 一些不会变化的值，比如圆周率PI
2. 大事件项目中，保存基地址
3. 没有变量提升

image-20200701115648469

1. 有块级作用域

image-20200701115756085

1. 不能重复声明

image-20200701115830566

1. 不能重新赋值（声明必须要初始化）

image-20200701115846798

解构赋值

对象解构

取对象中属性的值，赋值给变量。

例如对于如下对象来说，在ES5与ES6中将对象赋值于变量的方式

let obj = {
  name: "波波",
  age: 38,
  gender: "男",
  score: 88,
};

ES5中的写法

let name1 = obj.name;
let age1 = obj.age;
let gender1 = obj.gender;
let score1 = obj.score;
console.log(name1, age1, gender1, score1);

ES6中的写法

1. 定义变量名 let { name: name2, age: age2, gender: gender2, score: score2 } = obj; console.log(name2, age2, gender2, score2);
2. 变量名可与属性名一致 let { name: name, age: age, gender: gender, score: score } = obj; console.log(name, age, gender, score);
3. 当变量名与属性名一致时，可以省略变量名 let { name, age, gender, score } = obj; console.log(name, age, gender, score);

以上代码的输出结果都为下图所示

image-20200701153427629

当简写时，对象中没有的属性会赋值为undefined

let obj = {
  name: "波波",
  age: 38,
  gender: "男",
  score: 88,
};
let { name, age, gender, fenshu } = obj;
console.log(name, age, gender, fenshu);

image-20200701153747123

简写与全写可以一起用

let { name, age, gender, score: fenshu } = obj;
console.log(name, age, gender, fenshu);

image-20200701153937328

设置默认值。当对象中没有此属性时会赋值为默认值而不是undefined。如果对象中存在这个属性，那么将赋值为对象中的属性，而不是默认值。

let { name, age, gender, score: fenshu, height = 180 } = obj;
console.log(name, age, gender, fenshu, height);

image-20200701154223592

数组解构

把数组中每一个元素的值依次的赋值给变量。声明如下数组：

// 声明一个数组
let arr = [10, 20, 30, 40];

ES5中的写法

let num1 = arr[0];
let num2 = arr[1];
let num3 = arr[2];
let num4 = arr[3];
console.log(num1, num2, num3, num4);

ES6中的写法

1. 基础写法–一一对应 let [num1, num2, num3, num4] = arr; console.log(num1, num2, num3, num4);

image-20200701155309108

1. 默认值与没有值时与对象解构一致。 let [num1, num2, num3, num4, num5] = arr; console.log(num1, num2, num3, num4, num5); // num5为undefinedlet [num1, num2, num3, num4, num5=5] = arr; console.log(num1, num2, num3, num4, num5); // num5为5

解构赋值结合函数声明

ES5中的写法

function test1(obj) {
  console.log(obj.name, obj.age, obj.gender);
}
test1({
  name: "波波",
  age: 38,
  gender: "男",
});

ES6中的写法

function test2({ name, age, gender, height = 180 }) {
  console.log(name, age, gender, height);
}
test2({
  name: "波波",
  age: 38,
  gender: "男",
});
test2({
  name: "波波",
  age: 38,
  gender: "男",
  height: 160,
});

image-20200701160704150

箭头函数

简单来说，箭头函数就是匿名函数的一个简写。

// 1. 普通的匿名函数
let fn = function (name) {
  console.log("my name is ", name);
};
fn("波波");

// 2. 箭头函数
let fn1 = (name) => console.log("my name is ", name);
fn1("波波");

image-20200701161344962

简写规则：

1. function改成=>，=>可以读成goes to
2. 如果只有一个形参，那就可以省略形参小括号
3. 如果不是一个形参（0个或多个），那就不能省略形参小括号
4. 如果函数体只有一句话，那就可以省略函数体的大括号
5. 如果函数体只有一句话，并且这一句话是return返回值，那return也要省略 let fn1 = function (name) { return name + "你好吗?"; }; let fn1 = (name) => name + "你好吗?";
6. 如果函数体不是一句话，那就不能省略这个大括号

let fn2 = function (num1, num2) {
  console.log(num1 + num2);
  return num1 + num2 + 30;
};

let fn2 = (num1, num2) => {
  console.log(num1 + num2);
  return num1 + num2 + 30;
};

1. 无参数，一句话 let fn1 = function () { console.log("你好吗"); }; let f1 = () => console.log("你好吗");
2. 一个参数，一句话 let fn2 = function (name) { console.log(name + "你好吗"); }; let fn2 = (name) => console.log(name + "你好吗");
3. 两个参数，一句话 let fn3 = function (name, age) { console.log(name + "你好吗,你的年龄是" + age); }; let fn3 = (name, age) => console.log(name + "你好吗,你的年龄是" + age);
4. 一个参数，一个return let fn4 = function (age) { return age + 10; }; let fn4 = (age) => age + 10;
5. 两个参数，多句 let fn5 = function (name, age) { console.log(name + "你好吗"); return age + 10; }; let fn5 = (name, age) => { console.log(name + "你好吗"); return age + 10; };

对象成员简写

let name = "千里";
let age = 18;
let gender = "man";
let score = 10;

// es6
let obj = {
  name,
  age,
  gender,
  score,
  sayHi() {
    console.log("哈哈");
  },
};
console.log(obj);
obj.sayHi();

image-20200701164157212

在这种写法中，如果传入一个没有赋值的变量，那么就会报错。例如：

let name = "千里";
let age = 18;
let gender = "man";
let score = 10;

// es6
let obj = {
    name,
    age,
    gender,
    score,
    // fenshu, // 会发生报错，因为外部没有此变量，可以修改为下面的写法
    fenshu:score,
    sayHi() {
        console.log("哈哈");
    },
};
console.log(obj);
obj.sayHi();

扩展（展开）运算符

对象展开

// 声明一个对象
let chinese = {
    skin: "yellow",
    hair: "black",
    sayHi() {
        console.log("Are you eat?");
    },
};

let CXK = {
    slill: "jump sing rap and play basketball",
    song: "啊哈哈哈",
};
let linge = {
    // skin: "yellow",
    // hair: "black",
    // sayHi() {
    //   console.log("Are you eat?");
    // },
    // slill: "jump sing rap and play basketball",
    // song: "啊哈哈哈",
    // 展开语法 等同于上方写法
    ...chinese,
    ...CXK,
};
console.log(linge);

image-20200701165348837

当新增属性时，直接添加即可。如果重新定义已经存在的，那么覆盖原来的。

let linge = {
  ...chinese,
  ...CXK,
  gender: "Man",
  hair: "白发苍苍",
};

image-20200701165728791

数组展开

与对象展开类似。

let arr1 = [10, 20, 30];
let arr2 = [40, 50, 60];
let arr3 = [...arr1, ...arr2, 70];
console.log(arr3);

image-20200701170324837

使用场景：

1. 数组的拼接
2. 求最大/小值 let arr1 = [10, 23, 54, 446, 56, 2]; let max = Math.max(...arr1); console.log(max);

数据类型set

作用和数组类型，和数组不同的是set不能存放重复的元素。

1. 基本使用 let set1 = new Set([10, 20, 30, 40, 10, 20, 30, 40, 50]); console.log(set1);

image-20200701170935727

1. 数组去重 let arr = [10, 20, 30, 10, 20, 30, 20, 10, 33, 200]; let set = new Set(arr); let arrNew = [...set]; console.log(arrNew);

image-20200701171115524

也可以改写为如下： let arr = [10, 20, 30, 10, 20, 30, 20, 10, 33, 200]; let arrNew = [...new Set(arr)]; console.log(arrNew);

模板字符串

模板字符串会保留原样字符串格式，以及可以占位。其语法为反引号``

let author = "波波";
let str1 = `
静夜思
    ${author}
哈哈哈
`;
console.log(str1);

image-20200701171652048

let name = "xiaokang";
let age = 12;
function test() {
  return "test";
}
console.log(`my name is ${name} and age is ${age}. ${test()}`);

image-20200701172133560

补充数组的方法

1. forEach 无返回值 let arr = [10, 20, 30, 40]; arr.forEach(function (item, index) { // item 遍历出的每一项 // index 遍历出来的每一项对应的索引 console.log(item, index); });
2. map 有返回值。 let arr = [10, 20, 30, 40]; let arrNew = arr.map(function (item, index) { // item 遍历出的每一项 // index 遍历出来的每一项对应的索引 // console.log(item, index); return item * item; }); console.log(arrNew);
3. filter let arr = [10, 20, 11, 21, 30, 31, 23, 43]; let arrNew = arr.filter((item, index) => { console.log(item, index); // 如果条件成立,返回当前项 return item % 2 == 0; }); console.log(arrNew); //[ 10, 20, 30 ]