JavaScript基础整理之数组(一)

dingda 发布于2019-08-21 17:04 / 2026人阅读

摘要：原文发布在数组应该是日常开发中最常见的数据结构了，虽然常见，但是却不一定能优雅地处理好，中数组的处理方法很多，各个方法的参数返回值是否修改原数组等也容易记混。

原文发布在：http://blog.xiaofeixu.cn/2017...

数组应该是日常开发中最常见的数据结构了，虽然常见，但是却不一定能优雅地处理好，JavaScript中数组的处理方法很多，各个方法的参数、返回值、是否修改原数组等也容易记混。这些方法虽然都比较简单，但是初学的时候没怎么重视，后来在实际的项目中却发现，能否灵活地运用这些方法对开发进度还是有很大的影响的，所以在此整理一下，温故知新。

array.slice(a,b)

描述：slice 接受两个参数：开始和结束的索引值，返回原数组的从a到b的一部分（包含a，不包含b），原数组不发生改变

原数组：不变

返回：原数组的从a到b的一部分（包含a，不包含b）
可以将slice用于数组的浅复制

let arr = [1,2,3,4,5];
let arr2 = arr.slice(1,3);
let arr1 = arr.slice();
arr1.push([6])
let arr3 = arr1.slice();
arr3[arr3.length-1].push(7)
console.log(arr)  //[ 1, 2, 3, 4, 5 ]
console.log(arr1) //[ 1, 2, 3, 4, 5, [ 6, 7 ] ]
console.log(arr2) //[ 2, 3 ]
console.log(arr3) ////[ 1, 2, 3, 4, 5, [ 6, 7 ] ]

array.splice(a,b,item1,item2…)

描述：slice 接受三个参数：开始的索引值、要删除元素的个数、用于代替删除元素的内容，返回被删除的元素构成的数组，原数组

原数组：变

返回：被删除元素构成的数组

let arr = [1,2,3,4,5]
let arr3 = arr.splice(1,2,"m","n","p")
console.log(arr);//[ 1, "m", "n", "p", 4, 5 ]
console.log(arr3);//[ 2, 3 ]

array.concat()

描述：concat 接受一个或多个参数，若参数为数组，则将该数组与原数组合并，若不为数组，则将该参数作为原数组的一个元素

原数组：不变

返回：合并后的新数组

let arr = [ 1, "m", "n", "p", 4, 5 ]
let arr4 = arr.concat("abcd",[100,[101]]);
console.log(arr)//[ 1, "m", "n", "p", 4, 5 ]
console.log(arr4);// [ 1, "m", "n", "p", 4, 5, "abcd", 100, [101] ]

array.join()

描述：join 接受一个参数，作为返回的字符串的分隔符，

原数组：不变

返回：以参数为分隔符的字符串

let arr = [ 1, "m", "n", "p", 4, 5 ]
let str = arr.join("-")
console.log(arr)//[ 1, "m", "n", "p", 4, 5 ]
console.log(str)//1-m-n-p-4-5

array.reverse()

描述：无参数，将原数组的元素前后颠倒

原数组：变，顺序颠倒

返回：颠倒位置后的原数组

let arr = [ 1, "p", 4, 5, 4, 5 ]
let arr6 = arr.reverse()
console.log(arr) //[ 5, 4, 5, 4, "p", 1 ]
console.log(arr6) //[ 5, 4, 5, 4, "p", 1 ]

array.toString()

描述：无参数，将原数组转换成字符串，以 ‘,’ 分割。（不可指定分隔符，比array.join()的功能弱）

原数组：不变

返回：字符串

let arr = [ 5, 4, 5, 4, "p", 1 ]
let str1 = arr.toString()
console.log(arr)
console.log(str1)

array.push()/array.unshift()

描述：将参数作为数组的元素，置于数组的尾部/头部

原数组：变

返回：新数组的长度

let arr = [ 1, "p", 4, 5, 4, 5, 6 ]
let l = arr.push(8)
console.log(l)// 8
console.log(arr)// [ 1, "p", 4, 5, 4, 5, 6, 8 ]
let l2 = arr.unshift(0)
console.log(l2) //1
console.log(arr) // [ 0, 1, "p", 4, 5, 4, 5, 6, 8 ]

array.pop()/array.shift()

描述：分别去除数组的最后一个/第一个元素

原数组：变

返回：被删除的元素

let arr = [ 0, 1, "p", 4, 5, 4, 5, 6, 8 ]
let ele = arr.shift();
console.log(ele)//0
console.log(arr)//[ 1, "p", 4, 5, 4, 5, 6, 8 ]
let ele2 = arr.pop();
console.log(ele2)//8
console.log(arr)// [ 1, "p", 4, 5, 4, 5, 6 ]

array.copyWithin(target,start,end)——ES6新增

描述：接受三个参数，target为目标位置的索引，start 为待复制数据的起始索引，默认为0，end为待复制数据的结束索引（不包含），默认等于数组长度（最后一位元素的索引+1）

原数组：变，但不更改原数组的长度

返回：改变后的数组

let arr = [ 1, "m", "n", "p", 4, 5 ]
let arr5 = arr.copyWithin(1,3,6)
console.log(arr) // [ 1, "p", 4, 5, 4, 5 ]
console.log(arr5) // [ 1, "p", 4, 5, 4, 5 ]

这只是数组的一部分，还有数组迭代、查询、浅复制、深复制等很多方法没有说，下次再说吧。

云服务器 GPU云服务器之基础篇黑客基础之DOS 零基础课程之c语言基础javascript

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89105.html

前端开发知识点整理

摘要：前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理，涵盖前端理论与前端实践两方面。前言：本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理，涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么，看上去有很多，但具体你要学什么，还是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 评论0 收藏0
前端开发知识点整理

摘要：前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理，涵盖前端理论与前端实践两方面。前言：本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理，涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么，看上去有很多，但具体你要学什么，还是要 follow your heart & follow your BOSS。初衷...

Sike 2019-08-29 12:44 评论0 收藏0
前端开发知识点整理

摘要：前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理，涵盖前端理论与前端实践两方面。前言：本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理，涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么，看上去有很多，但具体你要学什么，还是要 follow your heart & follow your BOSS。初衷...

tracy 2019-08-01 16:59 评论0 收藏0
SegmentFault 技术周刊 Vol.40 - 2018，来学习一门新的编程语言吧！

摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...

caspar 2019-08-15 13:33 评论0 收藏0
SegmentFault 技术周刊 Vol.40 - 2018，来学习一门新的编程语言吧！

摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...

nihao 2019-08-21 18:39 评论0 收藏0