JS数组方法（最新）

数组方法
- 一、数组方法（添加，删除）
- - 1.push()
  - 2.pop()
  - 3.unshift()
  - 4.shift()
- 二、数组方法（插入，连接，反转，排序，剪切，拼接）
- - 1.splice()
  - 2.concat()
  - 3.reverse()
  - 4.sort()
  - 5.slice()
  - 6.join()
- 三、数组方法（查找，检索，转换）
- - 1.indexOf()
  - 2.lastIndexOf()
  - 3.toString()
  - 4.toLocaleString()
- 四、数组方法（迭代方法）ES5
- - 1.every()
  - 2.some()
  - 3.forEach()
  - 4.map()
  - 5.filter()
- 六、数组方法（归并操作）
- - 1.reduce()
  - 2.reduceRight()
- 七、ES6新增新操作数组的方法
- - 1.find()
  - 2.findIndex()
  - 3.fill()
  - 4.Array.from()
  - 5.Array.of()
  - 6.copyWithin()
  - 7.includes()
  - 8.entries()
  - 9.keys()
  - 10.values()
- 八、ES10新增新操作数组的方法
- - 1.flat()
  - 2.flatMap()

数组方法

一、数组方法（添加，删除）

1.push()

在数组的末尾追加一个元素,返回一个新数组的长度，会改变原数组

var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.push(111));  //10
console.log(arr);  //[1,2,3,4,5,6,7,8,9,111]

2.pop()

删除数组末尾的元素,返回被删除的元素，会改变原数组

var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.pop()); //9
console.log(arr);      //[1,2,3,4,5,6,7,8]

3.unshift()

添加元素到数组的最前面，返回新数组的长度，会改变原数组

var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.unshift(-1,0));    //11
console.log(arr)    //[-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

4.shift()

删除数组中最前面的元素，返回被删除的元素，改变原数组

var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.shift());      //1
console.log(arr);       //[2, 3, 4, 5, 6, 7, 8, 9]

二、数组方法（插入，连接，反转，排序，剪切，拼接）

1.splice()

从指定的位置删除元素并插入元素，截取数组中的某些内容，按照数组的索引来截取，改变原数组

var arr = [1,2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.splice(1,2,[33,44,55]))     //[2,3]
console.log(arr)        //[1, [33,44,55], 4, 5, 6, 7, 8, 9]
//splice(从第几个索引开始，删除元素个数，插入元素的值)    第三个值可写可不写

2.concat()

连接两个数组或元素，返回连接后的新数组，不改变原数组

var arr = [1,2, 3, 4, 5, 6, 7, 8, 9];
//连接元素
var arr1 = 111;
console.log(arr.concat(arr1));     //[1, 2, 3, 4, 5, 6, 7, 8, 9, 111]
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9]//连接数组
var arr2 = [333,444,555];
console.log(arr.concat(arr2));      //[1, 2, 3, 4, 5, 6, 7, 8, 9, 333, 444, 555]
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9]

3.reverse()

将数组反转，返回反转后的值,数组中第一个变成最后一个，最后一个变成第一个

var arr = [1,2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.reverse());     //[9, 8, 7, 6, 5, 4, 3, 2, 1]
console.log(arr);       //[9, 8, 7, 6, 5, 4, 3, 2, 1]

4.sort()

数组排序，默认转字符串再排序，默认排序顺序是根据字符串Unicode码点

var arr = [1,6,8,7,2,3,4,5,'111'];
console.log(arr.sort());    //[1, "111", 2, 3, 4, 5, 6, 7, 8]
console.log(arr)        //[1, "111", 2, 3, 4, 5, 6, 7, 8]var arr1 = ['Alice','Lucy','Bob','Jhon','Lin','FTX'];
console.log(arr1.sort());   //["Alice", "Bob", "FTX", "Jhon", "Lin", "Lucy"]
console.log(arr1)   //["Alice", "Bob", "FTX", "Jhon", "Lin", "Lucy"]
//当第一个字母相同时，看第二个字母

5.slice()

