web

# 数组 array

# 创建数组

let colors = new Array(20)//创建一个length为20的空数组
let colors1 = new Array(20,1)//[20,1]
let color2 = Array.of(1,2,3)//[1,2,3]

console.log(Array.of(7)) //[7]
console.log(Array(7))//[,,,,,,,]
console.log(Array(1, 2, 3))//[1,2,3]
console.log(Array('7'))//['7']

调用 Array() 时可以使用或不使用 new。两者都会创建一个新的 Array 实例。传参一个数字时给的实际是length，多个则是生成数组，如果第一个值是string，那么也是生成数组而不是length

# 数组空位

  • 创建数组，空位应该设置为undefined，否则可能会出现诡异的bug
let options = [1,undefined,,,5];

// map() will skip the holes entirely
console.log(options.map(() => 6));  // [6, 6, empty × 2, 6]

// join() treats holes as empty strings
console.log(options.join('-'));     // "1----5"

# copyWithin()

用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

语法 array.copyWithin(target, start, end)

参数 描述
target 必需。复制到指定目标索引位置。
start 可选。元素复制的起始位置。
end 可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。
  let arr = [1,3,5,7,9]
  arr.copyWithin(-2,0,2)
  console.log(arr)//[1, 3, 5, 1, 3]

# fill()

用于将一个固定值替换数组的元素。[如果是负值索引，-x+length,其实就是从尾部开始计算]

array.fill(value, start, end)

参数 描述
value 必需。填充的值。
start 可选。开始填充位置。
end 可选。停止填充位置 (默认为 array.length)
let arr = [1,3,5,7,9]
arr.fill(-2,0,2)
console.log(arr)//[-2,-2,5,7,9]

fill可以用于数组初始化

Array(5).fill(3)
//[3, 3, 3, 3, 3]

比如的应用场景：echatrs设置折线图时添加背景时，设置了一个柱状图，取最高值fill填充对应的数量

# arr.flat()数组扁平化和降维

数组扁平化处理:降维

var newArray = arr.flat([depth])//depth 可选
//指定要提取嵌套数组的结构深度，默认值为 1。
//如果多层使用如arr.flat(Infinity);

const arr1 = [0, 1, 2, [3, 4,[{k:1},23]]];
	
	console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4, Array(2)]

同时还有其他降维方法：

  • 扩展运算符能将二维数组变为一维
[].concat(...[1, 2, 3, [4, 5]]);  // [1, 2, 3, 4, 5] 

	const arr1 = [0, 10, 20, [30, 40,[{k:1},23]]];
	let arr =[];
	function flat(x){
		
		let temarr = [].concat(...x)
		
		
		let s=false;
		temarr.forEach(e=>{
			if(e instanceof Array){
				console.log(temarr)
				s=true
				flat(temarr)
			}
		})
		if(!s){
			arr= temarr
		}		
	}
	flat(arr1)
	console.log(arr)
  • 如果没有复杂的格式，如纯数字，也可以使用join&split
function flatten(arr) {
    return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}

let  a= [1,2,3,[4,5,[6,7,8]]].join(",")
console.log(a)//1,2,3,4,5,6,7,8

# flatMap

对数组中的每个元素应用给定的回调函数，然后将结果展开一级，返回一个新数组。它等价于在调用 map() 方法后再调用深度为 1 的 flat() 方法arr.map(...args).flat()，但比分别调用这两个方法稍微更高效一些。

const arr1 = [1, 2, 1];
const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1));
console.log(result);
// Expected output: Array [1, 2, 2, 1]
  • 在非数组对象上调用 flatMap()
const arrayLike = {
  length: 3,
  0: 1,
  1: 2,
  2: 3,
};
console.log(Array.prototype.flatMap.call(arrayLike, (x) => [x, x * 2]));
// [1, 2, 2, 4, 3, 6]

// 回调函数返回的类数组对象不会被展平
console.log(
  Array.prototype.flatMap.call(arrayLike, (x) => ({
    length: 1,
    0: x,
  })),
);
// [ { '0': 1, length: 1 }, { '0': 2, length: 1 }, { '0': 3, length: 1 } ]

# arr.includs()

//判断数组是否存在该值，返回true和false
let arr = [1,3,5,7,9]
console.log(arr.includes(1))//true 
//fromIndex	可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。
//如果和小于0，那么从头查询
let arr = [1,3,5,7,9]
console.log(arr.includes(5,2))//true

# arr.indexOf()

