《JavaScript高级程序设计》-- Array类型

文章目录

创建数组

Array构造函数创建数组

创建一个空数组

var arr = new Array();//[]
arr.length //0

创建一个length为10的数组

var arr = new Array(10)
arr.length //10

创建包含指定元素的数组

//ECMAScript中数组的每一个元素数据类型可以不一样
var arr = new Array(1,2,'a',4,'b')//[1, 2, "a", 4, "b"]
arr.length //5

注：调用Array构造函数创建数组也可以省略new操作符结果都是一样的。

字面量创建数组

var arr = [1,2,3]; //创建包含3个元素的数组
var arr = [];      //创建一个空数组

与对象不同，使用字面量创建数组时不会调用Array的构造函数

from()和of()创建数组

Array.from()可以把任何可迭代的结构数据转换为数组

字符串转换为数组

var str = Array.from('abcd')//["a", "b", "c", "d"]

map结构数据转换为数组

var map = new Map().set(1,2).set(3.4) 
var mapArr = Array.from(map) //[[1,2],[3,4]]

set结构数据转换为数组

var set = new Set().add(1).add(2).add(3)//{1, 2, 3}
var setArr = Array.from(set);//[1, 2, 3]

对已有的数组进行浅复制

var a1 = [1,2,3];
var a2 = Array.from(a1) //[1, 2, 3]

arguments对象转换为数组

function getArgsArray(){
    
    
	console.log(arguments,'arguments'); //[1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ] "arguments"
	return Array.from(arguments);
}
getArgsArray(1,2,3,4) //[1, 2, 3, 4]

特定属性的对象转化为数组

特定属性的对象：属性名为number，并且包含length属性名的对象

var obj = {
    
    1:'aa',2:'bb',3:'cc',length:4};
var arr = Array.from(obj); //[undefined, "aa", "bb", "cc"]

定义了一个对象obj,其中length属性值为4，通过Array.from()转换成数组因为缺少了索引值0索引默认填充为undefined。

var obj = {
    
    name:'zl',1:'aa',2:'bb',3:'cc',length:4};
var a = Array.from(obj);//[undefined, "aa", "bb", "cc"]

多了一个name属性，默认自动省略，其他特殊情况可以自行尝试验证

Array.from()的其它参数
Array.from()还可以接受第二个参数（映射函数）和第三个参数（指定映射函数中this的值）。（注意：this值在箭头函数中不适用）

var a1 = [1,2,3,4];
var a2 = Array.from(a1,(i)=>i*2);//[2, 4, 6, 8]
var a3 = Array.from(a1,function(i){
    
    return i*this.num},{
    
    num:3})//[3, 6, 9, 12]

如果不使用第二个映射函数参数，想要把数组a1每个元素增加一倍，可以调用Array.from().map()，这样则需要多创建一个中间数组了

let a1 = [1,2,3,4];
let a2 = Array.from(a1).map((i)=>i*2);//[2, 4, 6, 8]

Array.of()函数可以将一组参数转换为数组

var a = Array.of(1,2,3,4)//[1, 2, 3, 4]
var aa = Array.of('11','22','33','44')//["11", "22", "33", "44"]

数组索引

length属性

数组中的length属性并不是只读，通过修改length的值可以在数组末尾删除或者添加元素

var a = [1,2,3,4];
a.length = 10; //添加
console.log(a[9])//undefined
a.length =2; //删除
console.log(a)//[1, 2]
console.log(a[3]) //undefined

检测数组

判断数组

Array.isArray()判断数据是否为数组

Array.isArray([1,2,3]) //true

迭代器方法

Array原型上面暴露了三个检索数组内容的方法keys(),values(),ertries()这三个函数都返回迭代器

keys()

返回数组索引的迭代器

var nums = [1,2,3,4];
const aKeys = Array.from(nums.keys())//[0, 1, 2, 3]

values()

返回数组元素值的迭代器

var nums = [1,2,3,4];
const aValues = Array.from(nums.values())//[1, 2, 3, 4]

entries()

返回索引/值对的迭代器

