ES6 基本用法

let

• 用来声明变量，只在声明块内有效
• 不存在变量提升

function add(){
    console.log(a); // ReferenceError: Cannot access 'a' before initialization
    let a = 1;
    console.log(a); // => 1
    if(a===1){
        let b = 2;
        console.log(b); // => 2
    }
    console.log(b); // ReferenceError: b is not defined
}
add()

• 暂时性死区（简称TDZ）
  只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部影响。
  在代码块内，使用let命令之前，该变量都是不可用的，这在语法上，称为“暂时性死区”

var tmp = 123;
if (true) {
  console.log(tmp);  // ReferenceError: Cannot access 'tmp' before initialization
  let tmp;
}

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域，凡是在声明之前就使用这些变量，就会报错。

• 比较隐蔽的“死区”

function bar(x = y, y = 2) {
  return [x, y];
}
bar(); // 报错

参数x默认值等于另一个参数y，而此时y还没有声明，属于“死区”。

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

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}
// 不能在函数内部重新声明参数。
function func(arg) {
  let arg;
}
func() // 报错

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

---

ES6 的块级作用域

如下代码如果使用var定义变量，会输出10，但是块级作用域外层代码块不受内存代码块影响

function f () {
  let n = 5;
  if ( true ) {
    let n = 10;
  }
  console.log(n); // 5
}

---

const

• const声明一个只读的常量，一旦声明，常量的值就不能改变。
• const一旦声明变量，就必须立即初始化，不能留到以后赋值。
• const只声明不赋值会报错。
• const的作用域与let相同，只在声明所在的块级作用域内有效。
• const声明不提升。
• const存在暂时性死区，只能在声明的位置后面使用。
• const不可重复声明。

---

顶层对象的属性

顶层对象在浏览器环境指的是window对象，在Node 指的是global对象。

• ES5中，顶层对象的属性与全局变量是等价的。

window.a = 1;
a ; // => 1

a = 2;
window.a; // => 2

上边代码中，顶层对的属性赋值与全局变量的赋值，是同一件事。

• ES6规定，let、const、class声明的全局变量，不属于顶层对象的属性。

let b = 1;
window.b; // undefined

---

数组的解构赋值

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

let a = 1;
let b = 2;
let c = 3;
// ES6 允许写成下面这样
let [a,b,c] = [1,2,3];

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

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

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

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

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

let [a] = [];
let [b,a] = [1];
// a 的值都是undefined

• 如果等号右边不是数组，那么将会报错。

• 解构赋值允许指定默认值

let [a = 1] = [];
a; // => 1

• ES6内部使用严格相等运算符（===），判断一个位置是否有值，所以只有当数组成员严格等于undefined，默认值才生效。

let [a = 1] = [undefined];
a; // => 1
let [b = 1] = [null];
b; // => null   因为null不严格等于undefined

• 如果默认值是一个表达式，那么这个表达式是惰性求值的，只有在用到的时候，才会求值

function f(){
  console.log('aaaa');
}
let [a = f()] = [1];
a; // => 1 因为a能取到值，所以f根本不会执行

---

对象的解构赋值

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

let { b , a } = { a:1 , b:2 };
a; // => 1
b; // => 2 
let { c } = { a:1 , b:2 };
c; // => undefined  解构失败，变量的值等于undefined

• 如果变量名与属性名不一致

let obj = {first:"hello",last:"world"};
let {first:h,last:w} = obj;
h; // => 'hello'
w: // => 'world'

• 对象的解构赋值可以取到继承的属性

let o1 = {
   x: 1
};
let o2 = Object.create(o1);
o2.y = 2;
const { x , y } = o2;
x; // => 1
y; // => 2

• 对象的解构也可以指定默认值

let { x = 1 } = {};
x; // => 1

let { x: y = 2 } = {};
y; // => 2

• 默认值生效条件是，对象的属性值严格等于undefined。

let { x:1 } = { x:undefined };
x; // => 1

let { y:2 } = { y:null };
y; // null

---

字符串的解构赋值

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

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
//类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值
let {length : len} = 'hello';
len // 5

---

模板字符串

const value = 'o';
let str = `hell${value} world`;

includes()、startsWith()、endsWith()

三个方法都是用来确定一个字符串是否包含在另一个字符串中

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

let str = 'hello world!';
str.includes('el'); // => true
str.startsWith('he');// => true
str.startsWith('e'); // => false
str.endsWith('d!'); // => true
str.endsWith('d'); // => false

• 第二个参数表示开始搜索的位置
• endsWith使用第二个参数时，表示的是前n个字符。

str.includes('lo',4); // => false
str.startsWith('lo',3); // => true 相当于指定开始位置
str.endsWith('hel',3); // => true 表示前三个字符是存在的

---

实例方法：repeat()

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

'x'.repeat(3); // => 'xxx'
'x'.repeat(0); // => ''

• 参数如果是小数会向下取整

'x'.repeat(2.9); // => 'xx'

• 参数如果是负数或者Infinity，会报错，但是0 ~ -1之间的小数等同于0,
• NaN等同于0

'x'.repeat(-1); // 报错
'x'.repeat(-0.2); // => '' 参数认为是0
'x'.repeat(NaN); // => ''  

• 参数如果是字符串先转成数字

'x'.repeat('aaa'); // => ''  
'x'.repeat('3'); => 'xxx'

如上：'aaa'转成数字是NaN，NaN等同于0，所以输出空字符串

---

实例方法：padStart()、padEnd()

字符串补全功能，如果某个字符串不够指定长度，会在头部或尾部补全。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padEnd(5, 'ab') // 'xabab'

'1'.padStart(4, 'lx') // 'lxl1'

• 如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。
• 如果省略第二个参数，默认使用空格补全长度。

---

实例方法：trimStart()、trimEnd()

ES2019对字符串实例新增了trimStart()、trimEnd()这两方法。

• trimStart()：消除字符串头部的空格
• trimEnd()：消除字符串头部的空格
• 它们都返回新字符串，不会修改原始字符串
• 除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。

const a = ' ab ';
s.trim(); // => "ab"
s.trimStart(); // => "ab "
s.trimEnd(); // => " ab"