ES6数组常用的方法

本文详细介绍了ES6中数组的常用操作方法,包括push、unshift、pop、shift、slice、splice、join、sort、reverse、concat、indexOf、lastIndexOf、forEach、map、filter、some、every、reduce、reduceRight、Array.from、Array.of、find、findIndex以及fill等,这些方法用于数组的添加、删除、截取、转换、遍历和查找等操作。
部署运行你感兴趣的模型镜像

push()

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count);           // 5
console.log(arr);            // ["Lily", "lucy", "Tom", "Jack", "Sean"]

可以接受一个或者多个参数,将参数追加到数组的尾部,返回添加后的数组的长度,原数组会发生改变。

unshift()

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count);               // 5
console.log(arr);                //["Jack", "Sean", "Lily", "lucy", "Tom"]

可以接受一个或者多个参数,将参数放到数组的头部,返回添加后的数组的长度,原数组会发生改变。

pop()

var arr = ["Lily", "lucy", "Tom"];
    var item = arr.pop();
    console.log(item);           // Tom
    console.log(arr);           // ["Lily", "lucy",]

从数组尾部删除一个元素,返回这个被删除的元素,原数组发生改变。

shift()

    var arr = ["Lily", "lucy", "Tom"];
    var item = arr.shift();
    console.log(item);           //  Lily
    console.log(arr);           // ["lucy","Tom"]

从数组头部删除一个元素,返回这个被删除的元素,原数组发生改变。

slice()

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr);               //[1, 3, 5, 7, 9, 11](原数组没变)
console.log(arrCopy);             //[3, 5, 7, 9, 11]
console.log(arrCopy2);            //[3, 5, 7]
console.log(arrCopy3);            //[3, 5, 7]
console.log(arrCopy4);            //[5, 7, 9]

截取类 如果不传参数,会返回原数组;如果一个参数,从该参数表示的索引开始截取,直至数组结束,返回这个截取数组,原数组不变;两个参数,从第一个参数对应的索引开始截取,到第二个参数对应的索引结束,但不包括第二个参数对应的索引上值,原数组不改变;最多接受两个参数。

splice()

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr);                //[5, 7, 9, 11]
console.log(arrRemoved);            //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr);                // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2);           // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr);                // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3);           //[7]

截取类 没有参数,返回空数组,原数组不变;一个参数,从该参数表示的索引位开始截取,直至数组结束,返回截取的 数组,原数组改变;两个参数,第一个参数表示开始截取的索引位,第二个参数表示截取的长度,返回截取的 数组,原数组改变;三个或者更多参数,第三个及以后的参数表示要从截取位插入的值。

join()

参数来拼接;分隔符。

join,就是把数组转换成字符串,然后给他规定个连接字符,默认的是逗号(  ,)

var arr = [1,2,3];
console.log(arr.join());     // 1,2,3
console.log(arr.join("-"));   // 1-2-3
console.log(arr);         // [1, 2, 3](原数组不变)

sort()

将数组里的项从小到大排序 

var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort());           // ["a", "b", "c", "d"]

reverse()

var arr = [13, 24, 51, 3];
console.log(arr.reverse());         //[3, 51, 24, 13]
console.log(arr);               //[3, 51, 24, 13](原数组改变)

不接受参数,数组翻转。

concat()

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy);             //[1, 3, 5, 7, 9, 11, 13]
console.log(arr);               // [1, 3, 5, 7](原数组未被修改)

将参数放入原数组后返回,原数组本身不变,如果参数是数组,将值提出来。

indexOf()

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5));       //2
console.log(arr.indexOf(5,2));      //2
console.log(arr.indexOf("5"));      //-1

从前往后遍历,返回item在数组中的索引位,如果没有返回-1;通常用来判断数组中有没有某个元素。可以接收两个参数,第一个参数是要查找的项,第二个参数是查找起点位置的索引。

lastIndexOf()

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.lastIndexOf(5));     //5
console.log(arr.lastIndexOf(5,4));   //2

与indexOf一样,区别是从后往前找。

forEach()

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为:
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

forEach方法与map方法很相似,也是对数组的所有成员依次执行参数函数。但是,forEach方法不返回值,只用来操作数据。这就是说,如果数组遍历的目的是为了得到返回值,那么使用map方法,否则使用forEach方法;forEach的用法与map方法一致,参数是一个函数,该函数同样接受三个参数:当前值、当前位置、整个数组。

map()

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2);         //[1, 4, 9, 16, 25]

将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回;map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。

filter()

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
}); 
console.log(arr2);         //[1, 4, 7, 8, 9, 10]

用于过滤数组成员,满足条件的成员组成一个新数组返回;它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组;可以接受三个参数:当前成员,当前位置和整个数组。

