ES6中最容易混淆的API

475 阅读2分钟

我认为ES6中最容易淆API是数组扩展的5个方法:

forEach|filter|every|some|map

如果你已经用了几年就不要难为小弟了,但如果你是新人,刚学的话,那肯定会出现不记得怎么用,应该用哪个的场景。下面我们来驴驴!!

规律论

数组每个方法只需要关注四个点:

  1. 数组方法的参数(arrParam)
  2. 回调函数的参数(cbParam)
  3. 回调函数的返回值(cbReturn)
  4. 数组方法的返回值(arrReturn)

举个栗子

var arr = ['🌰', '🍹', '🍑'];
var arrReturn = arr.map(function(cbParam){
    return cbReturn;
},arrParam)

1. 数组方法的参数(arrParam)

数组五个方法都有两个参数,第两个参数不常用,是指定数组回调函数内的this对象,箭头函数失效

因为箭头函数是指向父作用域的this对象

举个栗子

箭头函数

//箭头函数
var arr = ['🌰'];
this.foo = '🍹';
arr.forEach(() => {
    console.log(this) // { foo: '🍹' }
})
arr.forEach(() => {
    console.log(this) // { foo: '🍹' }
}, {bar: '🍑'})

匿名函数

var arr = ['🌰'];
this.foo = '🍹';
arr.forEach(function () {
    console.log(this)//全局对象,浏览器中是windows
})
arr.forEach(function () {
    console.log(this)//{ bar: '🍑' }
}, {bar: '🍑'})

2. 回调函数的参数(cbParam)

这题直接送分,五个方法所有参数都一样

callbackfn(value: T, index: number, array: T[])
  • 参数1:数组遍历的每个值

  • 参数2:遍历值的索引号

  • 参数3:数组对象

举个栗子

var arr = ['🌰', '🍹', '🍑'];
arr.forEach((item, index, arr2) => {
    console.log(item)           //🌰 🍹 🍑
    console.log(index)          //0 1 2
    console.log(arr === arr2)   //true true true
})

3. 回调函数的返回值(cbReturn)和数组方法返回值(arrReturn)

这是混淆的起因和结果,不同方法函数内部的返回值不同,数组方法的返回值也不同。

举个栗子

3.1 forEach方法

最好记的一个方法,函数内部和数组方法都无返回值,纯遍历作用

请大圣老师吃栗子,桃,果汁

//(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
var arr = ['🌰', '🍹', '🍑'];
var arrReturn = arr.forEach((item) => {
    console.log(item) // '🌰', '🍹', '🍑'
    return item;
})
console.log(arrReturn); //undefined

3.2 map方法

map方法返回一个新的数组,该数组由函数返回值生成。

大圣老师吃完后的表情

//(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[]
var arr = ['🌰', '🍹', '🍑'];
var arrReturn = arr.map((item) => {
    switch (item) {
        case '🌰':
            return '😂';
        case '🍹':
            return '😎';
        case '🍑':
            return '😁';
    }
})
console.log(arrReturn); // [ '😂', '😎', '😁' ]

3.3 every方法和some方法

这两个方法都有布尔特性,常用来做为条件表达式

数组方法返回值和回调函数返回值都是布尔值

every遍历回调函数每个都返回true,则数组方法返回值为true(类似逻辑运算符&&)

some遍历回调函数每个都返回false,则数组方法返回值为false(类似逻辑运算符||)

大圣老师说:“只要吃的里面有🍑我就喜欢”

//(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean;
var arr = ['🌰', '🍹', '🍑'];
var arrReturn = arr.some((item) => {
    if(item=='🍑')
        return true; //false false true
})
console.log(arrReturn); // true
if(arr.some(item=>item=='🍑')){
    console.log('只要有🍑我就喜欢')
}

大圣老师饿的时候说:“我要🍑,我要🍑,我要🍑”

var arr = ['🌰', '🍹', '🍑'];
var arrReturn = arr.every((item) => {
    if(item=='🍑')
        return true;//false false true
})
console.log(arrReturn); // false
if(arr.every(item=>item=='🍑')){
    console.log('全是🍑,Nice!')
}else{
    console.log('哼,必须全部是🍑')
}

不管你是get到了还是乐到了,只给愚公一个小星星,爱你们哟!!摸摸哒