【JavaScript】数组的方法汇总(更新至ES7~)

编程语言 2023-07-01 14:57:46 阅读次数: 0

数组

1. Array.push()

向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变。参数可以添加一个至多个。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=fruits.push("Kiwi");
console.log(fruits)//(5) ["Banana", "Orange", "Apple", "Mango", "Kiwi"]    
console.log(x)//5  x是 新的数组长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=fruits.push("Kiwi","Java");
console.log(fruits) //(6) ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Java"]  
console.log(x)   // 6 x是 新的数组长度

2. Array.unshift()，

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

let arr = [1, 2, 3, 4, 5]
let res = arr.unshift(6, 7)
console.log(arr) //[6, 7, 1, 2, 3, 4, 5]
console.log(res) //7

3. Array.pop()

删除并返回数组的最后一个元素，若该数组为空，则返回undefined。原数组改变。

pop() 方法从数组中删除最后一个元素。

pop() 方法的返回值是已删除的项目。

let arr = [1, 2, 3, 4, 5]
let res = arr.pop()
console.log(arr) //[1, 2, 3, 4]
console.log(arr.length) //4
console.log(res) // 5

4. Array.shift()

删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回undefined。原数组改变。

let arr = [1, 2, 3, 4, 5]
let res = arr.shift()
console.log(arr) //[2, 3, 4, 5]
console.log(arr.length) //4
console.log(res) // 1

5. Array.find()、findIndex()、findLast()、findLastIndex()

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

find()方法为数组中的每个元素都调用一次函数执行：

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

注意: find() 对于空数组，函数是不会执行的。

注意: find() 并没有改变数组的原始值。

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

[1, 4, -5, 10].find((n) => n < 0)
// -5

[1, 5, 10, 15].find(function(value, index, arr) {
    
    
  return value > 9;
}) // 10

findIndex()：与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
    
    
  return value > 9;
}) // 2

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

