改进的数组功能
1.创建数组
在
ES6之前，创建数组的方式主要有两种，一种是调用Array构造函数，另一种是用数组字面量语法，这两种方法均需列举数组中的元素，功能非常受限。如果想将一个类数组对象(具有数值型索引和length属性的对象)转换为数组，可选的方法也十分有限，经常需要编写额外的代码。为了进一步简化JS数组的创建过程，ES6新增了Array.of()和Array.from()两个方法
//使用new Array() 创建数组
var arr1 = new Array(); // 空数组
var arr2 = new Array('苹果', '橘子', '香蕉', '桃子'); //含有4个元素
//使用字面量来创建数组
var arr1 = []; //空数组
var arr2 = ['苹果', '橘子', '香蕉', '桃子']; //含有4个元素
[Array.of()]
ES6之所以向JS添加新的创建方法，是要帮助开发者们规避通过Array构造函数创建数组时的怪异行为
let items =new Array(2);
console.log(items.length); // 2
console.log(items[0]);// undefined
console.log(items[1]);// undefined
items =new Array("2");
console.log(items.length); // 1
console.log(items[0]);// "2"
items =new Array(1, 2);
console.log(items.length); // 2
console.log(items[0]);// 1
console.log(items[1]);// 2
items =new Array(3, "2");
console.log(items.length); // 2
console.log(items[0]);// 3
console.log(items[1]);// "2"
- 如果给
Array构造函数传入一个数值型的值，那么数组的length属性会被设为该值。如果传入多个值，此时无论这些值是不是数值型的，都会变为数组的元素。这个特性令人感到困惑，不可能总是注意传入数据的类型，所以存在一定的风险 -
ES6通过引入Array.of()方法来解决这个问题。Array.of()与Array构造函数的工作机制类似，只是不存在单一数值型参数值的特例，无论有多少参数，无论参数是什么类型的，Array.of()方法总会创建一个包含所有参数的数组
let items = Array.of();
console.log(items.length); // 0
items = Array.of(1, 2);
console.log(items.length); // 2
console.log(items[0]);// 1
console.log(items[1]);// 2
items = Array.of(2);
console.log(items.length); // 1
console.log(items[0]);// 2
items = Array.of("2");
console.log(items.length); // 1
console.log(items[0]);// "2"
[Array.from()]
类数组对象
类数组对象首先它是一个对象，但是有数组的某些特点。怎么构造类数组对象呢？先把对象中的键都改为从0开始递增的值，然后我们需要定义一个length属性，手动模拟数组的length属性。
const arrObj = { 0: 'dog', 1: 'cat', 2: 'rabbit', 'length': 3 }
JS不支持直接将非数组对象转换为真实数组，如果要把它当作数组使用则必须先转换该对象的类型。在ES5中，可能需要编写如下函数来把类数组对象转换为数组
const arguments = { 0: 'dog', 1: 'cat', 2: 'rabbit', 'length': 3 }
function makeArray(arrayLike) {
var result = [];
for(vari = 0, len = arrayLike.length; i < len; i++) {
result.push(arrayLike[i]);
}
return result;
}
const args = makeArray(arguments); // ['dog', 'cat', 'rabbit']
- 这种方法先是手动创建一个
result数组，再将arguments对象里的每一个元素复制到新数组中。尽管这种方法有效，但需要编写很多代码才能完成如此简单的操作。最终，开发者们发现了一种只需编写极少代码的新方法，调用数组原生的slice()方法可以将非数组对象转换为数组
const arguments = { 0: 'dog', 1: 'cat', 2: 'rabbit', 'length': 3 }
const s1 = Array.prototype.slice.call(arguments); // ['dog', 'cat', 'rabbit']
const s2 = Array.prototype.splice.call(arguments, 0); // ['dog', 'cat', 'rabbit']
const s3 = Array.prototype.concat.apply([], arguments); // ['dog', 'cat', 'rabbit']
-
Array.from()方法可以接受可迭代对象或类数组对象作为第一个参数，最终返回一个数组
const arguments = { 0: 'dog', 1: 'cat', 2: 'rabbit', 'length': 3 }
const s = Array.from(arguments) ; // ['dog', 'cat', 'rabbit']
[映射转换]
如果想要进一步转化数组，可以提供一个映射函数作为
Array.from()的第二个参数，这个函数用来将类数组对象中的每一个值转换成其他形式，最后将这些结果储存在结果数组的相应索引中
const numbers = Array.from([1,2,3], value => value + 1); // [2,3,4]
- 在这段代码中，为
Array.from()方法传入映射函数(value)=>value+1，数组中的每个元素在储存前都会被加1。如果用映射函数处理对象，也可以给Array.from()方法传入第三个参数来表示映射函数的this值
let helper ={
diff: 1,
add(value) {
return value +this.diff;
}
};
function translate() {
return Array.from(arguments, helper.add, helper);
}
let numbers = translate(1, 2, 3);
console.log(numbers); // 2,3,4
- 此示例传入
helper.add()作为转换用的映射函数，由于该方法使用了this.diff属性，因此需要为Array.from()方法提供第三个参数来指定this的值，从而无须通过调用bind()方法或其他方式来指定this的值了用Array.from()转换可迭代对象 -
Array.from()方法可以处理类数组对象和可迭代对象，也就是说该方法能够将所有含有Symbol.iterator属性的对象转换为数组
let numbers = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
}
};
let numbers2 = Array.from(numbers, (value) => value + 1);
console.log(numbers2); /
- 由于
numbers是一个可迭代对象，因此可以直接将它传入Array.from()来转换成数组。此处的映射函数将每一个数字加1，所以结果数组最终包含的值为2、3和4
[注意]如果一个对象既是类数组又是可迭代的，那么Array.from()方法会根据迭代器来决定转换哪个值
2.为所有数组添加的新方法
ES6延续了ES5的一贯风格，也为数组添加了几个新的方法：
includes()方法返回一个布尔值，表示数组是否包含给定的值；find()方法和findIndex()方法可以协助开发者在数组中查找任意值；fill()方法和copyWithin()方法的灵感则来自于定型数组的使用过程，定型数组也是ES6中的新特性，是一种只包含数字的数组
[1, 2, 3].includes(2)// true
[1, 2, 3].includes(4)// false
[1, 2, NaN].includes(NaN)// true
// 第二个参数表示起始位置，默认0
// 如果第二个参数为负数，则表示倒数的位置
// 如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始
[1, 2, 3].includes(3, 3);// false
[1, 2, 3].includes(3, -1);// true
- 没有该方法之前，我们通常使用数组的
indexOf方法，检查是否包含某个值 。indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判
if(arr.indexOf(el) !== -1) {
// ...
}
// 会有误判
[NaN].indexOf(NaN)// -1
另外，
Map和Set数据结构有一个has方法，需要注意与includes区分
1、Map结构的has方法，是用来查找键名的，比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target,propertyKey)
2、Set结构的has方法，是用来查找值的，比如Set.prototype.has(value)、WeakSet.prototype.has(value)
[fill()]
let numbers = [1, 2, 3, 4];
numbers.fill(1); // [1,1,1,1]
numbers.fill(99, 2); // [1,2,99,99]
// 从索引为2的位置开始，没有结束索引，即填充至最后
numbers.fill(99, 1, 3); // [1,99,99,1]
// 从索引为1的位置开始，到索引为3 - 1的位置
[注意]如果开始索引或结束索引为负值，那么这些值会与数组的length属性相加来作为最终位置。例如，如果开始位置为-1，那么索引的值实际为array.length-1，array为调用fill()方法的数组
[copyWithin()]
copyWithin()方法与fill()方法相似，其也可以同时改变数组中的多个元素。fill()方法是将数组元素赋值为一个指定的值，而copyWithin()方法则是从数组中复制元素的值。调用copyWithin()方法时需要传入两个参数：一个是该方法开始填充值的索引位置，另一个是开始复制值的索引位置
numbers = [1, 2, 3, 4, 5, 6, 7, 8 ,9, 10];
// 从索引 4的位置开始粘贴
// 从数组索引 0 的位置开始复制数据
numbers.copyWithin(4, 0); // [1, 2, 3, 4, 1, 2, 3, 4, 5, 6]
- 默认情况下，
copyWithin()会一直复制直到数组末尾的值，但是可以提供可选的第三个参数来限制被重写元素的数量。第三个参数是不包含结束索引，用于指定停止复制值的位置
numbers = [1, 2, 3, 4, 5, 6, 7, 8 ,9, 10];
// 从索引 4的位置开始粘贴
// 从数组索引 0 的位置开始复制数据
// 在遇到索引 1 时停止复制
numbers.copyWithin(4, 0, 1); // [1, 2, 3, 4, 1, 6, 7, 8, 9, 10]
- 在这个示例中，由于可选的结束索引被设置为了1，因此只有位于索引0的值被复制了，数组中的最后一个元素保持不变
[注意]正如fill()方法一样，copyWithin()方法的所有参数都接受负数值，并且会自动与数组长度相加来作为最终使用的索引
3.定型数组
定型数组是一种用于处理数值类型(正如其名，不是所有类型)数据的专用数组，支持存储和操作以下8种不同的数值类型
无符号的8位整数(uint8)
有符号的16位整数(int16)
无符号的16位整数(uint16)
有符号的32位整数(int32)
无符号的32位整数(uint32)
32位浮点数(float32)
64位浮点数(float64)
不同点
定型数组与普通数组最重要的差别是：定型数组不是普通数组。它不继承自Array，通过Array.isArray()方法检查定型数组返回的是false
【数组缓冲区】
let buffer = New ArrayBuffer(10) // 分配10字节
视图操作
view = new DataView(buffer);
网友评论