js操作的数组方法(持续更新)

最新推荐文章于 2023-07-05 17:49:49 发布

jkl_AINY

最新推荐文章于 2023-07-05 17:49:49 发布

阅读量465

点赞数

文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/jkl_AINY/article/details/124314504

版权

经常用

array.concat()

用于拼接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

let newArray = array1.concat(array2,array3,...,arrayX)

array.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;
}

console.log(ages.filter(checkAdult));  //输出32,33,40

array.forEach()

循环数组，并将元素传递给回调函数。

不会对空数组进行检测

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

    function(currentValue, index, arr) 必需。 数组中每个元素需要调用的函数。
        currentValue	必需。当前元素
        index	可选。当前元素的索引值。
        arr	可选。当前元素所属的数组对象。      

    thisValue    可选。传递给函数的值一般用 "this" 值。
                 如果这个参数为空， "undefined" 会传递给 "this" 值

array.join()

用于把数组中的所有元素转换一个字符串。元素是通过指定的分隔符进行分隔的。

array.join(separator)
    
    separator	可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

array.map()

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。按照原始数组元素顺序依次处理元素。

不会改变原始数组，不会对空数组进行检测。

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

    function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数
        currentValue	必须。当前元素的值
        index	可选。当前元素的索引值
        arr	可选。当前元素属于的数组对象

    thisValue  可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
               如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

array.push()

可向数组的末尾添加一个或多个元素，并返回新的长度。

此方法改变数组的长度

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")
fruits 结果输出：

Banana,Orange,Apple,Mango,Kiwi

array.splice()

用于添加或删除数组中的元素。

这种方法会改变原始数组

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

    index	必需。规定从何处添加/删除元素。
    该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
    
    howmany	可选。规定应该删除多少元素。必须是数字，但可以是 "0"。
    如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。

    item1, ..., itemX	可选。要添加到数组的新元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
fruits 输出结果：

Banana,Orange,Lemon,Kiwi,Mango

array.toString()

把数组转换为字符串，并返回结果。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
fruits将输出：

Banana,Orange,Apple,Mango

偶尔用

array.every()

检测数组所有元素是否都符合指定条件（通过函数提供）。

不会改变原始数组，不会对空数组进行检测。

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

array.every(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;
}

ages.every(checkAdult)输出结果为:

false

array.some()

检测数组中的元素是否满足指定条件（函数提供）。

不会改变原始数组，不会对空数组进行检测。

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

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

    function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数
        currentValue	必须。当前元素的值
        index	可选。当前元素的索引值
        arr	可选。当前元素属于的数组对象

    thisValue   可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
                如果省略了 thisValue ，"this" 的值为 "undefined"


var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}
ages.some(checkAdult)输出结果为:

true

array.keys()

遍历键名。

for(let key of ['a', 'b'].keys()){
    console.log(key);
}
// 0
// 1
 
// 数组含空位
console.log([...[,'a'].keys()]); // [0, 1]

array.includes()

数组是否包含指定值。

// 参数1：包含的指定值
[1, 2, 3].includes(1);    // true
 
// 参数2：可选，搜索的起始索引，默认为0
[1, 2, 3].includes(1, 2); // false
 
// NaN 的包含判断
[1, NaN, 3].includes(NaN); // true

array.indexOf()

可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。

string.indexOf(searchvalue,start)

    searchvalue	必需。规定需检索的字符串值。
    start	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string                 Object.length - 1。如省略该参数，则将从字符串的首字符开始检索。

array.pop()

用于删除数组的最后一个元素并返回删除的元素。

此方法改变数组的长度

array.pop()

const sites = ['Google', 'Runoob', 'Taobao', 'Zhihu', 'Baidu'];
 
console.log(sites.pop());
// 输出结果为: "Baidu"
 
console.log(sites);
// 输出结果为: ['Google', 'Runoob', 'Taobao', 'Zhihu']
 
sites.pop();
 
console.log(sites);
//  输出结果为: ["Google", "Runoob", "Taobao"]

array.shift()

用于把数组的第一个元素从其中删除，并返回第一个元素的值。

此方法改变数组的长度

array.shift()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
fruits结果输出:

Orange,Apple,Mango

array.unshift()

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

此方法改变数组的长度

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

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

Lemon,Pineapple,Banana,Orange,Apple,Mango

array.reverse()

用于颠倒数组中元素的顺序。

array.reverse()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
fruits 结果输出：

Mango,Apple,Orange,Banana

array.slice()

可从已有的数组中返回选定的元素。可提取字符串的某个部分，并以新的字符串返回被提取的部分。

不会改变原始数组

array.slice(start, end)

    start	可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
    end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

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

Orange,Lemon

基本不用

array.find()

array.findLast() 从后向前遍历数组

返回通过测试（函数内判断）的数组的第一个元素的值。

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined

不会改变原始数组，不会对空数组进行检测。

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

    function(currentValue, index,arr)	必需。数组每个元素需要执行的函数。
        currentValue	必需。当前元素
        index	可选。当前元素的索引值
        arr	可选。当前元素所属的数组对象

    thisValue	可选。 传递给函数的值一般用 "this" 值。
    如果这个参数为空， "undefined" 会传递给 "this" 值    


var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
ages.find(checkAdult); //18

array.findIndex()

array.findLastIndex() 从后向前遍历数组

