JS算法必备之Array常用操作方法

MDN参考文档： Array - JavaScript | MDN

①数组创建的基本方式有两种：

• 使用Array构造函数

var colors= new Array();

var colors= new Array(20); //传递数组长度，该数会自动变成length属性的值

var colors= new Array("red","blue","green");

var colors=new Array(3); //创建包含3项的数组

var names=new Array("Curry"); //创建包含1项，即字符串"Curry"的数组

var names=new Array(5).fill(0) // [0, 0, 0, 0, 0]

创建数组可以省略new操作符

var colors=Array(3); //创建包含3项的数组

var names=Array("Curry"); //创建包含1项，即字符串"Curry"的数组

• 数组字面量表示法：由一对包含数组项的方括号表示，多个数组项之间以逗号隔开。

var colors=["red","blue","green"]; //创建一个包含3项的数组

var names=[];  //创建一个空数组

var values=[1 , 2 ,];  //不要这样！在最后一项添加逗号，会创建一个包含2或3项的数组

var options=[, , , , ,]; //不要这样！因为会创建一个包含5或6项的数组

②数组检测

var colors = [ 'red', 'blue', 'green']

ECMAScript5新增Array.isArray()方法，目的是最终确定某个值到底是不是数组：

if (Array.isArray(colors)) {

        // 对数组执行某些操作

}

③数组转换

var colors = ['red', 'blue', 'green']

console.log(colors.toString()) // 'red,blue,green'，返回数组中每个值的字符串形式拼接成的以逗号分隔的字符串。

console.log(colors.valueOf()) // [ 'red', 'blue', 'green']，返回的是数组本身

数组继承的toLocalString()、toString()和valueOf()方法，在默认情况下，都会以逗号分隔的字符串形式返回数组项。

而使用join()方法，可以使用不同的分隔符来构建这个字符串。

join()方法只接收一个参数：用作分隔符的字符串

console.log(colors.join(',')) // red,green,blue

console.log(colors.join('')) // redgreenblue

console.log(colors.join('||')) // red||green||blue

若不给join()方法传递任何值，或者给它传入undefined，则使用逗号作为分隔符。

④数组的栈方法（LIFO，Last-In-First-Out，后进先出的数据结构）

栈的插入和移除，只发生在栈的顶部。

1.push()：可以接收任意数量的参数，将其逐个添加到数组末尾，并返回修改后数组的长度

2.pop()：从数组末尾移除最后一项，减少数组的length，返回移除的项

var colors = new Array() // create an array

var count = colors.push('red', 'green') //插入两项

console.log(count) // 2

count = colors.push('black') // 插入另一项

console.log(count) // 3

var item = colors.pop() // 取得最后一项

console.log(item) // 'black'

⑤数组的队列方法（FIFO，First-In-First-Out，先进先出的数据结构）

队列在列表的末端添加项，从列表的前端移除项。可以使用以下两种组合，像使用队列一样使用数组：

1.shift()：移除数组中的第一项并返回该项，同时数组length减1

var colors = [ 'red', 'blue', 'green']

var item = colors.shift() // 取得第一项

console.log(item) // 'red'

console.log(colors.length) // 2

2.unshift()：在数组前端添加任意个项并返回新数组的长度

var colors = new Array() // create an array

var count = colors.unshift("red", "green") // 插入两项

console.log(count);  // 2

⑥数组排序方法

1.reverse()：翻转数组

var values = [1,2,3,4,5]

console.log(values.reverse()) // [5, 4, 3, 2, 1]，翻转数组的顺序

2.sort()：对数组进行排序

默认情况下，sort()方法按升序排列数组项——即最小的值位于最前面。为了实现排序，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，即使数组项是数值，sort()方法比较的也是字符串

var values = [0, 1, 15, 5, 10]

console.log(values.sort()) // 0,1,10,15,5  默认进行字符串比较，所有10和15都在5的前面

若想通过sort()得到降序或者升序，可以传递一个比较函数

console.log(values.sort((a, b) => a - b))

function compare (a, b) {

        return a - b // 升序

        return b - a // 降序

}

