1. 首页
  2. 前端进阶

JavaScript的数组常用的方法(上)

会改变自身的方法有9种:

1.copyWithin():浅复制数组的一部分到同一数组的另一个位置,并返回它,不会改变原数组的长度
2.fill():用一个固定值填充一个数组中从起始索引到结束索引内的全部元素,但不包括结束索引,并返回该数组,不会改变原数组的长度
3.pop():从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度
4.shift():从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度
5.push():在数组的末尾增加一个或多个元素,并返回数组的新长度
6.unshift():在数组的开头增加一个或多个元素,并返回数组的新长度
7.splice():在任意的位置给数组添加或删除任意个元素
8.sort():对数组元素进行排序,并返回当前数组
9.reverse():将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组

1.copyWithin():浅复制数组的一部分到同一数组的另一个位置,并返回它,不会改变原数组的长度


/** * 方法:copyWithin * 作用:浅复制数组的一部分到同一数组的另一个位置,并返回它,不会改变原数组的长度 * 语法:arr.copyWitin(target[, start[, end]]) * arr.copyWitin(target) * arr.copyWitin(target, start) * arr.copyWitin(target, start, end) * arr.copyWitin(目标索引, 起始索引, 结束索引) * 参数: * target 目标索引 * 0 为基底的索引,复制序列到该位置。 * 如果是负数,target 将从末尾开始计算。 * 如果 target 大于或等于 arr.length,将会不发生。 * 如果 target 在 start 之后,复制的序列将修改以符合 arr.length。 * * start 起始索引 * 0 为基底的索引,开始复制元素的起始位置。 * 如果是负数,start 将从末尾开始计算。 * 如果 start 被忽略,copyWithin 将会从0开始复制。 * * end 结束索引 * 0 为基地的索引,开始复制元素的结束位置。copyWithin 将会拷贝到该位置,但不包括 end 这个位置的元素。 * 如果是负数,end 将从末尾开始计算。 * 如果 end 被忽略,copyWithin 方法将会一直复制至值数组结尾(默认为arr.length) * 返回值:改变后的数组 * 描述: * 参数target、start、end 必须是整数 * 如果start为负,则其指定索引值等同于length+start,length为数组的长度。end也是如此 **/ var arr = [1,2,3,4,5] // 取索引为0到结尾的数据(start/end的索引不填,意味着从索引0开始找/找到数组结尾),从末尾开始计算的第3个开始替换 console.log(arr.copyWithin(-3)) [1, 2, 1, 2, 3] var arr = [1,2,3,4,5] // 取索引为3到结尾的数据(end的索引不填,意味着找到数组结尾),从索引0开始替换 console.log(arr.copyWithin(0, 3)) //[4, 5, 3, 4, 5] var arr = [1,2,3,4,5] // 取索引为3到4的数据,不包括索引4的数据,从索引0开始替换 console.log(arr.copyWithin(0, 3, 4)) //[4, 2, 3, 4, 5] var arr = [1,2,3,4,5] // 取从末尾开始计算的第3个到第1个,不包括从末尾开始的第1个,从末尾开始计算的第2个开始替换 console.log(arr.copyWithin(-2, -3, -1)) //[1,2,3,3,4] var arr = [1,2,3,4,5] // 取索引为1到3的数据,不包括索引3的数据,从索引2开始替换 console.log(arr.copyWithin(2, 1, 3)) //[1,2,2,3,5]

2.fill():用一个固定值填充一个数组中从起始索引到结束索引内的全部元素,但不包括结束索引,并返回该数组,不会改变原数组的长度


/** * 方法:fill * 作用:用一个固定值填充一个数组中从起始索引到结束索引内的全部元素,但不包括结束索引,并返回该数组,不会改变原数组的长度 * 语法:arr.fill(value[,start[,end]]) * arr.fill(value) * arr.fill(value, start) * arr.fill(value, start, end) * arr.fill(填充数组的值, 起始索引, 结束索引) * 参数: * value 用来填充数组的值 * start 起始索引,默认值为0 * end 结束索引,默认值为this.length * 返回值:修改后的数组 * 描述: * fill方法接受的三个参数value,start,end,起始start,end是可选的,其默认值分别为0,this.length * 如果start为负,则其指定索引值等同于length+start,length为数组的长度。end也是如此 * */ var arr = [1,2,3,4,5] // 用4替换从索引0到结尾的值 console.log(arr.fill(4)) //[4,4,4,4,4] var arr = [1,2,3,4,5] // 用4替换从索引1到结尾的值 console.log(arr.fill(4, 1)) //[1,4,4,4,4] var arr = [1,2,3,4,5] // 用4替换从索引1到3的值,不包括索引3的值 console.log(arr.fill(4, 1, 3)) //[1,4,4,4,5] var arr = [1,2,3,4,5] // 用4替换从索引2到3的值,不包括索引3的值 arr.length = 5 => 5 + (-3) = 2 => 5 + (-2) = 3 console.log(arr.fill(4, -3, -2)) //[1,2,4,4,5]

