最近作死又去做了一遍javascript-puzzlers上的44道变态题,这些题号称“JS语言专业八级”的水准,建议可以去试试,这里我不去解析这44道题了,网上已经有很多的答案了。我只介绍让我意想不到的几种特殊情况下的数组操作方法结果。关于数组原生方法的基本操作我在另一篇博客里已经做了简介:吃透Javascript数组操作的正确姿势—再读《Js高程》.....下面的输出结果,未做特殊说明是在Node环境中运行的结果。
第一题:
What is the result of this expression? (or multiple ones)
[ [3,2,1].reduce(Math.pow), [].reduce(Math.pow) ]
an error
[9, 0]
[9, NaN]
[9, undefined]
Per spec: reduce on an empty array without an initial value throws TypeError
在Node环境中可以自行执行上面的表达式,结果会产生TypeError: Reduce of empty array with no initial value
也就是说在不能在空数组上调用不带初始参数的reduce方法,可以像下面这样调用,增加一个初始参数
1
|
console.log([ [3,2,1].reduce(Math.pow), [].reduce(Math.pow,1)])//输出[9,1] |
第二题:
What is the result of this expression? (or multiple ones)
var ary = [0,1,2];ary[10] = 10;ary.filter(function(x) { return x === undefined;});
[undefined × 7]
[0, 1, 2, 10]
[]
[undefined]
Array.prototype.filter is not invoked for the missing elements.
由上面的结果可以得知,“稀疏数组”中丢失的元素并不会唤起filter方法的调用,但是如果你打印出稀疏元素
1
|
console.log(ary[5]); //undefined
|
结果确实是undefined。打印整个数组看一下:
1
|
console.log(ary) //[ 0, 1, 2, , , undefined, , , , , 10 ]
|
所以这种通过直接给ary[10]赋值的方式产生的数组并不将未赋值的地方变成真正的undefined。
创建“稀疏数组”的方法也不只这一种,那么其他方法会不会也是这种情况呢。
1
2
3
4
|
var ary = [0,1,2];
ary.length = 10; console.log(ary) //[ 0, 1, 2, , , , , , , ]
console.log(ary.filter( function (x) { return x === undefined;})); //[]
|
从上例可以看到使用设置arr.length的方法创建的稀疏数组也是一样的情况。
1
2
3
4
5
6
|
var ary = Array(10);
ary[0]=0; ary[1]=1; ary[2]=2; console.log(ary) //[ 0, 1, 2, , , , , , , ]
console.log(ary.filter( function (x) { return x === undefined;})); //[]
|
从上可以看出通过ary = Array(10);创建的稀疏数组同样出现这样情况。
接下来拓展一下,直接将undefined赋值给ary[5]
1
2
3
4
5
|
var ary = [0,1,2];
ary[5]=undefined; //直接将undefined赋值给ary[5]
ary[10] = 10; console.log(ary) //[ 0, 1, 2, , , undefined, , , , , 10 ]
console.log(ary.filter( function (x) { return x === undefined;})); //[ undefined ]
|
从结果中可以看出只有ary[5]通过了筛选。
稀疏数组的这种特性在数组的map方法中是否存在呢,接着看第三题。
第三题:
What is the result of this expression? (or multiple ones)
var ary = Array(3);ary[0]=2;ary.map(function(elem) { return '1'; });
[2, 1, 1]
["1", "1", "1"]
[2, "1", "1"]
other
The result is ["1", undefined × 2]
, as map
is only invoked for elements of the Array
which have been initialized.
官网给出了上面的 解析,在浏览器中运行就是上面的结果,我在Node环境中显示的结果是[ '1', , ]。不管怎么样都说明了在稀疏元素上并没有唤起调用map的回调函数。
2016-7-20补充:那么有没有办法让稀疏数组唤起调用map或者上一题的filter方法呢?看完下面的例子大概就清楚了
1
2
3
4
5
|
var a = Array(10).join( "," ).split( "," ).map( function (item, index) {
return index;
}); console.log(a); |
通过join方法把它转成字符串,然后,再通过split方法把字符串转成数组,这时候,它就拥有10个值为空的元素了,然后,再通过map函数,改变这些元素的值即可。
第四题:
What is the result of this expression? (or multiple ones)
var x = [].reverse;x();
[].reverse will return this and when invoked without an explicit receiver object it will default to the default this AKA window
reverse
方法颠倒数组中元素的位置,并返回该数组的引用。出题者的意图是该方法会返回this,然后在全局环境中这个this就是window,而实际上经过我测试,在谷歌浏览器上显示错误:
Uncaught TypeError: Array.prototype.reverse called on null or undefined(…)
在Node环境中显示
TypeError: Array.prototype.reverse called on null or undefined
可以看出实际上 var x = [].reverse返回的是对数组reverse方法的引用,直接调用的话会出错。可以使用call方法调用
1
2
3
4
|
var x = [].reverse;
var arr=[1,2,3];
console.log( x.call(arr)); //[ 3, 2, 1 ] |
第五题:
What is the result of this expression? (or multiple ones)
[,,,].join(", ")
JavaScript allows a trailing comma when defining arrays, so that turns out to be an array of three undefined.
因为javascript 在定义数组的时候允许最后一个元素后跟一个,
, 所以这是个长度为三的稀疏数组(这是长度为三, 并没有 0, 1, 2三个属性哦),同理
1
2
|
var arr=Array(3);
console.log(arr.join( ", " ) ) //, ,
|
参考:
44个 Javascript 变态题解析 (上)
再探JS数组原生方法—没想到你是这样的数组的更多相关文章
-
JS 中 原生方法 (二) --- 数组 (修---添加ES6新增)
const arr = [1, 2, 3, 5, 'a', 'b'] /** * * length * 这个只能被 称之为 数组的原生属性, 返回 一个 number * arr.length */ ...
-
JS 中 原生方法 (四) --- Object
Javascript 中 str. arr.date.obj 等常见的原生方法总结 本文也说主要阐释了 Javascript 中的基础类型和 引用类型的自带方法,那么熟悉的同学又可以绕道了 总是绕道, ...
-
JS 中 原生方法 (三) --- Date 日期
本文也说主要阐释了 Javascript 中的基础类型和 引用类型的自带方法,那么熟悉的同学又可以绕道了 总是绕道,真是羞耻悳boy 当然 本文阐述的主要类容 from MDN ( zh-cn ) D ...
-
JS 中 原生方法 (一) --- 字符串
目录 Javascript 中 str. arr.date.obj 等常见的原生方法总结 Javascript 中 str. arr.date.obj 等常见的原生方法总结 本文也说主要阐释了 Jav ...
-
N皇后求解。万万没想到,只用一个一维数组就搞定了。还体现了回溯。
一.啥是N皇后?先从四皇后入手 给定一个4x4的棋盘,要在棋盘上放置4个皇后.他们的位置有这样的要求,每一列,每一行,每一对角线都能有一个皇后. 你可能会对这个对角线有疑惑,其实就是每一个小正方形的对 ...
-
浅谈Vue响应式(数组变异方法)
很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
-
原生Js 两种方法实现页面关键字高亮显示
原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...
-
原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
-
再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
随机推荐
-
php可获取客户端信息
<?php echo "<br>".$_SERVER['PHP_SELF'];#当前正在执行脚本的文件名,与 document root相关 echo " ...
-
[JSP][JSTL]页面调用函数--它${fn:}内置函数、是推断字符串是空的、更换车厢
页面中调用函数--之${fn:}内置函数 函数描写叙述 fn:contains(string, substring) 假设參数string中包括參数substring,返回true fn:contai ...
-
[转]查询sqlserver 正在执行的sql语句的详细信息
包含用户名,所在数据库,执行的sql语句,执行开始时间,驱动程序,主机名称 SELECT [Spid] = session_Id, ecid, [Database] = DB_NAME(sp. ...
-
Dapper+SqlServerCe部署
C:\Program Files\Microsoft SQL Server Compact Edition\v4.0 目录下面 选择下面这 7 个 SQL Server Compact DLL,并复制 ...
-
【消息队列】RabbitMQ+PHP实现
本文链接:http://www.cnblogs.com/aiweixiao/p/7374249.html 文档提纲: 扫描关注微信公众号 1.[下载和安装] 1)gitHub下载地址: https:/ ...
-
Linux基础学习笔记6-SHELL编程
编程基础 程序:指令+数据 程序编程风格: 过程式:以指令为中心,数据服务于指令 对象式:以数据为中心,指令服务于数据 shell程序:提供了编程能力,解释执行 编程基本概念: 顺序执行:循环执行:选 ...
-
python+selenium滑动式验证码解决办法
from selenium.webdriver import ActionChains action = ActionChains(driver) source=driver.find_element ...
-
JMeter学习(十七)JMeter测试MongoDB(转载)
转载自 http://www.cnblogs.com/yangxia-test JMeter测试MongoDB性能有两种方式,一种是利用JMeter直接进行测试MongoDB,还有一种是写Java代码 ...
-
Oracle 11g R2 for Win7旗舰版(64位)- 安装
1.下载Oracle 11g R2 for Windows的版本 下载地址:http://www.oracle.com/techne ...
-
python基础之字符串格式化
python中字符串格式化有两种,一种是%,另一种是str中的format()功能. % 列举格式符 %s 字符串 %c 单个字符 %b 二进制整数 %d 十进制整数 %i ...