ES6笔记 12.array数值扩展、ArrayOf、ArrayFrom

ES6 数组的扩展方法

Array.of() 声明数组方法

原有的声明方式

new Array(); // []
new Array(3); // [empty x 3]
new Array(3, 1); // [3, 1]

ES6 新的 Array.of()方法

Array.of(); // []
Array.of(3); // [3]
Array.of(3, 1); // [3, 1]

Array.from() 方法

Array.from(arrayLike[, mapFn[, thisArg]])
参数 1 arrayLike：想要转换成数组的伪数组对象或者可迭代对象；
参数 2 mapFn：与数组中的 map 方法回调参数相同；
参数 3 this：指定回调函数中的 this 指向

Array.from() 可以通过以下方式来创建数组对象：

1. 伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）
2. 可迭代对象（可以获取对象中的元素，实现 iterator 接口，如 Map 和 Set 等）

var obj = {
  0: 1,
  1: 2,
  2: 3,
  length: 3,
};
var arr = Array.from(obj, function (elem) {
  return elem * 2;
});
console.log(arr); // [2, 4, 6]

ES6 数组原型上新增方法

Array.prototype.fill()方法，（fill：填充，填满）操作原数组

Array.prototype.fill(value, start(0), end)
参数 1 value：需要填充数组元素的值
参数 2 start：默认值 0，开始位置的索引值，取值范围[start，end)
参数 3 end：默认 this.length，终止位置的索引值[start，end)
返回值：修改后的数组，也就是在原数组上修改，如果没有修改，则返回原本的数组

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = arr.fill(0);
console.log(res); // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
res = arr.fill(100, 7);
console.log(res); // [0, 0, 0, 0, 0, 0, 0, 100, 100, 100]
res = arr.fill(50, 2, 4);
console.log(res); // [0, 0, 50, 50, 0, 0, 0, 100, 100, 100]
res = arr.fill(50, -4, -2);
console.log(res); // [0, 0, 50, 50, 0, 0, 50, 50, 100, 100]
// 证明在原数组中操作
console.log(res === arr);

参数 2 不合法则视作 0
参数 3 不合法则直接返回原数组
参数 2 大于参数 3 则直接返回原数组
参数 2 为负数则从末尾向前数

Array.prototype.fill 被设计为通用方法

Array.prototype.fill.call({ length: 3 }, 5);
[].fill.call({ length: 3 }, 5, 0, 1);

Array.prototype.keys(), Array.prototype.values(), Array.prototype.entries()

与 Object.keys，Object.values，Object.entries 方法类似，功能实现的完全相同，但是唯一不同的就是返回值；数组原型上的方法返回的 Array Iterator {}（可迭代对象），Object 返回的相应的数组结果；

let arr = ["a", "b", "c"];
console.log(arr.keys()); // Array Iterator {}
console.log(arr.values()); // Array Iterator {}
console.log(arr.entries()); // Array Iterator {}

var iter = arr.keys();
console.log(iter.next()); // {value: 0, done: false}
console.log(iter.next()); // {value: 1, done: false}
console.log(iter.next()); // {value: 2, done: false}
console.log(iter.next()); // {value: undefined, done: true}

