为什么这样也能运行? [ ].concat[1,2,3]

fireflow 发布于2019-08-21 11:24 / 2152人阅读

摘要：问题下面的代码的执行结果是什么答案先给出答案。第二步执行一个逗号操作符。因为是一个函数，函数也是对象，所以这是一个属性访问运算。那么我们回到之前的问题，其实等价于那么结果自然就是。

This is just for fun.

本文的宗旨是：This is just for fun。这段代码没有任何实用的价值，但是通过这段代码，你可以了解 javascript 被忽略的知识点和语法。

1. 问题

下面的代码的执行结果是什么？

[].concat[1,2,3]

2. 答案

先给出答案：undefined。

大部分人可能会认为这段程序应该抛出语法异常：

Uncaught SyntaxError: ....

3. 分析

这段程序和下面的代码很像：

[].concat([1,2,3])

concat() 方法将传入的数组或非数组值与原数组合并，组成一个新的数组并返回。但是上面的代码没有使用小括号，所以他们两个并不是相同的。那么我们来拆开分析一下 [].concat[1,2,3] 是怎么执行的：

首先计算 [].concat，这个的结果是 Array.prototype.concat。

第二步执行一个逗号操作符。逗号操作符对它的每个操作对象求值（从左至右），然后返回最后一个操作对象的值。

> 1,2,3
3

第三步执行一个数组访问运算或属性访问运算。因为 [].concat 是一个函数，函数也是对象，所以这是一个属性访问运算。同理，知道了 [] 是数组访问运算或属性访问运算，你可以很快说出下面代码的结果：

[[]][0]
[[[1]]][0][0][0]
[[[1]]][[0][0]][0][0]

看似很复杂，你只需要按操作符的优先级和结合性一步一步分解，就可以求出最后的结果。

那么我们回到之前的问题，[].concat[1,2,3] 其实等价于：

Array.prototype.concat[3]

那么结果自然就是 undefined。

4. 番外篇

因为 javascript 的原型是可以修改的，因此我们可以定义：

Array.prototype.concat[3] = [1,2,3];

这时我们再调用 [].concat[1,2,3] 就会得到结果 [1,2,3]。

扫码二维码关注我的公众号

服务器托管私有云 3.2.1.多云管理 add(1)(2)(3) 1类2类3类模块化机房 php 1+1=2

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

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

ES6数组方法使用心得以及一些数组操作整理

摘要：讲讲的一些数组的新方法吧，之前面试有问到，自己用了一下还挺好用，先看看数组新方法的列表扩展运算符扩展运算符在中我们要将两个打散数组合并会用到数组对象的方法方法最终会返回一个拼接完的数组，也就是我们所需的结果如果用扩展运算符又是如何操作呢不仅讲讲ES6的一些数组的新方法吧，之前面试有问到，自己用了一下还挺好用，先看看数组新方法的列表扩展运算符 Array.from() Array....

hosition 2019-08-26 13:57 评论0 收藏0
那些被忽略的 JavaScript 数组方法细节

摘要：这两个方法的参数是一致的，回调函数和执行回调函数时使用的值，回调函数中的参数也是一致的，分别是数组当前元素当前元素索引和数组本身。青湛(GitHub/mintsweet) 原文链接前言自以为还算一个比较高产的人吧～但是感觉好久都没有写点什么没有营养的东西了，这一篇本来是打算去年年底都要拿出来说一说的，但是年底事情太多了，加上我真的变懒了拖到现在才要把这个准备了好久的标题完善一下...

jsyzchen 2019-08-23 15:32 评论0 收藏0
Python源码理解: �39;+=�39; 和 �39;xx = xx + xx�

摘要：前菜在我们使用的过程很多时候会用到运算例如输出不光在加法中使用在字符串的拼接也同样发挥这重要的作用例如输出同样的在列表中也能使用例如输出为什么上面不同的对象执行同一个会有不同的效果呢这就涉及到的重载然而这不是本文要讨论的重点上面的只是前菜而前菜在我们使用Python的过程, 很多时候会用到+运算, 例如: a = 1 + 2 print a # 输出 3 不光在加法中使用, 在...

learning 2019-07-31 10:59 评论0 收藏0
数组常用的12种方法

数组中的常用的12个方法：push、pop、unshift、shift、slice、splice、concat、reverse、sort、join、toString、indexOf。首先我们要明确以下几点： 1、方法是干啥用的； 2、每种方法传递的参数有多少个，每一个是什么样的数据类型，每一个参数所代表的意思是什么？ 3、返回值类型，和代表的意思； 4、重要的：通...

Lyux 2019-08-19 17:52 评论0 收藏0
个人小结--javascript实用技巧和写法建议

摘要：类似的情况还有，方法和方法等。今天我说一个最简单。代码如下和也可以实现，但是生成的是一个整数，如下分割线其它类型数据转布尔数据下面的转换，大家一看就明白了，不多说。缓存变量循环缓存分割线第一段就是每一次循环的时候，都要查询一次。 1.前言从大学到现在，接触前端已经有几年了，感想方面，就是对于程序员而言，想要提高自己的技术水平和编写易于阅读和维护的代码，我觉得不能每天都是平庸的写代码，...

WilsonLiu95 2019-08-21 16:18 评论0 收藏0