1 数组方法集合

1.1 修改器方法

• 改变原来数组，会响应到dom

Array.copyWithin(target[, start[, end]]) 
// 在数组内部，将一段元素序列拷贝到另一段元素序列上，覆盖原有的值
//  target：插入位置 
//  start：拷贝开头 
//  end：拷贝结尾（不包括）
// 返回值：改变后的数组

Array.shift()
// 删除数组的第一个元素，并返回删除的元素

Array.pop()
// 删除数组的最后一个元素，并返回删除的元素

Array.unshift(item1, ..., itemN)
// 向数组的开头添加一个或多个元素，并返回数组新的长度

Array.push(item1, ..., itemN)
// 向数组的末尾添加一个或多个元素，并返回数组新的长度

Array.splice(target[, deleteCount[, item1[, item2[, ...]]]])
// 删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被删除的内容
//  target：插入位置
//  deleteCount：删除的元素数量
//  item1：增加元素

Array.reverse()
// 将数组中元素的位置颠倒，并返回该数组。

Array.sort()
// 对数组的元素进行排序，并返回数组

1.1.1 sort()方法初识

最基础的是针对数字排序

let Array = [2, 1, 3]
Array.sort((a, b) => a - b) // 升序
Array.sort((a, b) => b - a) // 降序

拓展：当我需要一列商品按照价格、销量等等排序，就可以用sort自带的算法来实现

let prodInfo = [
  { name: 'b', value: 2, sale: 5  },
  { name: 'a', value: 1, sale: 6  },
  { name: 'c', value: 3, sale: 4  }
]
// 按照价格升序排序，a b只是形参，代表数组内相互比较的数或对象
prodInfo.sort((a, b) => {
    const v1 = a.value   
    const v2 = b.value
    return v1 - v2
})

1.2 访问方法

• 不会改变原来数组，不会响应到dom

Array.concat(arr1[, arr2[, ...[, arrN]]])
// 用于连接两个或多个数组/值，并返回新数组

Array.slice([start[, end]])
// 从已有的数组中返回选定的元素，包括start不包括end，默认全部

Array.toString()
// toString() 方法可把数组转换为字符串，以逗号隔开，并返回改变后的字符串

Array.join('-')
// 将数组中的所有元素放入一个字符串，自定义分隔符

Array.includes(valueToFind[, fromIndex])
//  判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false

Array.indexOf(searchElement[, fromIndex])
// 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

Array.lastIndexOf()
// 返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1，
// 从右往左找，返回的索引还是从左往右数

• 改变现有的数组，但不会响应到dom

data () {
    return {
        arr: [1, 2, 3],
        obj: {a: 1, b: 2}
    }
},
arr[1] = 1
obj.a = 'e'

// data中定义的数据更改后是不会重新渲染页面的
// 这时候就需要this.$set(this.obj,'a',e) .这样可以解决不重新渲染的问题
// 相当于 触发了 splice() 函数

// this.$set <==> vue.prototype.$set 是绑定在 vue 原型上的方法
// 被实例化之后才能用this.$set，每个组件都是vue的实例

1.3 迭代方法

Array.forEach(callback(currentValue [, index [, array]]))  
// 为数组中的每个元素执行一次回调函数
// 返回值: undefined

Array.map(callback(currentValue[, index[, array]]){
    // return element in newArray
})  
// 返回一个新数组，由回调函数的返回值组成的
// 新数组的长度和原数组的长度一致

Array.filter(callback(element[, index[, array]]))  
// 返回一个新数组，其包含通过所提供函数实现的测试的所有元素

Array.findIndex(callback)  
// 返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1  

Array.find(callback)  
// 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined  

Array.keys()  
// 返回一个包含数组中每个索引键的Array Iterator对象

Array.entries()  
// 返回一个包含数组中每个索引的键/值对的Array Iterator对象
// 配合 for of 循环可以快速知道 key/value

1.3.1 forEach 和 map 方法的异同

相同点

• 构造：参数都为 (item, index, array)
• 功能：都是用来遍历数组；也可以对原数组进行操作（但不推荐）
• 运行：遍历整个数组，不能中断

不同点

• 返回值：
  • forEach 返回的是 undefined，且不能链式调用
  • map 返回的是新数组，可以链式调用其他方法
• 功能：都是用来遍历数组
• 运行：遍历整个数组，不能中断

总结

• forEach 可以做到的东西，map 也同样可以。反过来也是如此
• forEach 更适合想用数据做一些事情 – 比如存入数据库或打印出来
• map 更适合快速生成一个新的数组，可以链式调用