這兩天項目上線玛痊，手頭工作忙完了赴恨，忽然想起來面試的時候總會問到
ES6有哪些新增的語法，你了解多少箕憾？
梳理梳理吧牡借！
1.let const
現(xiàn)在項目中我已經(jīng)基本上不會使用 var 來聲明變量了，
let const 與 var 的區(qū)別：
- let const 有自己的作用域 ----- var 是全局聲明
- let const 沒有變量提升 ----- var 有變量提升
- 同一作用域下 let const 不可以多次聲明同一個變量 ----- var 可以多次聲明同一個變量
- let const 存在暫存死區(qū) ----- var 不存在
const
- 一旦聲明必須賦值
- 賦值基礎(chǔ)數(shù)據(jù)類型之后不可更改
- 賦值復(fù)合數(shù)據(jù)類型可更改其屬性
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袭异，返回數(shù)組包含所有對象的key
const obj = {
name:'lei'钠龙，
age:'18'
}
const keys = Object.keys(obj)
console.log(keys)
// 輸出 [name, age]
5.箭頭函數(shù)
const fn = () => {}
// 如果只有一個參數(shù)，可以省略括號
const fn = name => {}
// 如果函數(shù)體里只有一句return 可簡寫為
const fn = name => 2 * name
// 如果返回的是對象
const fn = name => ({ name: name })
- 箭頭函數(shù)沒有自己的 this 指向，this 指向由其上下文確定
- 箭頭函數(shù)沒有原型對象
- 箭頭函數(shù)是匿名函數(shù) 不能作為構(gòu)造函數(shù)碴里，不能使用new
- 箭頭函數(shù)不綁定arguments沈矿，用展開運算符...解決（第六點 ↓ ）
6.剩余參數(shù)
有時候不確定會給函數(shù)中傳入多少個參數(shù)，可以使用展開運算符
function fn ( ...params) {
console.log(params)
}
fn(1,2,3,4,5,6)
// 輸出 [1,2,3,4,5,6]
7.默認參數(shù)
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遍歷數(shù)組的方法咬腋，但是有一些不同處羹膳，
forEach
const Aarr = [1, 2, 3, 4, 5]
// 三個參數(shù)：遍歷項 索引 數(shù)組本身
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
用于處理數(shù)據(jù)過后返回一個新數(shù)組
const mapArr = [1, 2, 3, 4, 5]
// 三個參數(shù)：遍歷項 索引 數(shù)組本身
// 對每一項減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]
// 三個參數(shù)：遍歷項 索引 數(shù)組本身
// 返回大于3
const filterArr2 = filterArr.filter((num, index, arr) => num > 3)
console.log(filterArr2)
// 輸出：
[ 4, 5 ]
some
只要有一個是真，就返回真
const someArr = [true, false, true, false]
// 三個參數(shù)：遍歷項 索引 數(shù)組本身
// 只要有一個為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]
// 三個參數(shù)：遍歷項 索引 數(shù)組本身
// 所有為true醒颖，才返回true，否則返回false
const everyArr2 = everyArr.every((bol, index, arr) => bol)
console.log(everyArr2)
// 輸出
false
9.reduce
- 第一個參數(shù)callback函數(shù)： pre為上次return的值壳炎，next為數(shù)組的本次遍歷的項
- 第二個參數(shù)為初始值图贸，也是第一個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.解構(gòu)賦值
提取對象里的屬性,對象解構(gòu)
const obj = {
name: 'lei',
age: 18,
hobby: {
one: 'basketball',
}
}
const { name, age } = obj
console.log(name, age) // lei 18
// 解構(gòu)重名
const { name: myname } = obj
console.log(myname) // lei
// 嵌套解構(gòu)
const { hobby: { one } } = obj
console.log(one) // basketball
數(shù)組的解構(gòu)
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
// 亂序解構(gòu)
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 ]