3.pop():从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度


/** * 方法:pop * 作用:从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度 * 语法:arr.pop() * 参数:不需要传参 * 返回值: * 从数组中删除的元素 * 如果数组为空则返回undefined * 描述: * pop方法从数组中删除并返回最后一个元素 * 如果空数组调用pop方法,返回undefined * */ var arr = [1,2,3,4,5] // 从arr中删除并返回最后一个元素,原数组长度改变 console.log(arr.pop()) console.log(arr) //5 //[1,2,3,4]

4.shift():从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度


/** * 方法:shift * 作用:从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度 * 语法:arr.shift() * 参数:不需要传参 * 返回值: * 从数组中删除的元素 * 如果数组为空则返回undefined * 描述: * pop方法从数组中删除并返回最后一个元素 * 如果空数组调用pop方法,返回undefined * */ var arr = [1,2,3,4,5] // 从arr中删除并返回第一个元素,原数组长度改变 console.log(arr.shift()) console.log(arr) //1 //[2,3,4,5]

5.push():在数组的末尾增加一个或多个元素,并返回数组的新长度


/** * 方法:push * 作用:在数组的末尾增加一个或多个元素,并返回数组的新长度 * 语法:arr.push(element1,...,elementN) * 参数:被添加到数组末尾的元素 * 返回值: * 返回新的length属性值,即返回新的数组长度 * 描述: * push 方法降值追加到数组中 * */ // 添加元素 var arr = [1,2,3,4,5] // 把6追加到arr中,并返回arr的长度 console.log(arr.push(6)) console.log(arr) //6 // [1,2,3,4,5,6] // 添加数组 var arr = [1,2,3,4,5] var arrNew = [6,7,8] // 把arrNew追加到arr中,并返回arr的长度 console.log(arr.push.apply(arr,arrNew)) console.log(arr) //8 //[1,2,3,4,5,6,7,8]

6.unshift():在数组的开头增加一个或多个元素,并返回数组的新长度


/** * 方法:unshift * 作用:在数组的开头增加一个或多个元素,并返回数组的新长度 * 语法:arr.unshift(element1,...,elementN) * 参数:被添加到数组开头的元素 * 返回值: * 返回新的length属性值,即返回新的数组长度 * 描述: * unshift 方法将值插到数组开始位置 * */ // 添加元素 var arr = [1,2,3,4,5] // 把6追加到arr中,并返回arr的长度 console.log(arr.push(6)) console.log(arr) //6 // [1,2,3,4,5,6] // 添加数组 var arr = [1,2,3,4,5] var arrNew = [6,7,8] // 把arrNew追加到arr中,并返回arr的长度 console.log(Array.prototype.push.apply(arr,arrNew)) console.log(arr) // 8 //[1,2,3,4,5,6,7,8]

7.splice():在任意的位置给数组添加或删除任意个元素


/** * 方法:splice * 作用:在任意的位置给数组添加或删除任意个元素 * 语法:array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) * 参数: * start 指定修改的开始位置 * 如果超出了数组的长度,则从数组末尾开始添加内容 * 如果是负值,则表示从数组末位开始的第几位(从-1 计数,这意味着-n是倒数并且等价于array.length-n) * 如果负数的绝对值大于数组的长度,则表示开始位置为第0位 * * deleteCount 整数,表示要移除的数组元素的个数 * 如果 deleteCount 大于start之后的元素的总数,则从start后面元素都将被删除(含第start位) * 如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是说,如果他大于 * 或等于之后的所有元素的数量),那么start之后数组的所有元素都会被删除 * 如果 deleteCount 是0或者负数,则不移动元素。这种情况下,至少应该天啊及一个新元素 * * item1,item2,item3,..可选 * 要添加进数组的元素,从start位置开始。 * 如果不指定,则splice() 将只删除数组元素 * 返回值: * 由被删除的元素组成的一个数组。 * 如果只删除了一个元素,则返回只包含一个元素的数组。 * 如果没有删除,则返回空数组 * 描述: * 如果添加进数组的元素个数不等于被删除的元素个数,数组的长度会发生相应的改变 * * */ var arr = [1,2,3,4,5] // 从第2位开始删除0个元素,插入6 console.log(arr.splice(2, 0, 6)) console.log(arr) // 没有删除,则返回空数组 // [1,2,6,3,4,5,6] var arr = [1,2,3,4,5] // 从第2位开始删除0个元素,插入6,7,8 console.log(arr.splice(2, 0, 6, 7, 8)) console.log(arr) // 8 // [1,2,6,7,8,3,4,5] var arr = [1,2,3,4,5] // 从第2位开始删除2个元素 console.log(arr.splice(arr.length - 3, 2)) console.log(arr) // [3,4] // [1,2,5] var arr = [1,2,3,4,5] // 从倒数第2位开始删除2个元素 // 意味着 arr.length + (-n) console.log(arr.splice(-2, 2)) console.log(arr) // [3,4] // [1,2,5] var arr = [1,2,3,4,5] // 从倒数第2位开始删除2个元素 console.log(arr.splice(2)) console.log(arr) // [3,4] // [1,2,5] var arr = [1,2,3,4,5] // 从第1位开始删除所有元素 console.log(arr.splice(0)) console.log(arr) // [1,2,3,4,5] // [] var arr = [1,2,3,4,5] // 不删除元素 console.log(arr.splice()) console.log(arr) // [] // [1,2,3,4,5] var arr = [1,2,3] console.log(arr.length) // 从第一位开始删除2个元素,添加4,5,6,7 console.log(arr.splice(0,2,4,5,6,7)) console.log(arr.length) // 3 // [1,2] // 5

