美文网首页前端大杂烩
javascript Array操作手册

javascript Array操作手册

作者: 写写而已 | 来源:发表于2020-05-12 20:14 被阅读0次

    转载原文地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString

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

    console.log(Array.from('foo'));
    // expected output: Array ["f", "o", "o"]
    
    console.log(Array.from([1, 2, 3], x => x + x));
    // expected output: Array [2, 4, 6]
    

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

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

    Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

    Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为7的空数组(注意:这是指一个有7个空位(empty)的数组,而不是由7个undefined组成的数组)。

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

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

    const array1 = ['a', 'b', 'c'];
    const array2 = ['d', 'e', 'f'];
    const array3 = array1.concat(array2);
    
    console.log(array3);
    // expected output: Array ["a", "b", "c", "d", "e", "f"]
    

    copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

    const array1 = ['a', 'b', 'c', 'd', 'e'];
    
    // copy to index 0 the element at index 3
    console.log(array1.copyWithin(0, 3, 4));
    // expected output: Array ["d", "b", "c", "d", "e"]
    
    // copy to index 1 all elements from index 3 to the end
    console.log(array1.copyWithin(1, 3));
    // expected output: Array ["d", "d", "e", "d", "e"]
    

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

    const array1 = ['a', 'b', 'c'];
    
    const iterator1 = array1.entries();
    
    console.log(iterator1.next().value);
    // expected output: Array [0, "a"]
    
    console.log(iterator1.next().value);
    // expected output: Array [1, "b"]
    

    every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
    注意:若收到一个空数组,此方法在一切情况下都会返回 true。

    const isBelowThreshold = (currentValue) => currentValue < 40;
    
    const array1 = [1, 30, 39, 29, 10, 13];
    
    console.log(array1.every(isBelowThreshold));
    // expected output: true
    

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

    const array1 = [1, 2, 3, 4];
    
    // fill with 0 from position 2 until position 4
    console.log(array1.fill(0, 2, 4));
    // expected output: [1, 2, 0, 0]
    
    // fill with 5 from position 1
    console.log(array1.fill(5, 1));
    // expected output: [1, 5, 5, 5]
    
    console.log(array1.fill(6));
    // expected output: [6, 6, 6, 6]
    

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

    const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
    
    const result = words.filter(word => word.length > 6);
    
    console.log(result);
    // expected output: Array ["exuberant", "destruction", "present"]
    

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

    const array1 = [5, 12, 8, 130, 44];
    
    const found = array1.find(element => element > 10);
    
    console.log(found);
    // expected output: 12
    

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

    const array1 = [5, 12, 8, 130, 44];
    
    const isLargeNumber = (element) => element > 13;
    
    console.log(array1.findIndex(isLargeNumber));
    // expected output: 3
    

    flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

    var arr1 = [1, 2, [3, 4]];
    arr1.flat(); 
    // [1, 2, 3, 4]
    
    var arr2 = [1, 2, [3, 4, [5, 6]]];
    arr2.flat();
    // [1, 2, 3, 4, [5, 6]]
    
    var arr3 = [1, 2, [3, 4, [5, 6]]];
    arr3.flat(2);
    // [1, 2, 3, 4, 5, 6]
    
    //使用 Infinity,可展开任意深度的嵌套数组
    var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
    arr4.flat(Infinity);
    // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    flat() 方法会移除数组中的空项:
    var arr4 = [1, 2, , 4, 5];
    arr4.flat();
    // [1, 2, 4, 5]
    

    flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。

    var arr1 = [1, 2, 3, 4];
    
    arr1.map(x => [x * 2]); 
    // [[2], [4], [6], [8]]
    
    arr1.flatMap(x => [x * 2]);
    // [2, 4, 6, 8]
    
    // only one level is flattened
    arr1.flatMap(x => [[x * 2]]);
    // [[2], [4], [6], [8]]
    

    forEach() 方法对数组的每个元素执行一次给定的函数。

    const array1 = ['a', 'b', 'c'];
    
    array1.forEach(element => console.log(element));
    
    // expected output: "a"
    // expected output: "b"
    // expected output: "c"
    

    includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。

    const array1 = [1, 2, 3];
    
    console.log(array1.includes(2));
    // expected output: true
    
    const pets = ['cat', 'dog', 'bat'];
    
    console.log(pets.includes('cat'));
    // expected output: true
    
    console.log(pets.includes('at'));
    // expected output: false
    

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

    const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
    
    console.log(beasts.indexOf('bison'));
    // expected output: 1
    
    // start from index 2
    console.log(beasts.indexOf('bison', 2));
    // expected output: 4
    
    console.log(beasts.indexOf('giraffe'));
    // expected output: -1
    

    join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

    const elements = ['Fire', 'Air', 'Water'];
    
    console.log(elements.join());
    // expected output: "Fire,Air,Water"
    
    console.log(elements.join(''));
    // expected output: "FireAirWater"
    
    console.log(elements.join('-'));
    // expected output: "Fire-Air-Water"
    

    keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。

    const array1 = ['a', 'b', 'c'];
    const iterator = array1.keys();
    
    for (const key of iterator) {
      console.log(key);
    }
    
    // expected output: 0
    // expected output: 1
    // expected output: 2
    

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

    const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
    
    console.log(animals.lastIndexOf('Dodo'));
    // expected output: 3
    
    console.log(animals.lastIndexOf('Tiger'));
    // expected output: 1
    var array = [2, 5, 9, 2];
    var index = array.lastIndexOf(2);
    // index is 3
    index = array.lastIndexOf(7);
    // index is -1
    index = array.lastIndexOf(2, 3);
    // index is 3
    index = array.lastIndexOf(2, 2);
    // index is 0
    index = array.lastIndexOf(2, -2);
    // index is 0
    index = array.lastIndexOf(2, -1);
    // index is 3
    

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

    const array1 = [1, 4, 9, 16];
    
    // pass a function to map
    const map1 = array1.map(x => x * 2);
    
    console.log(map1);
    // expected output: Array [2, 8, 18, 32]
    

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

    const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
    
    console.log(plants.pop());
    // expected output: "tomato"
    
    console.log(plants);
    // expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]
    
    plants.pop();
    
    console.log(plants);
    // expected output: Array ["broccoli", "cauliflower", "cabbage"]
    

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

    const animals = ['pigs', 'goats', 'sheep'];
    
    const count = animals.push('cows');
    console.log(count);
    // expected output: 4
    console.log(animals);
    // expected output: Array ["pigs", "goats", "sheep", "cows"]
    
    animals.push('chickens', 'cats', 'dogs');
    console.log(animals);
    // expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]
    

    reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

    const array1 = [1, 2, 3, 4];
    const reducer = (accumulator, currentValue) => accumulator + currentValue;
    
    // 1 + 2 + 3 + 4
    console.log(array1.reduce(reducer));
    // expected output: 10
    
    // 5 + 1 + 2 + 3 + 4
    console.log(array1.reduce(reducer, 5));
    // expected output: 15
    

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

    const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
      (accumulator, currentValue) => accumulator.concat(currentValue)
    );
    
    console.log(array1);
    // expected output: Array [4, 5, 2, 3, 0, 1]
    

    reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

    const array1 = ['one', 'two', 'three'];
    console.log('array1:', array1);
    // expected output: "array1:" Array ["one", "two", "three"]
    
    const reversed = array1.reverse();
    console.log('reversed:', reversed);
    // expected output: "reversed:" Array ["three", "two", "one"]
    
    // Careful: reverse is destructive -- it changes the original array.
    console.log('array1:', array1);
    // expected output: "array1:" Array ["three", "two", "one"]
    

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

    const array1 = [1, 2, 3];
    
    const firstElement = array1.shift();
    
    console.log(array1);
    // expected output: Array [2, 3]
    
    console.log(firstElement);
    // expected output: 1
    

    slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

    const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
    
    console.log(animals.slice(2));
    // expected output: Array ["camel", "duck", "elephant"]
    
    console.log(animals.slice(2, 4));
    // expected output: Array ["camel", "duck"]
    
    console.log(animals.slice(1, 5));
    // expected output: Array ["bison", "camel", "duck", "elephant"]
    

    some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。
    注意:如果用一个空数组进行测试,在任何情况下它返回的都是false。

    const array = [1, 2, 3, 4, 5];
    
    // checks whether an element is even
    const even = (element) => element % 2 === 0;
    
    console.log(array.some(even));
    // expected output: true
    

    sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的

    由于它取决于具体实现,因此无法保证排序的时间和空间复杂性。

    const months = ['March', 'Jan', 'Feb', 'Dec'];
    months.sort();
    console.log(months);
    // expected output: Array ["Dec", "Feb", "Jan", "March"]
    
    const array1 = [1, 30, 4, 21, 100000];
    array1.sort();
    console.log(array1);
    // expected output: Array [1, 100000, 21, 30, 4]
    var numbers = [4, 2, 5, 1, 3];
    numbers.sort(function(a, b) {
      return a - b;
    });
    console.log(numbers);
    
    也可以写成:
    var numbers = [4, 2, 5, 1, 3]; 
    numbers.sort((a, b) => a - b); 
    console.log(numbers);
    
    // [1, 2, 3, 4, 5]
    

    splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

    const months = ['Jan', 'March', 'April', 'June'];
    months.splice(1, 0, 'Feb');
    // inserts at index 1
    console.log(months);
    // expected output: Array ["Jan", "Feb", "March", "April", "June"]
    
    months.splice(4, 1, 'May');
    // replaces 1 element at index 4
    console.log(months);
    // expected output: Array ["Jan", "Feb", "March", "April", "May"]
    

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

    const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
    const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });
    
    console.log(localeString);
    // expected output: "1,a,12/21/1997, 2:12:00 PM",
    // This assumes "en" locale and UTC timezone - your results may vary
    

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

    const array1 = [1, 2, 'a', '1a'];
    
    console.log(array1.toString());
    // expected output: "1,2,a,1a"
    

    unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。

    const array1 = [1, 2, 3];
    
    console.log(array1.unshift(4, 5));
    // expected output: 5
    
    console.log(array1);
    // expected output: Array [4, 5, 1, 2, 3]
    

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

    const array1 = ['a', 'b', 'c'];
    const iterator = array1.values();
    
    for (const value of iterator) {
      console.log(value);
    }
    
    // expected output: "a"
    // expected output: "b"
    // expected output: "c"
    

    以上Array操作整理自己记忆使用,具体的更精准的操作请查看https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/values

    相关文章

      网友评论

        本文标题:javascript Array操作手册

        本文链接:https://www.haomeiwen.com/subject/irpinhtx.html