【JS】数组常用操作方法

手册

数组操作方法

isArray()检查对象是否为数组

语法：Array.isArray(obj)
参数值：obj必需。需测试的对象。
返回值：布尔值。如果对象是数组则返回 true，否则返回 false。

var arr = [1, 2, 3];
console.log(Array.isArray(arr)); //true
console.log(arr instanceof Array); //true
console.log(arr.constructor === Array); //true

toString()将数组转换为字符串

定义：返回包含所有数组值的字符串，以逗号分隔。
语法：array.toString()
注释：不会改变原始数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.toString(); 
//energy 结果：Banana,Orange,Apple,Mango

join()将数组元素转换为字符串

定义：将数组的所有元素连接成一个字符串。元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。
语法：array.join(separator)
参数值：separator可选。要使用的分隔符。如果省略，元素用逗号分隔。
注释：不会改变原始数组

var fruits = ["Banana", "Orange","Apple", "Mango"];
var energy = fruits.join(" * "); 
//energy结果：Banana * Orange * Apple * Mango

pop()/shift()删除元素

定义：删除数组的最后一个元素，并返回该删除的元素。
语法：array.pop()
注释：会改变原始数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();  // 从fruits删除最后一个元素（"Mango"）
var x = fruits.pop(); //x的值是"Mango"

定义：删除数组的第一个元素，并把所有其他元素“位移”到更低的索引，并返回第一个被删除元素的值
语法：array.shift()
注释：会改变原始数组

//从数组中移除首个元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var res = fruits.shift() 
//fruits值为Orange,Apple,Mango
//res为Banana

push()/unshift()添加元素

定义：向数组末尾添加新元素，并返回新的长度。
语法：array.push(item1, item2, ..., itemX)
参数值：item1, item2, …, itemX必需。要添加到数组中的项目。
注释：会改变原始数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi"); //向fruits结尾处添加一个新元素
var res =  fruits.push("Kiwi"); //res值是5

定义：将新项添加到数组的开头，并返回新的长度。
语法：array.unshift(item1, item2, ..., itemX)
参数值：item1,item2, …, itemX必需。要添加到数组开头的项。
注释：会改变原始数组

//将新项添加到数组起始位置
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var res = fruits.unshift("Lemon","Pineapple"); 
//fruits值为Lemon,Pineapple,Banana,Orange,Apple,Mango
//res为6

length属性设置或返回数组中元素的数量

语法：array.length返回数组的长度；array.length = number设置数组的长度

//向数组追加元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi"; // 向 fruits 追加 "Kiwi"
console.log(fruits )//["Banana", "Orange", "Apple", "Mango", "Kiwi"]

//设置数组的长度为1个
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length = 1;
console.log(fruits)//["Banana"]

splice()拼接数组

定义：向/从数组添加/删除项目，并返回删除的项目。
语法：array.splice(index, howmany, item1, ....., itemX)（从什么位置开始，删几个？删了后插入新元素）
参数值：index必需。整数，指定在什么位置添加/删除项目，使用负值指定从数组末尾开始的位置。howmany可选。要删除的项目数量。如果设置为0，则不会删除任何项目。如果未设置此参数，则删除从index开始到原数组结尾的所有元素。 item1, …, itemX可选。要添加到数组中的新项目。
返回值：新数组，包含删除的项目（如果有）。
注释：会改变原始数组

//从下标值为2的第三个位置开始删除（包含自身）一个元素，并在删除第三个位置添加新元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var res = fruits.splice(2, 1, "Lemon", "Kiwi");
//fruits值为Banana,Orange,Lemon,Kiwi,Mango
//res值为被删除的Apple

//从下标值为1的第二个位置开始删除（包含自身）两个元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var res = fruits.splice(1,2); 
//fruits值为Banana,Mango
//res值为被删除的Orange,Apple