some()

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2);         //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3);         // false

该方法对数组中的每一项运行给定函数,如果该函数对任何一项返回 true,则返回true。(some方法会在数组中任一项执行函数返回true之后,不在进行循环。)

every()

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2);         //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3);         // false

该方法对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回true。

reduce()

依次处理数组的每个成员,最终累计为一个值。reduce是从左到右处理(从第一个成员到最后一个成员)。参数是一个函数,该函数接受以下两个参数:1累积变量,默认为数组的第一个成员;2当前变量,默认为数组的第二个成员。

reduceRight()
从右往左。

Array.from()

let json ={ 
    '0':'hello', 
    '1':'123', 
    '2':'panda', 
    length:3 
} 
let arr = Array.from(json); console.log(arr);
//打印:["hello", "123", "panda"]

用于类似数组的对象(即有length属性的对象)和可遍历对象转为真正的数组。

Array.of()

let arr1 = Array.of('你好','hello'); console.log(arr1);//["你好", "hello"]

将一组值转变为数组。

find()和findIndex()

用于找出第一个符合条件的数组成员。参数是个回调函数,所有数组成员依次执行该回调函数,直到找到第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,就返回undefined;可以接收3个参数,依次为当前值、当前位置、原数组。

fill()

let arr3 = [0,1,2,3,4,5,6,7]; arr3.fill('error',2,3); 
console.log(arr3);
//[0,1,"error",3,4,5,6,7]

使用fill()方法给定值填充数组。
如:new Array(3).fill(7);//[7,7,7]
可以接收第二个和第三个参数,用于指定填充的起始位置和结束位置(不包括结束位置)。

遍历数组的方法:
entries()、values()、keys()

这三个方法都是返回一个遍历器对象,可用for...of循环遍历,唯一区别:keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历

for(let item of ['a','b'].keys()){
    consloe.log(item);
    //0
    //1
}
for(let item of ['a','b'].values()){
    consloe.log(item);
    //'a'
    //'b'
}
let arr4 = [0,1];
for(let item of arr4.entries()){
    console.log(item);  
    //  [0, 0]
    //  [1, 1]
}

如果不用for...of进行遍历,可用使用next()方法手动跳到下一个值。

let arr5 =['a','b','c']
let entries = arr5.entries();
console.log(entries.next().value);
//[0, "a"]
console.log(entries.next().value);
//[1, "b"]
console.log(entries.next().value);
//[2, "c"]
console.log(entries.next().value);
//undefined

您可能感兴趣的与本文相关的镜像

LobeChat

LobeChat

AI应用

LobeChat 是一个开源、高性能的聊天机器人框架。支持语音合成、多模态和可扩展插件系统。支持一键式免费部署私人ChatGPT/LLM 网络应用程序。

