Object
创建方式:
let obj={};
//推荐此方法(代码少)
或
let obj new Object();
访问对象属性的方法:
let obj={name:"lly",sex:"Man"}
obj.name//lly通常使用此方法
或
obj["name"]//lly
关于Object更全面,更深层次的学习,作者会单独开篇。
Array
- 创建方式:
let arr=[];
//添加子元素
let arr1=new Array();
//可以指定数组长度,或者直接添加子元素(如果是数字指定数组长度,其他类型添加子元素)
//Array静态方法:
1.Array.from()//将类数组结构转换为数组实例
//场景1:(字符串会被拆分为单字符数组)
Array.from("1234567890")// ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
//场景2:(集合和映射转换为一个新数组)
const m = new Map().set(1, 2).set(7,8);
const s = new Set().add(1).add(2).add(3).add(4);
Array.from(m);
// [[1, 2], [7, 8]]
Array.from(s);
// [1, 2, 3, 4]
//场景3:(现有数组执行浅复制)
let arr1=[1, 2, 3, 4]
let arr2=Array.from(arr1)
arr1===arr2//false
//场景4:(可以使用任何可迭代对象)
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
yield 4;
}
};
console.log(Array.from(iter));
// [1, 2, 3, 4]
//场景5:(arguments 对象可以被轻松地转换为数组)
function getArgsArray() {
return Array.from(arguments);
}
console.log(getArgsArray(1, 2, 3, 4));
// [1, 2, 3, 4]
//场景6:(转换带有必要属性的自定义对象)
const arrayLikeObject = {
0: 1,
1: 2,
2: 3,
3: 4,
length: 4
};
console.log(Array.from(arrayLikeObject));
// [1, 2, 3, 4]
//from()接受三个参数参数一对应的是处理的对象参数二对应的是映射函数参数参数三对应的是指定映射函数中 this 的值
let arr=[0,1,2,3]
let arrNew=Array.from(arr,function(x){return x**this.exponent},{exponent:3})//[0,1,8,27]
2.Array.of()//用于将一组参数转换为数组实例等价Array.prototype.slice.call(arguments)
Array.of(1,2,3,4,5,6)//[1,2,3,4,5,6]
Array.of(unedfined)//[unedfined]
- 数组空位:
let arr=[,,]
console.log(arr.length)//2
for(let i of arr){console.log(i)//unedfined,unedfined}
//注意 !!!!!
//避免使用数组空位。如果确实需要空位,则可以显式地用 undefined 值代替。
- 数组索引
letarr=["A","B","C","D"]
arr[0]//A
arr[arr.length-1]//D
- 检测数组
- value instanceof Array
let arr=[];
console.log(arr instanceof Array)//true
2.Array.isArray()
Array.isArray(arr)//true
3.Object.prototype.toString.call(value)
Object.prototype.toString.call(arr)//[object Array]
- 迭代器方法
//访问Array的方法:
xx.keys()//数组索引;
xx.values()//数组元素;
xx.entriess()//索引/值对;
let arr=["A","B","C"];
Array.from(arr.keys())// [0, 1, 2]
Array.from(arr.values())//["A", "B", "C"]
Array.from(arr.entries())//[[0, "A"][1, "B"][2, "C"]]
- 复制和填充方法
//以下方法需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引不改变数组的大小
//批量复制方法 copyWithin,按照指定范围浅复制数组中的部分内容,然后将它们插入到指定索引开始的位置。
let ints, reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 从 ints 中复制索引 0 开始的内容,插入到索引 5 开始的位置
// 在源索引或目标索引到达数组边界时停止
ints.copyWithin(5);
console.log(ints);
// [0, 1, 2, 3, 4, 0, 1, 2, 3, 4]
reset();
// 从 ints 中复制索引 5 开始的内容,插入到索引 0 开始的位置
ints.copyWithin(0, 5);
console.log(ints);
// [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
reset();
// 从 ints 中复制索引 0 开始到索引 3 结束的内容
// 插入到索引 4 开始的位置
ints.copyWithin(4, 0, 3);
alert(ints);
// [0, 1, 2, 3, 0, 1, 2, 7, 8, 9]
reset();
// JavaScript 引擎在插值前会完整复制范围内的值
// 因此复制期间不存在重写的风险
ints.copyWithin(2, 0, 6);
alert(ints);
// [0, 1, 0, 1, 2, 3, 4, 5, 8, 9]
reset();
// 支持负索引值,与 fill()相对于数组末尾计算正向索引的过程是一样的
ints.copyWithin(-4, -7, -3);
alert(ints);
// [0, 1, 2, 3, 4, 5, 3, 4, 5, 6]
//copyWithin静默忽略超出数组边界、零长度及方向相反的索引范围:
let ints,reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引过低,忽略
ints.copyWithin(1, -15, -12);
alert(ints);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset()
// 索引过高,忽略
ints.copyWithin(1, 12, 15);
alert(ints);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引反向,忽略
ints.copyWithin(2, 4, 2);
alert(ints);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引部分可用,复制、填充可用部分
ints.copyWithin(4, 7, 10)
alert(ints);
// [0, 1, 2, 3, 7, 8, 9, 7, 8, 9];
//填充数组方法 fill,可以向一个已有的数组中插入全部或部分相同的值。开始索引用于指定开始填充的位置,它是可选的。如果不提供结束索引,则一直填充到数组末尾。负值索引从数组末尾开始计算。
const zeroes = [0, 0, 0, 0, 0];
// 用 5 填充整个数组
zeroes.fill(5);
console.log(zeroes);
// [5, 5, 5, 5, 5]
zeroes.fill(0);
// 重置
// 用 6 填充索引大于等于 3 的元素
zeroes.fill(6, 3);
console.log(zeroes);
// [0, 0, 0, 6, 6]
zeroes.fill(0);
// 重置
// 用 7 填充索引大于等于 1 且小于 3 的元素
zeroes.fill(7, 1, 3);
console.log(zeroes);
// [0, 7, 7, 0, 0];
zeroes.fill(0);
// 重置
// 用 8 填充索引大于等于 1 且小于 4 的元素
// (-4 + zeroes.length = 1)
// (-1 + zeroes.length = 4)
zeroes.fill(8, -4, -1);
console.log(zeroes);
// [0, 8, 8, 8, 0];
//fill静默忽略超出数组边界、零长度及方向相反的索引范围:
const zeroes = [0, 0, 0, 0, 0];
// 索引过低,忽略
zeroes.fill(1, -10, -6);
console.log(zeroes);
// [0, 0, 0, 0, 0]
// 索引过高,忽略
zeroes.fill(1, 10, 15);
console.log(zeroes);
// [0, 0, 0, 0, 0]
// 索引反向,忽略
zeroes.fill(2, 4, 2);
console.log(zeroes);
// [0, 0, 0, 0, 0]
// 索引部分可用,填充可用部分
zeroes.fill(4, 3, 10)
console.log(zeroes);
// [0, 0, 0, 4, 4]
- 转换方法
toLocaleString()// toString()和 valueOf()相同的结果
toString()//每个值的等效字符串拼接而成的一个逗号分隔的字符串
valueOf()//数组本身;
let arr=["A","B","C"];
arr.toString()//A,B,C
arr.valueOf()//["A","B","C"]
arr.toLocaleString()//A,B,C
//修改数组分割符join("要使用分割符")
arr.join('~')//A~B~C
//注意!!!! 如果数组中某一项是 null 或 undefined,则在 join()、toLocaleString()、toString()和 valueOf()返回的结果中会以空字符串表示。
- 栈方法
//方法修改原来的数组
1.push()//在数组后添加元素接受任意个值
2.pop()//获取数组最后一个元素
let arr=[1,2,3]
arr.push(4,5)
console.log(arr)//[1,2,3,4,5]
arr.pop()//5
console.log(arr)//[1,2,3,4]
- 队列方法
//方法修改原来的数组
1.shift()//获取数组第一元素
2.unshift()//在数组第一个元素前添加元素
let arr=[1,2,3]
console.log(arr.shift())//1
arr.unshift(0,1)
console.log(arr)//[0,1,2,3]
- 排序方法
1.reverse()//反向排序
2.sort()//升序排列可接受一个比较函数
let arr=[1,12,3,0,7,18,5]
arr.reverse();
//[5,18,7,0,3,12,1]
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
arr.sort(compare);
console.log(arr);
//[0, 1, 3, 5, 7, 12, 18]
- 操作方法
1.concat()//复制原来数组在此基础之上添加元素,不改变原来数组,可以接受任意参数
let arr=[0,1,2]
let arr1=arr.concat('4',[5,6])
arr//[0,1,2]
arr1//[0,1,2,"4",5,6]
关于数组会拉平
2.slice()//截取接受一个或两个参数表示起始索引和结束索引,不改变原有数组参数可以接受负值,(以数组长度加上对应的负值为索引位置)
let arr=[0,1,2,3,4,5,6,7,8,9]
arr.slice(1)//[1,2,3,4,5,6,7,8,9]
arr.slice(0,4)//[0,1,2,3]
arr.slice(-5,-2)//[5,6,7]
- 删除,参数说明:参数1索引起始位置,参数2要删除的元素数
arr.splice(0,3)//[0,1,2]
arr//[3,4,5,6,7,8,9]
- 插入 ,参数说明:参数1索引位置,参数2删除元素个数,参数3+ 要查入的元素
arr.splice(0,2,"name","sex","age")//[0,1]
arr//["name", "sex", "age", 2, 3, 4, 5, 6, 7, 8, 9]
- 替换,参数说明:参数1索引位置,参数2删除元素个数,参数3+ 要查入的元素
arr.splice(0,1,'name')//[0]
arr//["name",1,2, 3, 4, 5, 6, 7, 8, 9]
- 搜索和位置方法
- indexOf()//从前搜索元素,查询到返回元素索引,没查询到返回-1,可以接受一个或两个参数,参数1要查询的元素,参数2查询开始的索引
let arr=['A','B','C','D','E']
arr.indexOf(3)//-1
arr.indexOf('E')//4
arr.indexOf("C",1)//2从索引1开始查询元素'C'
- lastIndexOf()//同indexOf用法相同不同是从数组末尾开始查询
- includes()//同indexOf用法相同返回结果为true和false
2.按断言函数搜索
- find((element, index, array)=>{})//element:当前元素 index:当前元素的索引 array:数组 查询后就不在搜索
let arrObj=[{name:"lly",sex:"man",age:"18"},{name:"ly",sex:"woman",age:"18"}]
arr.find((element, index, array)=>{
element//当前元素
index//当前元素的索引
array//数组
})//返回查询到元素
- findIndex()//同find用法相同返回查询到的元素的索引
- 迭代方法
//以下方法不改变原数组
every()://对数组每一项都运行传入的函数,如果对每一项函数都返回 true,则这个方法返,回 true。
let arr=[2,4,6,8,10]
arr.every((item,index,array)=>{return item>=2})//true
filter()://对数组每一项都运行传入的函数,函数返回 true 的项会组成数组之后返回。
arr.filter((item,index,array)=>{return item>2)})//[4,6,8,10]
forEach()://对数组每一项都运行传入的函数,没有返回值。
arr.forEach((item,index,array)=>{
console.log(item*=10)//20,40,60,80,100
})
map()://对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组。
arr.map((item,index,array)=>{
item*=10
})
some()://对数组每一项都运行传入的函数,如果有一项函数返回 true,则这个方法返回 true。
- 归并方法
1.reduce((prev, cur, index, array) => prev + cur)) => {});
//参数说明:上一个归并值、当前项、当前项的索引和数
组本身
let arr=[0,1,2,3,4,5,6,7,8,9]
arr.reduce((prev, cur, index, array) =>{
console.log(prev, cur, index, array)
//过程
//0 1 1 (10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
//1 2 2 (10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
//3 3 3 (10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
//6 4 4 (10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
//10 5 5 (10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
//15 6 6 (10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
//21 7 7 (10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
//28 8 8 (10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
//36 9 9 (10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
returnprev + cur
})
2.reduceRight()//和reduce相同只是归并的方向不同此方法从数组尾部开始
定型数组Typed Array 是ECMAScript新增的结构,为了提升向原生库传输数据的效率而产生,(一种特殊的包含数值类型的数组),定型数组的架构分为缓冲和视图两部分,缓冲通过ArrayBuffer对象来实现,视图主要用来读和写缓冲区的内容,视图主要包含TypedArray和DataView()。
TypedArray包含:
- Uint8Array,Uint16Array,Uint32Array —— 用于 8 位、16 位和 32 位无符号整数。
- Uint8ClampedArray —— 用于 8 位整数,在赋值时便“固定”其值。
- Int8Array,Int16Array,Int32Array —— 用于有符号整数(可以为负数)。
- Float32Array,Float64Array —— 用于 32 位和 64 位的有符号浮点数。
注意:不要把类型化数组与正常数组混淆,因为在类型数组上调用
Array.isArray()
会返回
false
。此外,并不是所有可用于正常数组的方法都能被类型化数组所支持(如 push 和 pop)
历史
由于浏览器快速发展,为了满足运行复杂的 3D 应用程序需求,浏览器厂商开发一套 JavaScript API,从而充分利用 3D 图形 API 和 GPU 加速,以便在