//从倒数第三个位置开始删除两个元素，并在删除倒数三个的位置添加新元素
var arr = [1, 2, 3, 4, 5, 6, 7];
var res = arr.splice(-3, 2, "a", "b", "c");
console.log(arr); // [1, 2, 3, 4, "a", "b", "c", 7]
console.log(res); // [5, 6]

slice()裁剪数组

定义：选择数组的一部分，并返回新数组。
语法：array.slice(start, end)
参数值：从start(包括该元素)到end(不包括该元素)arrayObject中的元素。start可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。end可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。
注释：不会改变原始数组

//只有1个start参数时，从数组元素下标值为2的（"Lemon"）开始截取出一段新数组：
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2); //citrus值为Lemon,Apple,Mango

//2个参数，从数组元素下标值为1的（"Orange"）开始截取，截到数组元素下标值为2的（"Lemon"）为止（不包含end下标3的元素）
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);//citrus值为Orange,Lemon

concat()连接两个或多个数组

定义：不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。
语法：array1.concat(array2, array3, ..., arrayX)
参数：array2, array3, …, arrayX必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

//合并两个数组
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys); //连接 myGirls 和 myBoys，myChildren值为Cecilie,Lone,Emil,Tobias,Linus

//合并三个数组
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3); // 将arr1、arr2 与 arr3 连接在一起

//将数组与值合并
var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]); 

数组排序方法

sort()对数组的元素进行排序

定义：对数组的元素进行排序。排序顺序可以是按字母或数字，也可以是升序（向上）或降序（向下）。默认排序顺序为按字母升序。在对数字进行排序时会产生不正确的结果，可以通过提供“比较函数”来解决此问题。
语法：array.sort(compareFunction)
参数值：compareFunction可选。定义替代排序顺序的函数。该函数应返回负值、零值或正值，具体取决于参数。
注释：会改变原始数组

//默认按字母升序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); //Apple,Banana,Mango,Orange

//数字排序（数字和升序）：
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b}); //1,5,10,25,40,100

//数字排序（数字和降序）：
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a}); //100,40,25,10,5,1

reverse()反转数组中元素的顺序

语法：array.reverse()
注释：会改变原始数组

//颠倒数组中元素的顺序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse(); //Mango,Apple,Orange,Banana

数组迭代/遍历方法

for of（ES6）

//for of得到的是value，数组元素值
var fruits = ["Banana", "Orange", "Apple", "Mango"];
for (let item of fruits) {
  console.log(item); //Banana, Orange, Apple, Mango
}

for in（适合遍历对象）

定义：循环遍历对象的属性

//for in遍历对象
let obj = {
 name: '王大锤',
 age: '18',
 weight: '70kg'
}
for(let key in obj) {
 console.log(key); // name age weight
 console.log(obj[key]); // 王大锤 18 40kg
}

//for in遍历数组
for(var key in arr) {
  console.log(key); // 0 1 2 3 4 返回数组索引
  console.log(arr[key]) // 1a 2b 3c 4d 5e
}

forEach()

定义：为每个数组元素调用函数
语法：array.forEach(function(currentValue, index, arr), thisValue)
参数：接受一个回调函数为参数。function(currentValue, index, arr)必需。为数组中的每个元素运行的函数。 回调函数中有三个参数：currentValue数组元素(必选)，index数组元素索引值(可选)，arr数组本身(可选)；
注释：会改变原始数组，返回值为undefined

//将值更新为原始值的10倍
let arr = [65, 44, 12, 4];
arr.forEach(function (item, index, arr) {
  console.log(item); // 65 44 12 4
  console.log(index); // 0 1 2 3
  console.log(arr); // [65, 44, 12, 4] 会打印5遍
  arr[index] = item * 10;
})
console.log(arr) // [650, 440, 120, 40]

map()

定义：为每个数组元素调用函数的结果创建新数组
语法：array.map(function(currentValue, index, arr), thisValue)
参数：接受一个回调函数为参数。function(currentValue, index, arr)必需。为数组中的每个元素运行的函数。 回调函数中有三个参数：currentValue数组元素(必选)，index数组元素索引值(可选)，arr数组本身(可选)；
注释：不会改变原始数组，返回一个新数组