返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。(字符串也可以使用);也有一个可选的fromIndex,如果是负数，则从右边开始找出该位置，在自左向右搜索

var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",-2);
console.log(a)//6

# arr.lastIndexOf()

返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。

# concat()

concat()方法可以简单的将其理解为合并数组。基于当前数组中的所有项创建一个新数组。简单的说，concat()先给当前数组创建一个副本，然后将接收到的参数添加到这个副本（数组）的末尾，最后返回一个新的数组。

var arr = [`大漠`,'30','W3cplus'];
var arr2 = arr.concat('Blog','2014');
console.log(arr); // ["大漠", "30", "W3cplus"]
console.log(arr2); // ["大漠", "30", "W3cplus", "Blog", "2014"]

concat()方法传递的值不是数组，这些值就会简单添加到结果数组(arr2)的末尾。

除此之外，concat()传递的值还有其他的使用方法：同时传递一个或多个数组：

var arr = ["大漠","30"];
console.log(arr); // ["大漠", "30"]
var arr2 = arr.concat(1,["blog","w3cplus"],["a","b","c"]);
console.log(arr2); // ["大漠", "30", 1, "blog", "w3cplus", "a", "b", "c"]

另外,concat()还可以传递空值（也就是说没有传递参数），此时它只是复制当前数组，并且返回一个副本。 如下所示：

var arr = [1,2];
console.log(arr); // [1, 2]
var arr2 = arr.concat();
console.log(arr2); // [1, 2]

concat()方法是在数组的副本上进行操作并返回新构建的数组，所以并不会影响到原来的数组。[当然，如果数组不是简单类型，某些项还是数组或者对象的话，修改该索引的值还是会影响原先的数组]

# concat是否打平新增数组=> Symbol.isConcatSpreadable

打平数组参数行为可重写，方法是在参数上指定一个特殊符号：Symbol.isConcatSpreadable

let colors = ["red", "green", "blue"];
let newColors = ["black", "brown"];
let moreNewColors = {
  [Symbol.isConcatSpreadable]: true,
  length: 2,
  0: "pink",
  1: "cyan"
};
let colors_4 =[1,2,3]
let colors_5 =[1,2,3]
colors_5[Symbol.isConcatSpreadable] =false
// colors_5[Symbol.isConcatSpreadable] =true
console.log(colors_5[Symbol.isConcatSpreadable] )
newColors[Symbol.isConcatSpreadable] = false;

// Force the array to not be flattened
let colors2 = colors.concat("yellow", newColors);

// Force the array-like object to be flattened
let colors3 = colors.concat(moreNewColors);

let colors4 =colors.concat(colors_4) 
let colors5 =colors.concat(colors_5) 
		   
console.log(colors);   // ["red", "green","blue"]    
console.log(colors2);  // ["red", "green", "blue", "yellow", ["black", "brown"]] 
console.log(colors3);  // ["red", "green", "blue", "pink, "cyan"] 
console.log(colors4); // ['red', 'green', 'blue', 1, 2, 3]
console.log(colors5);  // ['red', 'green', 'blue', Array(3)]

# slice

slice() 方法可从已有的数组中返回选定的元素。 slice()方法它能基于当前数组创建一个新数组，而且对原数组也并不会有任何影响。

slice()接受一个或两个参数，即要返回项的起始和结束位置。当只给slice()传递一个参数时，该方法返回从该参数指定位置开始到当前数组末尾的所有项。

语法 arrayObject.slice(start,end)

参数 描述
start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值 返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

说明 请注意， 该方法并不会修改数组 ，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

var arr=[1,2,3,4,5,6]
var arr2 =arr.slice(2,4)
console.log(arr)//[1,2,3,4,5,6]
console.log(arr2)//[3,4]

其他运用

//把伪数组转为数组
let arr1 =[].slice.call(document.getElementsByClassName("xx"))

# arr.forEach()

array.forEach(callback(currentValue, index, array){
    //do something
}, this)

# arr.every()

如果数组中的每个元素都满足测试函数，则返回true，否则返回false。

let arr = [4,1,3,5,7,9]
let a=arr.every(e=>{
	return(e>3)
})
console.log(a)//false

# arr.some()

如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false。

let arr = [4,1,3,5,7,9]
let a=arr.some(e=>{
	return(e>3)
})
console.log(a)//true

# arr.filter()

将所有在过滤函数中返回true的数组元素放进一个新数组中并返回。

let arr = [4,1,3,5,7,9]
let a=arr.filter(e=>{
	return(e>3)
})
console.log(a)//[4,6,7,9]

