ES6——学习笔记

1、let、var、const

var:

函数作用域，存在变量提升，可重复声明

let:

块级作用域，不存在变量提升，不可重复声明，存在暂时性死区问题（块级作用域内，使用全局变量后再用let声明同名变量，会导致报错）

const:

用来声明常量，声明时必须赋值，一旦定义无法修改，不可重复赋值。

块级作用域，不存在变量提升，不可重复声明，存在暂时性死区问题

2、解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

数组解构赋值

可以从数组中提取值，按照对应位置，对变量赋值。

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

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 [ , , third] = ["foo", "bar", "baz"]; // third = "baz"

let [x, , y] = [1, 2, 3]; // x = 1, y = 3 

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

let [x, y, ...z] = ['a']; // x = "a", y = undefined, z = []

//不完全解构
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 [x, y = 'b'] = ['a']; // x = 'a', y = 'b'
let [x, y = 'b'] = ['a', undefined]; // x = 'a', y = 'b'
let [x, y = 'b'] = ['a', 'c']; // x = 'a', y = 'c'

如果解构不成功，变量的值就等于undefined。

let [foo] = []; // foo = undefined
let [bar, foo] = [1]; // bar = 1, foo = undefined

如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {
   };

对象解构赋值

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

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

let {
    baz } = {
    foo: 'aaa', bar: 'bbb' }; // baz = undefined

如果解构失败，变量的值等于undefined。

let {
   foo} = {
   bar: 'baz'}; // foo = undefined

如果变量名与属性名不一致，必须写成下面这样。

let obj = {
    first: 'hello', last: 'world' };
let {
    first: f, last: l } = obj; // f = 'hello', l = 'world'

这实际上说明，对象的解构赋值是下面形式的简写

let {
    foo: foo, bar: bar } = {
    foo: 'aaa', bar: 'bbb' };

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let {
    foo: baz } = {
    foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

注意，对象的解构赋值可以取到继承的属性。

const obj1 = {
   };
const obj2 = {
    foo: 'bar' };
Object.setPrototypeOf(obj1, obj2);

const {
    foo } = obj1;
foo // "bar"

3、模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。模板字符串中嵌入变量，需要将变量名写在 ${} 之中。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${
     name}, how are you ${
     time}?`

4、字符串新增方法

includes(), startsWith(), endsWith()

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let s = 'Hello world!';

s.startsWith('Hello') /