//将值更新为原始值的10倍
let arr = [65, 44, 12, 4];
let newArr = arr.map(function (item) {
  return item * 10
})
console.log(newArr); // [650, 440, 120, 40]

reduce()

定义：将数组缩减为单个值（从左到右）、为数组的每个值（从左到右）执行提供的函数。函数的返回值存储在累加器中（结果/总计）。
语法：array.reduce(function(total, currentValue, index, arr), initialValue)
参数：接受一个回调函数为参数，function(total, currentValue, index, arr) 必需。回调函数中有四个参数：total总计(必选)，currentValue数组元素(必需)，index数组元素索引值(可选)；arr数组本身(可选)
注释：不会改变原始数组

//从头开始减去剩余数组中的数字
var numbers = [165, 44, 12, 4];
var newArr = numbers.reduce(myFunction)
function myFunction(total, item) {
  return total - item
}
console.log(newArr) //105

filter()

定义：用于筛选出满足要求的数组元素，并返回新的数组。新数组中的元素是通过检查指定数组中符合条件的所有元素。
语法：array.filter(function(currentValue,index,arr), thisValue)

var ages = [32, 33, 12, 9, 40];
var newAges = ages.filter(checkAge)
function checkAge(item) {
  return item > 18
}
console.log(newAges) //32 33 40

includes()

定义：检查数组是否包含指定的元素。如果数组包含元素，则此方法返回 true，否则返回 false。
语法：array.includes(element, start)
参数值：element必需。要搜索的元素。start可选。默认0。在数组中的哪个位置开始搜索。

const names = ["xixi", "haha", "hoho"];
console.log(names.includes("haha"));//true

some()

定义：检测数组中是否有元素符合指定的条件。对数组中每一项都运行指定函数，当任意一项返回true时，则返回true，否则返回false。
语法：array.some(function(currentValue, index, arr), thisValue)

//检查ages数组中是否有18或以上的值
var ages = [32, 33, 12, 9, 40];
var newAges = ages.some(checkAge)
function checkAge(item) {
  return item > 18
}
console.log(newAges) //true

every()

定义：检测数值元素的每个元素是否都符合条件。对数组中每一项都运行指定函数，当每一项都满足条件时，则返回true，否则返回false）
语法：array.every(function(currentValue, index, arr), thisValue)

//检查ages数组中是否有18或以上的值
var ages = [32, 33, 12, 9, 40];
var newAges = ages.every(checkAge)
function checkAge(item) {
  return item > 18
}
console.log(newAges) //false

indexOf()

定义：在数组中搜索元素并返回其位置。搜索将从指定位置开始，如果未指定开始位置，则从头开始，并在数组末尾结束搜索。如果未找到该项目，则 indexOf() 返回 -1。如果该项目出现多次，则 indexOf() 方法返回第一次出现的位置。
语法：array.indexOf(item, start)
参数值：item 必需。要搜索的项目。start可选。从哪里开始搜索。负值给定的位置将从结尾计数，然后搜索到最后。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var res = fruits.indexOf("Apple");
console.log(res) //2

var fruits = ["Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple"];
var res = fruits.indexOf("Apple", 4);
console.log(res) //6

find()（ES6）

定义：返回数组中第一个通过测试的元素的值。对数组中存在的每个元素执行一次函数：如果找到函数返回 true 值的数组元素，则 find() 返回该数组元素的值（并且不检查剩余值）， 否则返回 undefined。
语法：array.find(function(currentValue, index, arr), thisValue)
注释：不会改变原始数组

var ages = [32, 33, 12, 9, 40];
var newAges = ages.find(checkAge)
function checkAge(item) {
  return item > 18
}
console.log(newAges) //32

数组去重方法

new Set()

let arr = [20, 21, 23, 25, 21, 20 ];
let item = [ ...new Set(arr)];
console.log(item); //[20, 21, 23, 25]