0
0

前端【数组】方法大全

一、Array 属性

属性描述constructor返回创建 Array 对象原型的函数。length设置或返回数组中元素的数量。prototype允许您向数组添加属性和方法。

1、

constructor

属性返回对象的构造函数。

var fruits = ["hello", "Java"];
fruits.constructor;

// ƒ Array() { [native code] }


2、length

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

var fruits = ["hello", "Java"];
fruits.length;

// 2

二、Array 方法

方法描述concat()连接两个或多个数组，并返回已连接数组的副本。copyWithin()将数组中的数组元素复制到指定位置或从指定位置复制。entries()返回键/值对数组迭代对象。every()检查数组中的每个元素是否通过测试。fill()用静态值填充数组中的元素。filter()使用数组中通过测试的每个元素创建新数组。find()返回数组中第一个通过测试的元素的值。findIndex()返回数组中通过测试的第一个元素的索引。forEach()为每个数组元素调用函数。from()从对象创建数组。includes()检查数组是否包含指定的元素。indexOf()在数组中搜索元素并返回其位置。isArray()检查对象是否为数组。join()将数组的所有元素连接成一个字符串。keys()返回 Array Iteration 对象，包含原始数组的键.lastIndexOf()在数组中搜索元素，从末尾开始，并返回其位置。map()使用为每个数组元素调用函数的结果创建新数组。pop()删除数组的最后一个元素，并返回该元素。push()将新元素添加到数组的末尾，并返回新的长度。reduce()将数组的值减为单个值（从左到右）。reduceRight()将数组的值减为单个值（从右到左）。reverse()反转数组中元素的顺序。shift()删除数组的第一个元素，并返回该元素。slice()选择数组的一部分，并返回新数组。some()检查数组中的任何元素是否通过测试。sort()对数组的元素进行排序。splice()从数组中添加/删除元素。toString()将数组转换为字符串，并返回结果。unshift()将新元素添加到数组的开头，并返回新的长度。valueOf()返回数组的原始值。

1、concat()方法用于连接两个或多个数组。

concat()

方法不会更改现有数组，而是返回一个新数组。

var sedan = ["S60", "S90"];
varSUV = ["XC40", "XC60", "XC90"];
var wagon = ["V60", "V90", "V90CC"];
sedan.concat(SUV, wagon);

2、copyWithin()方法将数组元素复制到数组中的另一个位置，覆盖现有值。

copyWithin()

方法永远不会向数组添加更多项。

copyWithin()

方法会覆盖原始数组。

*array*.copyWithin(*target*, *start*, *end*)

target必需。将元素复制到的索引位置。start可选。开始复制元素的索引位置（默认为 0）。end可选。停止从中复制元素的索引位置（默认为 array.length）。

将前两个数组元素复制到最后两个数组元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);

// (4) ['Banana', 'Orange', 'Banana', 'Orange']

将前两个数组元素复制到第三和第四个位置：

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 2);
// (6) ['Banana', 'Orange', 'Banana', 'Orange', 'Kiwi', 'Papaya']

3、entries()方法返回带有键/值对的 Array Iterator 对象。

    对于原始数组中的每一项，新的迭代对象将包含一个以索引为键，以项值为值的数组

entries()

不会更改原始数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var f = fruits.entries();
f

// Array Iterator {}for (x of f) {
  console.log(x)
}
// vconsole.min.js:10 (2) [0, 'Banana']// vconsole.min.js:10 (2) [1, 'Orange']// vconsole.min.js:10 (2) [2, 'Apple']// vconsole.min.js:10 (2) [3, 'Mango']

4、every()方法对数组中存在的每个元素执行一次函数

  • 如果找到函数返回 false 值的数组元素，every() 返回 false（并且不检查剩余值）
  • 如果没有出现 false，every() 返回 true
every()

不对没有值的数组元素执行函数。

every()

不改变原始数组。

***array*.every(function(*currentValue*, *index*, *arr*), *thisValue*)**

function(currentValue, index, arr)必需。为数组中的每个元素运行的函数。
参数描述currentValue必需。当前元素的值。index可选。当前元素的数组索引。arr可选。当前元素所属的数组对象thisValue
可选。要传递给函数以用作其 "this" 值的值。