# arr.find()

找到 第一个满足 测试函数的元素并返回那个元素的值，如果找不到，则返回undefined。

let arr = [4,1,3,5,7,9]
let a=arr.find(e=>{
	return(e>5)
})
console.log(a)//7

# arr.findIndex()

找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回-1。

let arr = [4,1,3,5,7,9]
let a=arr.findIndex(e=>{
	return(e>5)
})
console.log(a)//4

arr.find arr.findIndex还可以接受是三个参数：当前元素 ，下标 和数组

const people = [
  {
    name: "Matt",
    age: 27
  },
  {
    name: "Nicholas",
    age: 29
  }
];

console.log(people.find((element, index, array) => element.age < 28));
// {name: "Matt", age: 27}

console.log(people.findIndex((element, index, array) => element.age < 28));
// 0 

let mytest=people.find((element, index, array) => {
	// console.log(index)
	return element.age > 28
})
console.log(mytest)//{name: 'Nicholas', age: 29}

# arr.map()

返回一个由回调函数的返回值组成的新数组。

let arr = [4,1,3,5,7,9]
let a=arr.map(e=>{
	return e*2
})
console.log(a)//[8,2,6,10,14,18]

var a = [1,2,3,4,5]
var b = Array.from(a,(el,i)=>{
	return el+1
})
var c = a.map(el=>el+6)
console.log(b,c)

# arr.reduce()

reduce() 方法接收一个函数作为累加(减乘除等)器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数 描述
function(total,currentValue, index,arr) 用于执行每个数组元素的函数。函数参数:
initialValue 可选。传递给函数的初始值
参数 描述
total 初始值, 或者计算结束后的返回值。
currentValue 当前元素
currentIndex 当前元素的索引
arr 当前元素所属的数组对象。
let arr=[1,2,3,4,5];
let a=arr.reduce(function(current,now){
   return current+=now;
},9)
console.log(a)//24 

let arr=[1,2,3,4,5];
let a=arr.reduce(function(tem,current,now,arr){
	console.log(tem,current,now,arr)
	//9 1 0 (5) [1, 2, 3, 4, 5]
	//10 2 1 (5) [1, 2, 3, 4, 5]
	//12 3 2 (5) [1, 2, 3, 4, 5]
	//15 4 3 (5) [1, 2, 3, 4, 5]
	//19 5 4 (5) [1, 2, 3, 4, 5]
    return tem+=current;
},9)
console.log(a)//24 

const arr = [
	x => x * 1,
	x => x * 2,
	x => x * 3,
	x => x * 4
];

console.log(arr.reduce((agg, el) => {
console.log(agg, el);
return agg + el(agg)
}, 1));
	
	
// 1 x => x * 1
// 2 x => x * 2
// 6 x => x * 3
// 24 x => x * 4
// 120

使用 Array#reduce 时，聚合器的初始值(在这里称为 agg)在第二个参数中给出。在这种情况下，就是 1。然后，我们可以如下迭代函数：

1 +1 * 1 = 2(下一次迭代中聚合器的值)
2 + 2 * 2 = 6(下一次迭代中聚合器的值)
6 + 6 * 3 = 24(下一次迭代中聚合器的值)
24 + 24 * 4 = 120(最终值)
因此，它是120!

# 数组reduce方法应用

# run Promise In Sequence

const f1 = () => new Promise((resolve, reject) => {
   setTimeout(() => {
       console.log('p1 running')
       resolve(1)
   }, 1000)
})

const f2 = () => new Promise((resolve, reject) => {
   setTimeout(() => {
       console.log('p2 running')
       resolve(2)
   }, 1000)
})

const array = [f1, f2]

const runPromiseInSequence = (array, value) => array.reduce(
   (promiseChain, currentFunction) => {
	   console.log(promiseChain,1,currentFunction,2,value,3)
	   return promiseChain.then(currentFunction)
	},
   Promise.resolve(value)
)

runPromiseInSequence(array, 'init')

# pipe

function pipe(src, ...fns) {
	console.log(src,fns)
	return fns.reduce(function(fn1, fn2) {
		console.log(fn1,fn2)
		return fn2(fn1)
	}, src);
}

pipe("aaa", function(p) {
	console.log(p);
	return p + "bbb"
}, function(p) {
	console.log(p);
	return p + "ccc"
})

# 手写reduce

