ES6数组map、forEach、fill和includes原型方法

实际开发过程中，这四个原型方法用的比较多，记录一下。

一、map()

MDN上对map()的描述是：针对数组中的每个元素，依次调用回调函数，并返回根据回调函数执行的结果构成的新数组。

map()方法的第二个参数的第一个参数是回调函数callback(currentValue, index, arr)，它的参数分别是当前元素值，当前元素的索引， 以及当前数组。map()方法的第二个参数是绑定回调函数执行时的对象，默认为全局对象。

比较特殊的是，它只访问有“值”的元素，包括undefined，但是若index处未定义的元素，则不会访问。实际应用中，经常使用这个方法获得对原始数据处理后的数组，比如在vue的计算属性中:

data () {
    return {
        oldArray: [a, b, c]
    }
},

computed: {
    newArray () {
        return this.oldArray.map((item, index) => {
            // 处理数据
        })
    }
}

二、forEach()

MDN上对forEach()的描述是：根据索引升序依次访问数组元素，并将数组元素传给回调函数执行。它的参数和map()一样，不赘述。

值得注意的是若为空数组或者元素为空值，回调函数会跳过，就好像这样：

const arraySparse = [1,3,,7]
let numCallbackRuns = 0

arraySparse.forEach(element) => {
  console.log(element)
  numCallbackRuns++
})

console.log("numCallbackRuns: ", numCallbackRuns)

// 1
// 3
// 7
// numCallbackRuns: 3

这个方法常用于遍历数组元素，然后根据元素进行一些比对或者计数操作。

三、includes()

includes()描述是：如果数组中存在查找的值，则返回true，否则返回false。和findIndex和indexOf以及find一样，都是“查找”类型的原型方法，当我们不关注index的时候，只关注是否存在时，它会更加直观。

也正是它对“存在”的关注度更高，所以在某些情况下使用它，会使得代码看上去更加简洁明了，比如：

// 多重判断，看上去很冗余
if (this.value === 'value1' || value === 'value2' || value === 'value3') {
    //...
}

// 使用includes一下，更加优雅
if (['value1', 'value2', 'value3'].includes(this.value)) {
    // ...
}

四、fill()

fill()的描述是：给数组从start位置到end位置填充value，并返回修改后的数组。

这个方法一般用于数组初始化赋值的时候，比如：

let arr1 = new Array(5).fill(1)
let arr2 = new Array(5).fill('1')
let arr3 = new Array(5).fill(true)
let arr4 = new Array(5).fill({}) // 特别注意

如果赋值为基本类型：Number、Boolean、String、undefined、null，那么不会踩到坑。如果是引用类型：Object、Function，那么就容易采坑了。

fill()方法所赋的值是可变的，基本类型的数据就在栈区具有不可变性，所以重新赋值就会在新的栈区生成数据，而引用对象在栈区的只是一个指向真实存放数据的堆区的指针，所以它改变的是所有的值。比如：