javascript引用类型:Array

175 阅读7分钟

js数组是一组有序数据,每个槽位可以存储任意类型数据,数组的长度会随着元素的增删而动态变化。

创建数组:

使用构造函数Array创建数组:

  1. new Array(10) // 创建一个包含10个元素的数组,每个元素默认undefined。
  2. new Array("a","b","c") // 创建一个包含a,b,c三个元素的数组。
  3. Array(3), Array("a","b","c") // 省略new操作符结果是一样的
  4. let names = ["json","jan"] // 数组字面量表示法不会调用Array构造函数。

操作数组方法:

1. from() 用于将类数组结构转换为数组对象,第一个参数为需要转化的类数组结构,需要满足①可迭代的结构或者②有length长度属性和可索引元素的结构。可以将集合映射为一个新数组,可以对现有数组进行浅复制。

Array.from("json")     //  ['j','s','o','n']
Array.from([1,2,3,4],x=>x * 2) // [2,4,6,8]
Array.from([1,2,3,4],function(x){ return x * this.num},{num:2}) // [2,4,6,8],第二个参数可增强数组的值,第三个参数可指定this的值,这个this在箭头函数中不生效。

2. of() 可以将一组散参数转换为数组。

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

3. length 修改数组length的长度,可以增删数组元素,没有具体元素的位置默认undefined占位

[1,2,3,4].length=3  // 数组变为[1,2,3]
[1,2,3,4].length=5 // 数组变为[1,2,3,4,undefined]

4. Array.isArray() 判断一个值是否为数组,返回布尔值

5. keys(),values(),entries() keys()返回数组索引迭代器,values()返回元素迭代器,entries()返回索引/值对迭代器,可以将这些迭代器用.from()方法转换成数组实例。可以很容易的将数组拆分键值对。

Array.from(['json','tu','zhan','chloe'].keys()) // [0,1,2,3]
Array.from(['json','tu','zhan','chloe'].values()) // ['json','tu','zhan','chloe']

6. fill() 可以向一个已有的数组中插入全部或部分相同的值,操作的是已有数组

[0,0,0,0,0].fill(a,2,4) // [0,0,a,a,a]
[0,0,0,0,0].fill(a,2,6) // [0,0,a,a,a],超出索引长度忽略
[0,0,0,0,0].fill(a,-4,-1) //[0,a,a,a,a] ,负数索引在长度范围内可理解为反向

7. copyWithin() 按照指定范围浅复制数组中的部分内容,然后将他们插入到数组中指定位置,开始索引和结束索引和fill()计算方法相同

//copyWithin(`插入的起始位置`,`复制的起始位置默认0`,`复制的结束位置默认结尾`)
[1,2,3,4,5,6,7,8,9,0].copyWithin(5)  // [1,2,3,4,5,1,2,3,4,5]
[1,2,3,4,5,6,7,8,9,0].copyWithin(0,5) //[6,7,8,9,0,6,7,8,9,0]
[1,2,3,4,5,6,7,8,9,0].copyWithin(0,5,7) //[6,7,3,4,5,6,7,8,9,0]

8. toString() toString()返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的拼接字符串。该方法显示的转换了alert期待的参数格式,而使用alert弹出数组时会自动隐式调用toString()将参数转换所期待的格式

- ['red','blue','yellow'].toString() // red,blue,yellow
//valueOf()返回的还是数组本身
- ['red','blue','yellow'].valueOf() // ['red', 'blue', 'yellow']

9. toLocalString() 和toString()返回值相同,唯一的不同点是alert等方法会隐式调用toString(),而不是toLocalString(),除非显示的调用此方法,不会被隐式调用

10. push(),pop() 栈方法:push(),pop()可以实现类似栈的行为。①push()向数组的末尾推入元素,返回的是数组的长度,改变了原数组。②pop()删除数组的最后一项,返回被删除项,减少了原数组的length

11. shift(),unshift() 队列方法:shift(),unshift()可以实现类似队列先进后出的行为。①shift()删除数组的第一位,返回被删除项,减少了原数组的length。②unshift()在数组的开头插入元素,返回数组的长度,改变了原数组。

12. reverse(),sort() 排序方法:①reverse()将数组方法反向排序,反转数组中排序的顺序