Array.prototype.myReduce = function (fn, initialValue) {
    var arr = Array.prototype.slice.call(this);
    var res, startIndex;
    res = initialValue ? initialValue : arr[0]; // 不传默认取数组第一项
    startIndex = initialValue ? 0 : 1;
    for (var i = startIndex; i < arr.length; i++) {
        // 把初始值、当前值、索引、当前数组返回去。调用的时候传到函数参数中 [1,2,3,4].reduce((initVal,curr,index,arr))
        res = fn.call(null, res, arr[i]);
    }
    return res;
}

const test = [1,2,3];
console.log(test.myReduce((pre,cur) => pre + cur));

# reudceRight

和reduce功能一样，就是从右到左

# arr.keys() arr.values() arr.entries()

生成的数据是生成器模式，不可以直接通过下标获取

//键值对遍历
  let arr=[1,2,3,4,5];
    let a=arr.keys()
    for(let i of a){
        console.log(i)
    }
//0 1 2 3 4

# reverse数组反转

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
//Mango,Apple,Orange,Banana

# Array.from()

一共有三个参数。第一个是数组本身，第二个是操作函数，可以return返回值，第三个改变this指向

Array.from(arrayLike[, mapFn[, thisArg]])

//将类数组转换为数组
let array = {
  0: 'name', 
  1: 'age',
  2: 'sex',
  3: ['user1','user2','user3'],
 'length': 4 
} 
let arr = Array.from(array ) 
console.log(arr) // ['name','age','sex',['user1','user2','user3']]

//Array.from还可以接受第二个参数，作用类似于数组的map方法.
//用来对每个元素进行处理，将处 理后的值放入返回的数组。如下：
let arr = [1,2,3,4,5,6,7,8,9]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [2,3,4,5,6,7,8,9,10] 

let str = 'abc';
console.log(Array.from(str)); // ["a", "b", "c"]

let m=new Map().set(1,2).set(3,4)
console.log(m.get(1))//2
console.log(m)//{1 => 2, 3 => 4}
console.log(Array.from(m))//[[1,2],[3,4]]

let arr=[[1,2],[3,4]]
let m=new Map(arr)
console.log(m)//{1 => 2, 3 => 4}

# Array.isArray()

用于确定传递的值是否是一个 Array。

Array.isArray([1, 2, 3]);  
// true
Array.isArray({foo: 123}); 
// false

# Array.of()

把一组参数转为数组

Array.of(element0[, element1[, ...[, elementN]]])

创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。 Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位的数组，而不是由7个undefined组成的数组）。

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

# 数组方法改变与不改变原数组

js 数组方法的作用,各方法是否改变原有的数组

  • 栈方法:push pop LIFO Last-in-first-out
  • 队列方法: shift unshift First-in-first-out

# 不会改变原来数组集合：

  • concat()---连接两个或更多的数组，并返回结果。
  • every()---检测数组元素的每个元素是否都符合条件。
  • some()---检测数组元素中是否有元素符合指定条件。
  • filter()---检测数组元素，并返回符合条件所有元素的数组。
  • indexOf()---搜索数组中的元素，并返回它所在的位置。
  • join()---把数组的所有元素放入一个字符串。
  • toString()---把数组转换为字符串，并返回结果。
  • lastIndexOf()---返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
  • map()---通过指定函数处理数组的每个元素，并返回处理后的数组。
  • slice()---选取数组的的一部分，并返回一个新数组。
  • valueOf()---返回数组对象的原始值，还是数组.

# 会改变原来数组集合：

  • pop()---删除数组的最后一个元素并返回删除的元素。
  • push()---向数组的末尾添加一个或更多元素，并返回新的长度。
  • shift()---删除并返回数组的第一个元素。
  • unshift()---向数组的开头添加一个或更多元素，并返回新的长度。
  • reverse() ---反转数组的元素顺序。
  • sort() ---对数组的元素进行排序。链接
  • splice()---用于插入、删除或替换数组的元素。链接
  • copyWithin() ---- 用于用数组内某些数组去覆盖另外一些值
  • fill()

# 数组方法中途退出

var arr=[1,2,3,4,5,6,7,8,9,10]
	for (let i=0;i<arr.length;i++){
		if(arr[i]>3){
			break;
		}
		console.log(arr[i])
		//1 2 3
	}

forEach是函数，不是语法，因此没有直接 break 的语法,使用return也不能跳出整个循环。可以使用try...catch...抛出异常