返回传入一个测试条件（函数）符合条件的数组第一个元素位置

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1

不会改变原始数组，不会对空数组进行检测。

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

    function(currentValue, index,arr)	必须。数组每个元素需要执行的函数。
        currentValue	必需。当前元素
        index	可选。当前元素的索引
        arr	可选。当前元素所属的数组对象

    thisValue	可选。 传递给函数的值一般用 "this" 值。
    如果这个参数为空， "undefined" 会传递给 "this" 值

var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
ages.findIndex(checkAdult);  //2

array.copyWithin()

从数组的指定位置拷贝元素到数组的另一个指定位置中

原数组被改变

array.copyWithin(target, start, end)

    arget	必需。复制到指定目标索引位置。
    start	可选。元素复制的起始位置。
    end	可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

// 复制数组的前面两个元素到后面两个元素上：
var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
fruits.copyWithin(2, 0);//Banana,Orange,Banana,Orange

比较难理解，需要多敲实例找到规律

array.entries()

返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。迭代对象中数组的索引值作为 key，数组元素作为 value。

array.entries()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.entries();//返回一个可迭代数组
for(let [index,value] of arr.entries()){
	//直接打印看不到,可以利用数组解构
	console.log(index,value)
    /*
        [0, "Banana"]
        [1, "Orange"]
        [2, "Apple"]
        [3, "Mango"]
    */
}

array.fill()

将一个固定值替换数组的元素。

array.fill(value, start, end)

    value	必需。填充的值。
    start	可选。开始填充位置。
    end	可选。停止填充位置 (默认为 array.length)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4);
fruits 输出结果：Banana,Orange,Runoob,Runoob

array.of()

将参数中所有值作为元素形成数组

console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
 
// 参数值可为不同类型
console.log(Array.of(1, '2', true)); // [1, '2', true]
 
// 参数为空时返回空数组
console.log(Array.of()); // []

array.from()

将类数组对象或可迭代对象转化为数组。

Array.from(arrayLike[, mapFn[, thisArg]])

    arrayLike 想要转换的类数组对象或可迭代对象。
        
        console.log(Array.from([1, 2, 3])); // [1, 2, 3]

    mapFn 可选，map 函数，用于对每个元素进行处理，放入数组的是处理后的元素。

        console.log(Array.from([1, 2, 3], (n) => n * 2)); // [2, 4, 6]

   thisArg 可选，用于指定 map 函数执行时的 this 对象。

       let map = {
            do: function(n) {
                return n * 2;
            }
        }
        let arrayLike = [1, 2, 3];
        console.log(Array.from(arrayLike, function (n){
            return this.do(n);
        }, map)); // [2, 4, 6] 

转换类数组对象

let arr = Array.from({
  0: '1',
  1: '2',
  2: 3,
  length: 3
});
console.log(arr); // ['1', '2', 3]

// 没有 length 属性,则返回空数组
let array = Array.from({
  0: '1',
  1: '2',
  2: 3,
});
console.log(array); // []
 
// 元素属性名不为数值且无法转换为数值，返回长度为 length 元素值为 undefined 的数组  
let array1 = Array.from({
  a: 1,
  b: 2,
  length: 2
});
console.log(array1); // [undefined, undefined]

转换可迭代对象

转换 map

let map = new Map();
map.set('key0', 'value0');
map.set('key1', 'value1');
console.log(Array.from(map)); // [['key0', 'value0'],['key1',
// 'value1']]

转换 set

let arr = [1, 2, 3];
let set = new Set(arr);
console.log(Array.from(set)); // [1, 2, 3]

转换字符串

let str = 'abc';
console.log(Array.from(str)); // ["a", "b", "c"]

array.values()

遍历键值。

for(let value of ['a', 'b'].values()){
    console.log(value);
}
// "a"
// "b"
 
// 数组含空位
console.log([...[,'a'].values()]); // [undefined, "a"]

array.flat()

嵌套数组转一维数组

console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
 
// 指定转换的嵌套层数
console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]
 
// 不管嵌套多少层
console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]
 
// 自动跳过空位
console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]

array.flatMap()

先对数组中每个元素进行了的处理，再对数组执行 flat() 方法。

// 参数1：遍历函数，该遍历函数可接受3个参数：当前元素、当前元素索引、原数组
// 参数2：指定遍历函数中 this 的指向
console.log([1, 2, 3].flatMap(n => [n * 2])); // [2, 4, 6]

array.at()

接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。

const array1 = ['this is the first element', 'this is the second element', 'this is the last element'];

console.log(arr.at(0))              // logs 'this is the first element'
console.log(arr.at(-2))             // logs 'this is the second element'
console.log(arr.at(-1))             // logs 'this is the last element'

array.reduce() 另一篇文章有单独描述

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

array.sort()

对数组的元素进行排序。

这种方法会改变原始数组

array.sort(sortfunction)

    sortfunction	可选。规定排序顺序。必须是函数。

var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
fruits输出结果：

100,40,25,10,5,1

jkl_AINY

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js操作的数组方法(持续更新)

经常用array.concat()用于拼接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。let newArray =array1.concat(array2,array3,...,arrayX)array.filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。不会改变原始数组，不会对空数组进行检测。array.filter(function(currentValue,index,arr), t...
复制链接

扫一扫