这两天项目上线，手头工作忙完了，忽然想起来面试的时候总会问到
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 ]
