JavaScript之Array方法与迭代器

熟练掌握JS中Array常用方法、迭代器是必要的，本文从常用方法及使用场景进行举例和分析。

导读

带新人的时候，有时候发现他们对Array原生方法并不熟悉，不知道原生提供的哪些，以至于编程时无法灵活使用。有的在用到Array时会google后查一下，恰巧没有搜索到自己想要的知识点后，就噼里啪啦敲起代码，用自己用最熟悉的for循环(迭代器他们一般也是只用for、map)去实现reverse、splice这些方法。

环境

MacOS v10.14.3
Node.js v10.15.2
Chrome

场景一：对原数组进行操作

splice:对原数组中间部分进行增加和删除

代码示例:

// splice(startIndex, count)
//  与slice类似，但会返回一个截取的子集所创建的新数组
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var newArr1 = arr1.splice(2, 2)
console.log("arr1:", arr1)
// arr1: [ 1, 2, 5, 6, 7, 8, 9 ]
console.log("newArr1:", newArr1)
// newArr1: [ 3, 4 ]

// splice(startIndex, deleteCount,item...)
var arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var newArr2 = arr2.splice(2, 2, 'a', 'b', 'c')
console.log("arr2:", arr2)
// arr2: [ 1, 2, 'a', 'b', 'c', 5, 6, 7, 8, 9 ]
console.log("newArr2:", newArr2)
// newArr2: [ 3, 4 ]

对原数组首末进行增加和删除（shift、unshift、push、pop）

代码示例:

// shift和pop
var arr1 = [1,2,3,4,5,6]
var newArr1 = arr1.shift()
console.log('arr1:', arr1) // arr1: [ 2, 3, 4, 5, 6 ]
console.log('newArr1:', newArr1) // newArr1: 1

var arr2 = [1,2,3,4,5,6]
var newArr2 = arr2.pop()
console.log('arr2:', arr2) //arr2: [ 1, 2, 3, 4, 5 ]
console.log('newArr2:', newArr2) // newArr2: 6

// unshift和push
var arr3 = [1,2,3,4,5,6]
var newArr3 = arr3.push(100)
console.log('arr3:', arr3) // arr3: [ 1, 2, 3, 4, 5, 6, 100 ]
console.log('newArr3:', newArr3) // newArr3: 7

var arr4 = [1,2,3,4,5,6]
var newArr4 = arr4.unshift(100)
console.log('arr4:', arr4) // arr4: [ 100, 1, 2, 3, 4, 5, 6 ]
console.log('newArr4:', newArr4) // newArr4: 7

场景二：遍历数组(map，filter, every，some，reduce，reduceRight)

map，filter：生成新数组

代码示例:

// filter传入一个返回值为布尔类型的函数,返回一个函数返回值都为true的新数组
var arr1 = [1, 2, 3, 4, 5]
function isEvenNumver(x) {
    return x % 2 == 0 ? true : false
}

var newArr1 = arr1.filter(isEvenNumver)
console.log('arr1.filter(isEvenNumver)', newArr1)

// map,返回一个函数处理过了的新数组
var arr2 = [1, 2, 3, 4, 5]
function double(x) {
    return x * 2
}
var newArr2 = arr2.map(double)
console.log('newArr2:', newArr2) // newArr2: [ 2, 4, 6, 8, 10 ]

forEach、reduce、reduceRight、every、some：不生成新数组

代码示例:

// foreach
var arr = [1, 2, 3, 4, 5]
function addOne(x) {
    console.log(x + 1)
}
arr.forEach(addOne)

// reduce
// array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
var arr = [1, 2, 3, 4, 5]
function cheng(total, currentValue) {
    console.log(total, currentValue)//1 2,2 3,6 4,24 5
    return total * currentValue
}
console.log('arr.reduce(cheng):', arr.reduce(cheng))//arr.reduce(cheng): 120

// reduceRight与reduce作用一致，从最后一个元素开始运行
var arr = [1, 2, 3, 4, 5]
function cheng(value, item) {
    console.log(value, item)//5 4,20 3, 60 2,120 1
    return value * item
}
console.log('arr.reduce(cheng):', arr.reduceRight(cheng))//arr.reduce(cheng): 120

// every
var arr4 = [1,2,3,4,5,6,7]
function lessThree(x){
    return x<3
}
console.log('arr4.every(lessThree):',arr4.every(lessThree))// false

// some
var arr4 = [1,2,3,4,5,6,7]
function lessThree(x){
    return x<3
}
console.log('arr4.some(lessThree):',arr4.some(lessThree))// true

场景三：字符串与数组相互转换（join、split、toString）

代码示例:

//构造一个大数组
var arr = []
for (var i = 0; i < 500; i++) {
    arr.push(i)
}
// join
//array.join(separator),default separator char ,
var begin, end, newArray, result
begin = new Date()
result = arr.join('-')
// console.log('arr.join:', result)
end = new Date()
console.log('消耗时间(ms)：', end - begin)

// 运算符+
newArray = ''
begin = new Date()
for (var i = 0; i < arr.length; i++) {
    newArray = newArray + '-' + arr[i]
}
//  console.log('operator +: ', newArray)
end = new Date()
console.log('消耗时间(ms)：', end - begin)

//split
var str = 'a-b-c-d'
console.log('str.split("-"):',str.split('-')) //[ 'a', 'b', 'c', 'd' ]

场景四：不改变原数组，生成新数组（concat、slice）

concat:

生成一个新数组，新数组包含原来数组的浅拷贝，然后加上参数。

slice:

生成一个新数组，新数组是从原来数组中切片，不改变原数组。

代码示例:

var arr1 = [{ id: 1, value: 100 }, 2, 3, 4, 5]
var arr2 = ['a', 'b', 'c']
console.log('arr1:', arr1)
console.log('arr2:', arr2)
// arr1: [ { id: 1, value: 100 }, 2, 3, 4, 5 ]
// arr2: [ 'a', 'b', 'c' ]

console.log('arr1.concat(arr2):', arr1.concat(arr2))
// arr1.concat(arr2): [ { id: 1, value: 100 }, 2, 3, 4, 5, 'a', 'b', 'c' ]
console.log('arr2.concat(arr1):', arr2.concat(arr1))
// arr2.concat(arr1): [ 'a', 'b', 'c', { id: 1, value: 100 }, 2, 3, 4, 5 ]

var newArr = arr1.concat(arr2)
// 注意是浅拷贝
newArr[0].value = '500'
console.log('newArr:', newArr)
console.log('arr1:', arr1)
// newArr: [ { id: 1, value: '500' }, 2, 3, 4, 5, 'a', 'b', 'c' ]
// arr1: [ { id: 1, value: '500' }, 2, 3, 4, 5 ]

// slice(start,end)
var arr3 = [1,2,3,4,5]
console.log('arr3.slice(2,3):',arr3.slice(2,3))

场景五：数组排序及倒序(sort、reverse)

代码示例:

var nums = [1, 2, 3, 4, 5];
nums.reverse();
console.log(nums); // 5,4,3,2,1

var arr1 = [1, 2, 100, 200]
arr1.sort() // 默认字符串，整型都会按字符排序
console.log('arr1', arr1)// [ 1, 100, 2, 200 ]

var arr2 = [1, 2, 100, 200]
arr2.sort((a, b) => a - b)
console.log('arr2', arr2)// [ 1, 2, 100, 200 ]

总结

很多小伙伴遇到splice、slice就分不清楚，从没用过shift、unshift，遍历数组总是for、map等等。本文根据数组的使用场景进行了总结，希望能有所帮助。