var nums = [1,2,3,4];
const aEntries = Array.from(nums.entries()) //[[0, 1],[1, 2],[2, 3],[3, 4]]

复制和填充方法

fill()

填充数组

fill函数接受三个参数:想要填充的数据，填充的起始位置（包含该位置），填充的截止位置（不包含该位置）。

var nums  = [1,1,1,1,1];
//fill不传递参数默认填充为undefined
nums.fill();//[undefined, undefined, undefined, undefined, undefined]
//传递一个参数，默认填充所有元素
nums.fill(1);//[1, 1, 1, 1, 1]重置

//传递两个参数，索引值大于等于2的位置到数组末尾全部填充为2
nums.fill(2,2)//[1, 1, 2, 2, 2]
nums.fill(1);//[1, 1, 1, 1, 1]重置

//传递三个参数，索引值大于等于2小于4的位置填充2
nums.fill(2,2,4) //[1, 1, 2, 2, 1]
nums.fill(1);//[1, 1, 1, 1, 1]重置

//第二和第三个参数存在负值时，最终索引值为负数+数组长度，下面索引值大于等于2小于4填充为0，
nums.fill(0,-3,-1)//[1, 1, 0, 0, 1]
nums.fill(1);//[1, 1, 1, 1, 1]重置

//fill默认忽略超出数组边界，0长度，方向相反的索引范围
nums.fill(0,3,10) //[1, 1, 1, 0, 0]
nums.fill(1);//[1, 1, 1, 1, 1]重置
nums.fill(0,3,2) //[1, 1, 1, 1, 1] --方向相反
nums.fill(5,7,10) //[1, 1, 1, 1, 1] --超出边界

copyWithin()

批量复制
copyWithin()函数把数组在指定范围内的元素插入到指定位置，插入的元素会把原先位置的元素覆盖掉，数组的长度是不会发生改变的。

该函数接收三个参数:插入的位置，复制索引开始的位置，复制索引结束的位置。

var arr = [0,1,2,3,4,5,6,7,8,9]

//不传递参数时，默认不变
arr.copyWithin();//[0,1,2,3,4,5,6,7,8,9] 

//传递一个参数时，该参数为插入的位置，复制索引开始位置为0，结束位置为数组末尾
arr.copyWithin(5)//[0, 1, 2, 3, 4, 0, 1, 2, 3, 4]

//当传递两个参数时，第一个参数为插入位置，第二个参数为复制索引开始位置，结束位置为数组末尾
var arr = [0,1,2,3,4,5,6,7,8,9]//重置
arr.copyWithin(5,2);//[0, 1, 2, 3, 4, 2, 3, 4, 5, 6]

//当传递三个参数时，第一个参数为插入位置，第二个参数为复制索引开始位置，第三个参数为结束位置（不包括该位置）

var arr = [0,1,2,3,4,5,6,7,8,9]//重置
arr.copyWithin(5,2,5)//[0, 1, 2, 3, 4, 2, 3, 4, 8, 9]

转换为字符串

toString()和toLocaleString()可以把数组转化为字符串

var arr = ['aa','bb','cc'];
arr.toString(); //"aa,bb,cc"
arr.toLocaleString(); //"aa,bb,cc"

toString()方法对数组中的每一个元素都调用toString()方法然后在把结果用逗号分隔开
toLocaleString()方法对数组中的每一个元素都调用toLocaleString()方法然后在把结果用逗号分隔开

使用join方法可以替换数组元素之间拼接的逗号

var arr = ['aa','bb','cc'];
arr.join('|')//"aa|bb|cc"

join不传递参数默认使用逗号分隔和调用toString()的结果一样

arr.join()//"aa,bb,cc"

栈方法

栈是先进后出的数据结构，如果想把数组当成栈的结构操作则可以使用push和pop函数。这两个函数都是对数组的最后一位进行操作的

pop()

pop弹出数组的最后一项并返回它

var arr = ['aa','bb','cc'];
arr.pop() //返回'cc'
console.log(arr) //["aa", "bb"]