切割数组，返回值为切出来的新数组

var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.slice(3,6));    //[4, 5, 6]
console.log(arr)        //[1,2,3,4,5,6,7,8,9]
//slice(从第几个索引开始,到最后结束的索引)，这里的最后结束索引，不包括最后结束的索引的值

6.join()

把数组拼接成字符串，默认情况下拼接符为逗号

var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.join('_'))      //1_2_3_4_5_6_7_8_9
console.log(arr)        //[1,2,3,4,5,6,7,8,9]

三、数组方法（查找，检索，转换）

1.indexOf()

用来找到数组中某一项的索引

//当数组中包含该值时，indexOf中值的索引
// indexOf(需要查找的元素值，[从哪个位置开始找]),后面的值可写可不写
var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.indexOf(5,2));    //4
console.log(arr)    //[1, 2, 3, 4, 5, 6, 7, 8, 9]//当数组中不包含该值时,则返回-1
var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.indexOf(222));      //-1
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9]

2.lastIndexOf()

与indexOf()的功能是一样的，只不过indexOf是从左往右查找，而lastIndexOf()是从右往左查找

//当数组中包含该值时，lastIndexOf中值的索引
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9,2];
console.log(arr.lastIndexOf(2));    //9
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9,2]//当数组中不包含该值时,则返回-1
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9,2];
console.log(arr.lastIndexOf(222));    //-1
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9,2]

3.toString()

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

var arr = [1,2,'a','b',3,4,'c','d']
console.log(arr.toString()) // 1,2,a,b,3,4,c,d

4.toLocaleString()

可根据本地时间把 Date 对象转换为字符串，并返回结果

var timer =  new Date();
console.log(timer.toLocaleString())     //2021/1/19 下午8:43:25

四、数组方法（迭代方法）ES5

1.every()

测试一个数组内的所有元素是否都能通过某个指定函数的测试，它返回一个布尔值

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var newArr = arr.every(function(value,index){if (value>1) {return true}
})
console.log(newArr)     //false
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9]

2.some()

和every()使用是一样的，测试一个数组内至少有一个元素是否能通过某个指定函数的测试，它返回一个布尔值

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var newArr = arr.some(function(value,index){if (value>7) {return true}
})console.log(newArr)     //trueconsole.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9]

3.forEach()

和for作用一致，用来遍历数组的

//里面有多少个元素，函数就会执行多少次
//语法：arr.forEach(function (item, index, arr) {})
var arr = [1,2,3,4];
arr.forEach(function(item, index, arr){//item 就是数组中的每一项
//index  数组中的索引
//arr   原始数组
console.log('数组的第 ' + index + ' 项的值是 ' + item + '，原始数组是', arr);
//数组的第 0 项的值是 1，原始数组是[1,2,3,4]
//数组的第 0 项的值是 1，原始数组是[1,2,3,4]
//数组的第 0 项的值是 1，原始数组是[1,2,3,4]
//数组的第 0 项的值是 1，原始数组是[1,2,3,4]
})

4.map()

和forEach()类似，只不过可以对数组中的每一项进行操作，返回一个新的数组

var arr = [1,2,3,4,5,6,7,8,9];
var newArr = arr.map(function (item,index,arr){return item*2
})
console.log(newArr);      //[2, 4, 6, 8, 10, 12, 14, 16, 18]
console.log(arr)     //[1, 2, 3, 4, 5, 6, 7, 8, 9]

5.filter()

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

// 语法：       arr.filter(function(value,index，array){})     value当前索引的值，index正在处理元素在数组中的索引，array 调用filter数组本身
// 这个函数可以设置一个返回值
// 返回值会被强转布尔值，凡是false的就是检测不通过的，凡是true的就是检测通过的
// 数组里面有多少个元素，函数就会执行多少次，就会有多少个返回值
// 返回值为true的所有元素就是通过检测的元素，这些元素组成的新数组就是filter的返回值
var arr = [1,2,3,4,5,6,7,8,9];
var newArr = arr.filter(function(value){if (value > 3) {return true}
})
console.log(newArr)     //[4, 5, 6, 7, 8, 9]
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9]

