数组方法详解

Posted 水星记_

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了数组方法详解相关的知识，希望对你有一定的参考价值。

前言

在前端开发中，避免不了会对一些数组进行操作，实际上也有很多操作数组的方法可以供我们使用，本篇文章将系统化介绍常用操作数组的方法、使用说明以及使用的实例。


1. push()

push() 方法可以向数组的末尾添加一个或多个元素，并返回新的数组长度。

参数描述
参数1必须。要添加到数组的第一个元素。
参数2非必须。要添加到数组的第二个元素。
参数3非必须。可以添加多个元素到数组中。

实例

let array = ['小红', '小黄', '小兰']; //原数组长度 3
array.push('小绿');
console.log(array); //['小红', '小黄', '小兰', '小绿']
console.log(array.length); //添加后数组长度 4

2. unshift()

unshift() 方法可以向数组的开头添加一个或更多元素，并返回新的数组长度。

参数描述
参数1,参数2, …, 参数999可选。向数组起始位置添加一个或者多个元素。

实例

let array = ['小红', '小黄', '小兰']; //原数组长度 3
array.unshift('小绿');
console.log(array); //['小绿', '小红', '小黄', '小兰']
console.log(array.length); //添加后数组长度 4

3. pop()

pop() 方法用于删除数组的最后一个元素，并返回删除的元素，pop()方法会改变数组的长度。

实例

let array = ['小红', '小黄', '小兰', '小绿']; //原数组长度 4
array.pop();
console.log(array); //['小红', '小黄', '小兰']
console.log(array.length); //删除后数组长度 3

4. shift()

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值，shift()方法会改变数组的长度。

实例

let array = ['小红', '小黄', '小兰', '小绿']; //原数组长度 4
array.shift();
console.log(array); //['小黄', '小兰', '小绿']
console.log(array.length); //删除后数组长度 3

5. splice()

splice() 方法用于添加或删除数组中的元素，如果仅删除一个元素，则返回一个元素的数组，如果未删除任何元素，则返回空数组，splice()方法会改变原始数组。

参数描述
参数1必须。从索引值(i)开始删除元素，必须是数字。
参数2可选。要删除多少元素，必须是数字，但可以是0，如果不写，则删除从索引值(i)开始到原数组结尾的所有元素。

实例1

let array = ['小红', '小黄', '小兰', '小绿'];
array.splice(0,1);
console.log(array); // ['小黄', '小兰', '小绿']

此外，splice() 方法还可用于在数组的某个位置添加一个或多个元素。

实例2

let array = ['小红', '小黄', '小兰'];
array.splice(1,0,'小绿');// 在索引1的位置，添加1个元素
console.log(array); // ['小红', '小绿', '小黄', '小兰']

6. join()

join() 方法用于把数组中的所有元素转换一个字符串，元素是通过指定的分隔符进行分隔的。

参数描述
参数可选。指定要使用的分隔符，如果省略该参数，则使用逗号作为分隔符。

实例

let array = ['小红', '小黄', '小兰', '小绿'];
let str = array.join();
console.log(str); // 小红,小黄,小兰,小绿

7. toString()

toString() 方法可以把数组转换为字符串，并返回结果。

实例

let array = ['小红', '小黄', '小兰', '小绿'];
let str = array.toString();
console.log(str); // 小红,小黄,小兰,小绿

8. split()

split() 方法用于把一个字符串分割成字符串数组，split()方法不会改变原始字符串。

实例

let str = '123456';
let array = str.split('');
console.log(array); // ['1', '2', '3', '4', '5', '6']

9. sort()

sort() 方法用于对数组的元素进行排序，默认排序顺序为按字母升序，sort()方法会改变原始数组。

实例1

let array = ['yi','er','san','si','wu','liu'];
let row = array.sort();
console.log(row); // ['er', 'liu', 'san', 'si', 'wu', 'yi']

注意： 当数字进行排序时， “40” 会排在 “5” 的前面，所以必须通过一个函数作为参数来调用，通过函数指定数字是按照升序还是降序排列。

实例2

let array = ['40','5','1','7','2','9'];
let row = array.sort(function(a,b)return a-b);
console.log(row); // ['1', '2', '5', '7', '9', '40']

10. slice()

slice() 方法可以从数组中选定想要元素并返回，slice()方法不会改变原始数组。

参数描述
参数1可选。开始选取值。如果为负数，则表示从原数组中的倒数第几个元素开始提取。
参数2可选。结束选取值。如果省略，将选择从开始位置到数组末尾的所有元素，使用负数从数组末尾进行选择。

实例