ES6(ECMAScript 2015)为数组引入了许多新方法,这些方法极大地增强了数组的操作能力,使 JavaScript 更适合构建大型应用程序。以下是 ES6 中新增的一些主要数组方法及其功能说明: ### `Array.from()` 此方法用于从类数组对象或可迭代对象创建一个新的数组实例。它还可以接受一个映射函数作为第二个参数,用于在创建数组时对每个元素进行处理。例如: ```javascript const arrayLike = { 0: 'a', 1: 'b', length: 2 }; const arr = Array.from(arrayLike); console.log(arr); // 输出: ['a', 'b'] ``` 此外,`Array.from()` 会将数组的空位转为 `undefined`,这与 ES6 中其他处理空位的方法一致,如 `Array.from`、扩展运算符、`copyWithin()`、`fill()`、`entries()`、`keys()`、`values()`、`find()` 和 `findIndex()` 等方法的行为一致 [^4]。 ### `Array.of()` `Array.of()` 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。例如: ```javascript const arr1 = Array.of(1, 2, 3); console.log(arr1); // 输出: [1, 2, 3] const arr2 = Array.of(7); console.log(arr2); // 输出: [7] ``` 此方法与 `new Array()` 不同,当传入单个数字时,`Array.of(7)` 会创建一个包含单个元素 `7` 的数组,而 `new Array(7)` 则会创建一个长度为 7 但元素为空的数组 [^2]。 ### `Array.prototype.find()` `find()` 方法返回数组中满足提供的测试函数的第一个元素的值。如果没有找到符合条件的元素,则返回 `undefined`。例如: ```javascript const numbers = [1, 2, 3, 4, 5]; const found = numbers.find(num => num > 3); console.log(found); // 输出: 4 ``` 此方法特别适用于需要查找数组中特定条件下的第一个匹配项的情况 [^2]。 ### `Array.prototype.findIndex()` `findIndex()` 方法与 `find()` 类似,但它返回的是满足条件的元素的索引,而不是元素本身。如果未找到符合条件的元素,则返回 `-1`。例如: ```javascript const numbers = [1, 2, 3, 4, 5]; const index = numbers.findIndex(num => num > 3); console.log(index); // 输出: 3 ``` ### `Array.prototype.fill()` `fill()` 方法用于填充数组中的所有元素,从起始索引到结束索引(不包括结束索引)。例如: ```javascript const arr = [1, 2, 3, 4, 5]; arr.fill(0, 1, 4); console.log(arr); // 输出: [1, 0, 0, 0, 5] ``` 此方法可以用于快速初始化数组或重置数组的某些部分 [^4]。 ### `Array.prototype.copyWithin()` `copyWithin()` 方法用于在同一数组内部复制数组元素,从目标位置开始替换。例如: ```javascript const arr = [1, 2, 3, 4, 5]; arr.copyWithin(0, 3); console.log(arr); // 输出: [4, 5, 3, 4, 5] ``` 此方法允许在同一数组内高效地移动数据 [^4]。 ### `Array.prototype.entries()`, `keys()`, 和 `values()` 这些方法分别返回一个新的迭代器对象,该对象包含数组的键值对、键或值。它们主要用于支持 `for...of` 循环等现代迭代机制。例如: ```javascript const arr = ['a', 'b', 'c']; const entries = arr.entries(); console.log([...entries]); // 输出: [[0, 'a'], [1, 'b'], [2, 'c']] ``` 这些方法使得数组更易于与其他可迭代对象一起使用 [^4]。 ### `Array.prototype.includes()` `includes()` 方法用于判断数组是否包含指定的元素,返回一个布尔值。例如: ```javascript const arr = [1, 2, 3, 4, 5]; console.log(arr.includes(3)); // 输出: true console.log(arr.includes(6)); // 输出: false ``` 此方法提供了一种简洁的方式来检查数组中是否存在某个值 [^3]。 ### `Array.prototype.map()` `map()` 方法创建一个新数组,其结果是该数组中的每个元素都调用一次提供的函数后的返回值。例如: ```javascript const numbers = [1, 2, 3, 4, 5]; const squared = numbers.map(num => num * num); console.log(squared); // 输出: [1, 4, 9, 16, 25] ``` 此方法非常适合对数组中的每个元素进行转换或处理 [^1]。 ### `Array.prototype.filter()` `filter()` 方法创建一个新数组,包含所有通过测试函数的元素。例如: ```javascript const numbers = [1, 2, 3, 4, 5]; const even = numbers.filter(num => num % 2 === 0); console.log(even); // 输出: [2, 4] ``` 此方法非常适合从数组中筛选出符合特定条件的元素 。 ### `Array.prototype.reduce()` 和 `reduceRight()` `reduce()` 方法数组中的每个元素执行一个由您提供的 reducer 函数(升序),将其结果汇总为单个输出值。`reduceRight()` 则是从右到左执行。例如: ```javascript const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((acc, curr) => acc + curr, 0); console.log(sum); // 输出: 15 ``` 此方法非常适合用于聚合操作,如求和、计数等 [^3]。 ### `Array.prototype.some()` 和 `every()` `some()` 方法测试数组中是否有至少一个元素通过了提供的测试函数,返回一个布尔值。`every()` 方法则测试数组中的所有元素是否都通过了测试函数。例如: ```javascript const numbers = [1, 2, 3, 4, 5]; console.log(numbers.some(num => num > 3)); // 输出: true console.log(numbers.every(num => num > 0)); // 输出: true ``` 这些方法非常适合用于逻辑判断和验证 [^3]。 ### `Array.prototype.forEach()` `forEach()` 方法数组中的每个元素执行一次提供的函数。此方法没有返回值。例如: ```javascript const numbers = [1, 2, 3, 4, 5]; numbers.forEach(num => console.log(num)); // 输出: 1, 2, 3, 4, 5 ``` 此方法非常适合用于遍历数组并执行副作用操作 [^3]。 ### `Array.prototype.indexOf()` 和 `lastIndexOf()` `indexOf()` 方法返回数组中第一个匹配指定值的元素的索引,如果没有找到则返回 `-1`。`lastIndexOf()` 则是从后向前查找。例如: ```javascript const arr = [1, 2, 3, 2, 1]; console.log(arr.indexOf(2)); // 输出: 1 console.log(arr.lastIndexOf(2)); // 输出: 3 ``` 这些方法非常适合用于查找数组中元素的位置 。 ### `Array.prototype.join()` `join()` 方法数组的所有元素连接成一个字符串,并返回这个字符串。例如: ```javascript const arr = ['apple', 'banana', 'cherry']; const str = arr.join(', '); console.log(str); // 输出: "apple, banana, cherry" ``` 此方法非常适合用于生成字符串表示形式 。 ### `Array.prototype.slice()` `slice()` 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括 end)。例如: ```javascript const arr = [1, 2, 3, 4, 5]; const subArr = arr.slice(1, 4); console.log(subArr); // 输出: [2, 3, 4] ``` 此方法非常适合用于提取数组的子集 。 ### `Array.prototype.splice()` `splice()` 方法可以用来修改数组的内容,删除或添加元素。例如: ```javascript const arr = [1, 2, 3, 4, 5]; arr.splice(2, 1, 'a', 'b'); console.log(arr); // 输出: [1, 2, 'a', 'b', 4, 5] ``` 此方法非常适合用于动态修改数组内容 [^3]。 ### `Array.prototype.sort()` `sort()` 方法用于对数组的元素进行排序。默认情况下,排序是基于字符串 Unicode 码点进行的。例如: ```javascript const arr = [3, 1, 4, 2, 5]; arr.sort(); console.log(arr); // 输出: [1, 2, 3, 4, 5] ``` 此方法非常适合用于对数组进行排序 。 ### `Array.prototype.reverse()` `reverse()` 方法用于颠倒数组中元素的顺序。例如: ```javascript const arr = [1, 2, 3, 4, 5]; arr.reverse(); console.log(arr); // 输出: [5, 4, 3, 2, 1] ``` 此方法非常适合用于反转数组顺序 。 ### `Array.prototype.toString()` `toString()` 方法返回一个字符串,表示指定的数组及其元素。例如: ```javascript const arr = [1, 2, 3]; const str = arr.toString(); console.log(str); // 输出: "1,2,3" ``` 此方法非常适合用于生成数组的字符串表示 [^3]。 ### `Array.prototype.toLocaleString()` `toLocaleString()` 方法返回一个字符串,表示数组中的元素。此方法会根据本地化设置格式化元素。例如: ```javascript const arr = [1, 2, 3]; const str = arr.toLocaleString(); console.log(str); // 输出: "1,2,3" (根据本地化设置可能不同) ``` 此方法非常适合用于生成本地化的字符串表示 [^3]。 ### `Array.prototype.push()`, `pop()`, `shift()`, 和 `unshift()` 这些方法分别用于向数组末尾添加元素、从数组末尾移除元素、从数组开头移除元素、向数组开头添加元素。例如: ```javascript const arr = [1, 2, 3]; arr.push(4); console.log(arr); // 输出: [1, 2, 3, 4] arr.pop(); console.log(arr); // 输出: [1, 2, 3] arr.shift(); console.log(arr); // 输出: [2, 3] arr.unshift(1); console.log(arr); // 输出: [1, 2, 3] ``` 这些方法非常适合用于动态修改数组内容 [^3]。 ### `Array.prototype.concat()` `concat()` 方法用于合并两个或多个数组。此方法不会修改现有数组,而是返回一个新数组。例如: ```javascript const arr1 = [1, 2]; const arr2 = [3, 4]; const combined = arr1.concat(arr2); console.log(combined); // 输出: [1, 2, 3, 4] ``` 此方法非常适合用于合并数组 。 ### `Array.prototype.flat()` 和 `flatMap()` `flat()` 方法用于递归展开数组中的嵌套数组。`flatMap()` 则是先映射每个元素,然后展开结果。例如: ```javascript const arr = [1, [2, [3, 4], 5]]; const flattened = arr.flat(); console.log(flattened); // 输出: [1, 2, 3, 4, 5] ``` 这些方法非常适合用于处理嵌套数组 。 ### `Array.prototype.flatMap()` `flatMap()` 方法首先使用映射函数映射每个元素,然后将结果展平一层。例如: ```javascript const arr = [1, 2, 3]; const result = arr.flatMap(x => [x, x * 2]); console.log(result); // 输出: [1, 2, 2, 4, 3, 6] ``` 此方法非常适合用于同时进行映射和展平操作 [^3]。 ### `Array.prototype.at()` `at()` 方法返回数组中指定索引位置的元素。支持负数索引,表示从数组末尾开始计数。例如: ```javascript const arr = [1, 2, 3, 4, 5]; console.log(arr.at(2)); // 输出: 3 console.log(arr.at(-1)); // 输出: 5 ``` 此方法非常适合用于访问数组中的特定元素 [^3]。 ### `Array.prototype.with()` `with()` 方法返回一个新的数组副本,其中指定索引位置的元素被替换为新的值。例如: ```javascript const arr = [1, 2, 3, 4, 5]; const newArr = arr.with(2, 'a'); console.log(newArr); // 输出: [1, 2, 'a', 4, 5] ``` 此方法非常适合用于创建数组的不可变更新 。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值