JavaScript数组常用方法
创建数组
1. 使用字面量创建
// 创建一个空数组
var arr = []
// 创建有内容的数组
var arr1 = ["Apple","Banana","Grape","Lemon","Mango","Orange"]
2. 内置构造函数创建数组
// 创建一个空数组
var arr1 = new Array()
// 创建一个长度为 10 的数组
var arr2 = new Array(10)
// 创建一个有内容的数组
var arr3 = new Array(1, 2, 3)
数组常用方法之 Array.isArray
// 判断arr是否是数组
var arr = ["Apple","Banana","Grape","Lemon","Mango","Orange"]
var obj = {}
console.log(Array.isArray(arr)) // true
console.log(Array.isArray(obj)) // false
数组常用方法之 push
作用：向数组的最后增加元素
语法：数组.push (要增加的元素1, 要增加的元素2, ...)
返回值：改变以后的数组的长度
改变的是原数组
var arr = ["Apple","Banana","Grape"]
// 使用 push 方法追加一个元素在末尾
arr.push("Orange")
console.log(arr) // ["Apple", "Banana", "Grape", "Orange"]
数组常用方法之 pop
作用：删除数组的最后一个元素
语法：数组.pop()
返回值：被删除的那个元素
改变的是原数组
var arr = ["Apple","Banana","Grape"]
// 使用 pop 方法删除末尾的一个元素
arr.pop()
console.log(arr) // ["Apple", "Banana"]
数组常用方法之 unshift
作用：向数组的最前面增加元素
语法：数组.unshift(要增加的元素1, 要增加的元素2, ...)
返回值：改变以后的数组的长度
改变的是原数组
var arr = ["Apple","Banana","Grape"]
// 使用 unshift 方法想数组的最前面添加一个元素
arr.unshift("Orange")
console.log(arr) // ["Orange", "Apple", "Banana", "Grape"]
数组常用方法之 shift
作用：删除数组的最前面一个元素
语法：数组.shift()
返回值：被删除的那个元素
改变的是原数组
var arr = ["Orange", "Apple", "Banana", "Grape"]
// 使用 shift 方法删除数组最前面的一个元素
arr.shift()
console.log(arr) // ["Apple","Banana","Grape"]
数组常用方法之 splice
作用：从指定索引开始删除n个元素，并替换成其他元素
语法：数组.splice (开始删除的索引，删除的元素个数[, 被替换成的元素1, 被替换成的元素2, ... ])
返回值：被删除的元素集合，即使只有一个要放在一个数组里面
改变的是原数组
/*
语法：
arr.splice(start[, deleteCount, elem1, ..., elemN])
splice(从哪一个索引位置开始，截取多少个，替换的新元素)
*/
第三个参数可以不写
var arr = ["Apple","Banana","Grape","Lemon","Mango","Orange"]
// 使用 splice 方法截取数组
arr.splice(1, 2)
// 表示从索引 1 开始截取 2 个内容，第三个参数没有写，就是没有新内容替换掉截取位置
console.log(arr) // ["Apple", "Lemon", "Mango", "Orange"]
第三个参数
var arr = ["Apple","Banana","Grape","Lemon","Mango","Orange"]
// 使用 splice 方法截取数组
arr.splice(1, 2, '新内容')
// 表示从索引 1 开始截取 2 个内容， 然后用第三个参数把截取完空出来的位置填充
console.log(arr) // ["Apple", "新内容", "Lemon", "Mango", "Orange"]
数组常用方法之 reverse
作用：反转数组
语法：数组.reverse()
返回值：原数组
改变的是原数组
var arr = ["Apple","Banana","Grape","Lemon","Mango","Orange"]
// 使用 reverse 方法来反转数组
arr.reverse()
console.log(arr) // [ "Orange", "Mango", "Lemon", "Grape", "Banana","Apple"]
数组常用方法之 sort
作用：数组排序
语法：数组.sort()
返回值：排序后的数组
改变的是原数组
// 使用 sort 方法给数组排序
var arr = [12, 36, 2, 4]
arr.sort()
console.log(arr) // [12, 2, 36, 4]
上述排序结果， 排了，但未完全排 这些元素默认情况下被按字符串进行排序
function compareNumeric(a, b) {
if (a > b) return 1; // 如果第一个值比第二个值大
if (a == b) return 0; // 如果两个值相等
if (a < b) return -1; // 如果第一个值比第二个值小
}
let arr = [12, 36, 2, 4];
arr.sort(compareNumeric);
alert(arr); // [2, 4, 12, 36]
数组常用方法之 concat
作用：拼接多个数组
语法：数组1.concat(数组2, 数组3, ...)
返回值：拼接好的新数组
不改变原数组，产生一个新数组
concat 不会改变原始数组，而是返回一个新的数组
var arr = ["Apple","Banana","Grape"]
// 使用 concat 方法拼接数组
var newArr = arr.concat(["Lemon","Mango","Orange"])
console.log(arr) // ["Apple","Banana","Grape"]
console.log(newArr) // ["Apple","Banana","Grape","Lemon","Mango","Orange"]
数组常用方法之 join
作用：把数组里面的内容链接在一起变成一个字符串
语法：数组.join([ "连接符" ])
不写连接符默认是逗号
返回值：拼接好的字符串
join 方法不会改变原始数组，而是返回链接好的字符串
var arr = ["Apple","Banana","Grape"]
// 使用 join 链接数组
var str = arr.join('-')
console.log(arr) // ["Apple","Banana","Grape"]
console.log(str) // Apple-Banana-Grape
数组常用方法之 slice
作用：将所有从索引start到end（不包括end）的数组项复制到一个新的数组
语法：数组.slice([start], [end])
返回值：返回一个新数组
slice 不会改变原始数组，而是返回一个新的数组
let arr = ["Apple","Banana","Grape","Lemon","Mango","Orange"]
// 复制从位置 1 到位置 3 的元素
arr.slice(1, 3)
// 复制从位置 -2 到尾端的元素
arr.slice(-2)
console.log(arr.slice(1, 3)) // ["Banana", "Grape"]
console.log(arr.slice(-2)) // ["Mango", "Orange"]
console.log(arr) // ["Apple","Banana","Grape","Lemon","Mango","Orange"]
数组常用方法之 indexOf
作用：从索引from开始搜索item，如果找到则返回索引，否则返回 -1
语法：arr.indexOf(item, from)
注意：如果找到该数据，立即返回该数据的索引，不再往后继续查找
let arr = ["Apple","Banana","Grape","Lemon","Apple","Orange"]
console.log(arr.indexOf("Apple")) // 0
console.log(arr.indexOf("Apple",3)) // 4
console.log(arr.indexOf("Apple",5)) // -1
console.log(arr.indexOf("Apple",-1)) // -1
数组常用方法之 lastIndexOf
和indexOf相同，只是从右向左搜索
let arr = ["Apple","Banana","Grape","Lemon","Apple","Orange"]
console.log(arr.indexOf("Apple")) // 0
console.log(arr.indexOf("Apple",3)) // 4
console.log(arr.indexOf("Apple",5)) // -1
console.log(arr.indexOf("Apple",-2)) // 4
数组常用方法之 includes
作用：从索引from开始搜索item，如果找到则返回true（译注：如果没找到，则返回false）
语法：arr.includes(item, from)
返回值：布尔值
let arr = ["Apple","Banana","Grape","Lemon","Apple"]
console.log(arr.includes("Apple")) // true
console.log(arr.includes("Orange")) // false
数组常用方法之 find
语法：
// 依次对数组中的每个元素调用该函数：
let result = arr.find(function(item, index, array) {
// 如果返回 true，则返回 item 并停止迭代
// 对于假值（false）的情况，则返回 undefined
});
参数：item是元素，index是它的索引，array是数组本身。
返回值：如果为true，则搜索停止，并返回item。如果没有搜索到，则返回undefined``
let fruits = [
{id: 1, name: "Apple" },
{id: 2, name: "Banana" },
{id: 3, name: "Grape" }
]
let fruit = fruits.find(item => item.id !== 1)
let fruit1 = fruits.find(item => item.id === 4)
console.log(fruit) // {"id": 2, "name": "Banana"}
console.log(fruit1) // undefined
数组常用方法之 findIndex
与arr.find方法基本一致，但它返回找到元素的索引，而不是元素本身。未找到任何内容时返回-1
let fruits = [
{id: 1, name: "Apple" },
{id: 2, name: "Banana" },
{id: 3, name: "Grape" }
]
let fruit = fruits.findIndex(item => item.id !== 1)
let fruit1 = fruits.findIndex(item => item.id === 4)
console.log(fruit) // 1
console.log(fruit1) // -1
数组常用方法之 filter
find方法搜索的是使函数返回true的第一个（单个）元素。
filter与find大致相同，但是filter返回的是所有匹配元素组成的数组
语法：
let results = fruits.filter(function(item, index, array) {
// 如果 true， item 被 push 到 results，迭代继续
// 如果什么都没找到，则返回空数组
});
let fruits = [
{id: 1, name: "Apple" },
{id: 2, name: "Banana" },
{id: 3, name: "Grape" }
]
let newArr = fruits.filter(item => item.id !== 3)
console.log(newArr) // [{ "id": 1, "name": "Apple" },{ "id": 2, "name": "Banana" }]
数组常用方法之 map
作用： map方法创建一个新数组，其结果是该数组中的每个元素调用一次提供函数后的返回值
语法：
let result = arr.map(function(item, index, array) {
// 返回新值而不是当前元素
})
let fruits = [
{ id: 1, name: "Apple" },
{ id: 2, name: "Banana" },
{ id: 3, name: "Grape" }
]
const newArr = fruits.map(item => {
return "hello " + item.name
})
console.log(newArr) //["hello Apple", "hello Banana", "hello Grape"]
数组常用方法之 forEach
作用：对数组的每个元素执行一次给定的函数，遍历数组，没有返回值
语法：
arr.forEach(function(item, index, array) {
// ... do something with item
});
let fruits = [
{ id: 1, name: "Apple" },
{ id: 2, name: "Banana" },
{ id: 3, name: "Grape" }
]
const newArr = fruits.forEach(item => {
console.log("hello " + item.name);
return "hello " + item.name
})
console.log(newArr)// undefined
// hello Apple
// hello Banana
// hello Grape
数组常用方法之 reduce
语法：
let value = arr.reduce(function(accumulator, item, index, array) {
// ...
}, [initial]);
// 参数
`accumulator` 是上一个函数调用的结果，第一次等于 `initial`（如果提供了 `initial`）。
`item` 当前的数组元素。
`index` 当前索引。
`arr` 数组本身
作用：
应用函数时，上一个函数调用的结果将作为第一个参数传递给下一个函数。
因此，第一个参数本质上是累加器，用于存储所有先前执行的组合结果。最后，它成为 reduce 的结果
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((sum, current) => sum + current, 0);
console.log(result); // 15
执行过程：
1. 在第一次运行时，`sum` 的值为初始值 `initial`（`reduce` 的最后一个参数），等于 0，`current` 是第一个数组元素，等于 `1`。所以函数运行的结果是 `1`。
2. 在第二次运行时，`sum = 1`，我们将第二个数组元素（`2`）与其相加并返回。
3. 在第三次运行中，`sum = 3`，我们继续把下一个元素与其相加，以此类推……
'sum' 'current' 'result'
| 第 1 次调用 | `0` | `1` | `1` |
| 第 2 次调用 | `1` | `2` | `3` |
| 第 3 次调用 | `3` | `3` | `6` |
| 第 4 次调用 | `6` | `4` | `10` |
| 第 5 次调用 | `10` | `5` | `15` |
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((sum, current) => sum + current);
console.log(result); // 15
结果是一样的。这是因为如果没有初始值，`reduce` 会将数组的第一个元素作为初始值，并从第二个元素开始迭代。
计算表与上面相同，只是去掉第一行。
但是, 如果数组为空，那么在没有初始值的情况下调用 `reduce` 会导致错误。
数组常用方法之 reduceRight
reduceRight和reduce方法的功能一样，只是遍历为从右到左
let arr = [1, 2, 3, 4, 5];
let result = arr.reduceRight((sum, current) => sum + current, 0);
console.log(result); // 15
数组常用方法之 every
用于检测数组中的元素是否满足指定条件（函数提供）
如果数组中检测到有一个元素不满足，则整个表达式返回false，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
let fruits = ["Apple","Banana","Grape","Lemon","Apple"]
const result = fruits.every((item, index, array) => {
return item.length > 5
})
console.log(result); // false
数组常用方法之 some
用于检测数组中的元素是否满足指定条件（函数提供）
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false
let fruits = ["Apple","Banana","Grape","Lemon","Apple"]
const result = fruits.some((item, index, array) => {
return item.length > 5
})
console.log(result); // true
总结 数组方法备忘单
添加/删除元素：
push(...items) 向尾端添加元素
pop() 从尾端提取一个元素
shift() 从首端提取一个元素
unshift(...items) 向首端添加元素
splice(pos, deleteCount, ...items) 从 pos 开始删除 deleteCount 个元素，并插入 items
slice(start, end) 创建一个新数组，将从索引 start 到索引 end（但不包括 end）的元素复制进去
concat(...items) 返回一个新数组：复制当前数组的所有元素，并向其中添加 items。如果 items 中的任意一项是一个数组，那么就取其元素。
搜索元素：
indexOf/lastIndexOf(item, pos) 从索引 pos 开始搜索 item，搜索到则返回该项的索引，否则返回 -1
includes(value) 如果数组有 value，则返回 true，否则返回 false
find/filter(func) 通过 func 过滤元素，返回使 func 返回 true 的第一个值/所有值
findIndex 和 find 类似，但返回索引而不是值
遍历元素：
forEach(func) 对每个元素都调用 func，不返回任何内容。
转换数组：
map(func) 根据对每个元素调用 func 的结果创建一个新数组
sort(func) 对数组进行原位（in-place）排序，然后返回它
reverse() 原位（in-place）反转数组，然后返回它
split/join 将字符串转换为数组并返回
reduce/reduceRight(func, initial) 通过对每个元素调用 func 计算数组上的单个值，并在调用之间传递中间结果
其他：
Array.isArray(arr) 检查 arr 是否是一个数组。
修改的是数组本身的方法：push，pop，unshift，shift，splice，reverse，sort
完结
随手笔记，如有错误，欢迎指正
有关完整列表，请参阅 MDN手册
