ES6 函數(shù)
1、this ：this代表當(dāng)前正在執(zhí)行的對象
function fn () {
console.log(this)
}
fn() // window
const obj = new fn(); // { }
fn.call({ name:"1" }) // { name:'1' }
2摹恨、箭頭函數(shù)
（1）箭頭函數(shù)的this是在定義的時候就固定不變了
（2）箭頭函數(shù) 沒有自己的this
（3）箭頭函數(shù) 不能當(dāng)類(構(gòu)造器)使用 不可以 new
（4）箭頭函數(shù) 沒有 arguments
const fn = () => {
console.log(this);
console.log(arguments);
}
fn() // undefined 嚴(yán)格模式下 在非嚴(yán)格模式下是 window
const obj = new fn(); // undefined
new 一個實例 執(zhí)行 4 步
（1）創(chuàng)建一個空對象
（2） 執(zhí)行構(gòu)造器 Person 把this指向這個 {}
（3） 添加屬性
（4） 返回當(dāng)前實例
fn.call({ name:"1" }) // undefined
3、怎么改變this的指向
call ()
function person (params) {
this.name = params
console.log(this.name); // 27
}
person.call({},27)
bind （）
function person (params) {
this.name = params
console.log(this,this.name); // 27
}
const fn2 = person.bind({age:22},'小花')
fn2()
ES6 數(shù)組 方法
map filter some forEach every find findIndex reduce
1卓练、 map 返回一個新數(shù)組 長度不變
const arr = [1, 3, 5, 7, 9]
const newArr = arr.map(v => v+1) // [2, 4, 6, 8, 10]
const newArr = arr.map(v => v>3) //[false, false, true, true, true]
const newArr = arr.map(v => v>3 && v) //[false, false, 5, 7, 9]
2隘蝎、filter 返回一個新數(shù)組 長度改變 過濾
const arr = [1, 3, 5, 7, 9]
const newArr = arr.filter(v => v>3) // [5, 7, 9]
3、 some 只要返回true 就會停止循環(huán)
const arr = [1, 3, 5, 7, 9]
const newArr = arr.some(v => v===7) // 返回true 循環(huán)了3次
4昆庇、 every 只要返回false 就會停止循環(huán)
const arr = [1, 3, 5, 7, 9]
const newArr = arr.every(v => v===7 ) // 只執(zhí)行了1次 返回false
5末贾、 foeEach 普通循環(huán) 沒有返回值
const arr = [1, 3, 5, 7, 9]
arr.forEach(v => {
console.log(v); // 1, 3, 5, 7, 9
})
6、 find 為true的時候就會停止循環(huán) 返回 當(dāng)前的值
const data = [{name:'1',id:1}, {name:'2',id:2}, {name:'3',id:3}]
const newObj = data.find(v => v.id===2)
console.log(newObj); // {name:'2',id:2}
7整吆、 findIndex 為true的時候就會停止循環(huán) 返回 當(dāng)前的值的下標(biāo)
const data = [{name:'1',id:1}, {name:'2',id:2}, {name:'3',id:3}]
const newObj = data.find(v => v.id===2)
console.log(newObj); // 返回 1
8拱撵、 reduce 兩個參數(shù) （函數(shù)[必須有return]，默認(rèn)值）
（1）無默認(rèn)值
const arr = [1, 3, 5, 7, 9]
const sum=arr.reduce((a,b)=>{
return a+b
// a ->1 b->3 第1次
// a ->4 b->5 第2次
// a ->9 b->7 .... 第..次
})
console.log(sum); // 25
（2）有默認(rèn)值
const arr = [1, 3, 1, 7, 5, 7, 9]
// a ->{} b->1 第1次
// a ->{1:[1]} b->3 第2次
// a ->{1:[1],3:[3]} b->1 第3次
// a ->{1:[1,1],3:[3]} b->7 第4次 ....
const newObj = arr.reduce((a,b)=>{
if (a[b]) { a[b].push(b) } else { a[b] = [b] }
return a
}, {})
console.log(newObj); //{1:[1, 1],3:[3],5:[5],7:[7, 7],9:[9]}
（3）在antd 3.26 表單回填應(yīng)用
mapPropsToFields({ obj }) {
return Object.keys(obj).reduce((pre, d) => {
return {
...pre,
[d]: Form.createFormField({ value: obj[d] })
}
}, {})
},
9表蝙、數(shù)組的擴展運算符 ...
const arr = [1, 2, 3]
const brr = [4, 5, 6]
console.log([...arr,...brr]); // [1,2,3,4,5,6]
10拴测、 fill 填充數(shù)組
const str=new Array(50).fill('-').join('')
console.log(str); // ---------------------
11、includes 是否包含
const arr = [1, 2, 3]
console.log(arr.includes(2)) // true
12府蛇、flat 數(shù)組扁平化
const arr = [1, [2, [3,4] ] ]
// 默認(rèn)二維數(shù)組扁平化
console.log(arr.flat() ) // [1,2,[3,4] ]
// Infinity 多維數(shù)組扁平化
console.log(arr.flat(Infinity) ) // [1,2,3,4]
13集索、Set 數(shù)組去重
let crr= [1,2,1,3,4,5,1,2]
console.log([...new Set(crr)]); // [1,2,3,4,5]
ES6 對象 方法
1、Object.assign(新對象汇跨，對象1务荆，對象2，..) 合并對象
注： 是個淺拷貝
const obj1 = { name:"小花" }
const obj2 = { age:20 }
Object.assign(obj1,obj2) // 淺拷貝 { name:"小花", age:20 }
//{...obj1,...obj2} // 淺拷貝 { name:"小花", age:20 }
2穷遂、keys 取到所有的key值 values 取到所有的value值
const obj = { name:"小花", age:20, sex:"男" }
console.log(Object.keys(obj)); // ["name", "age", "sex"]
console.log(Object.values(obj)); // ["小花", 20, "男"]
3函匕、Object.entries( )
const obj = { name:"小花", age:20, sex:"男" }
Object.entries(obj) // [ ["name", "小花"],["age", 20],["sex", "男"] ]
取出對象里的所有key 和 value
（1）、reduce
Object.entries(obj).reduce((v,[key,value])=>{
console.log(key,value) // name 小花 age 20 sex 男
},'')
（2）蚪黑、for of
for(let [key,value] of Object.entries(obj)) {
console.log(key,value) // name 小花 age 20 sex 男
}
ES6 Promise
1）對象的狀態(tài)不受外界影響盅惜。Promise對象代表一個異步操作，有三種狀態(tài)：pending（進行中）忌穿、fulfilled（已成功）和rejected（已失斒慵拧）。
2）一旦狀態(tài)改變掠剑，就不會再變屈芜，任何時候都可以得到這個結(jié)果。Promise對象的狀態(tài)改變朴译，只有兩種可能：從pending變?yōu)閒ulfilled和從pending變?yōu)閞ejected沸伏。
（1）、特點：處理異步 異步的代碼以同步的方式
（2）动分、用法 ：
new Promise((resolve,reject)=>{ resolve() 成功 reject() 失敗 })
（3）毅糟、狀態(tài)：進行中 已成功 已失敗 (一旦固定就不會再改變)
1、 Promise.all() -- 用于將多個 Promise 實例澜公，包裝成一個新的 Promise 實例 兩個promise一起觸發(fā)
const url = "http://api.baxiaobu.com/index.php/home/v1/register"
const param = qs.stringify({
username:"1111",
pwd:"222"
})
const fn0 = () => axios.post(url,param)
const fn1 = () => axios.post(url,param)
const p0 = Promise.all([fn0(),fn1()])
p0.then(res=>console.log(res))
.catch()
2姆另、 async 和函數(shù)一起用 函數(shù)里需要異步方法前面加上 await
await 不止異步 任何值 兩個promise逐步觸發(fā)
const URL="https://blogs.zdldove.top/Home/Apis/listWithPage"
async function fn () {
const res0 = await axios.post(URL)
console.log(1);
const res1 = await axios.post(URL)
console.log(res0,res1);
}
fn()
3喇肋、async 原理
async === generator + 自動執(zhí)行器
function spawn (genF) {
return new Promise((resolve, reject) => {
const gen = genF()
function step (nextF) {
let next = nextF()
if(next.done) {
return resolve(next.value)}
Promise.resolve(next.value)
.then(v => {
step(() => gen.next(v))
})
}
step(() => gen.next(undefined))
})
}
ES6 解構(gòu)賦值
1、數(shù)組的解構(gòu)賦值
ES5:
var a = 1;
var b = 2;
ES6:
var [a,b] = [1,2]
以上模式匹配寫法
數(shù)組嵌套解構(gòu)
let [a,[[b],c]] = [1,[[2],3]];
a//1
b//2
c//3
let [arr,..brr] = [1,2,3,4];
arr//1
brr//[2,3,4]
如果解構(gòu)不成功迹辐，變量的值就是undefined
let [a] = [];
let [b,a] = [1];
// a就是undefined
Set解構(gòu)蝶防，也可以使用數(shù)組的解構(gòu)賦值
let [x,y,z] = new Set(["a","b","c"]);
x //a
2、對象解構(gòu)賦值
對象的解構(gòu)與數(shù)組的解構(gòu)有一個重要的不同明吩；數(shù)組的元素是按次序排列的间学，變量的取之由他的位置決定；而對象的屬性是沒有次序的印荔，變量必須與屬性同名低葫，才能取到正確的值
let {bar,foo} = {foo:"aaa",bar:"bbb"};
bar // bbb
foo //aaa
let {baz,foo} = {foo:"aaa",bar:"bbb"};
baz //屬性不同名是 undefined
3、數(shù)值和布爾值的解構(gòu)賦值
解構(gòu)賦值時仍律，若果右邊是數(shù)值或者布爾值嘿悬，則會先轉(zhuǎn)成對象
let {toString:s} = 123;
s === Number.prototype.toString //true
let {toString:s} = true;
s === Boolean.prototype.toString //true
//undefined和null無法轉(zhuǎn)為對象，所以對他們解構(gòu)賦值就會報錯