function compare (a, b) {  // 升序

        if ( a < b) {

                return -1

        } else if (a > b) {

                return 1

        } else {

                0

}

function compare (a, b) {  // 降序

        if (a < b) {

                return 1

        } else if (a > b) {

                return -1

        } else {

                0

        }

}

⑦数组操作方法

1.concat()：基于当前数组中的所有项创建一个新数组

• 在没有传参时，它只是复制当前数组并返回副本
• 如果传递的是1个或多个数组，则会将这些数组中的每一项都添加到结果数组中
• 如果传递的值不是数组，这些值就会被简单地添加到结果数组的末尾

var colors = ['red', 'green', 'blue']

var colors2 = colors.concat('yellow', ['black', 'brown'])

console.log('colors2:', colors2) // ['red', 'green', 'blue', 'yellow', 'black', 'brown']

2.slice()：不改变原数组，返回一个新的数组，包含从 start 到 end （不包括该元素）的 元素

slice() 方法可从已有的数组中返回选定的元素。

slice()方法可提取字符串的某2个部分，并以新的字符串返回被提取的部分。

注意： slice() 方法不会改变原始数组。

语法：array.slice(start, end)

参数	描述
start	可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

• 只有一个参数时：返回从该参数指定位置开始到当前数组末尾的所有项。
• 有两个参数时：返回起始和结束位置之间的项，不包括结束位置的项。

var nums = [1, 2, 3, 4, 5]

var nums1 = nums.slice(1) // 2, 3, 4, 5

var nums2 = nums.slice(1, 4) // 2, 3, 4

3.splice()：算是最强大的数组方法，主要用途是向数组的中部插入项。

• 删除任意数量的项，2个参数

splice(0,2); // 0：要删除的第一项位置；2：要删除的项数

• 插入指定位置任意数量的项，3个参数

splice(2, 0, 'red', 'green') // 2：起始位置；0：要删除的项数；要插入的项

• 替换，向指定位置插入任意数量的项，同时删除任意数量的项，3个参数

splice(2, 1, 'red', 'green') // 2：起始位置；1：要删除的项数；要插入的任意数量的项

splice()方法会改变原数组，同时返回一个数组，包含从原始数组中删除的项，若未删除，则返回一个空数组。

var colors = ['red', 'green', 'blue']

var removed = colors.splice(0,1) // 删除第一项

alert(colors) // ['green, blue']

alert(removed) // ['red']，返回数组中只包含一项

4.flat()：参数默认值为1，按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

var nums = [1, 2, [3, [4]], 5]

console.log(nums.flat(0)) // [1, 2, [3, [4]], 5]

console.log(nums.flat(1)) // [1, 2, 3, [4], 5]

console.log(nums.flat(2)) // [1, 2, 3, 4, 5]

⑧数组位置方法

indexOf()和lastIndexOf()均接收两个参数：

Ⅰ.要查找的项

Ⅱ.（可选）表示查找起点位置的索引

两个方法查找成功都返回该项在数组中的位置，没找到时返回-1

1.indexOf()：从数组的开头(位置0)开始向后查找

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]

console.log(numbers.indexOf(4)) // 3

console.log(numbers.indexOf(4, 4)) // 5

2.lastIndexOf()：从数组的末尾开始向前查找

console.log(numbers.lastIndexOf(4)) // 5

console.log(numbers.lastIndexOf(4, 4)) // 3

3.at()：方法接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。

var nums = [1, 2, 3, 4, 5]

console.log(nums.at(0)) // 1

console.log(nums.at(1)) // 2

console.log(nums.at(-1)) // 5

⑨数组归并方法

ECMAScript5新增了两个归并数组的方法：reduce()和reduceRight()

这两个方法都接收两个参数：

Ⅰ.在每一项上调用的函数。

Ⅱ.（可选）作为归并基础的初始值。

传给这两个方法的函数接收4个参数：

Ⅰ.acc累计器（累计回调的返回值，是上一次调用回调时返回的累积值）

Ⅱ.cur当前值

Ⅲ.index当前值的索引

Ⅳ.array数组对象

1.reduce()：从数组第一项开始，逐个遍历到最后

方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数	描述
function(total,currentValue, index,arr)	必需。用于执行每个数组元素的函数。 函数参数: 参数 描述 total 必需。初始值, 或者计算结束后的返回值。 currentValue 必需。当前元素 currentIndex 可选。当前元素的索引 arr 可选。当前元素所属的数组对象。
initialValue	可选。传递给函数的初始值