var arr=[1,2,3,4,5,6,7,8,9,10]
	
	try {
    arr.forEach(function(i) {
		console.log(i)
        if(i === 2) throw null;
			console.log(i);
		});
	} catch(e) {
		
	}

some()当内部 return true 时跳出整个循环

var arr=[1,2,3,4,5,6,7,8,9,10]
	arr.some(el=>{
		console.log(1888)
		if(el==3){
			console.log(el)
			return true
		}
	})
	//1888 1888 1888 3 true

every()当内部 return false 时跳出整个循环

var arr=[1,2,3,4,5,6,7,8,9,10]
	arr.every(el=>{
		console.log(1888)
		if(el==3){
			console.log(el)
			return false
		}else{
			return true
		}
	})
//1888 1888 1888 3 false

every 和some需要一个明确的return结果如果写成这样，可能会得到错误的结果

var arr=[1,2,3,4,5,6,7,8,9,10]
	arr.every(el=>{
		console.log(1888)
		if(el==3){
			console.log(el)
			return false
		}
	})
//1888  false

# 伪数组

两个条件 :有lenth属性，且索引为数字

let s ={0:1,2:"has",length:2}

# 和数组相关的面试题

  • 查找一个重复数组中仅有的一个没有重复的值

思考:将每个值当做key添加到对象上去的，然后统计哪个key的length是1

  • 随机排列一个新数组
  1. 改造的数组sort方法
let arr = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
	
	function shuffle(arr) {
	    let i = arr.length;
	    while (--i) {
	        let j = Math.floor(Math.random() * i);
	        [arr[j], arr[i]] = [arr[i], arr[j]];
	    }
	}
	shuffle(arr);
  1. 自带sort方法,波动不大
function shuffle(arr) {
    arr.sort(() => Math.random() - 0.5);
}//可能效果不好
  1. 循环交换位置
let arr = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];

for(let i = 0,len = arr.length; i < len; i++){
  let currentRandom = parseInt(Math.random() * (len - 1));
  let current = arr[i];
  arr[i] = arr[currentRandom];
  arr[currentRandom] = current;
}
  1. 循环随机位置法
创建一个新的数组保存打乱的变量；
每次循环产生一个随机位，将随机位的数保存至新数组中；
查询新数组中是否存在随机位的数，如果不存在，就保存，如果存在就重新循环该次循环。
  • ['1', '2', '3'].map(parseInt) what & why ?
// 1, NaN, NaN

//上面实际相当于这样的！
['1', '2', '3'].map((item, index) => {
	return parseInt(item, index)
})
  • 数组扁平化降维
1. arr.flat(Infinity)
2. arr.toString().split(",").map(item=>parseFloat(item))
3. JSON.stringify(arr).replace(/(\[|\])/g,"").split(",").map(item=>parseFloat(item))
4. for循环
	4.1 for循环 递归
	4.2 arr.some isArray [...]
5. reduce

let arr = [0,[1],[2, 3],[4, [5, 6, 7]]];

let dimensionReduction = function (arr) {
    return arr.reduce((accumulator, current) => {
        return accumulator.concat(
            Array.isArray(current) ? 
            dimensionReduction(current) : 
            current
            );
    }, []);
}
dimensionReduction(arr); //[0, 1, 2, 3, 4, 5, 6, 7]
console.log(dimensionReduction(arr))
  • 数组去重
1. Array.from()+new Set (或者new set解构)
2. for 循环
	2.1 splice 切割 (数组索引塌陷+改变索引消耗大)
	2.2 重复置为null ,最后一次性清除null
	2.3 创建空数组arr.push
3. 创建一个对象，arr数组为key可消除重复
4. 先排序，在相邻比较
5. filter去重
6. reduce去重

let ary =[12,23,12,15,25,23,24,14,15,15]
ary.sort((a,b)=>a-b)
let str = ary.join("@")+'@'
console.log(str)
let reg =/(\d+@)\1*/g
ary=[]
str.replace(reg,(n,m)=>{
	console.log(n,m)
	m=parseInt(m)
	ary.push(m)
})
console.log(ary)

正则反向引用

let arr = [1, 2, 2, 4, null, null].filter((item, index, arr) => arr.indexOf(item) === index); // [1,2,4,null]

let arr = [1, 2, 2, 4, null, null].reduce((accumulator, current) => {
    return accumulator.includes(current) ? accumulator : accumulator.concat(current);
}, []);
console.log(arr)
  • map和bind
const map = ['a', 'b', 'c'].map.bind([1, 2, 3]); 
map(el => console.log(el)); 

