读书笔记：深入理解ES6（十）

最新推荐文章于 2024-03-19 09:54:49 发布

diaomiyin6661

最新推荐文章于 2024-03-19 09:54:49 发布

阅读量146

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zxxsteven/p/11511526.html

版权

第十章改进的数组功能

　　ES6标准在ES5的基础上，继续改进数组，为数组添加了很多新功能。例如：创建数组的新方法、几个实用便捷的方法及创建定型数组（Typed Array）的能力。本章一一讲解这些新特性。

第1节创建数组

　　1. 传统的创建数组的方法。

　　在ES6以前，创建数组的方式有两种：一种是调用Array构造函数，一种是使用数组自面量语法。由于在使用Array构造函数创建数组的时候，有时会有产生一定的怪异行为（如传入一个字符串数字的时候）。所以增加了 Array.of( ) 和 Array.from( ) 方法。

　　2. Array.Of( ) 创建数组

　　使用Array.of( )创建数组，只需要传入你希望在数组中包含的值即可。举例：

 1 let items = Array.of(1,2);
 2 console.log(items.length); //2
 3 console.log(items[0]); //1
 4 console.log(items[1]); //2
 5 
 6 
 7 let items = Array.of(2);
 8 console.log(items.length); //1
 9 console.log(items[0]); //2
10 
11 
12 let items = Array.of("2");
13 console.log(items.length);//1
14 console.log(items[0]);//"2"

　　3. Array.from( ) 创建数组

　　Array.from( ) 常用来将累数组对象（如arguments）、可迭代对象转化为数组。它接受可迭代对象或者类数组对象作为第一个参数，最终返回一个数组。举例：

 1 function makeArray(arrayLike)
 2 {
 3     var result = [];
 4 
 5     for (var i=0, len=arrayLike.length; i<len; i++)
 6     {
 7         result.push(arrayLike[i]);
 8     }
 9 
10     return result;
11 }
12 
13 function doSomething() 
14 {
15     var args = makeArray(arguments);
16 }

第2节为所有数组添加的新方法

　　1. find( )方法和 findIndex( ) 方法。

　　find( ) 和 findIndex( ) 方法通过传入一个指定的参数，然后分别返回数组中符合这个条件的元素和这个元素所在位置的索引。举例：

1 let numbers = [25,30,35,40,45];
2 
3 console.log(numbers.find(n => n>33)); //35
4 console.log(numbers.findIndex(n => n>33)); //2

　　2. fill( )方法

　　fill( )方法可以用指定的值填充一至多个元素。当传入一个值时，fill( )方法会用这个值重写数组中的所有值。如果只想改变某一个或者某一部分的值，可以传入开始索引和不包含结束索引（不包含结束索引当前值）这两个参数。举个例子：

 1 let numbers = [1,2,3,4];
 2 numbers.fill(1);
 3 
 4 console.log(numbers.toString()); // 1,1,1,1
 5 
 6 let numbers = [1,2,3,4];
 7 numbers.fill(1,2);
 8 
 9 console.log(numbers.toString()); //1,2,1,1
10 
11 numbers.fill(0,1,3);
12 
13 console.log(numbers.toString()); // 1,0,0,1

　　在上面这个例子中，fill(1,2)中的1是要填充的元素，2是填充开始位置的索引，因为没有给结束索引的数字，那么默认值就是一直到数据的最后一个元素，即numbers.length，所以numnbers数组最后的两个元素被填充为1。在fill(0,1,3)中，要填充的元素是0，开始位置的索引是1，结束位置的索引是3，所以元素0会填充索引为1和2的数组元素。

　　3. copyWidth( )方法

　　copyWith( )方法与 fill( )方法类似，不过它是从数组中复制元素的值。调用该方法需要传入两个参数：一个是该方法开始填充值的位置，一个是该方法复制值的索引位置。举个例子：

1 let numbers = [1,2,3,4];
2 numbers.copyWith(2,0);
3 console.log(numbers.toString()); //1,2,1,2

　　如果给该方法中传入了第3个参数，则表示停止复制值的位置（但是该参数是不包含结束索引）。举例：