push()

push在数组末尾推入一个元素

var arr = ['aa','bb','cc'];
arr.push('ee') //返回当前数组长度
console.log(arr)    //["aa", "bb", "cc", "ee"]

队列方法

队列是先进先出的数据结构，数组也可以模拟为一个队列，使用shift和unshift函数可以对数组进行删除和添加操作。这两个函数都是对数组第一位进行操作的

shift()

shift函数删除数组第一项元素，并返回删除的元素值

var arr = ['aa','bb','cc'];
arr.shift(); //返回'aa'
console.log(arr) //["bb", "cc"]

unshift()

unshift函数在数组的第一位插入一个元素，其它元素后移一位,返回当前数组的长度

var arr = ['aa','bb','cc'];
arr.unshift('00')//4
console.log(arr) //["00", "aa", "bb", "cc"]

排序方法

数组排序有两个方法：sort和reverse

reverse()

reverse函数只是把数组元素反向排列

var arr = ['b','c','d','e',34];
arr.reverse()//[34, "e", "d", "c", "b"]

sort()

sort函数接收一个比较函数，可以自定义比较规则这样就比较灵活了。
sort函数会把数组元素转换为字符串然后进行比较

var arr = [0,2,5,3,19,10]
arr.sort((a,b)=>a<b?1:a>b?-1:0)
console.log(arr) //[19, 10, 5, 3, 2, 0]

操作方法

concat()

数组拼接方法

var a1 = [1,2,3];
var a2 = a1.concat(4,[5,6,7]) //[1, 2, 3, 4, 5, 6, 7]

slice()