[a,b,c,d].reverse()  // [d,c,b,a]

②默认情况下sort()会按照升序重新排列数组元素,sort()会在数组的每个元素上隐式调用String()转型函数,然后比较字符串来决定顺序,即使数组的元素都是数值也会转换成字符串再做比较,排序 sort()方法可以接受一个比较函数作为参数,如果第一个参数应该排在第二个前面就返回-1,反之返回1

[2,1,4,3,5].sort((a,b)=>{a<b?1:a>b?-1:0}) // 降序排列
[2,1,4,3,5].sort((a,b)=>{a<b?-1:a>b?1:0}) // 升序排列

如果数组的每一项是数值,可以写的更简单,用前一项减去后一项作为返回值

[2,1,4,3,5].sort((a,b)=>{a===b?0:a-b}) // 升序排列

13. concat() concat()方法首先在现有数组的全部元素的基础上创建当前数组的副本,然后再将参数添加在副本末尾,最后返回新构建的数组。原始数组不变。默认可以打平数组的深度为一层

[1,2,3].concat(4,[5,6])  //  [1,2,3,4,5,6]
// 可在参数数组上设置特殊符号Symbol.isConcatSpreadable为false,禁止打平数组深度
let ary = [5,6]
ary[Symbol.isConcatSpreadable] = false
[1,2,3].concat(ary) // [1,2,3,[5,6]]

14. slice() slice(起始操作位,终止操作位)操作不改变原数组,返回的是操作后的新数组,如果参数是负值,则用数值加上数组的长度确定操作位置

['a','b','c','d'].slice(1)   // ['b','c','d']
['a','b','c','d'].slice(1,3)  // ['b','c']

15. splice() splice()的主要目的是在数组中插入元素,可以实现数组的增,删,改。返回被删除的元素组成的新数组,会改变原始数组。

splice(`要删除的第一个元素的位置`,`要删除的元素的数量`,`要插入的元素`)

16. indexOf(),lastIndexOf(),includes()

  • indexOf(要查找的元素,开始查找的其实位置) 正向查找,返回第一个符合条件的元素的index,找不到则返回-1。
  • lastIndexOf(要查找的元素,开始查找的其实位置) 反向查找,返回第一个符合条件的元素的index,找不到则返回-1。
  • includes(要查找的元素,开始查找的其实位置) 返回布尔值。

三种方法在查找时都遵循被比较的两项严格相等

[1,2,3,4,3,2,1].indexOf(3)  // 2
[1,2,3,4,3,2,1].lastIndexOf(3)  // 4
[1,2,3,4,3,2,1].includes(3)  // true
const person = {name:'json'}
people = [{name:'json'}]
people.includes(person)  // false,对象指针不同,不符合严格相等

17. find(),findIndex() find()返回第一个匹配的元素,findIndex()返回第一个匹配元素的index

[1,2,3,4,5].find((ele,index,array)=>{ console.log(ele,index,array) return ele===2 }) //1,0,[1,2,3,4,5],2,1,[1,2,3,4,5]

18. every() 对数组每一项都运行传入的函数,如果对每一项函数都返回true,则这个方法返回true

result = [1,2,3,4].every((item,index,array)=>item>2) // false

19. filter() 对数组的每一项都运行传入的函数,将函数返回true的项组成数组返回

result = [1,2,3,4].filter((item,index,array)=>item>1) // [2,3,4]

20. forEach() 对函数的每一项都运行传入的函数,没有返回值,属于迭代器不可中断,相当于for循环操作

21. map() 对数组的每一项都运行传入的函数,返回由每次函数调用的结果构成的数组,新数组与原数组位数相同

result = [1,2,3,4].map((item,index,array)=>item * 2) // [2,4,6,8]

22. some() 对数组的每一项都运行传入的函数,如果有一项函数返回true,则这个方法返回true

result = [1,2,3,4].some((item,index,array)=>item>3) // true

23. reduce(),reduceRight() 两个方法都会迭代数组的所有项,只是遍历方向不同,返回值为归并结果

//reduce(`上一个归并值`,`当前项`,`当前项的索引`,`数组本身`)
[1,2,3,4].reduce((pre,item,index,array)=>pre+item) // 10