es--小结

1. let

• 基本用法 let 是es6新增的用来声明变量的命令，用法类似于var，但是所声明的变量 只在let命令所在的代码块内有效

  {
      let a = 10;
      var b = 1;
    }
    
    a // ReferenceError: a is not defined.
    b // 1
复制代码

• 不存在变量提升

  let 所声明的变量一定要在声明之后才能使用！否则会报错

• 暂时性死区

  只要块级作用域内存在let命令，那么他所声明的变量就‘绑定’了这个块级作用域，不受外部的影响。

  如以下代码：虽然var 声明了一个全局变量tmp， 但是在块级作用域内,let又声明了一个tmp,这个tmp就绑定了这个块级作用域， 不会受外界的影响。所以在未声明tmp之前就给他赋值就报错了。

   var tmp = 123;
      if (true) {
        tmp = 'abc'; // ReferenceError
        let tmp;
      }
  复制代码

  在代码块内，使用let命令声明变量之前，该变量都是不可用的。 这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）

• 不能重复声明 (因此不能再函数内部重新声明参数)

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

复制代码

2.块级作用域

let 为es6新增了块级作用域

• 内层的作用域可以定义与外层作用域同名的变量
• 使得立即执行函数变成了不必要

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}
复制代码

3.const

const是声明一个只读常量，一旦声明，常量的值就无法改变。这就意味着，一旦声明就必须立即初始化，不能留到以后再赋值。

const的作用域与let相同

const声明的常量也是不提升

同样存在暂时性死区

不能重复声明

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only
上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。
不可变的只是这个地址，即不能把foo指向另一个地址，
但对象本身是可变的，所以依然可以为其添加新属性

========================================================
另外一个例子：
const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

上面代码中，常量a是一个数组，这个数组本身是可写的，
但是如果将另一个数组赋值给a，就会报错。
复制代码

4.解构赋值

a. 数组的结构赋值

例子：

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

===========================
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

===========================
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

===========================

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，
左边的变量就会被赋予对应的值。

复制代码

• 不完全解构

  即等号左边的模式，只匹配一部分的等号右边的数组，这种情况下，解构依然可以成功

  let [x, y] = [1, 2, 3];
  x // 1
  y // 2
  
  let [a, [b], d] = [1, [2, 3], 4];
  a // 1
  b // 2
  d // 4
  复制代码

• 默认值

  解构赋值允许指定默认值

  let [foo = true] = [];
  foo // true
  
  let [x, y = 'b'] = ['a']; // x='a', y='b'
  let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
  注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。
  所以，只有当一个数组成员严格等于undefined，默认值才会生效。
  
  let [x = 1] = [undefined];
  x // 1
  let [x = 1] = [null];
  x // null
  复制代码

  默认值可以引用解构赋值的其他变量，但该变量必须已经声明

  let [x = 1, y = x] = [];     // x=1; y=1
  let [x = 1, y = x] = [2];    // x=2; y=2
  let [x = 1, y = x] = [1, 2]; // x=1; y=2
  let [x = y, y = 1] = [];     // ReferenceError: y is not defined
  
  复制代码

b. 对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
复制代码

c.对象的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
复制代码

d.解构赋值的用途

(1) 交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];
复制代码

(2)从函数返回多个值

当函数以数组或者对象的形式返回多个值的时候，使用解构赋值可以很方便的取出这些值

// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();
复制代码

(3)函数参数的定义

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
复制代码

解构赋值可以很方便地将一组参数与变量名对应起来

(4) 提取JSON数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]
复制代码

(5)函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

指定参数的默认值，就避免了在函数体内部再写
var foo = config.foo || 'default foo';这样的语句。
复制代码

5.字符串，数组，对象

• 多行字符串

let str = `gfsagfhas
dsgfjhagfhjsdagf
dfsjhgfjhsdgaf`
复制代码

• 字符串模板 ${变量}

let a = `fgsahgfd`
let str = `gdjhsd${a}`;//gdjhsdfgsahgfd
复制代码

• 数组扩展

let a = [1,2,3];
let b = [4,5,6];
let c = [...a,...b,7,8];//[1,2,3,4,5,6,7,8]
复制代码

• 函数参数的扩展

//得到一个数组的最大值
function getMax(arr) {
    return Math.max(...arrr)
}
getMax([1,2,3,4,5]) //5
复制代码

function getNew(...arr) {
    arr.push(345);
    return arr;
}
console.log(getNew(2,3,4,5,6,7,8))
//[2, 3, 4, 5, 6, 7, 8, 345]
getNew()里面传递了一些很分散的参数值，通过...arr变成了一个数组，相当于let了一个arr
复制代码

• 对象的扩展

var name = 'hh';
var age = 12;
var person = {name,age}//相当于 person = {'name':name,'age':age}
如果存在函数的话，可以写成
var person = {
    name,
    age,
    init() {
       console.log(1) 
    },
    bind() {
        console.log(2)
    }
}
复制代码

6.模块化

1.导出：
//index.js
export var firstname = 'first';
export var lastname = 'last';
此时导出的其实是一个对象，这个对象有两个属性，一个是firstname,一个是lastname
使用：
import {firstname,lastname} from './index.js'

2.导出还可以写成：
var firstname = 'eee';
var lastname = 'fff';
export {firstname,lastname};

3.导出函数
export function getNmae() {}
export function getAge() {}

使用：
import {getName,getAge} from './index.js';
getName();
4. export-default
导出
//export-default.js
export default function() {
    console.log('default')
}
使用
//import-default.js
import getName from './export-default'
getName()

这种情况是针对于有人写出了一个模块，导出了一个函数，但是这个函数的名称不知道，这个时候，导入的时候就可以自己给这个函数命名一个

复制代码

7.类和继承

类：
class Person {
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
    sayHello() {
        console.log(`hello,${this.name}`)
    }
}

继承：
class Student extends Person {
    constructor (name,age,score) {
        super (name,age);//获取父类的一些属性
        this.score = score;
    }
    
    sayScore() {
        console.log('22222')
    }
}
复制代码