slice用于创建一个包含原有数组一个或多个元素的新数组。（不影响原始值）
可以传递两个参数：截取索引的开始位置和结束位置(截取不包括结束位置的元素）

//传递一个参数时，则参数为开始索引位置，默认截取到数组末尾
var arr = [1,2,3,4,5,6,7]
console.log(arr.slice(3))//[4, 5, 6, 7]
console.log(arr) //[1, 2, 3, 4, 5, 6, 7]

//传递两个参数时，即截取的开始和结束位置
console.log(arr.slice(2,5))//[3, 4, 5]

//如果存在负值，则最终的索引为该值加上数组长度
console.log(arr.slice(-4,-1)) //[4, 5, 6]

splice()

splice函数可以对数组进行删除、插入和替换等操作(会作用于原数组)

删除需要指定两个参数：删除开始的索引位置和删除的个数

var arr = [1,2,3,4,5,6,7]
arr.splice(1,2) //删除索引1开始的2个元素即2和3
console.log(arr) //[1, 4, 5, 6, 7]

插入需要传递三个参数：插入位置，0（删除的个数）,可以为多个插入的元素

var arr =[0,4,5];
arr.splice(1,0,1,2,3) //如果想插入多个元素则在第三个参数后面累加用逗号分隔
console.log(arr) //[0, 1, 2, 3, 4, 5]

替换 splice在删除元素的同时可以在指定位置插入新的元素，同样要传入三个元素：开始位置，删除的个数，替换的任意字符

var arr = [0,1,2,3,'a','b','c'];
arr.splice(4,3,4,5,6) //在索引为4的位置开始删除三个元素，然后插入三个元素完成替换，返回删除后的元素["a", "b", "c"]
console.log(arr) //[0, 1, 2, 3, 4, 5, 6]

搜索和位置方法

严格相等

indexOf(),lastIndexOf(),include()这三个函数都传递两个参数：要查找的元素和一个可选的起始位置。在比较过程中两者必须严格相等，即使用全等（===）比较

indexOf()

从数组第一项开始向后查找，找到返回索引值，没找到返回-1

var arr = [1,2,3,4,5,2,3,6];
arr.indexOf();//-1 

arr.indexOf(2) //1
//从索引3开始查找
arr.indexOf(2,3)//5
//起始索引为负数则最终查找索引为负数加上数组总长度即从索引为4开始查找
arr.indexOf(2,-3)//5

lastIndexOf()

从数组最后一项向前查找，找到返回索引值，没找到返回-1

var arr = [1,2,3,4,5,2,3,6];
arr.lastIndexOf() //-1
//默认从最后一位向前查找
arr.lastIndexOf(2)//5 
//从指定索引1开始向前查找
arr.lastIndexOf(2,1)//1

//起始查找位置为负数时还是负数加上数组总长度
arr.lastIndexOf(2,-4)//1

includes()

从数组第一项开始向后查找，找到返回true，没找到返回false

var arr = [1,2,3,4,5,2,3,6];
arr.includes(2) //true

断言函数

find()和findIndex()找到匹配项后不再继续搜索
这两个函数接收两个参数：断言函数和可选参数对象用于指定断言函数内部this值。
断言函数接受三个参数：当前查找的元素，当前元素的索引值，正在搜索的数组

var data = [
    {
    
    
        name:'zhangsan',
        age:28
    },
    {
    
    
        name: 'lisi',
        age:24
    }
]
const user = data.find((item,index,arr)=>item.age===28);
console.log(user)//{name: "zhangsan", age: 28}

const index = data.findIndex((item,index,arr)=>item.age===28);

console.log(index)//0

find返回第一个匹配的元素，findIndex返回第一个匹配元素的索引

var nums = [2,3,4,1,4];
nums.find((item,index,arr)=>{
    
    
    console.log(`item: ${
      
      item},  index:${
      
      index},  arr:${
      
      arr}`);
    return item === 4;
})
// item: 2,  index:0,  arr:2,3,4,1,4
// item: 3,  index:1,  arr:2,3,4,1,4
// item: 4,  index:2,  arr:2,3,4,1,4

迭代方法

every,filter,forEach,map,some
数组的5个迭代方法，每个方法都接收两个参数：以每一项为参数运行的函数和可选的作为函数运行上下文的作用域对象（影响函数中的this值）。第一个函数参数又接收三个参数：数组元素，元素索引和数组本身。

every()和some()

every：数组每一项都运行传入的函数，如果每一项函数都返回true，则这个方法返回true。
some: 数组每一项都运行传入的函数，如果有一项返回true，则这个方法返回true。

var nums = [2, 3, 4, 1, 4];
var everyValue = nums.every((item,index,arr)=>item>2)//false
var someValue = nums.some((item,index,arr)=>item>2)//true

filter()和map()

filter(): 对数组每一项都运行传入的函数，函数返回true的项会组合成数组之后返回。
map：对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。

var nums = [2, 3, 4, 1, 4];
var filterResult = nums.filter((item,index,arr)=>item>2)//[3, 4, 4]

var mapResult = nums.map((item,index,arr)=>item*2)//[4, 6, 8, 2, 8]

forEach()

forEach:对数组每一项都运行传入的函数，没有返回值

var nums = [2, 3, 4, 1, 4];
nums.forEach((item,index,arr)=>{
    
    
    console.log(item)    //2 3 4 1 4
})

归并方法

reduce,reduceRight 这两个函数都传入两个参数：每一项都会执行的函数和可选的归并起点的初始值。
第一个函数参数可以传递4个参数：上一个归并值，当前项，当前项索引值，数组本身。函数的返回值就是归并值作为下一次函数执行的第一个参数。

reduce()

reduce 方法从数组第一项开始遍历到最后一项。
如果函数没有传递第二个参数（归并起点值），则第一次迭代将从数组的第二项开始，则传给归并函数第一个参数就是数组的第一项，第二个参数为数组的第二项。

var nums = [2, 3, 4, 1, 4];
//第一次归并是pre是2，cur为3.第二次执行归并函数是pre为5（2+3），cur为4（数组第三项），直至遍历到最后返回最终到归并值
var sum = nums.reduce((pre,cur,index,arr)=>pre+cur);//14

reduceRight()

reduceRight函数从数组的最后一项开始遍历到第一项

var nums = [2, 3, 4, 1, 4];
var sum = nums.reduceRight((pre,cur,index,arr)=>pre+cur);//14