如果此参数为空，则值 "undefined" 将作为其 "this" 值传递。

var ages = [32, 33, 16, 40];

functioncheckAdult(age) {
  return age >= 18;
}

var ev = ages.every(checkAdult)
ev

// false

5、fill()方法用静态值填充数组中的指定元素。

  • 可以指定开始和结束填充的位置。如果未指定，则将填充所有元素。
  • fill() 会覆盖原始数组。

array.fill(value, start, end)
value必需。用于填充数组的值。start可选。开始填充数组的索引（默认为 0）。end可选。停止填充数组的索引（默认为 array.length）。

用静态值填充所有数组元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Kiwi");

// (4) ['Kiwi', 'Kiwi', 'Kiwi', 'Kiwi']

用静态值填充最后两个数组元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Kiwi", 2, 4);

// (4) ['Banana', 'Orange', 'Kiwi', 'Kiwi']

6、filter() 过滤数组元素得到新的数组

不会对没有值的数组元素执行该函数。 不会改变原始数组。

var ages = [32, 33, 16, 40];

functioncheckAdult(age) {
  return age >= 18;
}

var newArr = ages.filter(checkAdult);

// (3) [32, 33, 40]

7、find() 返回数组中第一个通过测试的元素的值。

方法对数组中存在的每个元素执行一次函数：

  • 如果找到函数返回 true 值的数组元素，则 find() 返回该数组元素的值（并且不检查剩余值）
  • 否则返回 undefined

不对空数组执行该函数。 不会改变原始数组。

var ages = [3, 10, 18, 20];

functioncheckAdult(age) {
  return age >= 18;
}
ages.find(checkAdult)

// 18

8、findIndex()返回数组中通过测试的第一个元素的索引。

方法对数组中存在的每个元素执行一次函数：

  • 如果找到函数返回 true 值的数组元素，则 findIndex() 返回该数组元素的索引（并且不检查剩余值）
  • 否则返回 -1

不会为没有值的数组元素执行函数。不会改变原始数组。

var ages = [3, 10, 18, 20];

functioncheckAdult(age) {
  return age >= 18;
}
ages.findIndex(checkAdult);

// 2

9、forEach()遍历数组元素

对于没有值的数组元素，不执行

forEach()

方法

var fruits = ["apple", "orange", "cherry"];
fruits.forEach(function (item) {
    console.log(item)
});
// apple// orange// cherry

10、from() 从具有 length 属性或可迭代对象转为数组

Array.from("ABCDEFG");

// (7) ['A', 'B', 'C', 'D', 'E', 'F', 'G']

11、includes()确定数组是否包含指定的元素。

如果数组包含元素，则此方法返回 

true

，否则返回 

false

。

includes()

方法区分大小写。

*array*.includes(*element*, *start*)

element必需。要搜索的元素。start可选。默认 0。在数组中的哪个位置开始搜索。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var n = fruits.includes("Mango");

// true

从位置 3 开始搜索

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var n = fruits.includes("Banana", 3);

// false

12、indexOf()在数组中搜索指定项目，并返回其位置。

搜索将从指定位置开始，如果未指定开始位置，则从头开始，并在数组末尾结束搜索。

如果未找到该项目，则 

indexOf()

返回 -1。

如果该项目出现多次，则 

indexOf()

方法返回第一次出现的位置。

*array*.indexOf(*item*, *start*)

item必需。要搜索的项目。start可选。从哪里开始搜索。负值给定的位置将从结尾计数，然后搜索到最后。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

// 2

从位置 4 开始搜索

var fruits = ["Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple"];
var a = fruits.indexOf("Apple", 4);

// 6

13、isArray()判断对象是否为数组。

如果对象是数组，则此函数返回 true，否则返回 false。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
Array.isArray(fruits);

// true

14、join()将数组作为字符串返回。

元素将由指定的分隔符分隔。默认分隔符是逗号 (,)；

join()

方法不会改变原始数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();

// 'Banana,Orange,Apple,Mango'

使用不同的分隔符

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and ");

// 'Banana and Orange and Apple and Mango'

