ES6-12 array/数值拓展、ArrayOf、ArrayFrom

要使用…须有迭代器接口

数组方法

构造器上的方法

Array.of()声明数组

• 替代new Array()的方式声明数组
• new Array()不传参数返回空数组，只传1个参数时，代表数组长度，内容用empty填充，传多个参数，则代表数组内容，容易有歧义

console.log(new Array()) // []
console.log(new Array(1)) // [empty]
console.log(new Array(1, 2, 3)) // [1, 2, 3]
console.log(Array()) // 不写new 效果相同 []
console.log(Array(1)) // [empty]

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

Array.from() 转换为真正的数组

• Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例

• 语法 Array.from(arrayLike[, mapFn[, thisArg]])
mapFn 可选：如果指定了该参数，新数组中的每个元素会执行该回调函数。
  thisArg 可选：可选参数，执行回调函数 mapFn 时 this 对象。

• 类数组，打印出来和数组没什么区别，但不是数组

let obj = {
    start: [1, 3, 2, 4],
    end: [5, 7, 6],
    [Symbol.iterator]() {
        let index = 0,
            arr = [...this.start, ...this.end],
            len = arr.length;
        return {
            next() {
                if (index < len) {
                    return {
                        value: arr[index++],
                        done: false
                    }
                } else {
                    return {
                        value: undefined,
                        done: true
                    }
                }
            }
        }
    }
}
console.log(Array.from(obj)) //  [1, 3, 2, 4, 5, 7, 6]
console.log(Array.from(obj,function (val,idx) {
    return `第${idx}个：${val}`
}))
// ["第0个：1", "第1个：3", "第2个：2", "第3个：4", "第4个：5", "第5个：7", "第6个：6"]

原型上的方法

ES6新增有：[].fill() copyWithin() keys() / values() / entries() includes() find() / findIndex()

arr.fill() 左闭右开

• fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。[ , )
• 修改原数组
• 如果start和end索引相同/或者是非数，则不操作
• 不写end/end超出长度，就填充直到结束

[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

// Objects by reference.
var arr = Array(3).fill({}) // [{}, {}, {}];
// 需要注意如果fill的参数为引用类型，会导致都执行都一个引用类型
// 如 arr[0] === arr[1] 为true
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

keys() / values() / entries()

• 返回值是迭代器对象
• 迭代器对象的原型上有next方法
• 迭代器对象没有length属性，不能用for循环遍历

const arr = [1, 2, 3]
const itKeys = arr.keys()
const itVals = arr.values()
const itEntries = arr.entries()
console.log(itKeys)
console.log(itVals)
console.log(itEntries)
console.log(itKeys.next())
console.log(itKeys.next())
console.log(itKeys.next())
console.log(itKeys.next())
console.log('剩余运算符展开',[...arr.keys()])

console.log(itVals.next())
console.log(itVals.next())
console.log(itVals.next())
console.log(itVals.next())
console.log('剩余运算符展开',[...arr.values()])

console.log(itEntries.next())
console.log(itEntries.next())
console.log(itEntries.next())
console.log(itEntries.next())
console.log('剩余运算符展开',[...arr.entries()])

copyWithin

• 浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
• copyWithin(target，start，end)
• target从哪里开始被替换
• start原数组从哪开始
• end原数组到哪结束

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

console.log([].copyWithin.call({ length: 5, 3: 1 }, 0, 3))
// 没有用undefined进行填充，没有对没有的index进行填充

console.log([].copyWithin.call({ length: 5, 3: 1, 4: 1}, 0, 3))

ES6解决了NaN本身不相等而影响判断结果的问题

find/findIndex

• find返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
• findIndex返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
• 接收参数：callback(val,idx,arr),[thisArg]

const arr = [NaN]
console.log(arr.indexOf(NaN)) // -1 找不到，NaN与自身也不相等
console.log(arr.findIndex((val) => Object.is(val, NaN))) // 0 找到
console.log(arr.findIndex((val) => isNaN(val))) // 0 找到

includes

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

const arr = [NaN]
console.log(arr.includes(NaN)) // true

数值拓展

• 二进制binary
• 八进制Octal
• 十六进制 hex
• 新增二进制/八进制表示方法
• 二进制0b开头，八进制0O开头

// 十进制16转为二进制 
console.log((16).toString(2)) // 10000
// 直接表示这个二进制数
console.log(0b10000) // 16 打印结果是十进制的
// 十进制16转为八进制 
console.log((16).toString(8)) // 20
// 直接表示这个八进制数
console.log(0O20) // 16 打印结果是十进制的

• ES5就有的十六进制是0x开头的
• 都不区分大小写
• parseInt、isNaN等方法在ES5中是定义在全局的，ES6中在Number的构造器上可看到这些方法的定义，也解决了全局方法的一些问题
  

isNaN 隐式转换

console.log(isNaN('NaN')) // true,隐式转换，得到了不符合预期的结果
console.log(Number.isNaN('NaN')) // false

isFinite是有限的

console.log(isFinite(NaN)) // false
console.log(isFinite(Infinity)) // false
console.log(isFinite('42')) // true 隐式转换
console.log(Number.isFinite('42')) // false

isInteger是整数

console.log(Number.isInteger(24)) // true
console.log(Number.isInteger(24.0)) // true js认为这是整数
console.log(Number.isInteger(24.1)) // false

isSafeInteger 安全整数

• 安全整数的范围

console.log(Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1) // 2的53次方 true
console.log(Number.MIN_SAFE_INTEGER === -Math.pow(2, 53) + 1) // true

Math对象

• 内置对象Math没有prototype