JS数组中那些你知道或不知道的- 首发:krissarea.gitee.io
- 作者:陈大鱼头
- github: KRISACHAN
[h1]JS中的Array[/h1]ecma-262中的定义:Array对象是一种特殊对象,它会对数组索引属性键进行特殊处理。
每个Array对象都有一个不可配置的length属性,其最大值是2 - 1。 [h2]Array()[/h2]当且仅当不带参数调用Array构造函数时,此描述才适用。 执行过程:
- 定义 numberOfArgs 传递给此函数的调用的实参数量;
- 断言: numberOfArgs 为 0;
- 如果 NewTarget 为 undefined ,就设置 newTarget 为 活动函数对象(active-function-object,正在运行的执行上下文的函数组件) ,并且让 newTarget 成为 NewTarget ;
- 原型 proto 怎么办?通过原生方法
- GetPrototypeFromConstructor(newTarget,"%ArrayPrototype%")
复制代码 来构造;
- 返回原生方法。
鱼头注:NewTarget是啥?NewTarget是原生Class FunctionCallbackInfo(函数调用的callback上下文的信息)内的一个不变量,用来定义构造调用时的返回值(new.target)。
[h2]Array(len)[/h2]当且仅当使用一个参数调用Array构造函数时,此描述才适用。 执行过程:
1.定义 numberOfArgs 为传递给此函数的调用的实参数量;
2.断言: numberOfArgs 为1;
3.如果 NewTarget 为 undefined ,就设置 newTarget 为 活动函数对象 ,并且让 newTarget 成为 NewTarget ;
4.原型 proto 怎么办?通过原生方法- GetPrototypeFromConstructor(newTarget,"%ArrayPrototype%")
复制代码 来构造;
5.然后定义array 为;
6.如果 len 的类型不是个Number,则:
a.定义 defineStatus 为CreateDataProperty(array, "0", len);
b.断言:defineStatus为真;
c.让 intLen(初始化长度) 为1。
7.或者:
a.定义intLen为ToUint32(len)(原生方法,将len转换成0到2 - 1之间的整数值);
b.如果intLen不等于len,抛出RangeError异常。
8.执行Set(array, "length", intLen, true)(原生方法,给对象的属性赋值);
9.返回array。
[h2]Array(...items)[/h2]当且仅当使用至少两个参数调用Array构造函数时,此描述才适用。 执行过程:
1.定义 numberOfArgs 为传递给此函数的调用的实参数量;
2.断言: numberOfArgs 大于等于2;
3.如果 NewTarget 为 undefined ,就设置 newTarget 为 活动函数对象 ,并且让 newTarget 成为 NewTarget ;
4.原型 proto 怎么办?通过原生方法- GetPrototypeFromConstructor(newTarget,"%ArrayPrototype%")
复制代码 来构造;
5.然后定义array 为- ArrayCreate(numberOfArgs,proto)
复制代码 ;
6.定义 k 为0;
7.定义 items为 正序传入参数的 零源(zero-origined) 列表;
8.重复,当 k 小于 numberOfArgs
a.定义 Pk 为 ToSting(k);
b.定义 itemK 为 item[k];
c.定义 defineStatus 为CreateDataProperty(array, Pk, itemK);
d.断言:defineStatus为真;
e.k 加1。
9.断言: array的 length 值为 numberOfArgs;
10.返回 array。
[h2]empty[/h2]上面的三种情况以上便是构造Array()时不同情况的具体实现。但是我们从上面的断言可以知道,构造结果有可能为真,有可能为假。还有是定义指定长度数组时会出现什么事呢? 在V8源码 3.28.71(node0.12.18)中 Array 有个CloneElementAt的方法。定义如下:
在指定索引处克隆元素时,如果克隆失败,则返回一个空句柄(任何原因)。
从这句话我们可以知道,当我们构造一个指定长度的 Array 时,由于有长度,所以会开辟相应下标的空间,但是因为该下标并没有元素,所以就会返回empty,任何原因构造数组元素失败时,都会返回一个empty。
示例如下:
[h2]以上总结[/h2]上面是 ECMA 上的定义以及 V8 源码的容错处理,其实简单来说就是:
调用时:
- 用原生方法
- GetPrototypeFromConstructor
复制代码 生成原型;
- 判断的类型;
- 如果为,则直接返回创建数组的原生方法;
- 如果为,则用原生方法创建长度的数组,并通过原生方法来创建 args 个empty 作为数组元素,如果大于 2 - 1 的话,会报错;
- 如果为其他类型,则把变成数组元素,并用 原生方法创建参数,然后返回创建数组的原生方法。
[h1]类型转换[/h1]类型转换是一个经常出现在一些网上常见面试题或者奇技淫巧中的内容。那么关于数组的类型转换,又是怎样的呢? 首先我们要知道,在 JS 中类型转换只有三种情况,分别是:
[h2]转换为原始类型[/h2]对象在转换类型的时候,会执行原生方法ToPrimitive。
其算法如下:
- 如果已经是 原始类型,则返回当前值;
- 如果需要转 字符串 则先调用方法,如果此时是 原始类型 则直接返回,否则再调用方法并返回结果;
- 如果不是 字符串,则先调用方法,如果此时是 原始类型 则直接返回,否则再调用方法并返回结果;
- 如果都没有 原始类型 返回,则抛出 TypeError类型错误。
当然,我们可以通过重写来制定转换规则,此方法在转原始类型时调用优先级最高。
[h2]转换为布尔值[/h2]对象转换为布尔值的规则如下表:
参数类型结果Undefined返回。Null返回。Boolean返回 当前参数。Number如果参数为、或,则返回;其他情况则返回。String如果参数为空字符串,则返回;否则返回。Symbol返回。Object返回。[h2]转换为数字[/h2]对象转换为数字的规则如下表:
参数类型结果Undefined返回。NullReturn +0.Boolean如果参数为,则返回;则返回。Number返回当前参数。String先调用 ToPrimitive,再调用 ToNumber,然后返回结果。Symbol抛出错误。Object先调用 ToPrimitive,再调用 ToNumber,然后返回结果。[h2]转换为字符串[/h2]对象转换为字符串的规则如下表:
参数类型结果Undefined返回。Null返回。Boolean如果参数为,则返回;否则返回。Number调用 NumberToString,然后返回结果。String返回 当前参数。Symbol抛出错误。Object先调用 ToPrimitive,再调用 ToString,然后返回结果。[h2]数组的类型转换[/h2]所以通过上面的转换规则,我们是否能够轻松地看懂以下的隐式转换呢?
- [1,2,3] + {a: 1, b: 2} // "1,2,3[object Object]"
复制代码- [1,2,3] + true // "1,2,3true"
复制代码- [1,2,3] + undefined // "1,2,3undefined"
复制代码- [1,2,3] + null // "1,2,3null"
复制代码- [1,2,3] + '123' // "1,2,3123"
复制代码- [1,2,3] + Symbol('biu') // "Uncaught TypeError"
复制代码 所以各位是否理解上述隐式转换的答案呢?
[h1]关于API使用的一些经验与思考[/h1]JS数组自带了很多的方法,在现代工程化数据驱动的理念下,这些方法都是非常重要的。 [h2]loops[/h2]是 Array 方法中比较基本的一个,作用也很简单,与,就是遍历,循环。不同的是,可以选择自定义上下文环境。例子如下:
- arr1.forEach(function (e, i, a) {
复制代码- console.log(e, this); // this为arr2
复制代码 但是如果的回调函数是用箭头函数定义的,那么就无法改变它原本指向的上下文环境。例子如下:
- arr1.forEach((e, i, a) => {
复制代码- console.log(e, this); // this为window对象
复制代码 所以如果我们要实现以下这个功能:
- var ul = document.querySelector('ul');
复制代码- var cls = event.target.className;
复制代码- ul.querySelectorAll('li').forEach(el => {
复制代码- el.style.color = (cls === el.className ? '#FFF' : '#FF0');
复制代码- [/code]
- [/list]在ES6以前的环境中,如果直接用 [code]for
复制代码 循环,会出现只能获取到最后一个元素的问题,但是用则没有这个问题。
[h2]reduce[/h2]Array ES5 API跟,可以轻松实现并归元素的功能,例子如下:
如果我们需要实现一个这样的对象:
那么用reduce就会变得很简单:
- var newArr = 'a,b,c,d,e,f'.split(',').reduce((acc, cur, idx) => {
复制代码- if (Object.prototype.toString.call(acc) !== '[object Object]') {
复制代码 [h2]性能[/h2]上面演示了通过JS数组API实现的一些功能,所以与循环比性能如何呢?
- var arr = new Array(100);
复制代码
- [code]for (var i = 0; i
|
|