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

ES6-12 array/数值拓展、ArrayOf、ArrayFrom相关推荐

es6入门6--数组拓展运算符，Array.from()基本用法
本文只是作为ES6入门第九章学习笔记,在整理知识点的同时,会加入部分个人思考与解答,若想知道更详细的介绍,还请阅读阮一峰大神的ES6入门一.拓展运算符 ES6中新增了拓展运算(...)三个点,它的作 ...
【ES6】函数的拓展
[ES6]函数的拓展一.函数参数的默认值二.扩展运算符三.箭头函数[重点!!!] 查看更多ES6教学文章: 参考文献引言:ES6添加了函数的默认值的写法.rest参数.拓展运算符.箭头函数等特 ...
【ES6】数组的拓展
[ES6]数组的拓展一.Array.from()方法二.Array.of()方法三.数组的copyWithin()方法四.数组的find()和findIndex()方法五.数组的fill() ...
【ES6】对象的拓展
[ES6]对象的拓展一.对象的两种表示法[掌握] 1)简洁表示法 2)属性名表达式法二.Object.is()[了解] 三.Object.assign()[了解] 查看更多ES6教学文章: 参考文 ...
【ES6】正则表达式的拓展
[ES6]正则表达式的拓展一.什么是正则表达式二.正则表达式常用技术介绍 1)正则表达式的写法 I. 修饰符 II. 匹配模式 2)正则表达式的RegExp对象 3)正则表达式的常用JS接口三. ...
【ES6】字符串的拓展
[ES6]字符串的拓展一.为什么ES6要进行字符拓展? 二.ASCLL码.Unicode编码.UTF-8编码的异同三.ES6新增的字符串接口 1)codePointAt() 2)codePoint ...
收藏 | 12个ggplot2拓展程序助你强化R可视化
作者:Asha Hill 翻译:张玲校对:梁傅淇本文约2900字,建议阅读10分钟. 本文将为大家简要介绍12个ggplot2拓展程序,包括它们让R可视化更强大的原因以及相应的具体示例. 自200 ...
ES6，Array.copyWithin()函数的用法
ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去. Array.prototype.copyWithin(target, star ...
php copy array,ES6中Array.copyWithin()函数用法的详解
ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去.下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的 ...

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

要使用…须有迭代器接口

数组方法

构造器上的方法

Array.of()声明数组

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

原型上的方法

arr.fill() 左闭右开

keys() / values() / entries()

copyWithin

find/findIndex

includes

数值拓展

isNaN 隐式转换

isFinite是有限的

isInteger是整数

isSafeInteger 安全整数

Math对象

ES6-12 array/数值拓展、ArrayOf、ArrayFrom相关推荐

最新文章

热门文章