[JS] ECMAScript 6 - Array : compare with c#

时间:2021-10-10 01:41:48

扩展运算符(spread)

先复习下 rest 参数。

(1) argument模式,但不够好。

// https://blog.csdn.net/weixin_39723544/article/details/78460470

function foo(a, b) {
var i, rest = [];
if (arguments.length > 2) {
for (i = 2; i<arguments.length; i++) {
rest.push(arguments[i]);
}
}
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}

(2) 更灵活,但需要在尾部,且不能给默认参数。

function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
} foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ] foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

(3) 三个点(...),它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

该运算符主要用于函数调用,尤其是,数组作为参数时。

function push(array, ...items) {
array.push(...items);
} function add(x, y) {
return x + y;
} const numbers = [4, 38];
add(...numbers) //

- 参数,任意位置

function f(v, w, x, y, z) { }
const args = [0, 1];
f(-1, ...args, 2, ...[3]);

-  表达式,先计算出结果

const arr = [
...(x > 0 ? ['a'] : []),
'b',
];

- 空,则无效

[...[], 1]
// [1]

替代函数的 apply 方法

  由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。

  • apply干嘛的? 
obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);

唯一区别是apply接受的是数组参数,call接受的是连续参数。

function add(j, k){
return j+k;
} function sub(j, k){
return j-k;
}

我们在控制台运行:

add(5,3); //
add.call(sub, 5, 3); //
add.apply(sub, [5, 3]); // sub(5, 3); //
sub.call(add, 5, 3); //
sub.apply(add, [5, 3]); //
  • 不再需要apply方法!

由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。

// ES5 的写法
Math.max.apply(null, [14, 3, 77]) // ES6 的写法
Math.max(...[14, 3, 77])  // 看上去比apply舒服一些 // 等同于
Math.max(14, 3, 77);

挽救apply的参数格式之鸡肋。

// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);  // 因为push的参数格式要求是个鸡肋 // ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);    // <---- 看着舒服多了

扩展运算符的应用

  • 浅复制
const a1 = [1, 2];
const a2 = a1;
  • 扩展运算符 - 深拷贝
const a1 = [1, 2];
// 写法一
const a2 = [...a1];  //
// 写法二
const [...a2] = a1;
  • 扩展运算符 - 合并
// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ] // ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
  • 扩展运算符 - 与解构赋值结合
const [first, ...rest] = [1, 2, 3, 4, 5];
first //
rest // [2, 3, 4, 5] const [first, ...rest] = [];
first // undefined
rest // [] const [first, ...rest] = ["foo"];
first // "foo"
rest // []
  • 扩展运算符 - 字符串
[...'hello']
// [ "h", "e", "l", "l", "o" ]

* 只要是部署了 Iterator 接口的数据结构,Array.from都能将其转为数组。

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o'] let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
  • 扩展运算符 - 类数组“转正”
let nodeList = document.querySelectorAll('div');  // nodList类数组,可能其中没有直接使用数组的很多方法
let array = [...nodeList];
  • 扩展运算符 - 具备Iterator 接口的对象【如果对没有 Iterator 接口的对象,使用扩展运算符,将会报错】
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]); let arr = [...map.keys()]; // [1, 2, 3] ------------------------------------------------------ // 1. 变量go是一个 Generator 函数,执行后返回的是一个遍历器对象,
const go = function*(){  
yield 1;
yield 2;
yield 3;
}; [...go()]    // 2.
对这个遍历器对象执行扩展运算符, 就会将内部遍历得到的值,转为一个数组。
// [1, 2, 3]

* 只要是部署了 Iterator 接口的数据结构,Array.from都能将其转为数组。

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
  • 扩展运算符 - 类似数组的对象 【Array.from】
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}; // ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c'] // ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

* 实际应用中,常见的类似数组的对象是:

// (1) NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
return p.textContent.length > 100;
});

------------------------------------------------------
// (2) arguments对象
function foo() {
var args = Array.from(arguments);
// ...
}

本质特征只有一点,任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。比如:

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]

对于还没有部署该方法的浏览器,可以用Array.prototype.slice方法替代。  

[JS] ECMAScript 6 - Array : compare with c#

* 接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x); Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

取出一组 DOM 节点的文本内容

let spans  = document.querySelectorAll('span.name');

// map()
let names1 = Array.prototype.map.call(spans, s => s.textContent); // Array.from()
let names2 = Array.from(spans, s => s.textContent)  // <---- 看上去简洁

例1: 将数组中布尔值为false的成员转为0

Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3] 

例2: 返回各种数据的类型。

function typesOf () {
return Array.from(arguments, value => typeof value)
}
typesOf(null, [], NaN)
// ['object', 'object', 'number']

