对象转数组_剩余参数和arguments对象

come on 伸出手指戳戳上方关注我哦

一、arguments对象

01、函数里的arguments

对于一个普通函数fn，函数内部内置了一个 arguments 对象，当用于接收实参的形参个数不确定时，可以用arguments接收。

function fn(){    console.log(arguments)     // [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]}fn(1,2,3)

arguments展示形式是一个伪数组。

02、什么是伪数组

伪数组也叫类数组，并不是真正意义上的数组，是一组具有数组的length属性以及下标，但是不具有数组的push、pop、reverse等方法的对象。

• 01. 具有length属性和下标：

function fn(){    console.log(arguments.length) // 3    console.log(arguments[1]) // 2}fn(1,2,3)

• 02. 可以遍历

function fn() {    for (var i = 0; i < arguments.length; i++) {        console.log(arguments[i]) // 1 2 3    }}fn(1, 2, 3)

• 03. 不具有数组的 push , pop等方法

function fn() {    arguments.push(4)     // Uncaught TypeError: arguments.push is not a function}fn(1, 2, 3)

03、箭头函数里的arguments

箭头函数里不能使用arguments获取参数列表。

var fn = (a,b,c) => {    console.log(arguments) // 并不是参数列表}fn(1,2,3)

但是可以使用剩余参数获取参数列表。

二、剩余参数

01、简介

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

function fn(...arguments) {    console.log(arguments) // [1,2,3] } fn(1, 2, 3)

02、可以与扩展运算符一起使用

function fn(a, ...arguments) {    console.log(a) // a    console.log(arguments) // [2,3] } fn(1, 2, 3)

03、剩余参数是真正的 Array

具有伪数组不具有的pop、push、sort方法等。

function fn(...arguments) {    return arguments.sort()}console.log(fn(3, 2, 1)); //  [1, 2, 3]

三、伪数组转真正的数组

01、Array.prototype.slice.call()

function fn() {    var args = Array.prototype.slice.call(arguments);    args.push(4)    return args}console.log(fn(1,2,3)); // [1,2,3,4]

02、Array.from()

function fn() {    var args = Array.from(arguments);    args.push(4)    return args}console.log(fn(1,2,3)); // [1,2,3,4]

03、结构赋值

function fn() {    let arr = [...arguments]    console.log(arr)}console.log(fn(1, 2, 3)); //  [1, 2, 3]

四、剩余参数和arguments对象之间的区别

1. 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。

2. 剩余参数是真正的数组，arguments对象不是一个真正的数组。

3. arguments对象还有一些附加的属性。

arguments对象的属性：

callee: ƒ fn()length: 3Symbol(Symbol.iterator): ƒ values()arguments: (...)caller: (...)length: 0name: "values"__proto__: ƒ ()[[Scopes]]: Scopes[0]__proto__: Object

References

书名：从0到1：JavaScript快速上手 作者：莫振杰

https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/Functions/Rest_parameters

https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/Functions/arguments

◆ ◆ ◆

sdfd

Readings

      根据某一天空中飞机的数量，他们就可以预测当晚空管员养育子女的水平。飞机越多，为人父母的水平就会越低。用一个世俗一点的比喻来讲就是，同样一位空管员在轻松地工作了一天之后，就会表现出“中产阶级”的样子；而在辛苦工作了一天后，就会落入“贫困人民”的队伍。

      而当你的带宽减少时，这些事情的难度就会加倍。在面对孩子的那一刻，你没有办法表现得耐心，做不到你深知的正确之事，因为你的大脑此时根本就不够自由。这也就是空管员在一天的繁忙工作之后，回到家里就再也没有办法做一位称职的家长的原因。

-- [美]塞德希尔·穆来纳森、埃尔德·沙菲尔《稀缺》

END

下一篇：7种不同函数内的this指向问题

推荐阅读：

1. 高阶函数(Higher-order function)

2. 闭包(closure)

关注有惊喜