ES6基础

ES6基础

ES 与 JavaScript 的关系

JavaScript(浏览器端) = ECMAScript(语法+API) + DOM + BOM

let和const

let和var用于声明变量

const用于声明常量，一旦使用const声明，就必须立即初始化，不能留到以后赋值

let、var和const的区别

1. 重复声明

   var允许重复声明，let和const不允许重复声明

2. 变量提升

   var会提升变量的声明到当前作用域的顶部，let和const不存在变量提升

3. 暂时性死区

   什么是暂时性死区，只要作用域内存在let、const，它们所声明的变量或常量就自动“绑定”这个区域，不在受外部作用域影响
   let、const存在暂时性死区，var不存在

4. window对象的属性和方法

   在全局作用域中，var声明的变量，通过function声明的函数，会自动变成window对象的属性或方法
   let、const不会

5. 块级作用域

   var是没有块级作用域的
   let和const有块级作用域

作用域： 块级作用域 => 函数作用域 => 全局作用域

涉及的块级作用域

• {}
• for(){}
• while(){}
• do{}while()
• if(){}
• switch(){}

模板字符串与箭头函数

模板字符串

let a = 1;
let b = 2;
console.log(`${a} + ${b} = ${a+b}`);

模板字符串中，所有的空格、换行或缩进都会被保留在输出之中

输出`和\等特殊字符需要转义，\`、\\

只要最终可以得出一个值的就可以通过 ${} 注入到模板字符串中

箭头函数

const/let 函数名 = 参数 => 函数体
//1. 单个参数
const add1 = x => {
  return x + 1;
}
//2. 单行函数体
const add2 = (x,y) => x + y;
//3. 单行对象
const add3 = (x,y) => ({
    value: x + y
});

单个参数可以省略圆括号,无参数或多个参数不能省略圆括号
单行函数体可以同时省略{} 和 return
如果箭头函数返回单行对象，可以在{} 外面加上 ()，让浏览器不再认为那是函数体的花括号

this指向

全局作用域中的this指向window

一般函数（非箭头函数）中的this指向，只有在函数调用的时候this指向才确定，不调用的时候，不指定指向谁。this指向和函数在哪儿调用没有关系，只和谁调用有关，一个函数在没有指明谁调用时，在严格模式下为undefined，在非严格模式下为window

//`use strict`
fun add(){
  console.log(this);
}

//严格模式下指向undefined
//非严格模式下指向window
add();

箭头函数没有自己的this

const calc = {
    add: () => {
      console.log(this);
    },
    add2: function(){
      const add3 = () => {
        console.log(this);
      };
      add3();
    }
};
calc.add1(); //window
calc.add2(); //calc

以下场景不适合使用箭头函数

1. 作为构造函数
2. 需要this指向调用对象的时候
3. 需要使用arguments的时候

数组解构赋值

解析某一数据的结构，将我们想要的东西提取出来，赋值给变量或常量

    const [a, b, c] = [1, 2, 3];
    console.log(a, b, c);

原理

  // 1.模式（结构）匹配
  // [] = [1, 2, 3];

  // 2.索引值相同的完成赋值
  // const [a, b, c] = [1, 2, 3];
  // console.log(a, b, c);

  // 不取的，可以直接用逗号跳过
  const [a, [, , b], c] = [1, [2, 4, 5], 3];
  console.log(a, b, c);

默认值

  const [a = 1, b = 2] = [];
  console.log(a, b);

默认值的生效条件
只有当一个数组成员严格等于（===）undefined 时，对应的默认值才会生效

默认值表达式

如果默认值是表达式，默认值表达式是惰性求值的

  const func = () => {
     console.log('我被执行了');
     return 2;
  };
  //const [x = func()] = [1];
  const [x = func()] = [];
  console.log(x);

应用

  // 1.常见的类数组的解构赋值
  // arguments
  function func() {
    const [a, b] = arguments;
    console.log(a, b);
  }
  func(1, 2);

  // NodeList
  const [p1, p2, p3] = document.querySelectorAll('p');
  console.log(p1, p2, p3);

  // 2.函数参数的解构赋值
  const array = [1, 1];
  const add = ([x = 0, y = 0]) => x + y;
  console.log(add(array));
  // console.log(add([]));

  // 3.交换变量的值
  let x = 1;
  let y = 2;

  // let tmp = x;
  // x = y;
  // y = tmp;
  // console.log(x, y);

  [x, y] = [y, x];
  console.log(x, y);

对象解构赋值

模式（结构）匹配

{}={}

属性名相同的完成赋值

  const { age, username } = { username: 'Alex', age: 18 };
  const { age: age, username: username } = { username: 'Alex', age: 18 };
  console.log(age, username);

取别名

  const { age: age, username: uname } = { username: 'Alex', age: 18 };
  console.log(age, uname);

对象结构赋值注意

默认值的生效条件

对象的属性值严格等于 undefined 时，对应的默认值才会生效

  const { username = 'ZhangSan', age = 0 } = { username: 'alex' };
  console.log(username, age);

默认值表达式

如果默认值是表达式，默认值表达式是惰性求值的

将一个已经声明的变量用于解构赋值

如果将一个已经声明的变量用于对象的解构赋值，整个赋值需在圆括号中进行

  let x = 2;
  ({ x } = { x: 1 });
  // [x] = [1]; //数组则没有这个问题
  console.log(x);

可以取到继承的属性

对象结构赋值应用

函数参数的解构赋值

const logPersonInfo = ({ age = 0, username = 'ZhangSan' }) =>   console.log(username, age);
logPersonInfo({ username: 'alex', age: 18 });

复杂的结构赋值情况

const obj = {
  x: 1,
  y: [2, 3, 4],
  z: {
    a: 5,
    b: 6
  }
};
// const { x, y, z } = obj;
// console.log(x, y, z);
const {
  y,
  y: [, yy],
  z,
  z: { b }
} = obj;
console.log(yy, y, z, b);

其他数据类型的结构赋值

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

数组形式的解构赋值
const [a, b, , , c] = 'hello';
console.log(a, b, c);

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

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

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

const { b = 2, toString } = true;
console.log(b, toString);

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() {}
};
console.log(person);

方括号语法的用法

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

const prop = 'age';
const person = {
   [prop]: 18
};

console.log(person);

方括号中可以放什么

[值或通过计算可以得到值的（表达式）]

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

属性名由数字、字母、下划线以及 $ 构成，并且数字还不能打头的时候可以使用点语法，所以当你的属性或方法名是合法标识符时，可以使用点语法，其他情况下请使用方括号语法

函数参数的默认值

函数参数默认值的基本用法

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

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

默认值表达式

如果默认值是表达式，默认值表达式是惰性求值的

设置默认值的小技巧：函数参数的默认值，最好从参数列表的右边开始设置

多参数函数传递写法

const logUser = ({ username = 'zhangsan', age = 0, sex = 'male' } = {}) => console.log(username, age, sex);
logUser({ username: 'alex' });
logUser();