JS004. 获取数组最后一个元素且不改变数组的四种方法

TAG:　　Array.length　　Array.prototype.reverse()　　Array.prototype.slice()　　Array.prototype.pop()

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在语法层面展开，所在堆栈的值迭代浅拷贝到新的栈内存并指向新的堆内存中。

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

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

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

如果想深入探究扩展运算符的底层逻辑和扩展使用，建议研读MDN提供的文档 MDN展开语法。

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]
let element = arr[arr.length - 1]

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

我的其他相关文章：

JS005. 拷贝引用数据类型Array使其指向不同堆的解决方案

ES6：使用解构赋值仅用一行定义多个相同的数组，且指向堆不同（解构赋值）

- END -