1.js 数组操作常用方法

发布于 2022年 02月 14日 15:49

1.every()

  • 检测所有元素是否符合条件
  • 返回布尔值
  • 如果数组中有一个元素不符合条件, 就返回false,剩余元素不进行检测
  • every()不会对空数组进行检测  不会改变原数组
  • 接受函数参数
参数描述
function(currentValue, index,arr)
必须。函数,数组中的每个元素都会执行这个函数
函数参数:
参数描述
currentValue
必须。当前元素的值
index
可选。当前元素的索引值
arr
可选。当前元素属于的数组对象
thisValue
可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"

检测数组ages中是否有元素大于输入框输入的值:

<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p><button onclick="myFunction()">点我</button><p>是否所有年龄都符号条件? <span id="demo"></span></p><script>var ages = [32, 33, 12, 40];function checkAdult(age) {    return age >= document.getElementById("ageToCheck").value;}function myFunction() {    document.getElementById("demo").innerHTML = ages.every(checkAdult);}</script>

2.find()

  • find()返回符合条件的第一个元素的值
  • find为数组中的每个元素都调用一次,符合条件时返回元素的值, 后面不再调用执行函数
  • find()对于空数组,函数是不执行的
  • find()不改变原数组的原始值
  • find()接受参数 是个函数array.find(function(currentValue, index, arr),thisValue)
参数描述
function(currentValue, index,arr)
必需。数组每个元素需要执行的函数。
函数参数:
参数描述
currentValue
必需。当前元素
index
可选。当前元素的索引值
arr
可选。当前元素所属的数组对象
thisValue
可选。 传递给函数的值一般用 "this" 值。
如果这个参数为空, "undefined" 会传递给 "this" 值

var ages = [4, 12, 16, 20];
 
function checkAdult(age) {
    return age >= document.getElementById("ageToCheck").value;
}
 
function myFunction() {
    document.getElementById("demo").innerHTML = ages.find(checkAdult);
}

3.some()

  • some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
  • some() 方法会依次执行数组的每个元素:

    • 如果有一个元素满足条件,则表达式返回
      true
      , 剩余的元素不会再执行检测。
    • 如果没有满足条件的元素,则返回false。
  • some() 不会对空数组进行检测。
  • some() 不会改变原始数组。
  • array.some(function(currentValue,index,arr),thisValue)
参数描述
function(currentValue, index,arr)
必须。函数,数组中的每个元素都会执行这个函数
函数参数:
参数描述
currentValue
必须。当前元素的值
index
可选。当前元素的索引值
arr
可选。当前元素属于的数组对象
thisValue
可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"


<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p><button onclick="myFunction()">点我</button><p>判断结果: <span id="demo"></span></p><script>var ages = [4, 12, 16, 20];function checkAdult(age) {    return age >= document.getElementById("ageToCheck").value;}function myFunction() {    document.getElementById("demo").innerHTML = ages.some(checkAdult);}</script>


4.includes()

  • includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false
参数描述
searchElement
必须。需要查找的元素值。
fromIndex
可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true


5.findIndex()

  • findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

  • findIndex() 方法为数组中的每个元素都调用一次函数执行:当数组中的元素在测试条件时返回true时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1
  •  findIndex() 对于空数组,函数是不会执行的
  •  findIndex() 并没有改变数组的原始值。
参数描述
function(currentValue, index,arr)
必须。数组每个元素需要执行的函数。
函数参数:
参数描述
currentValue
必需。当前元素
index
可选。当前元素的索引
arr
可选。当前元素所属的数组对象
thisValue
可选。 传递给函数的值一般用 "this" 值。
如果这个参数为空, "undefined" 会传递给 "this" 值

var ages = [4, 12, 16, 20];
 
function checkAdult(age) {
    return age >= document.getElementById("ageToCheck").value;
}
 
function myFunction() {
    document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}

6.filter()

  • filter()方法创建一个新数组,返回检查的数组中所有符合条件的元素
  • filter()不会对空数组进行检测
  • filter()不会改变原始数组
  • filter()接受参数是个函数 array.filter(function(currentValue,index,arr), thisValue)
参数描述
function(currentValue, index,arr)
必须。函数,数组中的每个元素都会执行这个函数
函数参数:
参数描述
currentValue
必须。当前元素的值
index
可选。当前元素的索引值
arr
可选。当前元素属于的数组对象
thisValue
可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"

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

7.forEach()

  • forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数
  • forEach() 对于空数组是不会执行回调函数的
  • forEach()遍历时无法手动跳出循环
  • forEach接受一个函数作为参数array.forEach(function(currentValue, index, arr), thisValue)
参数描述
function(currentValue, index, arr)
必需。 数组中每个元素需要调用的函数。
函数参数:
参数描述
currentValue
必需。当前元素
index
可选。当前元素的索引值。
arr
可选。当前元素所属的数组对象。
thisValue
可选。传递给函数的值一般用 "this" 值。
如果这个参数为空, "undefined" 会传递给 "this" 值

<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p>
 
<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];
 
function myFunction(item, index) {
    demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; 
}
</script>

8.from()

  • from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组
  • 如果对象是数组返回 true,否则返回 false
  • Array.from(object, mapFunction, thisValue)
参数描述
object
必需,要转换为数组的对象。
mapFunction
可选,数组中每个元素要调用的函数。
thisValue
可选,映射函数(mapFunction)中的 this 对象。

var setObj = new Set(["a", "b", "c"]);
var objArr = Array.from(setObj);
objArr[1] == "b";  // true

var arr = Array.from([1, 2, 3], x => x * 10);
// arr[0] == 10;
// arr[1] == 20;
// arr[2] == 30;

9.join()

  • join() 方法用于把数组中的所有元素转换一个字符串。
  • 元素是通过指定的分隔符进行分隔的。
  • array.join(separator)
参数描述
separator
可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

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

Banana,Orange,Apple,Mango

10.map()

  • map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
  • map() 方法按照原始数组元素顺序依次处理元素
  •  map() 不会对空数组进行检测。
  • map() 不会改变原始数组。
  • array.map(function(currentValue,index,arr), thisValue)
参数描述
function(currentValue, index,arr)
必须。函数,数组中的每个元素都会执行这个函数
函数参数:
参数描述
currentValue
必须。当前元素的值
index
可选。当前元素的索引值
arr
可选。当前元素属于的数组对象
thisValue
可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。

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

2,3,4,5

数组中的每个元素乘于输入框指定的值,并返回新数组:
var numbers = [65, 44, 12, 4];function multiplyArrayElement(num) {    return num * document.getElementById("multiplyWith").value;}function myFunction() {    document.getElementById("demo").innerHTML = numbers.map(multiplyArrayElement);}

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

12.slice()选取数组的一部分,并返回一个新数组。

13.reduce()将数组元素计算为一个值(从左到右)

14.reduceRight()将数组元素计算为一个值(从右到左)。


推荐文章