js数组方法总结

傷城~ 2022-06-03 03:29 148阅读 0赞

Array.from() 方法从一个类似数组或可迭代的对象中创建一个新的数组实例

Array.from('foo');
    // ["f", "o", "o"]

Array.isArray() 用于确定传递的值是否是一个 Array。

Array.isArray([1, 2, 3]);  
    // true
    Array.isArray({foo: 123}); 
    // false

Array.of() 方法创建一个具有可变数量参数的新数组实例

Array.of(7);       // [7] 
    Array.of(1, 2, 3); // [1, 2, 3]

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

let arr1 = ["a", "b", "c"];
    let arr2 = ["d", "e", "f"];
    
    let arr3 = arr1.concat(arr2);
    
    console.log(arr3);
    // results in a new array 
    // [ "a", "b", "c", "d", "e", "f" ]

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小。

["alpha", "beta", "copy", "delta"].copyWithin(1, 2, 3);
    // 0:"alpha" 1:"beta" 2:"copy" 3:"delta"
    // ["alpha", "copy", "copy", "delta"]
    // 0:"alpha" 1:"copy" 2:"copy" 3:"delta"

entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

every() 方法测试数组的所有元素是否都通过了指定函数的测试。

function isBigEnough(element, index, array) {
      return (element >= 10);
    }
    var passed = [12, 5, 8, 130, 44].every(isBigEnough);
    // passed is false
    passed = [12, 54, 18, 130, 44].every(isBigEnough);
    // passed is true

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

var numbers = [1, 2, 3]
    numbers.fill(1);
    
    // results in [1, 1, 1]

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

function isBigEnough(value) {
      return value >= 10;
    }
    
    var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    
    // filtered is [12, 130, 44]
    
    // ES6 way
    
    const isBigEnough = value => value >= 10;
    
    let [...spraed]= [12, 5, 8, 130, 44];
    
    let filtered = spraed.filter(isBigEnough);
    
    // filtered is [12, 130, 44]

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

function isBigEnough(element) {
      return element >= 15;
    }
    
    [12, 5, 8, 130, 44].find(isBigEnough); // 130

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

function isBigEnough(element) {
      return element >= 15;
    }
    
    [12, 5, 8, 130, 44].findIndex(isBigEnough); // 3

forEach() 方法对数组的每个元素执行一次提供的函数

let a = ['a', 'b', 'c'];
    
    a.forEach(function(element) {
        console.log(element);
    });
    
    // a
    // b
    // c

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

let a = [1, 2, 3];
    
    a.includes(2); 
    // true 
    
    a.includes(4); 
    // false

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

let a = [2, 9, 7, 8, 9]; 
    a.indexOf(2); // 0 
    a.indexOf(6); // -1

join() 方法将数组（或一个类数组对象）的所有元素连接到一个字符串中。

let a = ['Wind', 'Rain', 'Fire'];
    
    a.join(); 
    // 默认为 ","
    // 'Wind,Rain,Fire'
    
    a.join("-"); 
    // 分隔符 "-"
    // 'Wind-Rain-Fire'

keys() 方法返回一个新的Array迭代器，它包含数组中每个索引的键。

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

var array = [2, 5, 9, 2];
    var index = array.lastIndexOf(2);
    // index is 3

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

let numbers = [1, 5, 10, 15];
    let doubles = numbers.map((x) => {
       return x * 2;
    });
    
    // doubles is now [2, 10, 20, 30]
    // numbers is still [1, 5, 10, 15]

pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

let a = [1, 2, 3];
    a.length; // 3
    
    a.pop(); // 3
    
    console.log(a); // [1, 2]
    a.length; // 2

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

var numbers = [1, 2, 3];
    numbers.push(4);
    
    console.log(numbers); 
    // [1, 2, 3, 4]

reduce() 方法对累加器和数组中的每个元素 (从左到右)应用一个函数，将其减少为单个值。

var total = [0, 1, 2, 3].reduce(function(sum, value) {
      return sum + value;
    }, 0);
    // total is 6
    
    var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
      return a.concat(b);
    }, []);
    // flattened is [0, 1, 2, 3, 4, 5]

reduceRight() 方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

let flattened = [
        [0, 1], 
        [2, 3], 
        [4, 5]
    ].reduceRight((a, b) => {
        return a.concat(b);
    }, []);
    
    // flattened is [4, 5, 2, 3, 0, 1]

reverse() 方法将数组中元素的位置颠倒。

var myArray = ['one', 'two', 'three'];
    myArray.reverse(); 
    
    console.log(myArray) // ['three', 'two', 'one']

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

let a = [1, 2, 3];
    let b = a.shift();
    
    console.log(a); 
    // [2, 3]
    
    console.log(b); 
    // 1

slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，原始数组不会改变

some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

const isBiggerThan10 = (element, index, array) => {
      return element > 10;
    }
    
    [2, 5, 8, 1, 4].some(isBiggerThan10);  
    // false
    
    [12, 5, 8, 1, 4].some(isBiggerThan10); 
    // true

sort() 方法在适当的位置对数组的元素进行排序，并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。

var fruit = ['cherries', 'apples', 'bananas'];
    fruit.sort(); 
    // ['apples', 'bananas', 'cherries']
    
    var scores = [1, 10, 21, 2]; 
    scores.sort(); 
    // [1, 10, 2, 21]
    // 注意10在2之前,
    // 因为在 Unicode 指针顺序中"10"在"2"之前

splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
    
    myFish.splice(2, 0, 'drum'); // 在索引为2的位置插入'drum'
    // myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"]
    
    myFish.splice(2, 1); // 从索引为2的位置删除一项（也就是'drum'这一项）
    // myFish 变为 ["angel", "clown", "mandarin", "sturgeon"]

toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。

var number = 1337;
    var date = new Date();
    var myArr = [number, date, "foo"];
    
    var str = myArr.toLocaleString(); 
    
    console.log(str); 
    // 输出 "1337,2015/2/27 下午8:29:04,foo" 
    // 假定运行在中文（zh-CN）环境，北京时区

toString() 返回一个字符串，表示指定的数组及其元素。

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

values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。

let arr = ['w', 'y', 'k', 'o', 'p'];
    let eArr = arr.values();
    // 您的浏览器必须支持 for..of 循环
    // 以及 let —— 将变量作用域限定在 for 循环中
    for (let letter of eArr) {
      console.log(letter);
    }

参考：[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Array][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Array]

[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Array]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array