15、lastIndexOf()返回元素最后一次出现的角标。

搜索将从指定位置开始，如果未指定开始位置，则从末尾开始，并在数组的开头结束搜索。

如果未找到该项目，则 

lastIndexOf()

方法返回 -1。

var fruits = ["Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple"];
var a = fruits.lastIndexOf("Apple");

// 6

从位置 4 开始搜索

var fruits = ["Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple"];
var a = fruits.lastIndexOf("Apple", 4);

// 2

16、map()为每个数组元素调用函数的结果创建新数组。

对没有值的数组元素不执行函数。不会改变原始数组。

var numbers = [65, 44, 12, 4];
var newarray = numbers.map(function(item) {
    return item*10
})

// (4) [650, 440, 120, 40]

17、pop()移除数组的最后一个元素，并返回该元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

// 'Mango'

18、push()向数组末尾添加新项目，并返回新长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

// 5

19、reduce()累计计算

为数组的每个值（从左到右）执行提供的函数。函数的返回值存储在累加器中（结果/总计）。

var numbers = [175, 50, 25];

var total = numbers.reduce(myFunc);

functionmyFunc(total, num) {
  return total - num;
}

// 100

var numbers = [15.5, 2.3, 1.1, 4.7];

functiongetSum(total, num) {
  return total + num;
}

var t = numbers.reduce(getSum, 0);

// 23.6

20、reduceRight()累计计算

为数组的每个值（从右到左）执行提供的函数。函数的返回值存储在累加器中（结果/总计）。

var numbers = [175, 50, 25];

var total = numbers.reduceRight(myFunc);

functionmyFunc(total, num) {
  return total - num;
}

// -200

var numbers = [15.5, 2.3, 1.1, 4.7];

functiongetSum(total, num) {
  return total + num;
}

var t = numbers.reduceRight(getSum, 0);

// 23.6

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

方法将改变原始数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();

// (4) ['Mango', 'Apple', 'Orange', 'Banana']

22、shift()移除数组的第一项。

会改变数组的长度。返回值是被移除的项目。会改变原始数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

// 'Banana'

23、slice()截取数组元素，返回新的数组对象

选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

// (2) ['Orange', 'Lemon']

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var myBest = fruits.slice(-3, -1);

// (2) ['Lemon', 'Apple']

24、

some()

检查数组元素是否通过测试（作为函数提供）。

  • 如果找到函数返回真值的数组元素，some() 返回真（并且不检查剩余值）
  • 否则返回 false
var ages = [3, 10, 18, 20];

function checkAdult(age) {
  return age >= 18;
}

var a = ages.some(checkAdult);

// true

25、sort()数组排序

会改变原始数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

// (4) ['Apple', 'Banana', 'Mango', 'Orange']

按升序对数组中的数字进行排序

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});

// (6) [1, 5, 10, 25, 40, 100]

按降序对数组中的数字进行排序

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});

// (6) [100, 40, 25, 10, 5, 1]

获取数组中的最小值

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b})[0];

// 1

获取数组中的最大值

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a})[0];

// 100

26、splice()从数组添加/删除项目

*array*.splice(*index*, *howmany*, *item1*, ....., *itemX*)

index必需。整数，指定在什么位置添加/删除项目，使用负值指定从数组末尾开始的位置。howmany可选。要删除的项目数。如果设置为 0，则不会删除任何项目。item1, ..., itemX可选。要添加到数组中的新项目。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

// (6) ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango']

在位置 2，添加新项目，并删除 1 个项目

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1, "Lemon", "Kiwi");
fruits
// (5) ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Mango']

在位置 2，删除 2 个项目：

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
fruits.splice(2, 2);

// (3) ['Banana', 'Orange', 'Kiwi']

27、toString()返回包含所有数组值的字符串，以逗号分隔。

不会改变原始数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.toString();

// 'Banana,Orange,Apple,Mango'

28、unshift()在数组的开头添加数据，并返回新的长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");

// 6
标签： javascript 前端
本文转载自: https://blog.csdn.net/hk000001/article/details/143081697
版权归原作者 蓝眸少年CY 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端【数组】方法大全”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航