常用JavaScript 数组方法,建议收藏备用_javascript数组常用方法包括数组的渲染

54 阅读3分钟

console.log(numbers.indexOf(40)); // 1

console.log(numbers.indexOf(60)); // 3


**4.lastIndexOf( )**


lastIndexOf( ) 方法为您提供您正在查找的元素的最后存在的索引,或者如果该项目不存在则为您提供 -1。 它使用向后搜索来查找项目。



var numbers = [30, 40, 50, 60, 30, 40, 60];

console.log(numbers.lastIndexOf(40)); // 5

console.log(numbers.lastIndexOf(60)); // 6


**5.join()**


join() 方法连接所有元素,每个元素由给定的间隔符分隔并返回一个新字符串。



const alphabets = ["A", "B", "C", "D"]; console.log(alphabets.join(' '));

// Output "A B C D"


**6.pop()**


pop() 方法删除数组的最后一项并返回该元素。



const alphabets = ["A", "B", "C", "D"]; alphabets.pop( ); console.log(alphabets);

// Output [ "A", "B", "C" ]


**7.push()**


push() 方法有助于在数组的后面添加一项或多项并输出更新后的长度。



let colors = ["Red", "Green", "Blue"]; colors.push("Yellow"); console.log(colors);

// Output [ "Red", "Green", "Blue", "Yellow" ]


**8.reverse()**


reverse() 方法翻转数组的位置。 最后一个索引处的元素将排在第一个,而第一个索引处的项目将排在最后。



const alphabets = ["A", "B", "C", "D"]; console.log(alphabets.reverse( ));

// Output [ "D", "C", "B", "A" ]


**9.shift()**


shift() 方法从数组中删除第一个元素并返回该项目。



const alphabets = ["A", "B", "C", "D"]; alphabets.shift( ); console.log(alphabets);

// Output [ "B", "C", "D" ]


**10.Unshift( )**


Unshift( ) 将一个或多个项目添加到数组的开头并返回新的数组长度。



let colors = ["Red", "Green", "Blue"]; colors.unshift("Yellow"); console.log(colors);

// Output [ "Yellow", "Red", "Green", "Blue" ]


**11.slice(startingIndex, endingIndex)**  
 *两个参数分别为:起始下标、结束下标*  
 slice() 方法用于将一个数组的一部分复制到另一个数组中。



const colors = ["Red", "Green", "Blue", "Yellow", "Purple"]; const greenBlue = colors.slice(1, 3); console.log(greenBlue);

// Output [ "Green", "Blue" ]

const arr = [1, 2, 3, 4, 5] const sub = arr.slice(2, 3)

// 原始数组未被修改 arr // [1, 2, 3, 4, 5] sub // [3]


其中 1是起始参数,3是停止参数。  
 也可理解为从下标1位置(含)切割至下标3位置(不含)。


**12.splice(startingIndex, length, …items)**  
 *三个参数分别为:起始下标、切割长度、数组值*  
 splice() 方法允许您在中间向数组添加元素。 如果要删除或替换现有元素,也可以使用此方法。



let numbers = [1, 2, 3, 4]; numbers.splice(2, 0, 5, 6) console.log(numbers);

// Output [ 1, 2, 5, 6, 3, 4 ]

const arr = [1, 2, 3, 4, 5] const sub = arr.splice(2, 3)

// 原始数组已修改 arr // [1, 2] sub // [3, 4, 5]


**13.sort()**


您可以使用 sort() 方法按升序或降序对数组元素进行排序。



const alphabets = ["B", "A", "D", "C"]; console.log(alphabets.sort( ));

// Output [ "A", "B", "C", "D" ]


**14.includes()**


includes() 方法检查一个值。 如果它存在于数组中,它将返回 true; 否则,它将返回 false

const alphabets = ["A", "B", "C", "D"];

console.log(alphabets.includes("B")); // return true

console.log(alphabets.includes("G")); // return false


**15.find()**


ES5 使用 indexOf() 和 lastIndexOf() 方法来查找数组中的元素。 find() 方法是在 ES6 中引入的,此方法给出数组中满足特定条件的第一项作为输出。


以下示例查找数组中的第一个偶数。



let numbers = [1, 3, 4, 6, 7]; console.log(numbers.find(e => e % 2 == 0));

// Output 4


**16.map()**


此方法对现有数组的每一项调用给定函数,并使用输出生成一个新数组。 以下示例演示如何使用 callback() 和 Math 内置函数更改整数数组。



let numbers = [36, 49, 64, 81]; console.log(numbers.map(Math.sqrt));

// Output [ 6, 7, 8, 9 ]


**17.filter()**


filter() 方法仅从满足给定机制标准的元素创建一个新数组。



const numbers = [55, 14, 29, 16, 75]; let over20 = numbers.filter(function (value) { return value > 20; }); console.log(over20);

// Output [ 55, 29, 75 ]


**18.reduce()**


reduce() 方法允许您将数组缩减为单个值。



const numbers = [5, 4, 9, 6, 2]; let result = numbers.reduce((sum, current) => sum + current, 0);
console.log(result);

// Output 26


**19.toString()**


toString() 方法返回一个由逗号分隔的字符串数组。 它不会修改原始数组。



const colors = ["Red", "Green", "Blue", "Yellow", "Purple"]; console.log(colors.toString( ));

// Output "Red, Green, Blue, Yellow, Purple"


**20.every()**


every() 方法用于检查数组中的所有元素是否都满足特定条件。 如果所有元素都通过条件,则该方法返回 true。 否则,它返回 false

let numbers = [1, 3, 5]; let result = numbers.every(function (e) { return e > 0; }); console.log(result); // return true


**21.some()**


some() 方法确定数组中是否至少有一个元素满足既定状态。 根据要求的答案,这将返回 truefalse

let marks = [ 6, 5, 7, 9, 10, 16 ]; lessThanSeven = marks.some(function(e) { return e < 7; }); console.log(lessThanSeven); // return true


**22.findIndex()**


findIndex() 方法生成数组中元素条目的索引。