8.sort():对数组元素进行排序,并返回当前数组

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文手册
专注分享前端知识,你想要的,在这里都能找到


/** * 方法:sort * 作用:对数组元素进行排序,并返回当前数组 * 语法:arr.sort([compareFunction]) * 参数: * compareFunction 用指定按某种顺序进行排列的函数 * 如果省略,元素按照转换的字符串的各个字符的Unicode位点进行排序 * * firstEl 第一个用于比较的元素 * * secondEl 第二个用于比较的元素 * 返回值:排序后的数组。请注意,数组已原地排序,并且不进行复制 * 描述: * 如果不指明 compareFunction,那么元素会按照转换为的字符串的各个字符的Unicode位点进行排序 * * * 如果指明了 compareFunction,那么数组会按照调用函数的返回值排序。即a和b是两个将要 * 比较的元素: * - compareFunction(a,b) > 0 => a 在 b 前面 * - compareFunction(a,b) = 0 => a 和 b 位置不变 * - compareFunction(a,b) < 0 => b 在 a 前面 * * compareFunction(a,b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果是不确定 * * */ var arr = [4,2,5,1,3] // 升序 arr.sort(function(a,b){ return a - b; }) console.log(arr) // [1,2,3,4,5] var arr = [4,2,5,1,3] // 升序 // ES6 写法 arr.sort((a,b) => a - b) console.log(arr) // [1,2,3,4,5] var arr = [4,2,5,1,3] // 降序 arr.sort(function(a,b){ return b - a; }) console.log(arr) // [5,4,3,2,1] // 对象可以按照某个属性排序 var items = [ { name: 'Edward', value: 21 }, { name: 'Sharpe', value: 37 }, { name: 'And', value: 45 }, { name: 'The', value: -12 }, { name: 'Magnetic' }, { name: 'Zeros', value: 37 } ]; items.sort((a,b) => a.value - b.value) console.log(items) // [{name: "The", value: -12}, // {name: "Edward", value: 21}, // {name: "Sharpe", value: 37}, // {name: "And", value: 45}, // {name: "Magnetic"}, // {name: "Zeros", value: 37}]

9.reverse():将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组


/** * 方法:reverse * 作用:将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组 * 语法:arr.reverse() * 参数:不需要传参 * 返回值:颠倒后的数组 * 描述: * reverse方法颠倒数组中元素的位置,改变了数组,并返回改数组的引用 * */ // 颠倒数组中的元素 var arr = [4,2,5,1,3] console.log(arr) arr.reverse() console.log(arr) // [1,2,3,4,5] // [3,1,5,2,4] // 颠倒类数组中的元素 var arr = {0: 1, 1: 2, 2: 3, length: 3} console.log(arr) // reverse() 调用返回一个颠倒后的类数组对象arr的引用 Array.prototype.reverse.call(arr) console.log(arr) // {0: 1, 1: 2, 2: 3, length: 3} // {0: 3, 1: 2, 2: 1, length: 3}

作者:love2424
链接:https://segmentfault.com/a/1190000022641553

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:JavaScript的数组常用的方法(上)

链接:https://www.javascriptc.com/4031.html

« 超详解析Flutter渲染引擎|业务想创新,不了解底层原理怎么行?
JavaScript 装逼指南»
Flutter 中文教程资源

相关推荐

QR code