• 直接对数组值进行累加

var nums = [1, 2, 3, 4, 5]

var result = nums.reduce((a, b) => a + b, 10) // 10为初始值

console.log('result:', result) // 累加结果：16

var sum = nums.reduce((pre, cur) => {

      return pre + cur

}, 10) // 10为初始值

console.log(sum) // 25

• 对数组值先进行四舍五入，然后再进行累加

var nums = [1.1, 2.2, 3.3, 4.4, 5.5]

var result = nums.reduce((a, b) => a + Math.round(b), 0.5)

console.log('result:', result) // 此时0.5作为初始累加结果，数组所有项四舍五入累加，最终结果为：16.5

2.reduceRight()：从数组的最后一项开始，向前遍历到第一项

⑩数组迭代方法

传入这些方法中的函数均会接收3个参数：

Ⅰ.item（必须）：数组项的值

Ⅱ.index（可选）：该项在数组中的位置

Ⅲ.array（可选）：数组对象本身

var typeKey = [0, 1, 2, 3, '']

1.filter()：返回该函数会返回true的项组成的数组（常用于过滤空数组项）

typeKey= typeKey.filter(item => {

                return item !== ''

        })

console.log('typeKey:', typeKey) // [0, 1, 2, 3]

2.forEach()：对数组每一项执行一遍回调函数（没有返回值）

typeKey.forEach(item => {

        if (item) {

                console.log(item)

        }

})

3.map()：返回每次函数调用的结果组成的数组（常用于处理数组项）

map() 方法：

1.返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

2.按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

var result = typeKey.map(item => {

        if (item) {

                return 1

        } else {

                return 0

        }

})

console.log('result:', result) // [0, 1, 1, 1, 0]

按条件删除数组某些的对象中的某些字段

this.types.map(item => {

        if (item.value === '2') {

                return delete item.value

        } else {

                return item

        }

})

console.log('types:', this.types)

4.every()：用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

语法：array.every(function(currentValue,index,arr), thisValue)

var result = typeKey.every((item, index, array) => {

                return item>2

        }) // 数组所有项均大于2，即都返回true，则最后返回true

var result = typeKey.every(item => item > 2)

console.log('result:', result) // false

5.some()：用于检测数组中的元素是否满足指定条件（函数提供）

some() 方法会依次执行数组的每个元素：

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

语法：array.some(function(currentValue,index,arr),thisValue)

var result = typeKey.some((item, index, array) => {

                return item>2

        }) // 数组存在大于2的项，则最后返回true

var result = typeKey.some(item => item > 2)

console.log('result:', result) // true

6.find()：返回通过测试（函数内判断）的数组的第一个元素

find() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 undefined

注意: find() 对于空数组，函数是不会执行的。

注意: find() 并没有改变数组的原始值。

语法：array.find(function(currentValue, index, arr),thisValue)

var types = [

        {

                name: '单选题',

                value: 1

        },

        {

                name: '多选题',

                value: 2

        },

        {

                name: '判断题',

                value: 3

        }

]

var result = types.find(item => item.value === 3)

console.log('result:', result)

7.findIndex()：返回传入一个测试条件（函数）符合条件的数组第一个元素的位置索引。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组，函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

语法：array.findIndex(function(currentValue, index, arr), thisValue)

var types = [

        {

                name: '单选题',

                value: 1

        },

        {

                name: '多选题',

                value: 2

        },

        {

                name: '判断题',

                value: 3

        }

]

var result = types.findIndex(item => item.value === 3)

console.log('result:', result) // 索引：2

8.for…，for…of和for…in

var nums = [1, 2, 3, 4]

for (let i = 0; i < str.length; i++) {

      console.log(str[i]) // 字符串每项的值

}

for (const n of nums) {

      console.log('item:', n) // 数组每项的值

}

for (const i in nums) {

      console.log('index:', 'i) // 数组每项的索引下标（string类型）

}

⑪includes()：用来判断一个数组是否包含一个指定的值（或者判断字符串是否包含指定的子字符串），如果是返回 true，否则false

var nums = [1, 2, 3]

nums.includes(2) // true

num.includes(4) // false

var site = ['runoob', 'google', 'taobao']

site.includes('runoob') // true

site.includes('baidu') // false