let array = ['小红', '小黄', '小兰', '小绿'];
let ext = array.slice(1,3);
console.log(ext); // ['小黄', '小兰']

11. forEach()

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

参数描述
参数1必须。当前元素。
参数2可选。当前元素的索引值。
参数3可选。当前元素所属的数组对象。

实例

let array = ['小红', '小黄', '小兰', '小绿'];
array.forEach((item,index,arr)=>
  console.log(item); // 小红 小黄 小兰 小绿
  console.log(index); // 0 1 2 3
  console.log(arr); // ['小红', '小黄', '小兰', '小绿']
)

12. map()

map() 方法用于返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

参数描述
参数1必须。当前元素的值。
参数2可选。当前元素的索引值。
参数3可选。当前元素属于的数组对象。

实例

let array = ['小红', '小黄', '小兰', '小绿'];
array.map((item,index,arr)=>
  console.log(item); // 小红 小黄 小兰 小绿
  console.log(index); // 0 1 2 3
  console.log(arr); // ['小红', '小黄', '小兰', '小绿']
)

13. concat()

concat() 方法用于连接两个或多个数组，concat()方法不会改变现有的数组。

参数描述
参数必须。该参数可以是具体的值，也可以是数组对象，可以是任意多个。

实例

let array = ['小红', '小黄'];
let mer  = array.concat(['小兰'],['小绿'])
console.log(mer); // ['小红', '小黄', '小兰', '小绿']

14. reverse()

reverse() 方法用于颠倒数组中元素的顺序。

实例

let array = ['小红', '小黄', '小兰', '小绿'];
let ups = array.reverse();
console.log(ups); // ['小绿', '小兰', '小黄', '小红']

15. filter()

filter() 方法通过检查指定数组中符合条件的所有元素，filter()方法不会改变原始数组。

参数描述
参数1必须。当前元素的值。
参数2可选。当前元素的索引值。
参数3可选。当前元素属于的数组对象。

实例

let array = [ id: 1, name: "小红" , id: 2, name: "小黄" , id: 3, name: "小兰" , id: 4, name: "小绿" ,];
let fil = array.filter((item) => item.id != 1); // 查找数组中id不等于1的对象
console.log(fil); // [id: 2, name: '小黄',id: 3, name: '小兰',id: 4, name: '小绿']

16. indexOf()

indexOf() 方法可以返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到匹配的字符串则返回 -1。

参数描述
参数1必须。要查找的字符串的值(e)。
参数2可选。整数。在字符串的第几个位置(5)开始查找字符(e)第一次出现的位置，如省略该参数，则将从字符串的首字符开始检索。

实例1

var str = 'Hello world, welcome to the universe';
var det = str.indexOf('e', 5); // 在字符串第五个位置开始查找字符'e'第一次出现的位置
console.log(det); // 14

实例2

var str = 'SF4636135122323412';
if (str.indexOf('SF') > -1) //提取出来包含'SF'的字符
  console.log('执行操作');

17. every()

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）,如果数组中检测到有一个元素不满足，则整个表达式返回false，且剩余的元素不会再进行检测；如果所有元素都满足条件，则返回true；every()方法不会改变原始数组。

参数描述
参数1必须。当前元素的值。
参数2可选。当前元素的索引值。
参数3可选。当前元素属于的数组对象。

实例

let arr = [1, 2, 3, 4, 5, 6, 7];
let wrong = arr.every((value, index) => value < 4);
console.log(wrong); // false
let pair = arr.every((value, index) => value < 8);
console.log(pair); // true

18. some()

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）,如果有一个元素满足条件，则表达式返回true，剩余的元素不会再执行检测；如果没有满足条件的元素，则返回false；some()方法不会改变原始数组。

参数描述
参数1必须。当前元素的值。
参数2可选。当前元素的索引值。
参数3可选。当前元素属于的数组对象。

实例

let arr = [1, 2, 3, 4, 5, 6, 7];
let pair = arr.some((value, index) => value < 4);
console.log(pair); // true
let wrong = arr.some((value, index) => value > 8);
console.log(wrong); // false

19. find()

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。当数组中的元素在测试条件时返回true时, find()方法返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回undefined, find()方法并没有改变数组的原始值。

参数描述
参数1必须。当前元素。
参数2可选。当前元素的索引值。
参数3可选。当前元素所属的数组对象。

实例

let arr = [1, 2, 3, 4, 5, 6, 7];
let pair = arr.find((value, index, array) => value > 5);
console.log(pair); // 6

20. findIndex()

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置，当数组中的元素在测试条件时返回true时, findIndex()方法返回符合条件的元素的索引位置，之后的值不会再调用执行函数，如果没有符合条件的元素返回 -1，findIndex()方法不会改变数组的原始值。

