1、声明变量的两种方式
在es6之前所使用的var 因为有变量提升 不适合大型项目
es6中的 let 和 const
let 不具备变量提升 只在该声明的同一层 和该层后 使用
const 定义常量 不具备变量提升 如果声明的对象 可以改变 该对象里的属性值
复制代码2、箭头函数
es6之前 声明一个方法
function a () {
这种方法闭包 this指向 window
}
箭头函数
let a = () => {
不属于闭包 this 指向 上一层
}
复制代码3.数组扩展
3.1 Array.from()
Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）
3.2 ...运算符
扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
复制代码关于函数传参的问题，如果函数直接用...传参，传入的参数实际上是个数组，且后面不能再有参数。如果函数参数定义了一个数组，用...传入，实际上参数为数组中的值
function fn(...items){}
//等同于
function fn([数组内容]){}
let items = ['a', 'b', 'c']
function fn(...items){}
// 等同于
function fn('a', 'b', 'c') {}
复制代码3.3 ...运算符的应用
复制数组（克隆数组
let arr1 = [1, 2, 3]
let arr2 = [...arr1] // [1, 2, 3]
合并数组
const arr1 = ['a', 'b']
const arr2 = ['c']
const arr3 = ['d', 'e']
const arr4 = [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]
与解构赋值结合
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
将字符串转换为真正的数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]
复制代码3.4 Array.of()， 用于将一组值，转换为数组。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
复制代码3.5 数组实例的fill()
三个参数，后面两个可以省略，第一个参数为替换成什么内容，第二个为替换的起始位置，
第三个为替换的终止位置
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
复制代码3.6 数组实例的 entries()，keys() 和 values()
三个方法都是遍历数组，都可以用for...of...唯一的区别是keys()是对键名的遍
历、values()是对键值的遍历，entries()是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
复制代码4.sort 排序
let a = [1, 2, 3, 4]
let b = a.sort( (e, r) => {
return e - r 表示升序
return r - e 表示降序
})
let c = [{a: 6},
{a: 2},
{a: 1},
{a: 9}]
let d = c.sort( (e, r) => {
return e.a - r.a 表示升序
return r.a - e.a 表示降序
})
复制代码5.promise 请求
第一种基本写法
new Promise((resolve,reject)=>{
setTimeout(()=>{
// 成功时候调用resolve
// resolve('hello-1')
// 失败的时候调用reject
reject('error message')
},1000)
}).then((data)=>{
console.log(data);
}).catch(err=>{
console.log(er);
})
第二种写法，多次异步调用
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve()
},1000)
}).then(()=>{
console.log('hello-100');
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve()
},1000)
})
}).then(()=>{
console.log('hello-200');
return new Promise((resolve,reject)=>{
setTimeout(()=>{
// resolve()
reject('error-300')
},3000)
})
}).then(()=>{
console.log('成功回调');
}).catch(err=>{
console.log(err);
})
第三种写法
new Promise((resolve,reject)=>{
setTimeout(()=>{
// resolve('hello-world')
reject('error')
},1000)
}).then((data)=>{
console.log(data);
},(err)=>{
console.log(err);
})
复制代码5.1 promise的链式调用
第一种写法
new Promise((resolve,reject)=>{
setTimeout(() => {
resolve('链式调用')
}, 1000);
}).then((data)=>{
console.log(data + '111');
return new Promise((resolve,reject)=>{
resolve(data+'222')
})
}).then(data1=>{
console.log(data1);
return new Promise((resolve)=>{
resolve(data1 + '333')
})
}).then(data2=>{
console.log(data2);
})
第二种写法
new Promise((resolve,reject)=>{
setTimeout(()=>{
// 请求成功时的回调
resolve('哈哈哈')
// 请求失败时的回调
// reject('报错')
})
}).then((data)=>{
console.log(data+'111');
return Promise.resolve(data)
}).then(data=>{
console.log(data+'222');
return Promise.resolve(data)
}).then(data=>{
console.log(data + '333');
}).catch(err =>{
console.log(err);
})
第三种写法
new Promise(resolve=>{
setTimeout(()=>{
resolve('呵呵呵')
},1000)
}).then(data=>{
console.log(data+'111');
return data
}).then(data=>{
console.log(data+'222');
return data
}).then(data=>{
console.log(data+'333');
})
第四种最简写法–请求失败
new Promise((resolve,reject)=>{
setTimeout(() => {
resolve('啊啊啊')
}, 1000);
}).then(data=>{
console.log(data);
throw 'error-data'
}).then(data=>{
console.log(data);
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(data)
},1000)
})
}).then(data=>{
console.log(data);
}).catch(err=>{
console.log(err);
})
复制代码5.2 promise的all处理多个请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
Promise.all([
new Promise((resolve,reject)=>{
setTimeout(() => {
resolve('第一次请求')
// reject('第一次请求失败')
}, 2000);
}),
new Promise((resolve,reject)=>{
setTimeout(() => {
resolve('第二次请求')
// reject('第二次请求失败')
}, 1000);
})
]).then(result=>{
console.log(result); //得出数组结构：["第一次请求", "第二次请求"]
console.log(result[0]);
console.log(result[1]);
}).catch(err => {
// console.log(err);
// console.log(err[0]);
// console.log(err[1]);
})
</script>
</body>
</html>
复制代码
