Es6新增语法梳理

这两天项目上线，手头工作忙完了，忽然想起来面试的时候总会问到
ES6有哪些新增的语法，你了解多少？

梳理梳理吧！

1.let const

现在项目中我已经基本上不会使用 var 来声明变量了，

let const 与 var 的区别：

let const 有自己的作用域 ----- var 是全局声明
let const 没有变量提升 ----- var 有变量提升
同一作用域下 let const 不可以多次声明同一个变量 ----- var 可以多次声明同一个变量
let const 存在暂存死区 ----- var 不存在

const

一旦声明必须赋值
赋值基础数据类型之后不可更改
赋值复合数据类型可更改其属性

2.扩展运算

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]

const arr3 = [...arr1, ...arr2]
// 输出  [1,2,3,4,5,6]

3.模板字符串

const str = '雷'

console.log(`我姓${str}`)
// 输出  我姓雷

4.Object.keys

此方法可以获得所有对象的key，返回数组包含所有对象的key

const obj = {
  name:'lei'，
  age:'18'
}
const keys = Object.keys(obj)
console.log(keys)

// 输出 [name, age]

5.箭头函数

const fn = () => {}

// 如果只有一个参数，可以省略括号
const fn = name => {}

// 如果函数体里只有一句return 可简写为
const fn = name => 2 * name

// 如果返回的是对象
const fn = name => ({ name: name })

箭头函数没有自己的 this 指向，this 指向由其上下文确定
箭头函数没有原型对象
箭头函数是匿名函数不能作为构造函数，不能使用new
箭头函数不绑定arguments，用展开运算符...解决（第六点 ↓ ）

6.剩余参数

有时候不确定会给函数中传入多少个参数，可以使用展开运算符

function fn ( ...params) {
  console.log(params)
}
fn(1,2,3,4,5,6)

// 输出   [1,2,3,4,5,6]

7.默认参数

function fn(name="lei", age=18) {
  console.log(name,age)
}

fn()
// 输出  lei,18

fn('yang', 20)
// 输出 yang,20

8.forEach, map, filter, some, every

这些都是ES6遍历数组的方法，但是有一些不同处，

forEach

const Aarr = [1, 2, 3, 4, 5]

// 三个参数：遍历项 索引 数组本身
Aarr.forEach((item, index, arr) => {
  console.log(item, index, arr)
})

// 输出：
1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
3 2 [ 1, 2, 3, 4, 5 ]
4 3 [ 1, 2, 3, 4, 5 ]
5 4 [ 1, 2, 3, 4, 5 ]

map

用于处理数据过后返回一个新数组

const mapArr = [1, 2, 3, 4, 5]

// 三个参数：遍历项 索引 数组本身
// 对每一项减1
const mapArr2 = mapArr.map((num, index, arr) =>  num - 1)
console.log(mapArr2)

// 输出：
[ 0, 1, 2, 3, 4 ]

filter

用来过滤的方法
const filterArr = [1, 2, 3, 4, 5]

// 三个参数：遍历项索引数组本身
// 返回大于3
const filterArr2 = filterArr.filter((num, index, arr) => num > 3)
console.log(filterArr2)

// 输出：
[ 4, 5 ]

some

只要有一个是真，就返回真

const someArr = [true, false, true, false]

// 三个参数：遍历项 索引 数组本身
// 只要有一个为true，就返回true，一个都true都没有，就返回false
const someArr2 = someArr.some((bol, index, arr) => bol)
console.log(someArr2)

// 输出
true

every

every与some是相反的，every要每一项为真才返回真

const everyArr = [false, true, false, true, false]

// 三个参数：遍历项 索引 数组本身
// 所有为true，才返回true，否则返回false
const everyArr2 = everyArr.every((bol, index, arr) => bol)
console.log(everyArr2)

// 输出
false

9.reduce

第一个参数callback函数： pre为上次return的值，next为数组的本次遍历的项
第二个参数为初始值，也是第一个pre

// 计算 1 + 2 + 3 
const reduceArr = [1, 2, 3]
const sum = reduceArr.reduce((pre, next) => {
  return pre + next
}, 0)
console.log(sum) // 6

10.对象属性同名简写

const name = 'lei'
const age = '18'

const obj = {
  name,
  age
}

console.log(obj) // { name: 'lei', age: '18' }

11.解构赋值

提取对象里的属性,对象解构

const obj = {
  name: 'lei',
  age: 18,
  hobby: {
    one: 'basketball',
  }
}

const { name, age } = obj
console.log(name, age) // lei 18

// 解构重名
const { name: myname } = obj
console.log(myname) // lei

// 嵌套解构
const { hobby: { one } } = obj
console.log(one) // basketball

数组的解构

const arr = [1, 2, 3]

const [a, b, c] = arr
console.log(a, b, c) // 1 2 3

// 默认赋值
const [a, b, c, d = 4] = arr
console.log(a, b, c, d) // 1 2 3 4

// 乱序解构
const { 1: a, 0: b, 2: c } = arr
console.log(a, b, c) // 2 1 3

12.Object.values

获取对象 value 值的集合

const obj = {
  name: 'lei',
  age: 18
}

const values = Object.values(obj)
console.log(values) // ['lei', 18 ]