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秒后输出
})