读书笔记:深入理解ES6(十)

摘要:
//114console.log(项[0]);1functionmakeArray(arrayLike)2{3varresult=[];45for(vari=0,len=arrayLike.length;i<len;11}1213functiondoSomething()14{15varargs=makeArray(arguments);

第十章 改进的数组功能

  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

(本节完)

免责声明:文章转载自《读书笔记:深入理解ES6(十)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Python 函数传递list,传递dict 以及*args和**kargs缓存一致性与MESI协议下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

redis学习(一)

一.redis简介 Redis是基于内存、可持久化的日志型、key-value高性能存储系统。关键字(Keys)是用来标识数据块。值(Values)是关联于关键字的实际值,可以是任何东西。有时候你会存储字符串,有时候是整数,还有时候你会存储序列化对象(使用JSON、XML等)。在大多数情况下,Redis会把值看做是一个字节序列,而不会关注它们实质上是什么。...

【BIGDATA】将普通文本文件导入ElasticSearch

    以《刑法》文本.txt为例。    一、格式化数据1,首先,ElasticSearch只能接收格式化的数据,所以,我们需要将文本文件转换为格式化的数据---json。  下图为未处理的文本文件。     2,这里,使用python文件操作,将文本格式化为ElasticSearch可识别的json格式。 #python 3.6 #!/usr/bi...

kestrel Server的源码分析

今天这一篇博客讲的是.net core 自带的kestrel server,当你开发微服务k8s部署在linux环境下,一般默认开启这个高性能服务,如果大家之前看过我的owin katana的博客,会发现.net core 的好多实现在之前.net standard 的版本已经实现过了,当时开发的asp.net 程序与IIS紧紧耦合在一起,后来的微软团队意...

使用git绿色、红色图标不显示的问题

安装好Git之后建立本地仓库,然后发现没有图标,其实也可以用。 修改了电脑属性-高级系统设置-性能里面,还是没图标,然后找到这个解决方法: 解决过程: 1.win+r,regedit.exe,打开注册表 按照文件的层次关系依次找到 HKEY_LOCAL_MACHINESoftwareMicrosoftwindowsCurrentVersionExplore...

ES6数组reduce()方法详解及高级技巧

1. 语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。 callback (执行数组中每个值的函数,包含四个参数) 1、pre...

Axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装 它本身具有以下特征:      a.从浏览器中创建 XMLHttpRequest     b.从 node.js 发出 http 请求     c.支持 Promise API     e.拦截请求和响应     f.转换请求和响应数据 ...