阮一峰ES6学习笔记

1. let和const

1.let 和 const不存在变量提升问题；
2.let 负责定义变量、const 负责定义常量；
3.二者在同一作用域内(即{}内) 不允许重复声明同一变量名；
4.const 声明后需立即赋值，不然会报错;
5.使用lett定义变量时，该变量不允许使用，此区间称为 暂存性死区

// 暂存性死区 
if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

上面代码中，在let命令声明变量tmp之前，都属于变量tmp的“死区”
注意：“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。

typeof x; // ReferenceError
let x;

上面代码中，变量x使用let命令声明，所以在声明之前，都属于x的“死区”，只要用到该变量就会报错。因此，typeof运行时就会抛出一个ReferenceError。

2.es6声明变量的6种方式

var(es5)、function(es5)、const、let、class、import
// var命令和function命令声明的全局变量，依旧是顶层对象的属性，
// let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性;
// 顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象
// 顶层对象 可以通过this 获取到
const a = 5;
var b = 6;
console.log(this.a) // undefind
console.log(this.b) // 6

3.解构赋值

1.可以从数组或对象中提取内容，并支持赋初始值操作，可以避免初始值为空导致的报错问题

const [a, b, c] = [1,2,3] // 1, 2, 3
const obj = {name:'jack', age:'23'}
const {name, age, id} = obj
 // name = jack, age = 23, id = undefined 此时id为undefined,如实际开发中若没做非空判断可能会报错，可以通过赋默认值的方式避免这个错误
 const {name, age, id = '1' } = obj // name = jack, age = 23, id = '1'

2.若等号右侧是不可遍历的数据解构，进行解构会报错

const [a] = 1 \ true\ false \ {} \ undfined \ NaN \ null

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

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

实际应用：若解构变量名，已经定义过，可使用重新命名的方式进行处理
4.字符串也可以进行解构赋值，此时字符串被转换成一个类数组的对象

 const [aa,bb,cc] = 'javaScript' // j a v

4.字符串扩展及新增方法

1.for…of 遍历字符串

const str = 'hello Worde'
   for (let i of str){
       log(i)
   }
   //h e ll o W o r d e

2.模版字符串 ${},支持运算表达式

const name = 'jack'
const age = '23
`hello ${name},age${age}`
const x =1
const y =2
`re=${x+y}`

3.方法
1.传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
这三个方法都支持第二个参数，表示开始搜索的位置
使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
 s.endsWith('Hello', 6) // false
s.includes('Hello', 6) // false

2.repeat()
repeat方法返回一个新字符串，表示将原字符串重复n次
参数如果是小数，会被取整
如果repeat的参数是负数或者Infinity，会报错

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

'na'.repeat(2.9) // "nana"

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

3.padStart()，padEnd()
padStart()用于头部补全，padEnd()用于尾部补全
padStart()和padEnd()一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串
如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串

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

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

4.trimStart()，trimEnd()
trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串,对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

函数的扩展

1.允许形参设置默认值 (es5不支持、es6新增）
参数默认值不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的(参数p的默认值是x + 1。这时，每次调用函数foo，都会重新计算x + 1，而不是默认p等于 100)

function test(x, y = '2'){}

let x = 99;
function foo(p = x + 1) {
  console.log(p);
}
foo() // 100
x = 100;
foo() // 101

2.作用域
一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的(参数y的默认值等于变量x。调用函数f时，参数形成一个单独的作用域。在这个作用域里面，默认值变量x指向第一个参数x，而不是全局变量x，所以输出是2)

var x = 1;
function f(x, y = x) {
  console.log(y);
}
f(2) // 2

3.箭头函数
箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
总结：任何情况下,箭头函数的this跟外层function的this一致，外层function的this指向谁，箭头函数的this就指向谁，如果外层不是function则指向window。

		var code = 'java'
	        test = () => {
	            const code ='go'
	            console.log('====>code',this.code)
	        } 
	        test() // java
        
        newTest = {
            code: 'python',
            testFuc:function(){
                const out = () => {console.log(this.code)}
                out()
            }
        }
        newTest.testFuc() // python

扩展运算符

1.扩展运算符后可用表达式
2.如果扩展运算符后面是一个空数组，则不产生任何效果
3.只有函数调用时，扩展运算符才可以放在圆括号中，否则会报错
4.找出数组中的最大值
5.通过push函数，将一个数组添加到另一个数组的尾部
6.扩展运算符还可以将字符串转为真正的数组。

1. const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
]

2. [...[], 1]
// [1]

3. (...[1, 2])
// Uncaught SyntaxError: Unexpected number
console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number
console.log(...[1, 2])
// 1 2

4. const arr = [1,2,3,5]
	const max =Math.max(...arr) // 5

5. let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);

6. [...'hello']
// [ "h", "e", "l", "l", "o" ]

数组&对象

1.Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）;Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

 let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

2.Array.of方法用于将一组值，转换为数组,这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异,Array方法没有参数、一个参数、三个参数时，返回结果都不一样。只有当参数个数不少于 2 个时，Array()才会返回由参数组成的新数组。参数个数只有一个时，实际上是指定数组的长度

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

3.数组实例的 entries()，keys() 和 values()

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

4.flat 如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数,如果原数组有空位，flat()方法会跳过空位

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

5.Object.is()它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致
不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true