// find()函数接收了第二个参数person对象，回调函数中的this对象指向person对象。
function f(v){
    
    
  return v > this.age;
}
let person = {
    
    name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

find()和findIndex()都是从数组的0号位，依次向后检查。ES2022 新增了两个方法findLast()和findLastIndex()，从数组的最后一个成员开始，依次向前检查，其他都保持不变。

const array = [
  {
    
     value: 1 },
  {
    
     value: 2 },
  {
    
     value: 3 },
  {
    
     value: 4 }
];

array.findLast(n => n.value % 2 === 1); // { value: 3 }
array.findLastIndex(n => n.value % 2 === 1); // 2

6 .Array.concat(arr1,arr2…)

合并两个或多个数组，生成一个新的数组。原数组不变。

let arr1 = [1, 2, 3]
let arr2 = [4, 5]
let arr = arr1.concat(arr2)
console.log(arr)//[1, 2, 3, 4, 5]

7. Array.join()

将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。

let arr = [1, 2, 3, 4, 5];
let str1 = arr.join('*')
let str2 = arr.join('-')
let str3 = arr.join('#')
console.log(str1)  // 1*2*3*4*5
console.log(str2)  // 1-2-3-4-5
console.log(str3)  // 1#2#3#4#5

8. Array.reverse()

将数组倒序。原数组改变。

let arr=[1,2,3,4,5];
let newArr=arr. reverse();
console.log(newArr,arr) //newArr=[5,4,3,2,1]; arr=[5,4,3,2,1];

9. Array.sort()

对数组元素进行排序。按照字符串UniCode码排序，原数组改变。

默认：

let arr=[2,3,5,1,4];

let newArr=arr.sort();
console.log(newArr,arr)//newArr=[1,2,3,4,5]; arr =[1,2,3,4,5]

按照函数规则排序：

①从小到大

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(function(a, b) {
    
    
  return b - a;
});
console.log(numbers);  // [5, 4, 3, 2, 1]

③按照数组对象中的某个值进行排序

var arr = [
    {
    
    name:'zopp',age:0},
    {
    
    name:'gpp',age:18},
    {
    
    name:'yjj',age:8}
];

function compare(property){
    
    
    return function(a,b){
    
    
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
console.log(arr.sort(compare('age')))

// 打印结果：按照age排序

(3) [{
    
    …}, {
    
    …}, {
    
    …}]
0: {
    
    name: "zopp", age: 0}
1: {
    
    name: "yjj", age: 8}
2: {
    
    name: "gpp", age: 18}
length: 3
__proto__: Array(0)

10. Array.map(function())

原数组的每一项执行函数后，返回一个新的数组。原数组不变。（注意该方法和forEach的区别）。

var arr = ['a','b','c','d'];
arr.map(function(item,index,arr){
    
       //参数含义同forEach
       console.log(item);
       console.log(index);
   });
	3 a
	4 0
	3 b
	4 1
	3 c
	4 2
	3 d
	4 3

map和forEach的区别

map方法会返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

forEach方法返回值则永远是undefined。(也可以说没有返回值)

11. Array.slice(start,end)

从start开始，end之前结束，不到end；
如果不给end值，从start开始到数组结束。start可以给负值，-1表示数组最后位置，-2表示倒数第二个，以此类推，顾前不顾后。

只有一个值时，从当前位置删除到数组末尾

截取复制数组指定位置的内容

slice(开始位置，结束位置)；第二个参数不写默认到尾部,只能从前往后截取；返回的值为截取到的内容形成的新数组;

let arr=[1,2,3,4,5]
let copyArr=arr.slice(); // slice()或者slice(0)都可以复制数组；
let newArr=arr.slice(1,3);//截取索引1到索引3(不包括3)的值;
console.log(newArr,arr,copyArr)//newArr=[2,3];arr=[1,2,3,4,5];

12. Array.splice(index,howmany,arr1,arr2…)

index 必需。整数，指定在什么位置添加/删除项目，使用负值指定从数组末尾开始的位置。
howmany 可选。要删除的项目数。如果设置为 0，则不会删除任何项目。
arr1, …, arr2可选。要添加到数组中的新项目。
删除元素并添加元素，从index位置开始删除howmany个元素，并将arr1、arr2…数据从index位置依次插入。howmany为0时，则不删除元素。原数组改变。

let arr = [1,2,3,4,5];
let num1 = arr.splice(1);
console.log(num1,arr) //num1=[2,3,4,5];arr=[1];

有两个值时，第一个值为删除的位置，第二个值为删除的个数;

let arr=[1,2,3,4,5]
let num1=arr.splice(2,3)//删除从索引值2开始的3个元素
console.log(num1,arr);// num1=[3,4,5],arr=[1,2]

有三个或者多个值时，第一个值为插入元素的位置，第二个值为替换的个数，后面的值都为插入的新元素；

let arr=[1,2,3,4,5]
let num2=arr.splice(2,1,6,7,8);//从索引值2开始替换掉1个元素，并且插入6,7,8

//如果第二个值为0，则不替换，直接插入6,7,8;
console.log(num2,arr);//被替换的值num2=[3]; arr=[1,2,6,7,8,4,5]

13. Array.forEach(function())

用于调用数组的每个元素，并将元素传递给回调函数。原数组不变。（注意该方法和map的区别，若直接打印Array.forEach，结果为undefined）。

var arr = [1, 3, 5, 13, 2];
var res = arr.forEach(function(item,index) {
    
    
    console.log(`数组第${
      
      index+1}个元素是${
      
      item}`);
 })
    console.log(res);//forEach的返回值为undefined,
// 数组第1个元素是1
// 数组第2个元素是3
// 数组第3个元素是5
// 数组第4个元素是13
// 数组第5个元素是2

14. Array.filter(function)

过滤数组中，符合条件的元素并返回一个新的数组。

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    
    
    return age >= 18;
}
console.log(ages.filter(checkAdult))
VM57:6 (3) [32, 33, 40]

单一参数的单行箭头函数

如下段代码所示，很简单：

const fn= foo =>`${
      
      foo} world`;

这是箭头函数最简洁的形式，常用于用作简单的处理函数，如过滤。如下段代码所示：

let array=['a','bc','def','ghij'];
array=array.filter(item=>item.length>=2);

15. Array.every(function())

对数组中的每一项进行判断，若都符合则返回true，否则返回false。

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

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

如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    
    
    return age >= 18;
}
console.log(ages.every(checkAdult)) // false

16. Array.some(function())

对数组中的每一项进行判断，若都不符合则返回false，否则返回true。

some()方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

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

注意： some() 不会对空数组进行检测。

注意：some() 不会改变原始数组。

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

function checkAdult(age) {
    
    
    return age >= 18;
}
console.log(ages.some(checkAdult))  // true

Array.every和Array.some的区别

方法区别

every()：每一项都返回true才返回true

some()：只要有一项返回true就返回true

17. Array.reduce(function())

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

let arr = [1, 2, 3, 4, 5]
const add = (a, b) => a + b
let sum = arr.reduce(add)
console.log(sum) // 4 15

18. Array.isArray()

isArray() 方法用于判断一个对象是否为数组。

如果对象是数组返回 true，否则返回 false。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
console.log(Array.isArray(fruits)) // true

19. Array.forEach()

var arr = [1, 3, 5, 13, 2];
var res = arr.forEach(function(item,index) {
    
    
console.log(`数组第${
      
      index+1}个元素是${
      
      item}`);
    })
console.log(res);//forEach的返回值为undefined,
// 数组第1个元素是1
// 数组第2个元素是3
// 数组第3个元素是5
// 数组第4个元素是13
// 数组第5个元素是2
// undefined //敲黑板——forEach()是没有返回值的！

20. Array.toString()

此方法将数组转化为字符串：

let arr = [1, 2, 3, 4, 5];
let str = arr.toString()
console.log(arr)   // [1, 2, 3, 4, 5]
console.log(str)  // 1,2,3,4,5

21. Array.from()

Array.from()方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

类似数组：本质特征只有一点，即必须有length属性，所以任意有length属性的对象，都可以通过Array.from()方法转为数组。

let arrayLike = {
    
    
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5 的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6 的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

一般实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList集合，以及函数内部的arguments对象。

只要是部署了 Iterator 接口的数据结构，Array.from()都能将其转为数组。

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

Array.from()还可以接受一个函数作为第二个参数，作用类似于数组的map()方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

22. flat()、flatMap() 扁平化

flat()
Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认值是1。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

如果原数组有空位，flat()方法会跳过空位。

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

flatMap()
flatMap()相当于Map()+flat()先给每个值执行map，然后最后整体flat

flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

flatMap()只能展开一层数组。

// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

flatMap()方法的参数是一个遍历函数，该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开始）、原数组。

arr.flatMap(function callback(currentValue[, index[, array]]) {
    
    
  // ...
}[, thisArg])

flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this。

23. toReversed()，toSorted()，toSpliced()，with()

一般数组的传统方法会改变原数组，比如push()、pop()、shift()、unshift()等等，那么想有方法，允许对数组进行操作但不改变原数组，返回一个原数组的拷贝。

  • Array.prototype.toReversed() -> Array
  • Array.prototype.toSorted(compareFn) -> Array
  • Array.prototype.toSpliced(start, deleteCount, ...items) -> Array
  • Array.prototype.with(index, value) -> Array

它们分别对应数组的原有方法。

  • toReversed()对应reverse()，用来颠倒数组成员的位置。
  • toSorted()对应sort()，用来对数组成员排序。
  • toSpliced()对应splice()，用来在指定位置，删除指定数量的成员，并插入新成员。
  • with(index,value)对应splice(index, 1, value)，用来将指定位置的成员替换为新的值。

上面是这四个新方法对应的原有方法，含义和用法完全一样，唯一不同的是不会改变原数组，而是返回原数组操作后的拷贝。

const arr= [1, 2, 3];
arr.toReversed() // [3, 2, 1]
arr// [1, 2, 3]

const arr1= [3, 1, 2];
arr1.toSorted() // [1, 2, 3]
arr1// [3, 1, 2]

const array = [1, 2, 3, 4];
array.toSpliced(1, 2, 5, 6, 7) // [1, 5, 6, 7, 4]
array // [1, 2, 3, 4]

const arr2= [1, 1, 3];
arr2.with(1, 2) // [1, 2, 3]
arr2// [1, 1, 3]

猜你喜欢

转载自blog.csdn.net/Bon_nenul/article/details/128216658
ES7
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022