var iter2 = arr.entries();
for (let val of iter2) {
  console.log(val);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

Array.prototype.copyWithin()方法，（copyWithin：内部复制）操作原数组

arr.copyWithin(target，start，end);
参数 1 target：0 为基底的索引，复制序列到该位置
参数 2 start：开始索引，默认值 0，取值范围[start，end)
参数 3 end：终止索引，默认值 this.length，取值范围[start，end)
整体的意思：也就是说 start 和 end 是确定要复制的序列（一组数据），然后 target 是序列需要复制的索引位置，然后将序列复制到该索引位置上；

首先需要清楚两点，copyWithin 中描述的序列是什么？还有元素组的长度是不变的；下面的例子分析：首先 target 是 2，表示将序列复制在索引值为 2 的位置，其次序列的取值[start，end），由于忽略了 start，end 所以取默认值，0、this.length，此时序列就是 1，2，3，4，5，最后将序列从索引值为 2 的位置进行复制

var arr = [1, 2, 3, 4, 5];
arr.copyWithin(2);
console.log(arr); // [1, 2, 1, 2, 3]

var arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3);
console.log(arr); // [4, 5, 3, 4, 5]

var arr = [1, 2, 3, 4, 5];
arr.copyWithin(-2);
console.log(arr); // [1, 2, 3, 1, 2]

var arr = [1, 2, 3, 4, 5];
arr.copyWithin(-2, -3, -1);
console.log(arr); // [1, 2, 3, 3, 4]

copyWithin()被设置为通用方法

[].copyWithin.call({ length: 5, 3: 1 }, 0, 3); // {0: 1, 3: 1, length: 5}

Array.prototype.find() 方法和 Array.prototype.findIndex() 方法

Array.prototype.find(callback，this);
参数 1 callback：回调函数，和 forEach、map、filter 方法中的回调一样，参数也是相同，elem，idx，array；
参数 2 this：指定回调函数内部 this 指向；

返回数组中满足提供的回调函数的第一个元素的值，否则返回 undefined；也就是说，返回数组中满足回调函数内部规则的第一个元素值

var arr = [1, 2, 3, 4];
var res = arr.find(function (elem, idx, arr) {
  return elem > 2;
});
console.log(res); // 3

Array.prototype.findIndex(callback，this);
参数 1 callback：回调函数，和 forEach、map、filter 方法中的回调一样，参数也是相同，elem，idx，array；
参数 2 this：指定回调函数内部 this 指向；

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1

var arr = [1, 2, 3, 4, 5];
var res = arr.findIndex(function (elem, idx, array) {
  return elem > 2;
});
console.log(res); // 2

es5 中 indexOf() 方法的缺陷

1. indexOf 方法内部判断 NaN 时，认为 NaN 是不等于 NaN，所以如果数组中存在 NaN 就无法找到该元素
2. find 方法内部判断 NaN 时，认为 NaN 是等于 NaN 的，这样如果数组中存在 NaN 就可以找到该元素

[NaN].indexOf(NaN); // -1
[NaN].find((elem) => console.log(Object.is(NaN, elem))); // true

Array.prototype.includes() 方法

用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false

arr.includes(valueToFind，fromIndex)
参数 1 valueToFind：需要查询的元素值，字符串区分大小写
参数 2 fromIndex：从 formIndex 索引值开始查找，如果为负值，遵循索引值 = this.length + 负值的索引(-fromIndex)开始搜索，默认为 0；
返回值：布尔值，判断是否存在该元素

var arr = ["a", "b", "c"];
arr.includes("c", 3); // false
arr.includes("c", 100); // false

var arr = ["a", "b", "c"];
arr.includes("a", -100); // true
arr.includes("b", -100); // true

[1, 2, NaN].includes(NaN); // true

Array.prototype.includes()被设计成通用的方法

ES6 数值的扩展

16 进制的数：0x1f7 0x 开头 (不区分大小写)
8 进制的数：0O767, 0o767 0o 开头 (不区分大小写)
2 进制的数：0b111110111 0b 开头 (不区分大小写)

修正的方法

1. isNaN()方法

ES6 将数值的一些方法从全局移动到 Number 构造器上，例如 isNaN，全局的 isNaN 底层会进行 Number 类型的隐式转换，ES6 中 Number.isNaN()修正了判断是否是 NAN 时，取消了隐式转换的问题（例如参数是字符串类型时，取消底层 Number 隐式类型的转换问题）

isNaN("NaN"); // true
Number.isNaN("NaN"); // false

2. isFinite()方法

isFinite()，有限的，判断的是否是一个有限的数字；
Number.isFinite()，解决了什么呢？在判断数字是否是有限的时候，取消了隐式转换的问题

isFinite("42"); // true
Number.isFinite("42"); // false

3. parseFloat()方法

parseFloat()移动到 Number 构造器上，成为 Number.parseInt()，本质上和全局的没有差别

新增的方法

1. Number.isInteger()方法

判断是否是整数，返回 boolean 值

Number.isInteger(24); // true
Number.isInteger(24.0); // true

2. Number.isSafeInteger()

isSafeInteger()判断是否是安全范围之内的整数

安全整数：
Max_SAFE_INTEGER：现在 JS 引擎能够准确解析到的最大整数值； (2 ^ 53） -1
MIN_SAFE_INTEGER：现在 JS 引擎能够准确解析到的最小整数值；-(2 ^ 53) + 1

3. Math.MAX_VALUE

JS 引擎能够处理的最大数 Math.MAX_VALUE

Math 属于内置对象，没有原型 prototype

利用 Number 的 toString 方法，将十进制的数转为二进制

Number.prototype.toString.call(503, 2); // 111110111

parseInt(111110111, 2); // 503

：现在 JS 引擎能够准确解析到的最小整数值；-(2 ^ 53) + 1

3. Math.MAX_VALUE

JS 引擎能够处理的最大数 Math.MAX_VALUE

Math 属于内置对象，没有原型 prototype

利用 Number 的 toString 方法，将十进制的数转为二进制

Number.prototype.toString.call(503, 2); // 111110111

parseInt(111110111, 2); // 503