前端学习第十五天——初识ES6

前端学习第十五天——初识ES6

初识ES6

ES6，全称ECMAScript6.0。是JavaScript的一个版本标准。1996年11月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是1.0版。

let和const

let用来声明变量。
const用来声明常量。常量一旦初始化，就不能在重新赋值。

let、const与var的区别

1. 重复声明
   重复声明：已经存在的变量或常量又重新声明一边
   var允许重复声明变量
   let、const不允许
2. 变量提升
   var 会提升变量的声明到当前作用域的顶部
   let、const不存在变量提升
3. 暂时性死区
   只要作用域内存在let、const，它们声明的变量或常量会自动“绑定”这个区域，不再收到外部作用域的影响
4. window对象的属性和方法
   在全局作用域中,var声明的变量，通过function声明的函数，会自动变成window对象的属性或方法。
   let、const不会
5. 块级作用域
   var 没有块级作用域
   let、const有块级作用域
   作用域链:内层作用域->外层作用域->全局作用域
   {}就是一个块级作用域，块级作用域可以任意嵌套

模板字符串

使用``包裹起来的字符串
如：`模板字符串`

    const person = {
        username: '前端学习',
        age: 18,
      };

    const info = `我的名字是：${person.username}, 今年${person.age}岁了`;
     

模板字符串和其他东西一起使用的时候，使用模板字符串，方便注入

注意事项

1. 输出多行字符串
   一般字符串可以使用转义字符\,进行换行

    const info = '第1行\n第2行';

模板字符串也可以使用转义字符\,进行换行，也可以直接换行。模板字符串中，所有的空格、换行或缩进都会保留在输出之中。

    const info = `第1行
    第2行`;

2. 输出`和\等特殊字符
   在特殊字符前，使用\转义字符
3. 模板字符串的注入
   使用${}进行注入，可以注入普通的变量，也可以注入对象的属性，函数等只要最后可以得到值的都可以注入到模板字符串。

箭头函数

箭头函数相当于匿名函数，并且简化了函数定义

    const add = (x,y)=>{
        return x+y;
    }

箭头函数由const/let 函数名 = 参数 => 函数体构成

注意事项

1. 单个参数
   单个参数可以省略圆括号

    const add = x => {
      return x + 1;
    };
    console.log(add(1));

2. 单行函数体
   单行函数体可以同时省略 {} 和 return

    const add = (x, y) => x + y;

3. 单行对象
   如果箭头函数返回单行对象，可以在 {} 外面加上()，让浏览器不再认为那是函数体的花括号

    const add = (x, y) => ({
        value: x + y
    });

this指向

全局作用域中的this指向window全局对象
只有在函数调用的时候this指向才确定，不调用的时候不知道指向谁。
this的指向和函数在哪调用没关系，只和谁在调用有关

• 箭头函数中没有自己的this

不适用箭头函数的场景

1. 构造函数
2. 需要this滞箱费对象
3. 需要使用arguments的时候

解构赋值

数组解构赋值

组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

    let a = 1;
    let b = 2;
    let c = 3;
    ES6允许写成下面这样。

    let [a, b, c] = [1, 2, 3];

1. 数组的结构赋值的原理

    // 1.模式（结构）匹配
    [] = [1, 2, 3];
    // 2.索引值相同的完成赋值
    const [a, b, c] = [1, 2,3];
    // 不取的，可以直接用逗号跳过
    const [a, [, , b], c] = [1,[2, 4, 5], 3];

数组的结构赋值的默认值
如果取不到值，默认值是undefined

    // a = undefined  b = undefined 
    const [a, b] = [];
    
    // a的默认值1 b的默认值2
    const [a = 1, b = 2] = [];
    console.log(a, b);

2. 默认值的生效条件
   只有当一个数组成员严格等于(===)undefined时，对应的默认值才会生效
3. 默认值表达式
   如果默认值是表达式，默认值表达式是惰性求值的。

    const func = () => {
        console.log('我被执行了');
        return 2;
    };
    // 函数不执行，用不到默认值
    const [x = func()] = [1];
    // 函数执行
    const [x = func()] = [];

对象解构赋值

    // 1.模式（结构）匹配
    // {}={}

    // 2.属性名相同的完成赋值
    const { age, username } = { username: '前端学习', age: 18 };
    const { age: age, username: username } = { username: '前端学习', age: 18 };

    // 取别名
    const { age: age, username:uname } = { username:'前端学习', age: 18 };

1. 默认值的生效条件
   对象的属性值严格等于 undefined 时，对应的默认值才会生效
2. 默认值表达式
   如果默认值是表达式，默认值表达式是惰性求值的
3. 将一个已经声明的变量用于解构赋值
   如果将一个已经声明的变量用于对象的解构赋值，整个赋值需在圆括号中进行

    let x = 2;
    ({ x } = { x: 1 });

4. 可以取到继承的属性

其他数据类型的结构赋值

1. 字符串的解构赋值

字符串既可以按数组形式来解构赋值，也可以按对象形式来解构赋值

    ''='hello' ×
    // 数组形式的解构赋值
    const [a, b, , , c] = 'hello';
    // 对象形式的解构赋值
    const { 0: a, 1: b, length } = 'hello';
    console.log(a, b, length);
    console.log('hello'.length);

2. 数值和布尔值的解构赋值
   先将等号右边的值转为对象

    console.log(new Number(123));
    const { a = 1, toString } = 123;
    // console.log(a, toString);
    const { b = 2, toString } = true;
    // console.log(b, toString);

3. undefined 和 null 的解构赋值
   由于 undefined 和 null 无法转为对象，所以对它们进行解构赋值，都会报错

    const { toString } = undefined;
    const { toString } = null;

对象字面量的增强与函数参数的默认值

属性和方法得到简洁表示法

属性的简洁表示法
键名和变量或常量名一样的时候，可以只写一个

    const age = 18;
    const person = {
      // age: age
      age
    };
    console.log(person);

方法的简洁表示法
方法可以省略冒号和 function 关键字

    const person = {
      // speak: function () {}
      speak() {}
    };

方括号语法

方括号语法的用法
方括号语法可以写在对象字面量中

方括号中可以放什么
[值或通过计算可以得到值的（表达式）]

方括号语法和点语法的区别
点语法是方括号语法的特殊形式

    const person = {};
    person.age
    // 等价于 
    person['age']

属性名由数字、字母、下划线以及 $ 构成，并且数字还不能打头的时候可以使用点语法。
合法标识符可以用来作为变量或常量名

当你的属性或方法名是合法标识符时，可以使用点语法，其他情况下请使用方括号语法

函数参数的默认值

1. 认识函数参数的默认值
   调用函数的时候传参了，就用传递的参数；如果没传参，就用默认值
2. 函数参数默认值的基本用法

    // 以前的写法
    const multiply = (x, y) => {
        if (typeof y === 'undefined') {
        y = 1;
        }

        return x * y;
    };
    // 新的写法
    const multiply = (x, y = 1) => x * y;
    console.log(multiply(2));

注意事项

1. 默认值的生效条件
   不传参数，或者明确的传递 undefined 作为参数，只有这两种情况下，默认值才会生效

    const multiply = (x, y = 1) => x * y;
    // 0
    console.log(multiply(2, 0));
    // 0
    console.log(multiply(2, null));
    // 2
    console.log(multiply(2, undefined));
    // 2
    console.log(multiply(2));

2. 默认值表达式
   如果默认值是表达式，默认值表达式是惰性求值的
3. 设置默认值的小技巧
   函数参数的默认值，最好从参数列表的右边开始设置