1 let numbers = [1,2,3,4];
2 numbers.copyWith(2,0);
3 console.log(numbers.toString()); //1,2,1,2
4 
5 let numbers = [1,2,3,4];
6 numbers.copyWith(2,0,1);
7 console.log(numbers.toString()); //1,2,1,4

第3节定型数组

　　1. 什么是定型数组？

　　　　所谓定型数组，是指将任何数字转换为一个包含数字比特的数组，是一种用于处理数值类型数据的专用数组，可以为JavaScript提供快速的按位运算。

　　2. 相应的一些概念

　　　　由于平时用到的时候不是很多，遇见具体问题的时候可以再回头过来看。

　　　　1）Web GL：Web Graphics Library，一种3D绘图协议或者说绘图标准。

　　　　2）定型数组支持存储、操作以下8种不同的数值类型：

　　　　　　有符号的8位整数（int8）

　　　　　　无符号的8位整数（uint8）

　　　　　　有符号的16位整数 (int16)

　　　　　　无符号的16位整数　(uint16)

　　　　　　有符号的32位整数 (int32)

　　　　　　无符号的32位整数 (uint32)

　　　　　　32位浮点数　　　　（float32）

　　　　　　64位浮点数　　　　（float64）

　　　　3）数组缓冲区：是一段可以包含特定数量字节的内存地址。可以通过ArrayBuffer构造函数来创建数组缓冲区。例如：

1 let buffer = new ArrayBuffer(10); //分配10字节

　　　　4）视图是用来操作内存的接口。DataView类型是一种通用的数组缓冲区视图，其支持所有8种数值型数据类型。

第4节定型数组与普通数组的相似之处

　　1. 通用方法

　　　　数组中大部分的方法都可以在定型数组中使用。

　　2. 相同的迭代器

　　　　展开运算符能够将可迭代对象转换为普通数组，也可以将定型数组转换为普通数组。

　　3. of( )、from( )方法

　　　　定型数组也可以像普通数组那样使用of( ) 和 from( ) 方法，只不过返回的也是定型数组。

第5节定型数组和普通数组的差别

　　1. 行为差异

　　　　当操作普通数组的时候，可以改变数组的大小，但是定型数组始终保持相同的尺寸。

　　2. 缺失的方法

　　　　这些方法只在普通数组中有，而在定型数组中没有。想一想是为什么呢？因为这几个方法基本上都是以改变数组大小为目的的，而我们刚才说的第一条里面，定型数组始终是保持相同尺寸的，所以呢，定型数组中也就不包含这些方法了。列举一下这些方法：

　　　　concat( )

　　　　pop( )

　　　　push( )

　　　　shift( )

　　　　unshift( )

　　　　splice( )

　　　　可以看出，上面的方法中，除了concat( )之外，其它几个都可以改变数组的尺寸大小。

　　3. 附加方法

　　　　定型数组有，而普通数组没有的两个方法：set( ) 、 subarray( )。下面分别介绍一下：

　　　　1）set( )：将其它数组复制到已有的定型数组。set( )方法接受两个参数：一个是数组（定型数组或者普通数组都可以）；一个是可选的偏移量，即开始插入数据的位置，如果什么都不传，那么默认的偏移量为0。合法数据从作为参数传入的数组复制至目标数组中。举例：

1 let ints = new Int16Array(4);
2 
3 ints.set([25,50]);
4 ints.set([75,100]);
5 
6 console.log(ints.toString()); //25,50,75,100

　　　　2）subarray( ): 提取已有定型数组中的一部分作为一个新的定型数组。它接受两个参数：一个是可选的开始位置，一个是可选的结束位置（不包含当前位置的数据），最后返回一个新的定型数组。也可以省略这两个参数来克隆一个新的定型数组。举例：

1 let ints = new Int16Array([25, 50, 75, 100]);
2     subints1 = ints.subarray();
3     subints2 = ints.subarray(2);
4     subints3 = ints.subarray(1, 3);
5 
6 console.log(subints1.toString()); // 25, 50, 75, 100
7 console.log(subints2.toString()); // 75, 100
8 console.log(subints1.toString()); // 50, 75