ES6用法总结

131 阅读3分钟

es6

1.let const var

1.let 有变量提升,没有初始化提升 值可变 暂存性死区

var userName = '你好'

function fn () {
    console.log(name) 
    let userName = '你是' 
}
fn() // Cannot access 'userName' before initialization

2.const 有变量提升,没有初始化提升 值不可变 如果定义对象,属性值可改变 暂存性死区

3.var 有变量提升,有初始化提升 值可变

块级作用域解决问题:

for(var i = 0; i < 2; i++) {
  setTimeout(() => {
    console.log(i)
  })
} //2 2 2  

for(let i = 0; i < 2; i++) {
  setTimeout(() => {
    console.log(i)
  })
} // 0 1 2

2.默认参数

function fn (name = '李四', age = 10) {
  console.log(name, age)
}
fn() // 李四 10
fn('王五',32) // 王五 32

3.扩展运算符

const arr1 = ['wo', 'ni', 'ta']
const arr2 = ['hah', 'heh', 'hee']

const arr = [...arr1, ...arr2, ...arr3]

//['wo', 'ni', 'ta','hah', 'heh', 'hee']

4.剩余参数

function fn (name, ...arm) {
  console.log(name)
  console.log(arm)
}
fn ('李四', 5,6) // 李四 [5,6]
fn ('李四', 7,8,9) // 李四 [7,8,9]

5.模板字符串

const name = '小五' const age = '18' 
console.log(`${name}今年${age}岁啦`) // 小五今年18岁啦

6.Object.keys

const info = {
  name: '小五',
  age: 18,
  postion: '经理'
}
const keysArray = Object.keys(info)  // [ 'name', 'age', 'postion' ]

7.箭头函数

const fn = () => {}

// 只有一个参数,省略括号
const fn = age => {}

// 函数体里只有一句return
const fn = age => 2 * age

// 返回的是对象
const fn = age => ({ age })

- 箭头函数不可作为构造函数,不能使用new
- 箭头函数没有自己的this
- 箭头函数没有arguments对象
- 箭头函数没有原型对象

8.Array.prototype.forEach

const newArr = [1, 2, 3]

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

9.Array.prototype.map

const newArr = [4, 5]
const newArr2 = newArr.map((num, index, arr) => 2 * num)
console.log(newArr2)  //对每一个元素进行翻倍 [ 8, 10 ]

10.Array.prototype.filter

const filterArr = [1, 2, 3, 4, 5]
const filterArr2 = filterArr.filter((num, index, arr) => num > 3) 
console.log(filterArr2)  //返回大于3的集合[ 4, 5 ]

11.Array.prototype.some

const someArr = [false, true, false, true, false]
const someArr2 = someArr.some((bol, index, arr) => bol)
console.log(someArr2) true       //只要有一个为true,就返回true,一个true都没有,就返回false       

12.Array.prototype.some

const everyArr = [false, true, false, true, false]
const everyArr2 = everyArr.every((bol, index, arr) => bol)
console.log(everyArr2)  false   //所有为true,才返回true,否则返回false

13.Array.prototype.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

14.对象属性同名简写

const name = '小五'
const age = '32'

// 属性同名可简写
//const obj = {
 // name:name,
 // age:age
//}

const obj = {
  name,
  age
}
console.log(obj) // { name: '小五', age: '32' }

15.Promise (一旦他的状态改变,就不会再改)

//成功状态
function requestData () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('小屋')
    }, 1000)
  })
}

requestData().then(res => {
  console.log(res) // 一秒钟后输出 '小屋'
}, err => {
  console.log(err)
})

//失败状态
function requestData () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('失败')
    }, 1000)
  })
}

requestData().then(res => {
  console.log(res)
}, err => {
  console.log(err) // 一秒钟后输出 '失败'
})

  • .all的方法
  • 接收一个Promise数组,数组中如有非Promise项,则此项当做成功
  • 如果所有Promise都成功,则返回成功结果数组
  • 如果有一个Promise失败,则返回这个失败结果
// 如果全都为成功
function fn(time) {
  return new Promise((resolve, reject) => {
    console.log(88)
    setTimeout(() => {
      resolve(`${time}毫秒后我成功啦!!!`)
    }, time)
  })
}

Promise.all([fn(2000), fn(3000), fn(1000)]).then(res => {
  // 3秒后输出 [ '2000毫秒后我成功啦!!!', '3000毫秒后我成功啦!!!', '1000毫秒后我成功啦!!!' ]
  console.log(res) 
}, err => {
  console.log(err)
})

// 如果有一个失败
function fn(time, isResolve) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      isResolve ? resolve(`${time}毫秒后我成功啦!!!`) : reject(`${time}毫秒后我失败啦!!!`)
    }, time)
  })
}

Promise.all([fn(2000, true), fn(3000), fn(1000, true)]).then(res => {
  console.log(res)
}, err => {
  console.log(err) // 3秒后输出 '3000毫秒后我失败啦!!!'
})

  • race方法
  • 接收一个Promise数组,数组中如有非Promise项,则此项当做成功
  • 哪个Promise最快得到结果,就返回那个结果,无论成功失败
function fn(time, isResolve) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      isResolve ? resolve(`${time}毫秒后我成功啦!!!`) : reject(`${time}毫秒后我失败啦!!!`)
    }, time)
  })
}

Promise.race([fn(2000, true), fn(3000), fn(1000)]).then(res => {
  console.log(res)
}, err => {
  console.log(err) // 1秒后输出
})