参数描述
参数1必须。当前元素。
参数2可选。当前元素的索引值。
参数3可选。当前元素所属的数组对象。

实例

let arr = [1, 2, 3, 4, 5, 6, 7];
let pair = arr.findIndex((value, index) => value > 6);
console.log(pair); // 6

21. includes()

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回true，反之返回false。

includes()与indexOf()的区别：

  • indexOf() 返回的是数值，而includes() 返回的是布尔值；
  • indexOf() 不能判断NaN，返回为-1，includes() 则可以判断。
参数描述
参数1必须。需要查找的元素值。
参数2可选。从索引几开始查找,默认为 0。

实例

let array = ['小红', '小黄', '小兰', '小绿'];
let obj = array.includes('小黄');
console.log(obj); // true

22. copyWithin()

copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

参数描述
参数1必须。索引从该位置开始替换数组项。
参数2可选。元素复制的起始位置。
参数3可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

实例

let array = ['小红', '小黄', '小兰', '小绿'];
let obj = array.copyWithin(2,0);
console.log(obj); // ['小红', '小黄', '小红', '小黄']

23. fill()

fill() 方法用于将一个固定值替换数组的元素。

参数描述
参数1必须。要填充的值。
参数2可选。开始填充索引位置。
参数3可选。停止填充索引位置 (默认为 array.length)。

实例

let array = ['小红', '小黄', '小兰', '小绿'];
let obj = array.fill('小蓝');
console.log(obj); // ['小蓝', '小蓝', '小蓝', '小蓝']

24. lastIndexOf()

lastIndexOf() 方法和indexOf()方法一样，区别在于lastIndexOf()方法是从后往前找。

参数描述
参数1必须。要查找的字符串值。
参数2可选。整数。在字符串的第几个位置开始查找字符第一次出现的位置，如省略该参数，则将从字符串的最后一个字符处开始检索。

实例

let arr = [2,5,8,6,7,1,4]
let str = arr.lastIndexOf(6);
console.log(str); // 3
let obj = arr.lastIndexOf(9);
console.log(obj); // -1

25. isArray()

isArray() 方法用于判断一个对象是否为数组，如果对象是数组返回true，否则返回false。

参数描述
参数必须，要判断的对象。

实例

let array = ['小红', '小黄', '小兰','小绿'];
let obj = Array.isArray(array)
console.log(obj); // true

26. reduce()

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

参数描述
参数1必须。初始值, 或者计算结束后的返回值。
参数2必须。当前元素。
参数3可选。当前元素的索引。
参数4可选。当前元素所属的数组对象。

实例

let array = [1,5,2,1,3];
let obj = array.reduce((preValue, curValue) => 
    preValue + curValue
);
console.log(obj); // 12

27. reduceRight()

reduceRight() 方法的功能和reduce()方法功能是一样的，不同的是reduceRight()方法从数组的末尾向前将数组中的数组项做累加。

参数描述
参数1必须。初始值, 或者计算结束后的返回值。
参数2必须。当前元素。
参数3可选。当前元素的索引。
参数4可选。当前元素所属的数组对象。

实例

let array = [1,5,2,1,3];
let obj = array.reduceRight((preValue, curValue) => 
    preValue + curValue
);
console.log(obj); // 12

28. from()

from() 方法用于将伪数组变成数组，只要有length属性的就可以转成数组。如果对象是数组返回true，否则返回false。

参数描述
参数1必须，要转换为数组的对象。
参数2可选，数组中每个元素要调用的函数。
参数3可选，映射函数(mapFunction)中的this对象。

实例

let str = '123456';
let array = Array.from(str);
console.log(array); // ['1', '2', '3', '4', '5', '6']

29. keys()

keys() 方法用于从数组创建一个包含数组键的可迭代对象，如果对象是数组返回true，否则返回false。

实例

let array = ['1', '2', '3', '4', '5', '6'];
let obj = Object.keys(array);
console.log(obj); // ['0', '1', '2', '3', '4', '5']

30. entries()

entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对(key/value)，迭代对象中数组的索引值作为key，数组元素作为 value。

实例

let obj =  name: "小红", age: 18, sex: "女" ;
let str = Object.entries(obj);
console.log(str); // ['name', '小红'] ['age', 18] ['sex', '女']

以上是关于数组方法详解的主要内容，如果未能解决你的问题，请参考以下文章

php关联数组怎么按键名实现升序排列

Array 的sort()方法详解

数组方法详解

C ++将数组中的数字重新排列为升序

Java排序方法sort的使用详解

前端面试题精选