ES6相关

1.变量声明const和let

在ES6之前，我们都是用var关键字声明变量 。
在ES6中我们通常用let和const来声明。
let 表示变量。
const表示常量，并且值是不可以更改的。
二者都是块级作用域（1.在一个函数内部；2.在一个代码块内部）。

var funcs = []
    for (var i = 0; i < 10; i++) {
        funcs.push(function() { console.log(i) })
    }
    funcs.forEach(function(func) {
        func()
    })

输出结果，输出10次10.
但是如果我们想依次输出0到9呢？
直接看一下代码：

// 再来看看es6怎么处理的
    const funcs = []
    for (let i = 0; i < 10; i++) {
        funcs.push(function() {
            console.log(i)
        })
    }
    funcs.forEach(func => func())

2.箭头函数

不需要function关键字来创建函数
省略return 关键字（当函数返回时有且仅有一个表达式的时候可以省略 {}和return）
继承当前上下文this 关键字
注：当函数有且仅有一个参数的时候，是可以省略()括号的。

请使用ES6重构以下代码

 var calculate = function(x, y, z) {
      if (typeof x != 'number') { x = 0 }
      if (typeof y != 'number') { y = 6 }

      var dwt = x % y
      var result

      if (dwt == z) { result = true }
      if (dwt != z) { result = false }
      
      return result
    }

改造后

let calculate =(x, y, z) => {
      x = typeof x != 'number' ? 0 : x
      y = typeof y != 'number' ? 0 : y
      return  x % y === z
}

3.字符串

使用反引号加${}

let address = '北京海淀区'
let name = 'lala'
let str = '${name}在${address}上班...'

4.Spread Operator 展开运算符 ...

组装对象或者数组

const name = ['Lucy','Lily']
const otherName = [...name, 'Han meimei','Li Lei'] // ['Lucy','Lily'',Han meimei','Li Lei']
console.log(otherName)
/对象
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项

//数组
const number = [1,2,3,4,5]
const [first, ...rest] = number
console.log(rest) //2,3,4,5

//对象
 const user = {
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const { age, ...rest } = user
    console.log(rest) //{username: "lux", gender: "female", address: "peking"}

对于Object而言，还可以用于组合新的Object.有重复的属性名，后面的会覆盖前面的属性值。

const first = {
        a: 1,
        b: 2,
        c: 6,
    }
const second = {
        c: 3,
        d: 4
    }
const total = { ...first, ...second }
console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

5.import 和 export

1. 当用export default people导出时，就用 import people 导入（不带大括号）
2. 一个文件里，有且只能有一个export default。但可以有多个export。
3. 当用export name 时，就用import { name }导入（记得带上大括号）
4. 当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age }
5. 当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

6. Promise

Es7 和 Es8扩展

1.includes

就是替代indexof的方法，用于检查数组中是否存在值。

let str = 'React Quickly'

// Correct
if (str.toLowerCase().includes('react')) {  // true
  console.log('Found "react"')  
}

除了增强了可读性语义化，实际上给开发者返回布尔值，而不是匹配的位置。includes也可以在NaN(非数字)使用。最后 ，includes第二可选参数fromIndex，这对于优化是有好处的，因为它允许从特定位置开始寻找匹配。

console.log(['a', 'b', 'c'].includes('a', 1)) //false
console.log(['a', 'b', 'c'].includes('a', 0)) //true

2.Object.values() Object.keys()

使用Object.keys()遍历对象,获取到属性名为集合的数组

使用Object.keys()遍历对象获取到属性值为集合的数组

3.Object.entries()

遍历对象的属性名和属性值：直接上代码

let obj = {a: 1, b: 2, c: 3};
Object.entries(obj).forEach(([key, value]) =>{
      console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3
})

4.Async/Await

补充：
js不区分大小写匹配并代码高亮，且不改变原来文本大小写格式

 function highLight(data,params){
        let _data = data.replace(new RegExp(params,'ig'), (txt) =>`<span style='color: red;'>${txt}</span>`)
        return _data
    }