JS数组常用的操作方法

这篇具有很好参考价值的文章主要介绍了JS数组常用的操作方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. push() 将一个或多个元素添加到数组的末尾,并返回该数组的新长度。此方法修改原有数组。
var arr = ['a','b','c'];
var ele = arr.push('d');
// ele结果为: 4;
// arr数组被修改: ['a','b','c','d'];
2. pop(),从数组中删除最后一个元素,并返回该元素的值。如果数组为空,则返回undefined。此方法修改原有数组。
var arr = ['a','b','c','d'];
var ele = arr.pop();
// ele结果为: 'd';
// arr数组被修改: ['a','b','c'];
3. shift(),从数组中删除第一个元素,并返回该元素的值。此方法修改原有数组。
var arr = ['a','b','c','d'];
var ele = arr.shift();
// ele结果为: a;
// arr数组被修改: ['b''c','d'];
4. unshift(),将一个或多个元素添加到数组的开头,并返回该数组的新长度。此方法修改原有数组。
var arr = ['a','b','c'];
var ele = arr.unshift('d');
// ele结果为: 4;
// arr数组被修改: ['d','a','b','c'];
5. slice(begin?,end?),返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

begin 可选 提取起始处的索引(从0开始),从该索引开始提取原数组元素
如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。
如果省略 begin,则 slice 从索引 0 开始。
如果 begin 超出原数组的索引范围,则会返回空数组。

end 可选 提取终止处的索引(从 0 开始),在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素(包含 begin,但不包含 end)。
slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 (索引为 1, 2, 3的元素)。
如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。
如果 end 被省略,则 slice 会一直提取到原数组末尾。
如果 end 大于数组的长度,slice 也会一直提取到原数组末尾。

var arr = ['a','b','c','d'];
var res = arr.slice(0,2);
// arr数组未被修改: ['a', 'b', 'c', 'd'];
// res数组为: ['a', 'b'];
6. splice(start,deleteCount?,item1?) ,通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容(如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组)。此方法修改原数组。

start:
指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1计数,这意味着-n是倒数第n个元素并且等价于array.length-n);如果负数的绝对值大于数组的长度,则表示开始位置为第0位。

deleteCount (可选):
整数,表示要移除的数组元素的个数。
如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。
如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是说,如果它大于或者等于start之后的所有元素的数量),那么start之后数组的所有元素都会被删除。
如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。

item1, item2, … (可选):
要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。

