菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
176
0

JS:获取数组最后一个元素且不改变数组的四种方法(pop( )、slice( )、reverse( )、Array.length)

原创
05/13 14:22
阅读数 11804

Array对象 - pop( )

pop() 方法用于删除数组的最后一个元素并返回删除的元素,要点 - 获取并删除

let arr = [0, 1, 2, 3]
let element = arr.pop()

console.log('arr: ', arr, ' & arr.length: ', arr.length)
// arr: [0, 1, 2] & arr.length: 3

console.log('element: ', element, ', type: ', typeof(element))
// element: 3, type: Number

 通过 扩展运算符 来执行pop方法,获取数组最后一个元素的同时不会改变它本身。

var arr = [0,1,2,3]
var element = [...arr].pop()

console.log('arr: ', arr, ', element: ', element)
// arr: [0, 1, 2, 3], element: 3

console.log('arr.length: ', arr.length, ', type: ', typeof(element))
// arr.length: 4, type: Number

数组的实质就是一个连续的储存空间,而  [...arr]  从逻辑上来讲就是开辟一个新的连续的储存空间,把arr在语法层面展开,所在堆栈的值迭代浅拷贝到 element 所指向的新的储存空间中。

需要特别注意的是扩展运算符与 Object.assign( ) 语法相同,都是浅拷贝一层,如果是多维数组就出现问题了。

var a = [[1], [2], [3]]
var b = [...a]
b.shift().shift()    // 1

// 这样做数组a也受到了影响!
console.log(a)    // [[2], [3]]

如果想深入探究扩展运算符的底层逻辑和扩展使用,建议研读MDN提供的文档 MDN展开语法,MDN是我见过Web进阶理解中最好的文档,里面的知识点都是成为前端顶尖大佬所必备的!!如果大家有更好的学习途径不妨分享分享。

 

Array对象 - slice( )

slice() 方法可从已有的数组中返回选定的元素

let arr = [0, 1, 2, 3]
let element = arr.slice(-1)

console.log('arr: ', arr, ', element: ', element)
// arr: [0, 1, 2, 3], element: 3

 

Array对象 - reverse( )

reverse() 方法用于颠倒数组中元素的顺序。

let arr = [1, 2, 3]
let [element] = arr.reverse()

console.log(elelment)
// 3
console.log(arr)
// [3, 2, 1]

可以看到该方法虽然也可以拿到最后一个元素但同时也会改变数组本身。

巧用扩展运算符,就可以达到不改变数组本身获取最后一个元素的目的。

let arr = [1, 2, 3]
let [arg] = [...arr].reverse()

console.log(arg)
// 3
console.log(arr)
[1, 2, 3]

 

Array属性 - length

length 属性可设置或返回数组中元素的数目。

let arr = [0, 1, 2, 3]

console.log('arr.length: ', arr.length)
// arr.length: 4

 

- END -

发表评论

0/200
176 点赞
0 评论
收藏