数组共包含33个标准API方法和一个非标准的API方法，使用场景和使用方案纷繁复杂。未来便于学习，将数组分为三类：
- 改变自身值
- 不改变自身值
- 遍历方法
改变自身值的数组方法
会改变自身值的数组方法有9个：pop、push、shift、unshift、splice、sort、reverse、copyWithin、fill。
熟悉Vue2.x源码的同学会觉得眼熟，没错，前7个方法正是Vue2.x版本中通过拦截数组原型而重写的数组方法，需要牢记哦。下面开始了解这些数组方法的用法。
pop方法
pop方法的作用是从数组的尾部弹出最后面的一个元素并修改数组长度，返回值就是被弹出的元素。
var arr = ["cat", "dog", "cow", "chicken", "mouse"];
var item = array.pop();
console.log(array); // ["cat", "dog", "cow", "chicken"]
console.log(item); // mousepush方法
push方法的作用与pop方法正好相反，用于将新元素填充在数组尾部成为新的最后一个元素，并修改数组长度，返回值是数组的新长度。
var array = ["football", "basketball", "badminton"];
var i = array.push("golfball");
console.log(array); // ["football", "basketball", "badminton", "golfball"]
console.log(i); // 4shift方法
shift方法的作用是从数组的头部弹出第一个元素并修改数组长度，返回值就是被弹出的元素。
var array = ['1','2','3','4','5'];
var item = array.shift();
console.log(array); // ['2','3','4','5']
console.log(item); // '1'unshift方法
unshift方法的作用与shift方法正好相反，用于将新元素填充在数组头部成为新的第一个元素，并修改数组长度，返回值就是数组的新长度。
var array = ["red", "green", "blue"];
var length = array.unshift("yellow");
console.log(array); // ["yellow", "red", "green", "blue"]
console.log(length); // 4splice方法
splice方法的作用有三种不同的情形：
- 删除元素
- 替换现有元素
- 原地添加新元素
Array.split(start,deleteCount,item1,item2,...)splice有三个参数：
- start 要修改的开始位置(从0开始)
- 如果start大于数组长度，则从数组末尾开始添加内容
- 如果start是负值，则表示从数组末位开始的第几位(从 -1 开始计算，等价于array.length - n)
- 如果负数绝对值大于数组长度，开始位置从第0位计算
- deleteCount 要移除元素的个数
- 如果deleteCount大于start之后的元素个数，则从start之后元素都将删除(包含下标为start的元素)
- 如果deleteCount省略未写或者值大于等于array.length - start,则start之后的数组元素都会被删除(不包括第start个元素)
- 如果deleteCount是0或者负数，则不移除元素。但至少应添加一个新元素。
- item1,item2,… 要添加数组的元素
- 从start位置开始添加。如果不指定，则表示只删除元素。
var array = ["apple","boy",'banana','pear'];
var splices = array.splice(5,1,'orange');
// array:["apple","boy",'banana','pear','orange','orange'] splices:[]
var array = ["apple","boy",'banana','pear'];
var splices = array.splice(2,4); // array:["apple","boy"] splices:["banana", "pear"]sort方法
sort方法的作用是对数组元素进行排序，并返回新数组。默认情况是将元素转换为字符串依照UTF_16代码排序。
array.sort(function(a,b){return a-b})sort方法可以不写参数，即为按照默认情况排列；参数为指定排列顺序的函数。
函数返回值为a-b时，按照升序排列
函数返回值为b-a时，按照降序排列
var array = ["apple","Boy","Cat","dog"];
var array2 = array.sort();
var array3 = array.sort(function(a,b){return a-b});
// array array2 array3 ["Boy", "Cat", "apple", "dog"]reverse方法
reverse方法的作用是将数组中元素的位置颠倒并返回数组。
var array = [1,2,3,4,5];
var array2 = array.reverse();
// array array2[5,4,3,2,1]copyWithin方法
copyWithin方法的作用是浅拷贝数组的一部分到同一数组的另一个位置，并返回数组。不会改变数组长度
arr.copyWithin(target, start, end)- target 被拷贝元素填充的开始位置
- 如果为负数，将从末尾开始计算
- 如果大于等于length，将不会发生拷贝填充
- 如果target在start之后，复制的序列将会被调整以符合length不变的特点
- start 开始复制元素的起始位置
- 如果为负数，将从末尾开始计算
- 如果被省略不写，则将从下标为0的位置开始复制
- end 开始复制元素的结束位置
- 如果为负数，将从末尾开始计算
- 复制元素的内容不包括下标为结束位置的元素
- 如果省略不写，则表示复制从start之后的所有元素
var array = [1,2,3,4,5];
var array2 = array.copyWithin(0,3);
// array array2 [4, 5, 3, 4, 5]fill方法
fill方法的作用是用一个固定值填充一个数组中从起始索引到结束索引的全部元素，但不包括结束索引
arr.fill(value, start, end)- value 用来填充数组元素的值
- start 起始索引，默认为0
- end 终止索引，默认为this.length
var array = [1,2,3,4,5];
var array2 = array.fill(10,0,3);
// array array2 [10,10,10,4,5]不改变自身值的数组方法
不改变自身值的数组方法也有9个：concat、join、slice、toString、toLocalString、indexOf、lastIndexOf、toSource、includes
concat方法
concat方法用于合并两个或多个数组。不会修改原数组且返回一个新数组
var newArr = arr.concat(value1,value2,...)- value 可以是数组或普通值
- value有值时，会被合并到一个新数组中
- value被省略时，会返回现存数组的一个浅拷贝
var array = [1, 2, 3];
var array1 = array.concat(); // 浅拷贝array1: [1,2,3]
var array2 = array.concat(4,[5,6]); // 合并数组array2: [1,2,3,4,5,6]join方法
join方法用于将数组或类数组的元素连接成字符串并返回改字符串。
arr.join(sep)- sep 用来分隔数组元素的分隔符，类型为字符串
- 如果sep被省略，默认使用逗号分隔
- 如果sep为空字符串，则元素之间没有字符
var array = ['We', 'are', 'Chinese'];
console.log(array.join()); // "We,are,Chinese"
console.log(array.join('')); // "WeareChinese"
console.log(array.join('+')); // "We+are+Chinese"slice方法
slice方法用于创建并返回一个有begin和end决定(包括begin不包括end)的原数组的浅拷贝的数组
array.slice(begin,end)- beigin 起始索引，从该索引处开始提取数组元素
- 如果begin为负数，则从数组的倒数第几个元素开始提取
- 如果begin被省略，则索引从0开始
- 如果begin超出原数组范围，则会返回空数组
- end 终止索引，在该索引处终止提取元素
- 如果end为负数，则从数组的倒数第几个元素结束提取
- 如果end被省略，则一直提取到数组结尾
- 如果end大于数组长度，也会提取到数组结尾
var array = ["one", "two", "three","four", "five"];
array.slice() // ["one", "two", "three","four", "five"]
array.slice(-2) // ["four", "five"]
array.slice(2,3) // ["three"]
array.slice(9) // []toString方法
toString方法用于将数组转换为字符串，内容为数组元素，分隔符为逗号
var array = ['Jan', 'Feb', 'Mar', 'Apr'];
var str = array.toString(); // 'Jan,Feb,Mar,Apr'
var array = [{a:'b'}, new Date(), 'Mar', 'Apr'];
var str = array.toString() // "[object Object],Mon Jul 19 2021 12:10:25 GMT+0800 (中国标准时间),Mar,Apr"toLocalString方法
toLocalString方法与toString方法类似，都是将数组转换为字符串，内容为数组元素，分隔符为逗号。
但是toLocalString方法不同的一点在于如果数组元素为日期类型则转换结果不同。
var array = [{a:'b'}, new Date(), 'Mar', 'Apr'];
var str = array.toLocaleString() // "[object Object],2021/7/19下午12:11:12,Mar,Apr"indexOf方法
indexOf方法用于在数组中从前往后查找给定元素的第一个索引并返回，如果不存在则返回-1.
arr.indexOf(srele,fromIndex)- srele 要查找的元素
- fromIndex 开始从前往后查找的位置
- 如果数值大于或等于数组长度，将不回在数组里查找，返回-1
- 如果数值为负值，则从 新值= arr.length+负数 开始查找，如果新值小于0，仍从数组开头开始查询
var array = ['abc', 'def', 'ghi','123'];
console.log(array.indexOf('def')); // 1
console.log(array.indexOf('def',2)); // -1
console.log(array.indexOf('def',-2)); // -1lastIndexOf方法
lastIndexof方法用于在数组中从后往前查找给定元素的最后一个索引并返回，如果不存在就返回-1
arr.lastIndexof(srele,fromIndex)- srele 要查找的元素
- fromIndex 开始从后往前查找的位置
- 如果数值大于或等于数组长度，将不回在数组里查找，返回-1
- 如果数值为负值，则从 新值= arr.length+负数 开始查找，如果新值小于0，仍从数组开头开始查询
const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
animals.lastIndexOf('Dodo') // 3
animals.lastIndexOf('Penguin',-3) // -1toSource方法
toSource方法是非标准的，尽量不要在生产环境使用。
toSource方法用于查看数组内容
var alpha = new Array("a", "b", "c");
alpha.toSource(); //返回["a", "b", "c"]includes方法
includes方法用于判断数组是否包含指定的值，包含则返回true，否则返回false。
arr.includes(valueToFind, fromIndex)- valueToFind 需要查找的元素值
- fromIndex 开始查找的索引，默认为0
- 如果为负值，则按升序从arr.length+fromIndex的索引开始搜。
var array = [-0, 1, 2];
console.log(array.includes(+0)); // true
console.log(array.includes(1)); // true
var array = [NaN];
console.log(array.includes(NaN)); // true数组遍历的方法
不会改变自身的数组遍历方法有12个：forEach、filter、map、reduce、reduceRight、ervery、some、find、findIndex、keys、values、entries
forEach方法
forEach方法对数组的每个元素指定一次给定的函数，返回值为undefined
arr.forEach(callback(curValue,index,array){}，thisArg)- curValue 数组当前处理的元素值
- index 数组当前处理的元素的索引
- array 数组
- thisArg 执行给定函数时用作this的值
var array = [1, 3, 5];
var obj = {name:'cc'};
var sReturn = array.forEach(function(value, index, array){
array[index] = value;
console.log(this.name); // cc被打印了三次, this指向obj
},obj);
console.log(array); // [1, 3, 5]
console.log(sReturn); // undefined, 可见返回值为undefinedfilter方法
filter方法创建一个新数组，包含通过给定函数处理的所有元素，有返回值
var newArray = arr.filter(callback(element, index, array), thisArg)- element 数组当前处理的元素值
- index 数组当前处理的元素的索引
- array 数组
- thisArg 执行给定函数时用作this的值
var array = [18, 9, 10, 35, 80];
var array2 = array.filter(function(value, index, array){
return value > 20;
});
console.log(array2); // [35, 80]map方法
map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值
var new_array = arr.map(callback(currentValue, index, array) {}, thisArg)var array = [18, 9, 10, 35, 80];
array.map(item => item + 1);
console.log(array); // [19, 10, 11, 36, 81]reduce方法
reduce方法对数组中的每个元素执行一个reducer函数(升序执行)，将其结果汇总为单个返回值。
arr.reduce(callback(accumulator, currentValue, index, array), initialValue)- accumulator 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值。
- currentValue 数组中正在处理的元素
- index 数组正在处理的元素的索引
- 如果提供 initialValue，则起始索引号为0，否则从1开始
- array 调用方法的数组
- initialValue 作为第一次调用回调函数时的第一个参数的值
- 如果没有提供初始值，则使用数组中第一个元素。
- 如果没有初始值且为空数组，则会报错
var array = [1, 2, 3, 4];
// 提供初始值
var s = array.reduce(function(previousValue, value, index, array){
return previousValue + value;
},1);
console.log(s); // 11
// 未提供初始值
var s2 = array.reduce(function(previousValue, value, index, array){
return previousValue + value;
});
console.log(s2); // 10reduceRight方法
reduceRight方法与reduce方法功能相同，只是处理元素的顺序相反(从右到左)
const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
(accumulator, currentValue) => accumulator.concat(currentValue)
);
console.log(array1); // Array [4, 5, 2, 3, 0, 1]ervery方法
every方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
arr.every(callback(element, index, array), thisArg)var o = {0:10, 1:8, 2:25, length:3};
var bool = Array.prototype.every.call(o,function(value, index, obj){
return value >= 8;
},o);
console.log(bool); // truesome方法
some方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回一个布尔值。
arr.some(callback(element, index, array), thisArg)var array = [18, 9, 10, 35, 80];
var isExist = array.some(function(value, index, array){
return value > 20;
});
console.log(isExist); // truefind和findIndex方法
find方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
findIndex方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
arr.find(callback(element,index,array), thisArg)
arr.findIndex(callback(element,index,array), thisArg)var array = [1, 3, 5, 7, 8, 9, 10];
function f(value, index, array){
return value%2==0; // 返回偶数
}
function f2(value, index, array){
return value > 20; // 返回大于20的数
}
console.log(array.find(f)); // 8
console.log(array.find(f2)); // undefined
console.log(array.findIndex(f)); // 4
console.log(array.findIndex(f2)); // -1keys和values方法
keys方法返回一个包含数组中每个索引键的Array Iterator对象。
values方法返回一个新的 Array Iterator
arr.keys()
arr.values()// keys方法
[...Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[...new Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// values方法
var array = ["abc", "xyz"];
var iterator = array.values();
for (const value of iterator) {
console.log(value);
}
//abc xyzentries方法
entries方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
arr.entries()let array = ['a', 'b', 'c'];
let iterator = array.entries();
for (let e of iterator) {
console.log(e);
}
// [0,'a'] [1,'b'] [2,'c']
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