var arr = ['a', 'b', 'c', 'd'];
// 从索引 2 的位置开始删除 0 个元素,插入"e"
var insertOnce = arr.splice(2,0,'e');
insertOnce = []
arr = ['a', 'b', 'e', 'c', 'd']
// 从索引3的位置开始删除一个元素
var delOnce = arr.splice(3,1);
// delOnce数组为: ['c']
// arr数组被修改: ['a', 'b', 'e', 'd']
7. concat(),于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
var arr1 = ['a', 'b', 'c', 'd'];
var arr2 = ['e','f']
var arr3 = arr1.concat(arr2);
// arr3数组为: ['a', 'b', 'c', 'd','e','f']
8. join(),将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符(默认使用’,'分隔,如果使用"",则所有元素之间都没有任何字符)。
var arr = ['a','b','c','d'];
var str = arr.join("-")
// str结果为: "a-b-c-d"
9. sort(),对数组的元素进行排序。此方法修改原数组。
var arr = [1,5,2,4,3]
arr.sort()
// arr数组被修改: [1,2,3,4,5]
10. reverse(),将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法修改原数组。
var arr = [1,2,3,4,5];
arr.reverse();
// arr数组被修改: [5,4,3,2,1]
11. forEach(function(currentValue,index?,array?),thisValue?),对数组的每个元素执行一次给定的函数。

currentValue 必选 当前元素的值

index 可选 当前元素的索引值

array 可选 当前元素属于的数组对象

thisValue 可选 执行callback函数时值被用作 this。如果省略或传入null,undefined那么callback函数的this为全局对象

function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

// 注意索引 2 被跳过了,因为在数组的这个位置没有项
[2, 5, , 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[3] = 9
12. map(function(currentValue,index?,array?),thisValue?),创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
// 使用 map 重新格式化数组中的对象
var kvArray = [{key: 1, value: 10},
               {key: 2, value: 20},
               {key: 3, value: 30}];

var reformattedArray = kvArray.map(function(obj) {
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});

// reformattedArray 数组为: [{1: 10}, {2: 20}, {3: 30}],

// kvArray 数组未被修改:
// [{key: 1, value: 10},
//  {key: 2, value: 20},
//  {key: 3, value: 30}]

13. filter(function(currentValue,index,arr), thisValue),创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
// 筛选出字符串数组中长度大于6的字符串
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// log: ["exuberant", "destruction", "present"]
14. every(function(currentValue,index,arr), thisValue),测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值(若收到一个空数组,此方法在一切情况下都会返回 true)。
// 检查是否数组中的所有数字都小于40
const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// log: true

15. some(function(currentValue,index,arr), thisValue),测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值(如果用一个空数组进行测试,在任何情况下它返回的都是false)。
// 检测数组中是否至少有一个数字大于 18:
var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
16. find(function(currentValue,index,arr), thisValue),返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
// 获取数组中第一个大于10的值
const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12
17. flat(depth?),按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。此方法不会改变原数组。

depth 可选 指定要提取嵌套数组的结构深度,默认值为 1。

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// log: [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));
// log: [0, 1, 2, [3, 4]]
18. reduce(callbackFn, initialValue),按升序对数组中的每个元素按序执行一个提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。reduce() 不会改变被调用的数组,但是作为 callbackFn 提供的函数可能会改变数组。

callbackFn 必选 为数组中每个元素执行的函数。其返回值将作为下一次调用 callbackFn 时的 accumulator 参数。对于最后一次调用,返回值将作为 reduce() 的返回值。该函数被调用时将传入以下参数:

accumulator 上一次调用 callbackFn 的结果。在第一次调用时,如果指定了 initialValue 则为指定的值,否则为 array[0] 的值
currentValue 当前元素的值。在第一次调用时,如果指定了 initialValue,则为 array[0] 的值,否则为 array[1]。
currentIndex currentValue 在数组中的索引位置。在第一次调用时,如果指定了 initialValue 则为 0,否则为 1。
array 调用了 reduce() 的数组本身。

callbackFn仅对已分配值的数组索引进行调用。不会对稀疏数组(ex:[1, 2, , , 5])中的空槽进行调用

initialValue 可选 第一次调用回调时初始化 accumulator 的值。如果指定了 initialValue,则 callbackFn 从数组中的第一个值作为 currentValue 开始执行。如果没有指定 initialValue,则 accumulator 初始化为数组中的第一个值,并且 callbackFn 从数组中的第二个值作为 currentValue 开始执行。在这种情况下,如果数组为空(没有第一个值可以作为 accumulator 返回),则会抛出错误。文章来源地址https://www.toymoban.com/news/detail-434427.html

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);

console.log(sumWithInitial);
// expected output: 10

到了这里,关于JS数组常用的操作方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 写一个方法实现数组元素每两个元素加一个换行,并进行文件导出

    源数据: 输出的数据如下: 我们可以手写一个方法,方法如下: 然后再写一个数据导出方法 扩展链接:Vue 项目开发将数据下载导出到本地的方法

    2024年02月06日
    浏览(47)
  • js获取Element元素的常用方法

    js中获取Element元素的常用方法有以下四种: 【方法一】根据元素ID:document.getElementById() 【方法二】根据元素标签:document.getElementsByTagName() 【方法三】根据元素class名:document.getElementsByClassName() 【方法四】根据元素name名:document.getElementsByName() 需要注意的是, 方法中Element后

    2024年02月06日
    浏览(47)
  • JavaScript 中获取数组最后一个元素3种方法及性能

    当需要从 JavaScript 中的数组中获取最后一个元素时,有多种选择,本文将提供 3 种可用方法。 1. 数组 length 属性 length 属性返回数组中元素的数量。从数组的长度中减去 1 得到数组最后一个元素的索引,使用它可以访问最后一个元素。从长度中减去 1 的原因是,在 JavaScript 中

    2024年02月06日
    浏览(51)
  • 利用java语言中的stream流操作判断一个数组中是否有重复元素

    判断数组中是否有重复元素可以说是每一个编程语言初学者都会遇到的题目,常见的各种搜索算法本文不做赘述了,我们这次介绍的是利用java语言中特有的stream流操作来判断通用类型数组是否包含重复元素。 首先我们声明一个泛型方法: 表明该方法适用于所有类型的数组。

    2024年02月12日
    浏览(49)
  • JS常用数组方法

    📝个人主页:爱吃炫迈 💌系列专栏:数据结构与算法 🧑‍💻座右铭:道阻且长,行则将至💗 无参构造 带参构造 如果传入一个非数值的参数或者参数个数大于 1,则表示创建一个包含指定元素的数组。 Array.of()方法总会创建一个包含所有传入参数的数组,而不管参数的数

    2023年04月23日
    浏览(33)
  • js 数组的常用方法

    数组关注是否改变原数组 操作 增   会影响原数组 push() unshift() splice() 不会影响 concat() 删 会影响原数组 pop() shift() splice() 不会影响 slice() 改 splice() 查 indexOf() includes() find() 排序 reserve() sort() 转换 join() 迭代方法 some() every() forEach() filter() map() push() 接收任意数量的参数,将

    2024年04月27日
    浏览(31)
  • JS中操作数组的方法(涵盖ES6)

    一、常用的 JavaScript 操作数组的方法 1.push() 和 pop():在数组末尾添加或删除元素。 2.shift() 和 unshift():在数组头部删除或添加元素。 3.splice():在任意位置添加或删除元素。如果删除一个元素,则返回一个元素的数组。 如果未删除任何元素,则返回空数组。(改变原始数组)

    2024年02月05日
    浏览(42)
  • 〖大前端 - 基础入门三大核心之JS篇㉔〗- JavaScript 的数组的常用方法 (一)

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月07日
    浏览(56)
  • ethers.js常用的操作方法

    --ethers比web3来说使用方式相对简洁很多,主要就操作三个大对象         1. Provider,(提供者)是一个用于连接以太坊网络的抽象类,提供了只读形式来访问区块链网络和获取链上状态;         2. Signer,(签名器)通常是以某种方式直接或间接访问私钥,可以签名消息和

    2024年02月10日
    浏览(86)
  • 【Java基础教程】(三十八)常用类库篇 · 第八讲:数组操作类——解析Arrays类中的全部操作方法,解锁Java数组操作技巧~

    前言:在学习本文之前,应该先学习并清楚了解Java基础部分的数组相关的概念和知识。 若还不具备学习条件,请先前往学习数组部分的基础知识: 《【Java基础教程】(八)面向对象篇 · 第二讲:Java 数组全面解析——动态与静态初始化、二维数组、方法参数传递、排序与转

    2024年02月15日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包