['a', 'b', 'c'].map，当调用时，将调用 Array.prototype.map，其 this 值为 ['a', 'b', 'c']。但是，当作为引用使用时，['a', 'b', 'c'].map 只是对 Array.prototype.map 的引用，而不是调用。

Function.prototype.bind 将把函数的 this 绑定到第一个参数(在本例中是 [1, 2, 3])，用这样的this 调用 Array.prototype.map 会导致这些项被迭代并记录下来。

# 类型化数组 Typed Array ArrayBuffer

诞生原因：定型数组（typed array）是 ECMAScript 新增的结构，目的是提升向原生库传输数据的效率。在 WebGL 的早期版本中，因为 JavaScript 数组与原生数组之间不匹配，所以出现了性能问题。图形驱动程序 API 通常不需要以 JavaScript 默认双精度浮点格式传递给它们的数值，而这恰恰是 JavaScript数组在内存中的格式。因此，每次 WebGL 与 JavaScript 运行时之间传递数组时，WebGL 绑定都需要在目标环境分配新数组，以其当前格式迭代数组，然后将数值转型为新数组中的适当格式，而这些要花费很多时间。

类型化数组（Typed Array）是一种处理二进制数据的特殊数组，它可像 C 语言那样直接操纵字节，不过得先用 ArrayBuffer 对象创建数组缓冲区（Array Buffer），再映射到指定格式的视图（view）之后，才能读写其中的数据。总共有两类视图，分别是 特定类型的 TypedArray 和通用类型的 DataView 。在 ES6 引入类型化数组之后，大大提升了 JavaScript 数学运算的性能。

  1. ArrayBuffer：ArrayBuffer 是所有定型数组及视图引用的基本单位。虽然 ArrayBuffer 对象可以开辟一片固定大小的内存区域（即数组缓冲区），但它不能直接读写所存储的数据，需要借助视图才行。通过构造函数 ArrayBuffer()可以分配指定字节数量的缓冲区，代码如下所示，分配了一段 8 个字节的内存区域，每个字节的默认值都为 0。有一点要注意，缓冲区的容量在指定后，就不可再修改。
var buffer = new ArrayBuffer(8);

利用 ArrayBuffer 对象的只读属性 byteLength，可以获取缓冲区的字节长度。ArrayBuffer 一经创建就不能再调整大小。不过，可以使用 slice()复制其全部或部分到一个新 实例中。还有一个静态方法 ArrayBuffer.isView()，用来检测是否为一个视图实例，具体如下所示。

buffer.byteLength; //8
buffer.slice(2, 4);
ArrayBuffer.isView(buffer); //false

不能仅通过对 ArrayBuffer 的引用就读取或写入其内容。要读取或写入 ArrayBuffer，就必须通过视图。视图有不同的类型，但引用的都是 ArrayBuffer 中存储的二进制数据。

  1. TypedArray：视图的行为类似于数组，但并不是真正的数组。视图可根据指定的数值类型解读缓冲区中的二进制数据，而 TypedArray 包含 9 种特定类型的视图（即类型化数组），如表 所示.
视图名称 元素大小（字节） 描述 等价的 C 语言类型
Int8Array 1 8 位二进制补码有符号整数 signed char
Uint8Array 1 8 位无符号整数 unsigned char
Uint8ClampedArray 1 8 位无符号整数（对溢出做特殊处理） unsigned char
Int16Array 2 16 位二进制补码有符号整数 short
Uint16Array 2 16 位无符号整数 unsigned short
Int32Array 4 32 位二进制补码有符号整数 int
Uint32Array 4 32 位无符号整数 unsigned int
Float32Array 4 32 位 IEEE 浮点数 float
Float64Array 8 64 位 IEEE 浮点数 double

表中的 9 种视图都继承自 TypedArray 对象，而每种视图都只能处理一种数值类型的数据（例如，Float32Array 只能处理 float 类型的数值），并且视图中的元素大小（即所占的字节数）也与数值类型有关，例如，Float32Array 的 1 个元素包含 4 个字节。由于各个视图的元素都会有规定的数值范围，因此超出该范围就会溢出。其中对 Uint8ClampedArray 的溢出处理较为特殊，它的数值范围在 0 到 255 之间，如果缓冲区所存的值超出该范围，那么就会替换这个值，例如小于 0 的数值被转换成 0，而大于 255 的数值则被转换成 255，如下所示。

var view = new Uint8ClampedArray(2);
view[0] = -1;
view[1] = 256;
console.log(view); //Uint8ClampedArray(2) [0, 255]

