ES6 一些方法

1，let，var和 const 命令

const：声明一个只读的常量;一旦声明，常量的值就不能改变,但是一旦声明，不赋值会报错

const  a={}
a.name = 'tom'
a // 会报错，因为const 是不可进行修改的

// 数据引用类型，改变了他的引用地址
const b = {name: 'zs',age: '17'}
b.name = 'ls'
console.log(b)  // {age: "17"，name: "ls"}

区别：

• 重复声明
  let：同一作用域，不可以重复声明；
  var：同一作用域，可以重复声明进行赋值；
  const：不能重复声明，也不能重复赋值
• 作用域
  let：全局作用域与块级作用域
  var：全局作用域与私有作用域（私有作用域又称函数作用域）
  const：块级作用域
  块级作用域：只要在{ }中，都是块级作用域
• 预解析
  let：不进行预解析
  var：可以进行预解析
  const：不会被预解析

2，解构赋值

• 对象解构赋值：赋值名，要和对象的属性一致
• 数组解构赋值：赋值名，是根据数组中index值进行对应的
• 字符串解构赋值，与数组赋值是一致的，根据index进行赋值

let obj = {name:'jack',age:16}
let {name, age} = obj // name: 'jack', age:16

let arr = [1,4,7,9,3]
let [a1,a2,a3] = arr // a1: 1, a2: 4, a3: 7

let str = 'abcd'
let [s1,s2,s3] = str // s1: a, s2: b, s3: c

补充：怎么快速交换 c，d 的值

let c = 1;
let d = 2;
[c, d] = [d, c] 

let a = 'tom'
let b = {name:'jack',age:16}
let {name: a, age: 15} = b
a  // jack

3，展开运算符

1，数组：实现数组插入，与数组的合并

let  arr = [1,2,3,4]
let  arr2 = ['a', 'b','c','d','e']
let  arr3 = ['a', 'b','c',...arr, 'd','e'] // ['a', 'b','c',1,2,3,4,'d','e']
let  arr4 = [...arr,...arr2] // [1, 2, 3, 4, "a", "b", "c", "d", "e"]

2，对象：实现对象插入，与对象的合并

let  arr = {a:1, b:2}
let  arr2 = {c:3, d:4}
let  arr3 = {c:3, ...arr, d:4} // {c: 3, a: 1, b: 2, d: 4}
let  arr4 = {...arr,...arr2} // {a: 1, b: 2, c: 3, d: 4}

4，Set对象，Map对象

定义：都是构造函数，用来构建一类型的对象---对象的实例化

相关属性与方法：

属性：size属性
方法：clear（）

字符串扩展

2.1，实例方法检测：includes()、startsWith()、endsWith()

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

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

2.2，repeat方法返回一个新字符串，表示将原字符串重复n次。
注：n 为负数会报错；当n为NaN 等同于0；还有很多的特殊情况，详情可查询ES6

'hello'.repeat(2) // "hellohello"

2.3，模板字符串可以解析变量。
注：引用上面变量时，注意引用的符号是 ``，而不是单引号

let name='小五'
let namemsg=`hello,my name is ${name}`
console.log(namemsg)；// hello,my name is 小五

2.4，模板字符串可以调用方法，在此就不做案例了

3，Math 扩展

3.1，Number.isNaN()用来检查一个值是否为NaN。
Number.isFinite()用来检查一个数值是否为有限的（finite），即不是Infinity。

Number.isFinite(15); // true
Number.isFinite(Infinity); // false

Number.isNaN(NaN) // true
Number.isNaN(15) // false

3.2，Number.isInteger()用来判断一个数值是否为整数。

Number.isInteger(25) // true
Number.isInteger(25.1) // false

3.3，Math.trunc（）方法用于去除一个数的小数部分，返回整数部分。
注：参数必须是一个数值

Math.trunc(4.9) // 4
Math.trunc(-4.9) // -4
Math.trunc(-0.1234) // -0

4，for 循环扩展

var arr=['小五'，'小四'，'小三']

1，for in：获取数组中的索引值，一遍适用于对象

for（let i in arr）{
  console.log(i); // 0,1,2
}

2，for of：获取数组中的值

for（let value of arr）{
  console.log(value); // '小五'，'小四'，'小三'
}

