ES6学习笔记（一）

1. let和var命令

let声明的变量，只在它所在的代码块有效，对作用域之外没有影响；
var声明的变量，在全局范围内都有效。

var命令声明变量，会发生变量提升。即脚本开始运行时，变量已经存在了，但是没有值，所以会输出undefined。
let命令声明变量，不会发生变量提升。这表示在声明它之前，变量是不存在的，这时如果用到它，就会抛出一个错误。

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

let不允许在相同作用域内，重复声明同一个变量。

let实际上为 JavaScript 新增了块级作用域。使得出现同名变量时，外层代码块不受内层代码块的影响；使得循环结束后，循环变量就失去作用域，不会泄露成为全局变量。

ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。let只能出现在当前作用域的顶层（违反则报错），严格模式下，函数也只能声明在当前作用域的顶层（违反则报错）

// 第一种写法，报错
// 因为没有大括号，不存在块级作用域，而let只能出现在当前作用域的顶层，所以报错
if (true) let x = 1;

// 第二种写法，不报错
if (true) {
  let x = 1;
}

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

// 块级作用域内部的函数声明语句，建议不要使用
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 块级作用域内部，优先使用函数表达式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

2. const命令

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const的作用域与let命令相同：只在声明所在的块级作用域内有效。

const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

const声明的常量，也与let一样不可重复声明。

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

const foo = {};

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

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

3、顶层对象

顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。

ES6 一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

JavaScript 语言存在一个顶层对象，它提供全局环境（即全局作用域），所有代码都是在这个环境中运行。但是，顶层对象在各种实现里面是不统一的。

• 浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。
• 浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。
• Node 里面，顶层对象是global，但其他环境都不支持。

同一段代码为了能够在各种环境，都能取到顶层对象，现在一般是使用this关键字，但是有局限性。

• 全局环境中，this会返回顶层对象。但是，Node.js 模块中this返回的是当前模块，ES6模块中this返回的是undefined。
• 函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象。但是，严格模式下，这时this会返回undefined。
• 不管是严格模式，还是普通模式，new Function(‘return this’)()，总是会返回全局对象。但是，如果浏览器用了 CSP（Content Security Policy，内容安全策略），那么eval、new Function这些方法都可能无法使用。

综上所述，很难找到一种方法，可以在所有情况下，都取到顶层对象。

4、变量的解构赋值

4.1、数组的解构赋值

数组的解构赋值：数组的元素是按次序排列的，变量的取值由它的位置决定。如果解构不成功，变量的值就等于undefined。

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 // []

数组的解构赋值允许指定默认值：ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。因为x能取到值，所以函数f根本不会执行。

function f() {
  return 10
}

let [x = f()] = [1];

4.2、对象的解构赋值

对象的解构赋值：对象的属性没有次序，变量必须与属性同名，才能取到正确的值。如果解构不成功，变量的值就等于undefined。

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

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

对象的解构赋值是下面形式的简写：对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

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

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

对象的解构也可以指定默认值：默认值生效的条件是，对象的属性值严格等于undefined。属性x等于null，因为null与undefined不严格相等，所以是个有效的赋值，导致默认值3不会生效。

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

注意事项：JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

// 正确的写法
let x;
({x} = {x: 1});

4.3、字符串的解构赋值

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

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

//类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5

4.4、数值和布尔值的解构赋值

数值和布尔值的解构赋值：解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

let {toString: s} = 123;
s=s === Number.prototype.toString 
console.log(s)// true

let {toString: s1} = true;
s1=s1 === Boolean.prototype.toString 
console.log(s1)// true

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

4.5、函数参数的解构赋值

function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

//函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。
function move({x = 0, y = 0} = {}) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

//为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果
function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

5、字符串

5.1 模板字符串

模板字符串（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}?`

• 如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。
• 如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。
• 所有模板字符串的空格和换行，都是被保留的，如果你不想要这个换行，可以使用trim方法消除它。
• 模板字符串中嵌入变量，需要将变量名写在${}之中。大括号内部可以放入任意的 JavaScript
  表达式，可以进行运算，以及引用对象属性，还能调用函数。

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

• 如果需要引用模板字符串本身，在需要时执行，可以写成函数。

let func = (name) => `Hello ${name}!`;
func('Jack') // "Hello Jack!"

5.2 字符串的新增方法

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

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

let s = 'Hello world!';

s.startsWith('w', 6) // true //针对从第n个位置直到字符串结束 world
s.endsWith('o', 5) // true //针对前n个字符 Hello
s.includes('H', 6) // false //针对从第n个位置直到字符串结束 world

• repeat()：返回一个新字符串，表示将原字符串重复n次。

//参数如果是小数，会被取整。
'na'.repeat(2.9) // "nana"

//参数是负数或者Infinity，会报错。
'na'.repeat(Infinity)// RangeError
'na'.repeat(-1)// RangeError

//参数是 0 到-1 之间的小数，则等同于 0
'na'.repeat(-0.9) // ""

//参数NaN等同于 0。
'na'.repeat(NaN) // ""

//参数是字符串，则会先转换成数字。
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

• padStart()：返回一个新字符串，补全字符串长度，用于头部补全。
• padEnd()：返回一个新字符串，补全字符串长度，用于尾部补全。

//第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padEnd(5, 'ab') // 'xabab'

//如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。
xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

//如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。
'abc'.padStart(10, '0123456789')// '0123456abc'

//如果省略第二个参数，默认使用空格补全长度。
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

//padStart()的常见用途是为数值补全指定位数。
'1'.padStart(10, '0') // "0000000001"

//另一个用途是提示字符串格式。
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

• replace()：返回一个新字符串，替换查找到的第一个字符
• replaceAll()：返回一个新字符串，替换查找到的所有字符

'aabbcc'.replace('b', '_')// 'aa_bcc'
'aabbcc'.replace(/b/g, '_')// 'aa__cc'
'aabbcc'.replaceAll('b', '_')// 'aa__cc'