ES6 学习(8) ---数组

1、 扩展符 // 可以将数组转为用逗号相隔开的参数序列

//
console.log(...[1,2,3]) // 1, 2, 3

// 用于函数调用
function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

// 

　　扩展符的应用

// (1) 复制数组  (浅复制)
let arr = [ 1, 2, 3, 4 ]
// ES5 方法
let arr1 = arr.concat() 
// ES6 扩展符用法
let arr1 = [...arr];
let [...arr1] = arr;

// (2) 合并数组
var arr = [1,2]; 
var arr1 = [3,4];
var arr2 = [5,6];
// ES5
var arr3 = arr.concat(arr1,arr2) // [1, 2, 3, 4, 5, 6]
// ES6
let arr3 = [...arr1, ...arr2, ...arr] 

// (3) 与解构赋值一起使用, 扩展符只能在最后使用否则报错
let [a, ...b] = [1, 2, 3, 4, 5]
a // 1
b // [2, 3, 4, 5]

// (4) 将字符串转换成数组， 扩展符能识别四个字符的Unicode 字符
[...'hello']
// [ "h", "e", "l", "l", "o" ]

let str = 'xuD83DuDE80y'; 

str.split('').reverse().join('')
// 'yuDE80uD83Dx'

[...str].reverse().join('')
// 'yuD83DuDE80x'

// (5) 

 2、Array.from() // 将类似数组的对象、伪数组和可遍历的对象转换为真正的数字

// 类似数组的对象
 let likeArray = {
   '0': 'a',
   '1': 'b',
   '2': 'c',
   length: 3
};
// dom 节点
 let nodeList = document.querySelectorAll("div")
// 函数中的arguments对象

// 以上都能转换成数组 只要是部署了 Iterator 接口的数据结构，Array.from都能将其转为数组。
// ES5 的方法
 Array.prototype.slice.call(likeArray)
// ES6 方法
 Array.from(likeArray)
 Array.from(nodeList)

　　Array.from() // 第一个参数是要转成数组的对象，第二个参数是一个函数，相当于转换成数组后进行 map遍历的函数， 第三个参数可以用来绑定this

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)

// 此外还可以获取节点文本内容
let divs = document.querySelectorAll('div');

// map()
let names1 = Array.from(divs, s => s.textContent);

　　Array.from() // 还可以将字符串转换成数组

let str = "abc"
// ES5
let arr = str.split("");
// ES6
let arr1 = Array.from(str) // ["a", "b", "c"]

// Array.from()的另一个应用是，将字符串转为数组，然后返回字符串的长度。因为它能正确处理各种 Unicode 字符，可以避免 JavaScript 将大于uFFFF的 Unicode 字符，算作两个字符的 bug。

3、 Array.of() // Array.of方法用于将一组值，转换为数组。 主要是用来弥补 Array() 方法由于参数个数不同转换成数组的形式不同

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
// Array() 方法当只有一个参数的时候视为数组的长度，而Array.of() 就解决了这个问题
Array.of() // []
Array.of(3) // [3]
Array.of(3, 11, 8)// [3,11,8]

// Array.of() 方法模拟
function ArrayOf(){
  return [].slice.call(arguments);
}

4、copyWithin() // 将指定位置的成员复制到其他位置(会覆盖其他成员)，会修改当前数组

　　Array.prototype.copyWithin(target, start = 0, end = this.length)

　　它接受三个参数(参数都应该是数值类型，不就就转换为数值)。

• • target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
  • start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
  • end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

// 将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}

5、find() 和 findIndex(）

　　find() // 找出第一个符合条件的数组成员，找到返回true，没找到返回undefined

　　findIndex() // 找出第一个符合条件的数组成员位置，找到范围index，没找到返回-1

　　两个方法都有两个参数 第一个函数，第二个是用来绑定函数的this指向

　　arr.find( ( item, index, arr )=> {} )

　　arr.findIndex( ( item, index, arr )=> {} )

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

// 另外，这两个方法都可以发现NaN，弥补了数组的indexOf方法的不足。
[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y)) // Object.is() 判断两个值是否相同

6、fill() // 使用定值填充一个数组

　　arr.fill( "item", start, end ) , 要填充的值，起始(从1开始), 结束。 会抹去原数组成员

　　需要注意的是：如果填充的值是一个对象，那么只是对象的赋值，而不是深拷贝。

 7、 数组实例的 entries()、 keys()、values() 由于遍历数组

for (let index of ['a', 'b'].keys()) { // 数组各元素键的遍历
  console.log(index);
}
// 0
// 1

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"

8、Array.prototype.includes(value，index) // 表示数组中是否有给定的值value， 返回布尔值；第二个参数index表示起始搜索的位置，如果是负数就表示倒数

　　此方法与 indexOf() 方法的区别是，indexOf 是严格的等于( === ) ; 不能判断NaN，但是 includes() 方法能够判断数组中是否包含 NaN

9、Array.prototype.flat( arg = 1 )、 Array.prototype.flatMap( function ) // 扁平化数组；

　　Array.prototype.flat()，将多维数组进行降维处理，默认降一层； 如果是变成一维数组可传参数 infinity ；

[1, 2, [3, [4, 5]]].flat(1) // [1, 2, 3, [4, 5]]
[1, [2, [3]]].flat(Infinity) // [1, 2, 3]

// 如果原数组有空位，flat()方法会跳过空位。
[1, 2, , 4, 5].flat() // [1, 2, 4, 5]

　　Array.prototype.flatMap() // 此方法是对数组的各个成员进行遍历(相当于map函数，函数参数同map方法参数一致)，然后对换算的返回值组成的数组进行flat()方法，该方法返回一个新的数组，不改变原数组。

[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]] 此方法只能降一层

10、数组的空位 // ☞ 数组的某一个位置没有值 例：Array(3) 为 [, , ,]

　　ES5 的方法对空位的处理并不一致，但一般会忽略空位，但是ES6 的方法一般会视为undefined的处理。由于不同方法对空位的处理非常不一致，因此尽量减少出现空位。

// ES5 对空位的处理
    // forEach(), filter(), reduce(), every() 和some()都会跳过空位。
    // map()会跳过空位，但会保留这个值
    // join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

// ES6中的方法 entries()、keys()、values()、find()和findIndex()等会将空位处理成undefined。