5，rest 参数

ES5中，使用的是argments来获取参数，但是获取的参数是对象的形式，但是ES6中，推出了rest参数

function data(a,b,...args){
    console.log(a)  // 1
    console.log(b)  // 2
    console.log(args)  // [3,4,5,6,7]
}
data(1,2,3,4,5,6,7)

注：args 是一个数组形式，这里可以使用数组迭代的方式进行处理
但是，...args 参数必须放在最后，否则会报错

6，Symbol

Symbol 是一种新的原始数据类型，独一无二；他是js的第五种数据类型，一种类似于字符串的数据类型
1，新建

let s = Symbol()
let s1 = Symbol('我是参数')
let s2 = Symbol.for('我是参数')

• Symbol创建，

let a1 = Symbol('我是参数')
let a2 = Symbol('我是参数')
a1 === a2 // false

• Symbol.for()创建

let b1 = Symbol.for('我是参数')
let b2 = Symbol.for('我是参数')
b1 === b2 // true

注：Symbol不能与其他数据类型进行运算
2，作用：给对象添加属性或者方法

7，迭代器

原理：

• 创建一个指针对象，指向当前数据结构的起始位置；
• 第一个调用对象的next()方法，指针自动子项数据结构的第一个成员
• 接下来不断的调用next()方法，指针一直向后移动，直到指向最后一个成员；
• 每次调用next方法返回一个包含 value 与 done 属性的对象

8，生成器 generator（）

配置文件

function *iter (){
    yield：'a';
    yield：'b'；
    return 'c';
}
let ger = iter()

1，定义：是ES6提供的一种异步编程解决方案，一个 generator 看上去像一个函数，但可以返回多次。
2，与普通函数的区别：

• function 和函数名之间有一个*号，
• 函数体内部使用了 yield 表达式

3，创建生成器对象
调用 生成器函数 和调用 普通函数不同，调用生成器函数是返回一个 生成器对象(可迭代的对象)

// * 和 yield
function* gen() {
  yield "1";
  yield 2;
}

let iter = gen(); // 创建生成器对象 iter(可迭代)

4，生成器对象的使用方法

• 启动指令：Generator().next()
  * Generator 表示的是Generator函数，该函数是分段执行的
* 表示函数为Generator函数
* yield 定义函数内部状态，是不通阶段的分界线

ger() // 没有输出
ger.next() // value:'a', done:false
ger.next() // value:'b', done:false
ger.next() // value:'c', done:true

• next() 执行生成器函数，每次遇到 yield 或者 return 就会返回一个对象
  value： 表示 yield 或 return 后面的值。
done： 表示这个 对象是否已经结束(迭代到末尾了)

ger.next() // value:'a', done:false

• for...of 循环
  调用迭代器循环 生成器对象。可以直接获取到 yield 后面的值。

for (const i of ger) {
  console.log(i); // a，b；不会获得return的值
}
console.log(ger); //a，b；用扩展运算符得出的结果 和上面是一样的

ger.next() // value:'a', done:false
ger.next() // value:'b', done:false
ger.next() // value:'c', done:true

• 扩展运算符
  ... 生成器对象 也可以获取 yield 后面的值。
  注：next() 到 return 表示结束(没有 return，其实是隐含了 return undefined)，且 return 之后的 yield 不会被执行到
done 到最后返回 true，表示结束
return 不会被 for...of 和扩展运算符遍历到。所以只能用 next()获取到 return 的值

4，yield*
* yield 定义函数内部状态，是不通阶段的分界线

ger.next() // 在第一个yield之前的语句执行
ger.next() // 在第一个yield之后与在第二个yield之前，中间的语句执行
ger.next() // 在第二个yield之后与在第三个yield之前，中间的语句执行

5，next 的参数
如果给 next 方法传参数， 那么这个参数将会作为上一次 yield 语句的返回值 ，这个特性在异步处理中是非常重要的， 因为在执行异步代码以后， 有时候需要上一个异步的结果， 作为下次异步的参数

function *fun(){
   console.log(1)
   let a=yield
   console.log(a)
   let b=yield
   console.log(b)
}
fun().next()//1
fun().next("222")//222
fun().next("333")//333