例3: 返回字符串(Unicode 字符)的长度。

function countSymbols(string) {
return Array.from(string).length;
}

Array.of()

原来的方式:表达比较混乱。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]  这里又变成了数组的内容?!

现在的方法:

Array.of基本上可以用来替代Array()new Array()。

Array.of总是返回参数值组成的数组。如果没有参数,就返回一个空数组。

[JS] ECMAScript 6 - Array : compare with c#

Array.of方法可以用下面的代码模拟实现。

function ArrayOf(){
return [].slice.call(arguments);
}

copyWithin()


/**
* Array.prototype.copyWithin(target, start = , end = this.length)
**/
// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5] // -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5] // 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5} // 将2号位到数组结束,复制到0号位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5] // 对于没有部署 TypedArray 的 copyWithin 方法的平台
// 需要采用下面的写法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

find() 和 findIndex()

基础:第一个返回值为true的成员

[1, 4, -5, 10].find((n) => n < 0)
// -5

高级:参数更多,灵活性更强,比如比较相邻的元素。

[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 

第二参数:引入另一个对象

function f(v){
return v > this.age;
}
let person = {name: 'John', age: 20}; /* person 对应上述f(v)函数中的this */
[10, 12, 26, 15].find(f, person); //

补丁:数组的indexOf方法的不足,无法识别数组的NaN成员。

[NaN].indexOf(NaN)
// -1

// findIndex方法可以借助Object.is方法做到。
[NaN].findIndex(y => Object.is(NaN, y))
//

NaN是什么东东?

NaN: Not a Number。代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。

提示:请使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

方法 parseInt() 和 parseFloat() 在不能解析指定的字符串时就返回这个值。

对于一些常规情况下返回有效数字的函数,也可以采用这种方法,用 Number.NaN 说明它的错误情况。

[JS] ECMAScript 6 - Array : compare with c#

map方法在调用callback函数时,会自动给它传递三个参数:

(1) 当前正在遍历的元素

(2) 元素索引

(3) 原数组本身

第三个参数parseInt会忽视, 但第二个参数不会,也就是说,parseInt把传过来的索引值当成进制数来使用,从而返回了NaN。

[JS] ECMAScript 6 - Array : compare with c#

fill()

// 抹去式填充
['a', 'b', 'c'].fill(7)
// [7, 7, 7] new Array(3).fill(7)
// [7, 7, 7] // 或者自定义位置抹去
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

entries(),keys() 和 values()

ES6 提供三个新的方法,遍历数组。

  • for...of循环
for (let index of ['a', 'b'].keys()) {  // 对键名的遍历
console.log(index);
}
//
// for (let elem of ['a', 'b'].values()) {  // 对键值的遍历
console.log(elem);
}
// 'a'
// 'b' for (let [index, elem] of ['a', 'b'].entries()) {  // 对键值对的遍历
console.log(index, elem);
}
// 0 "a"
// 1 "b"
  • next方法

[JS] ECMAScript 6 - Array : compare with c#

includes()

是否包含该元素。

[1, 2, NaN].includes(NaN) // true
[NaN].indexOf(NaN)
// -1  导致了误判 [1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true

另外,Map 和 Set 数据结构有一个has方法,需要注意与includes区分。

    • Map 结构的has方法,是用来查找键名的,比如:
      • Map.prototype.has(key)
      • WeakMap.prototype.has(key)
      • Reflect.has(target, propertyKey)
    • Set 结构的has方法,是用来查找值的,比如:
      • Set.prototype.has(value)
      • WeakSet.prototype.has(value)

数组的空位

一个位置的值等于undefined,依然是有值的。

空位是没有任何值。如下:

[JS] ECMAScript 6 - Array : compare with c#

第一个数组的 0 号位置是有值的;第二个数组的 0 号位置没有值。

ES5 对空位的处理,已经很不一致了,大多数情况下会忽略空位。

ES6 则是明确将空位转为undefined

”由于空位的处理规则非常不统一,所以建议避免出现空位。“

Array.from(['a',,'b'])
// [ "a", undefined, "b" ] [...['a',,'b']]
// [ "a", undefined, "b" ] [,'a','b',,].copyWithin(2,0) // [,"a",,"a"] new Array(3).fill('a') // ["a","a","a"] let arr = [, ,];
for (let i of arr) {
console.log(1);
}
//
// 1
// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]] // keys()
[...[,'a'].keys()] // [0,1] // values()
[...[,'a'].values()] // [undefined,"a"] // find()
[,'a'].find(x => true) // undefined // findIndex()
[,'a'].findIndex(x => true) // 0