每种特定类型的视图都有一个构造函数，每个构造函数都有 4 种参数的组合，即共有 4种方式创建类型化数组，具体如下所列，每一种创建方式的后面都会给出相应的示例代码。

1）3 个参数，第一个是数组缓冲区，第二个是可选的字节偏移量，第三个是可选的需要包含的元素个数。注意，偏移量需要是元素大小的倍数。

var buffer = new ArrayBuffer(16),
 view1 = new Int16Array(buffer), //Int16Array(8) [0, 0, 0, 0, 0, 0, 0, 0]
 view2 = new Int16Array(buffer, 4, 2); //Int16Array(2) [0, 0]

利用这组参数，可以让一个缓冲区关联多个视图，代码如下所示。

var buffer = new ArrayBuffer(16);
var view1 = new Int8Array(buffer, 0, 4),
 view2 = new Int16Array(buffer, 4, 4),
 view3 = new Int32Array(buffer, 12, 1);
view1.buffer === view2.buffer; //true
view2.buffer === view3.buffer; //true

3 个视图分别占据了前 4 个字节、中间 8 个字节以及后 4 个字节的缓冲区。视图的 buffer 属性指向了它所处的缓冲区，两组全等比较的结果都为真，由此可知，它们使用了同一个缓冲区。

2）1 个数值，表示类型化数组的元素个数，将该参数乘以每个元素的大小即可得到缓冲区的容量，前面描述 Uint8ClampedArray 特性的示例就用到了这种创建方式。注意，此时构造 函数会自动创建合适容量的缓冲区。

var view = new Int16Array(7); //Int16Array(7) [0, 0, 0, 0, 0, 0, 0]

3）1 个类型化数组，它的元素会被复制到新的类型化数组中，虽然元素个数保持不变，但使用了不同的缓冲区。

var view1 = new Int16Array(6),
view2 = new Int8Array(view1); //Int8Array(6) [0, 0, 0, 0, 0, 0]

4）1 个对象，只要不是 TypedArray 或 ArrayBuffer 就行，如数组、类数组等对象。

var view = new Int16Array([1, 2, 3]); //Int16Array(3) [1, 2, 3]

类型化数组与常规数组有许多相似点，下面仅列出其中的 3 点。

1）都可以通过数字类型的索引来访问某个位置的元素。

2）通过 length 属性可获取包含的元素个数。

3）都包含 slice()、of()、from()、copyWithin()等数组方法。

虽然两者之间的共性不少，但是类型化数组的特点又很鲜明。

1）每种类型化数组都包含一个 BYTES_PER_ELEMENT 属性，能获取每个元素所占的字节（即元素大小），代码如下所示。

Int8Array.BYTES_PER_ELEMENT; //1
Int16Array.BYTES_PER_ELEMENT; //2
Int32Array.BYTES_PER_ELEMENT; //4

2）由于类型化数组无法维护自己的长度，因此将 length 属性定义为只读，并且缺少 pop()、push()、shift()等会更改数组长度的方法。

3）包含独有的属性和方法，如下。

属性或方法 功能描述
buffer 只读属性，读取视图所在的数组缓冲区
byteOffset 只读属性，读取字节偏移量
byteLength 只读属性，读取视图所占的字节长度
set() 从另一个常规数组或类型化数组中提取元素，再复制给当前类型化数组
subarray() 从当前类型化数组中提取元素，再由这些元素组成一个新的类型化数组

byteOffset 属性等于构造函数的第二个参数，而 byteLength 属性等于构造函数的第三个参数与元素大小相乘的积，如下所示。

var buffer = new ArrayBuffer(8),
 view = new Int16Array(buffer, 2, 3);
view.buffer; //ArrayBuffer(8) {}
view.byteOffset; //2
view.byteLength; //6

set()方法可接收两个参数，第一个是被提取的常规数组或类型化数组，第二个是可选的参数，表示当前类型化数组的偏移量，即从这个位置开始覆盖它的元素。subarray()方法也能接收两个参数，但都是可选的索引参数，第一个是开始提取的位置，第二个是结束提取的位置，注意，该位置上的元素不会被提取。关于两个方法的使用，可参考下面的代码。

view.set([8], 1);
console.log(view); //Int16Array(3) [0, 8, 0]
view.subarray(1, 2); //Int16Array [8]

# DataView