六、数组方法（归并操作）

1.reduce()

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

// 语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])var arr = [1,2,3,4,5]var sum = arr.reduce(function(accumulator,currentValue){console.log("本次遍历到的数组元素的值是:"+currentValue)console.log("上一次调用回调时返回的值:"+accumulator)// accumulator:上一次调用回调时返回的值 (累计器)// currentValue:当前遍历到的值  (当前值)//currentindex:当前索引//Sourcearray:  源数组return accumulator+currentValue;});console.log(sum)

2.reduceRight()

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

var arr = [5,8,10,16];function getSum(total, num) {return total + num;
}
function myFunction(item) {console.log(arr.reduceRight(getSum));        //39
}
myFunction()

七、ES6新增新操作数组的方法

1.find()

找到第一个符合条件的元素

// 语法：arr.find(function(value,index,array))
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var newArr = arr.find(function(value,index,arr){if(value>5){return true}
})
console.log(newArr)     //6
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9]

2.findIndex()

找到第一个符合条件的数组元素的索引值

        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];var newArr = arr.findIndex(function(value,index,arr){if(value>5){return true}})console.log(newArr)     //5console.log(arr)    //[1, 2, 3, 4, 5, 6, 7, 8, 9]

3.fill()

用给定的值填充原来的值

        // 语法： arr.fill(value,start,end)  value需要填充的值，start起始索引，默认为0，end终止索引，默认为this.lengthvar arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];console.log(arr.fill(1));   //[1, 1, 1, 1, 1, 1, 1, 1, 1]console.log(arr.fill('a',5,8));     //[1, 1, 1, 1, 1, "a", "a", "a", 1]

4.Array.from()

从一个数组或可迭代对象创建一个新的数组

var str = 'Hello world'
console.log(Array.from(str));   //["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
console.log(str)        //Hello world

5.Array.of()

将一组值转化成数组，和声明数组类似，可替代Array() 或 new Array()

        console.log(Array.of(1,2,3,4,5,6,'A','B'));     //[1, 2, 3, 4, 5, 6, "A", "B"]   console.log(Array.of(1))        //[1]

6.copyWithin()

复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度

        // 语法：arr.copyWithin(target,start,end)//参数: target 必写 索引从该位置开始替换数组项//start 可写可不写 索引从该位置开始读取数组项，默认为0.如果为负值，则从右往左读。//end 可写可不写 索引到该位置停止读取的数组项，默认是Array.length,如果是负值，表示倒数var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];console.log(arr.copyWithin(0,4,6));     //[5, 6, 3, 4, 5, 6, 7, 8, 9]console.log(arr)        //[5, 6, 3, 4, 5, 6, 7, 8, 9]

7.includes()

判断一个数组中是否包含一个指定的值

        //当该数组中包含一个指定的值时，则为true，不包含一个指定的值时，则为false//includes()   最终结果一定为boolean值var arr = [1,2,3,4,5,6,7,8,9];console.log(arr.includes(5));       //trueconsole.log(arr.includes(100));     //falseconsole.log(arr)        //[1,2,3,4,5,6,7,8,9]

8.entries()

返回一个新的Array Iterator对象，这个对象包含数组中每个索引的键与值

        var arr = ['a','b','c','d']var arr2 = arr.entries();console.log(arr.entries())      // Array Iterator {}console.log(arr.entries().next().value)     //[0, "a"] for(var i of arr2){console.log(i)      // [0, "a"] [1, "b"] [2, "c"] [3, "d"]}

9.keys()

把数组的所有键变成一个新数组

        var arr = [1,5,3,8,2,18,2154];var newArr = arr.keys();console.log(newArr);    //结果需要通过for of遍历出来for(var key of newArr){console.log(key);       //0    1    2   3   4   5   6}

10.values()

返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

        var arr = ['a','p','p','l','e'];var newArr = arr.values();console.log(newArr)     //使用for..of循环进行迭代for(var arr1 of newArr){console.log(arr1);      //"a" "p" "p" "l" "e"}

