🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[toc] ### 新增的数组API #### 静态方法 - Array.of(...args): 使用指定的数组项创建一个新数组 用法: ```js const arr = Array.of(1,2,3,4); console.log(arr); //输出[1,2,3,4] ``` 通常情况下,Array.of与new Array功能基本一致。只有在参数中只有一个数值时两者有区别。 ```js const arr1 = new Array(3); //arr1表示创建了一个length为3且每一项都为empty的数组 const arr2 = Array.of(3); //arr2表示创建了一个length为1且下标为0位的值为3的数组 ``` 在创建的数组长度不固定的情况下,建议采用Array.of方法创建数组。 - Array.from(arg): 通过给定的类数组 或 可迭代对象 创建一个新的数组。 例如:获取到的元素集合是一个类数组,并不能使用数组中的方法,比如filter方法。若想对该集合使用数组中的方法就可以使用Array.from将类数组转换成数组,再进行相关操作。 #### 实例方法 - find(callback): 用于查找满足条件的第一个元素 例如:有一个学生信息的数组,里面有20条学生的信息,每条学生信息是一个对象。如果想在该数组中找到学号ID为6的学生,就可以用find方法。 ```js const students = new Array(20); //假设每条记录都是一个学生信息的对象 const res = students.find(item=>{ if(item.id === 6){ return true } else{ return false } }) //find方法会将数组中的每一项按顺序传给item,然后进入函数体进行相关的计算。若函数体返回true,则将该项数据返回给res。若为false则继续对下一条数据进行处理。如果数组中没有满足条件的数据则返回undefined。 //上面的代码还可以简写成如下的形式: const res = students.find(item=>item.id === 6) ``` >find与filter的区别为:find只会查找出第一个满足条件的数据,filter会找出数组中所有满足条件的记录。 - findIndex(callback):用于查找满足条件的第一个元素的下标 该方法与find方法基本相同,只不过该方法找到第一个满足条件的数据时返回的是该项数据在数组中的下标。若没有满足条件的数据则返回-1。 >find和findIndex两个方法适合方便的查找数组中的每一项数据是对象的时候,以对象中的某一个键值为条件进行匹配。 - fill(data):用指定的数据填充满数组所有的内容 ```js const arr = new Array(10); //创建一个长度为10的数组 arr.fill('abc'); //将数组中的每一项赋值为abc ``` - copyWithin(target, start?, end?): 在数组内部完成复制,该方法会直接改变该数组的值,没有返回值。 - target(number类型)表示从数组的第几个下标位置开始改变数据,必须设置 - start(number类型)表示从数组的第几个下标位开始复制,不填默认从数组0位开始复制 - end(number类型)表示要复制的数据取到第几位结束,不包含end值下标的那位数据。不填默认复制到数组末位。 ```js const arr = [1, 2, 3, 4, 5, 6]; //只设置第一个参数,表示从下标2开始,改变数组的数据,数据来自于下标0位置开始 arr.copyWithin(2); // [1, 2, 1, 2, 3, 4] //设置第一个和第二个参数,表示从下标为2的位置开始改变数据,数据来自于下标为1的位置开始的数据,向后依次复制。 arr.copyWithin(2, 1); // [1, 2, 2, 3, 4, 5] //设置三个参数,表示从下标为2的位置开始改变数据,数据来自于下标为1的位置开始的数据,截止到下标为3的数据停止复制且不复制下标为3的这条数据。 arr.copyWithin(2, 1, 3); // [1, 2, 2, 3, 5, 6] ``` 该方法实际开发中应用场景不多,满足特定条件可以使用。 - includes(data):判断数组中是否包含某个值,使用Object.is匹配。该方法为ES7中的方法,返回值为true或false。 ### [扩展]类型化数组 #### 数字存储的前置知识 1. 计算机必须使用固定的位数来存储数字,无论存储的数字是大是小,在内存中占用的空间是固定的。 2. n位的无符号整数能表示的数字是2^n个,取值范围是:0 ~ 2^n - 1 3. n位的有符号整数能表示的数字是2^n个,取值范围是:-2^(n-1) ~ 2^(n-1) - 1 4. 浮点数表示法可以用于表示整数和小数,目前分为两种标准: 1. 32位浮点数:又称为单精度浮点数,它用1位表示符号,8位表示阶码,23位表示尾数 2. 64位浮点数:又称为双精度浮点数,它用1位表示符号,11位表示阶码,52位表示尾数 5. JS中的所有数字,均使用双精度浮点数保存 #### 类型化数组 类型化数组:用于优化多个数字的存储 具体分为: - Int8Array: 8位有符号整数(-128 ~ 127) - Uint8Array: 8位无符号整数(0 ~ 255) - Int16Array: ... - Uint16Array: ... - Int32Array: ... - Uint32Array: ... - Float32Array: - Float64Array 1. 如何创建数组 ```js new 数组构造函数(长度) const arr = new Int8Array(5); //创建一个长度为5的8位有符号整数数组 console.log(arr); //输出结果为[0,0,0,0,0],不同于new Array创建完成后是empty。该构造函数创建完成后为保证数据位的存储空间,会采用0占位。该数组中每一项只能存储-128~127之间的整数值。 数组构造函数.of(元素...) const arr = Int8Array.of(3,4,5,6,7); 数组构造函数.from(可迭代对象) const arr = Int8Array.from([2,3,4,5,6]) new 数组构造函数(其他类型化数组) const arr1 = new Int8Array(arr); //该方法可以将arr复制到arr1中,两个数组内容相同,但不是同一个数组。复制时若原数组类型与新数组类型不一致,可能会出现数据混乱。 ``` 2. 得到长度 ```js 数组.length //得到元素数量 数组.byteLength //得到占用的字节数 ``` 3. 其他的用法跟普通数组一致,但是: - 不能增加和删除数据,类型化数组的长度固定 - 一些返回数组的方法,返回的数组是同类型化的新数组 ### ArrayBuffer ArrayBuffer:一个对象,用于存储一块固定内存大小的数据。 ```js new ArrayBuffer(字节数) ``` 可以通过属性```byteLength```得到字节数,可以通过方法```slice```得到新的ArrayBuffer #### 读写ArrayBuffer 1. 使用DataView 通常会在需要混用多种存储格式时使用DataView DataView会返回一个对象,用来操作指定的buffer,创建时可以设置三个参数 DataView(buffer, offset, len) - buffer,该参数必填,用来指定要操作哪个buffer,用来填写该buffer的变量名 - offset,可选项,用来设置操作buffer起始位置的偏移量。即从buffer的哪个位置开始操作,默认从第一位开始,偏移量设置几就代表从第一位开始向后偏移几位。 - len,可选项,用来设置操作buffer从起始位置开始多长的数据。即可以操作的buffer的长度,默认为从起始位开始到buffer结束的长度 ```js const bf = new ArrayBuffer(10); //创建了一个10个字节长度的buffer const dview = new DataView(bf, 2, 5); //dview用来操作buffer,只能操作从bf从下标为2的位置开始到下标为6的位置结束这一区间内的数据。 ``` 如何用DataView来读写buffer中的数据 ```js //以上方的buffer对象为例创建一个DataView实例 const dview = new DataView(bf, 2, 5); //此时dview只能操作buffer中下标从2-6之间的这段数据 //完整的bf的buffer以Int8的表现为[0,0,0,0,0,0,0,0,0,0] //dview可操作的区域为两竖线间的位置 | | //使用set+数组类型的方法向具体的位置添加数据 dview.setInt8(1,33); //第一个参数1代表在DataView实例可操作范围内的偏移量 //第二个参数表示具体赋给该位置的值 //执行完该条语句buffer的Int8值为[0,0,0,33,0,0,0,0,0,0] //使用get+数组类型的方法读取指定buffer区域的数据 console.log(divew.getInt8(1)); //仅有一个参数,表示可操作区域的偏移量 //执行该语句会输出33 ``` 2. 使用类型化数组 实际上,每一个类型化数组都对应一个ArrayBuffer,如果没有手动指定ArrayBuffer,类型化数组创建时,会新建一个ArrayBuffer 创建类型化数组也可以使用已创建的ArrayBuffer进行创建,例如: ```js const bf = new ArrayBuffer(10); //创建了一个长度为10的ArrayBuffer const arr = Int8Array(bf); //通过bf创建了一个长度为10的8位类型化数组 const arr2 = Int16Array(bf); //通过bf创建了一个长度为10的16位类型化数组 //arr和arr2这两个数组虽然不同,但因为都是基于bf创建的,所以两个数组操作的是同一个内存空间。 arr[0] = 13; //把arr的第一位赋值13 console.log(arr2[0]); //arr2的第0位也会输出13 ```