允许你读写 ArrayBuffer 的视图是 DataView。这个视图专为文件 I/O 和网络 I/O 设计，其API 支持对缓冲数据的高度控制，但相比于其他类型的视图性能也差一些。DataView 对缓冲内容没有任何预设，也不能迭代。

必须在对已有的 ArrayBuffer 读取或写入时才能创建 DataView 实例。这个实例可以使用全部或部分 ArrayBuffer，且维护着对该缓冲实例的引用，以及视图在缓冲中开始的位置。

const buf = new ArrayBuffer(16);
// DataView 默认使用整个 ArrayBuffer
const fullDataView = new DataView(buf);
alert(fullDataView.byteOffset); // 0
alert(fullDataView.byteLength); // 16
alert(fullDataView.buffer === buf); // true
// 构造函数接收一个可选的字节偏移量和字节长度
// byteOffset=0 表示视图从缓冲起点开始
// byteLength=8 限制视图为前 8 个字节
const firstHalfDataView = new DataView(buf, 0, 8);
alert(firstHalfDataView.byteOffset); // 0
alert(firstHalfDataView.byteLength); // 8
alert(firstHalfDataView.buffer === buf); // true
// 如果不指定，则 DataView 会使用剩余的缓冲
// byteOffset=8 表示视图从缓冲的第 9 个字节开始
// byteLength 未指定，默认为剩余缓冲
const secondHalfDataView = new DataView(buf, 8);
alert(secondHalfDataView.byteOffset); // 8
alert(secondHalfDataView.byteLength); // 8
alert(secondHalfDataView.buffer === buf); // true

要通过 DataView 读取缓冲，还需要几个组件。

 首先是要读或写的字节偏移量。可以看成 DataView 中的某种“地址”。

 DataView 应该使用 ElementType 来实现 JavaScript 的 Number 类型到缓冲内二进制格式的转换。

 最后是内存中值的字节序。默认为大端字节序。

它只有一个身份（即视图），而之前的类型化数组有双重身份，既是视图，也是类数组。如果要使用 DataView 视图，那么需要先创建数组缓冲区，类似于类型化数组的第一种创建方式，只不过要把它的构造函数中的第三个可选的参数换成需要包含的字节长度，代码如下所示。根据全等比较的结果可知，两个视图处在同一个缓冲区中。

var buffer = new ArrayBuffer(16),
 view1 = new DataView(buffer),
 view2 = new DataView(buffer, 4, 6);
view1.buffer === view2.buffer; //true

想要通过 DataView 视图读写缓冲区的数据，需要先为其指定数据类型，而它支持 8 种数据类型（除了 Uint8Clamped）。DataView 提供了 8 对原型方法，每对方法分别以“set”和“get”作为名称前缀，前者用于写入，后者用于读取，在前缀的后面会跟着数据类型，如 setInt16()和 getInt16()。

写入方法的第一个参数是字节偏移量，第二个参数是要定义的数值。而读取方法的第一个参数也是字节偏移量，代码如下所示，两张视图被指定了不同的数据类型。

var buffer = new ArrayBuffer(16),
view1 = new DataView(buffer),
view2 = new DataView(buffer, 4, 6);
view1.buffer === view2.buffer; //true
// 这段代码将缓冲区中索引为2的字节设置为8，并正确地读取了索引为0和2的字节的值。
view1.setInt8(2, 8);
view1.getInt8(0); //0
view1.getInt8(2); //8

// 这里，view2.setInt16(0, 16); 将从 view2 的起始索引（即 buffer 的索引4）开始，写入一个16位的值16。
// 由于 setInt16 方法会写入两个字节，它将影响 buffer 中索引4和5的字节。
view2.setInt16(0, 16);
view2.getInt16(0); //16
view2.getInt16(2); //0

除了 Int8 和 Uint8 类型，其他类型的写入和读取方法都还包含一个可选的布尔参数：littleEndian，表示是否启用小端序，默认为 true。在了解小端序之前，需要先了解一下端序。

端序又称字节序（Endianness），表示多字节中的字节排列方式。小端序是指字节的最低有效位在最高有效位之前（大端序正好与之相反），如数字 10，如果用 16 位二进制表示，那么它 就变为 0000 0000 0000 1010，换算成十六进制就是 000A，用小端序存储，该值会被表示成0A00。虽然大端序更符合人类的阅读习惯，但英特尔处理器和多数浏览器采用的都是小端序。 引入该参数后，能更灵活地处理不同存储方式的数据。

最后更新: 11/22/2024, 2:11:53 PM

← json →