JavaScript常见内置函数大全数组篇(附超详细案例)

钱言

为了巩固所学的知识，作者尝试着开始发布一些学习笔记类的博客，方便日后回顾。当然，如果能帮到一些萌新进行新技术的学习那也是极好的。

JavaScript 数组提供了许多内置函数，用于执行各种操作，如添加、删除、查找、迭代和转换数组元素。一些常用的数组函数包括 push()、pop()、shift()、unshift()、concat()、forEach()、map()、filter()、reduce() 等。

1. every() 检测数组元素的每个元素是否都符合条件

1. 实例

检测数组 ages 的所有元素是否都大于 18 :

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}

输出结果为:

false

2. 定义和用法

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）

every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测

如果所有元素都满足条件，则返回 true

注意： every() 不会对空数组进行检测

注意： every() 不会改变原始数组

3. 语法

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

4. 参数说明

5. 技术细节

返回值： 布尔值 - 如果所有元素都通过检测返回 true，否则返回 false

2. filter() 检测数组元素，并返回符合条件所有元素的数组

1、实例

返回数组 ages 中所有元素都大于 18 的元素:

var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

输出结果为:

32,33,40

2. 定义和用法

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

注意： filter() 不会对空数组进行检测

注意： filter() 不会改变原始数组

3. 语法

array.filter(function(currentValue,index,arr), thisValue)

4. 参数说明

5. 技术细节

返回值：返回数组，包含了符合条件的所有元素，如果没有符合条件的元素则返回空数组

3. find() 返回符合传入测试（函数）条件的数组元素

1. 实例

获取数组中第一个值为 18 或更大的元素的值：

var ages = [3, 10, 18, 20];
function checkAdult(age) {
  return age >= 18;
}
function myFunction() {
  document.getElementById("demo").innerHTML = ages.find(checkAdult);
}

2. 定义和用法

​find()​ 方法返回数组中第一个通过测试的元素的值（作为函数提供）

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

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

否则返回 undefined

注释：​find()​ 不对空数组执行该函数

注释：​find()​ 不会改变原始数组

3. 语法

array.find(function(currentValue, index, arr), thisValue)

4. 参数值

5. 技术细节

1. 返回值： 如果数组中的任何元素通过测试，则返回数组元素值，否则返回 undefined

2. JavaScript 版本: ECMAScript 6

4. map() 通过指定函数处理数组的每个元素，并返回处理后的数组

1. 实例

返回一个数组，数组中元素为原始数组的平方根:

var numbers = [4, 9, 16, 25];
function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}

输出结果为:

2,3,4,5

2. 定义和用法

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

map() 方法按照原始数组元素顺序依次处理元素

注意： map() 不会对空数组进行检测

注意： map() 不会改变原始数组

3. 语法

array.map(function(currentValue,index,arr), thisValue)

4. 参数说明

5. slice() 选取数组的的一部分，并返回一个新数组

1. 实例

在数组中读取元素：

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

citrus 结果输出:

Orange,Lemon

2. 定义和用法

slice() 方法可从已有的数组中返回选定的元素

slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分

注意： slice() 方法不会改变原始数组

3. 语法

array.slice(start, end)

4. 参数值

5. 返回值

Array 返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

6. splice() 从数组中添加或删除元素

1. 实例

数组中添加新元素：

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

fruits 输出结果：

Banana,Orange,Lemon,Kiwi,Apple,Mango

2. 定义和用法

splice() 方法用于插入、删除或替换数组的元素

注意：这种方法会改变原始数组！

3. 语法

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

4. 参数值

5. 返回值

Array 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

7. shift() 删除数组的第一个元素

1. 实例

从数组中移除元素:

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

fruits结果输出:

Orange,Apple,Mango

2. 定义和用法

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

注意： 此方法改变数组的长度

提示: 移除数组末尾的元素可以使用 pop() 方法

3. 语法

array.shift()

4. 返回值

任何类型（*） 数组原来的第一个元素的值（移除的元素）

*：数组元素可以是一个字符串，数字，数组，布尔，或者其他对象类型

8. unshift() 向数组的开头添加一个或更多元素，并返回新的长度

1. 实例

将新项添加到数组起始位置:

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

fruits 将输出：

Lemon,Pineapple,Banana,Orange,Apple,Mango

2. 定义和用法

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

注意： 该方法将改变数组的数目。

提示: 将新项添加到数组末尾，请使用 push() 方法。

3. 语法

array.unshift(item1,item2, ..., itemX)

4. 参数值

9. pop() 删除数组的最后一个元素并返回删除的元素

1. 实例

移除最后一个数组元素

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

fruits 结果输出：

Banana,Orange,Apple

2. 定义和用法

pop() 方法用于删除数组的最后一个元素并返回删除的元素

注意：此方法改变数组的长度

提示： 移除数组第一个元素，请使用 shift() 方法

3. 语法

array.pop()

4. 返回值

所有类型* The removed array item

*数组元素可以是一个字符串，数字，数组，布尔，或者其他对象类型

10. push() 向数组的末尾添加一个或更多元素，并返回新的长度

1. 实例

数组中添加新元素：

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

fruits 结果输出：

Banana,Orange,Apple,Mango,Kiwi

2. 定义和用法

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

注意： 新元素将添加在数组的末尾

注意： 此方法改变数组的长度

提示： 在数组起始位置添加元素请使用 unshift() 方法

3. 语法

array.push(item1, item2, ..., itemX)

4. 参数值

5. 返回值

Number 数组新长度

总结

到此这篇关于JavaScript常见内置函数大全数组篇的文章就介绍到这了,更多相关JS常见数组内置函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论