八、ES10新增新操作数组的方法

1.flat()

简单来说，就是将多维数组降维,flat()会默认拉平一层，

       //如果想要拉平多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认情况下是1//如果想要不管多少层都要变成一维数组的话，可以使用flat(Infinity)var arr1 = [1,2,3,[7,8,9,[10,11]]]console.log(arr1.flat());   //[1, 2, 3, 7, 8, 9, [10,11]] console.log(arr1.flat(2))   //[1, 2, 3, 7, 8, 9, 10, 11]var arr2 = [1,2,3,[25,26,[77,23,[55,6681,[11223,1234,[7862]]]]]]console.log(arr2.flat(Infinity))        //[1, 2, 3, 25, 26, 77, 23, 55, 6681, 11223, 1234, 7862]

2.flatMap()

原数组的每个成员执行一个函数，相当于执行map(),然后对返回值组成的数组执行flat()方法,返回一个新数组，不改变原数组

        var arr = [1,2,3,4];console.log(arr.flatMap(x => [x,[2*x]]));   //[1, [2], 2, [4], 3, [6], 4, [8]]

JavaScript数组方法(最新）包含ES10方法相关推荐

javascript 数组对象中的迭代方法
/* javascript 数组对象中的迭代方法 * ECMAScript5为数组定义了5个迭代方法.每个方法都接受两个参数,第一个是进行迭代的函数,第二个是该函数的作用域对象[可选]. * 进行迭代 ...
JavaScript 数组遍历的五种方法（转）
转自:JavaScript 数组遍历的五种方法这篇文章主要介绍了JavaScript 数组遍历的五种方法,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下在使用 JavaS ...
JavaScript数组去重的五种方法
JavaScript数组去重的五种方法先简单准备一个数组,用于方法的实验: let array = [1,1,2,3,4,4,1,5,6,6,7,7,7]; console.log(`去重前的数组: ...
javascript数组去重的10种方法
亲爱的小伙伴,对于数组javascript中的数组去重方法你知道多少种呢?学会如何对数组进行去重对于javascript的学习来说也是十分重要的,下边就让我来分享一下我所知道的集中数组去重的方法吧! ...
Javascript数组去重的n种方法
开门见山,直接进入主题. 给定一个数组 arr,要求对数组arr进行去重,返回的结果为nArr. const arr = [1,2,3,4,2,1,2,4,5,2,3,1]; let nArr = [ ...
总结JavaScript常用数组操作方法，包含ES6方法
一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; ...
JavaScript常用数组操作方法，包含ES6方法
一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; ...
JavaScript | 数组的常用属性和方法
JavaScript的通用属性和数组方法 (Common properties and methods of array in JavaScript ) Properties/Methods Desc ...
2种检查JavaScript数组是否为空的方法
方法一:使用Array.isArray()方法和array.length属性可以通过array.isarray()方法检查该数组是否确实是一个数组.如果作为参数传递的对象是数组,则此方法返回true ...

JavaScript数组方法(最新）包含ES10方法

JS数组方法（最新）

数组方法

一、数组方法（添加，删除）

1.push()

2.pop()

3.unshift()

4.shift()

二、数组方法（插入，连接，反转，排序，剪切，拼接）

1.splice()

2.concat()

3.reverse()

4.sort()

5.slice()

6.join()

三、数组方法（查找，检索，转换）

1.indexOf()

2.lastIndexOf()

3.toString()

4.toLocaleString()

四、数组方法（迭代方法）ES5

1.every()

2.some()

3.forEach()

4.map()

5.filter()

六、数组方法（归并操作）

1.reduce()

2.reduceRight()

七、ES6新增新操作数组的方法

1.find()

2.findIndex()

3.fill()

4.Array.from()

5.Array.of()

6.copyWithin()

7.includes()

8.entries()

9.keys()

10.values()

八、ES10新增新操作数组的方法

1.flat()

2.flatMap()

JavaScript数组方法(最新）包含ES10方法相关推荐

最新文章

热门文章