跟我走进JavaScript(四)

327 阅读5分钟

JavaScript之数组

先导

  1. 数组对象
  2. 新建数组的方式
  3. 数组删除的方式
  4. 数组查询的方法
  5. 数组增加的方法
  6. 关于数组的高阶函数

数组对象

数组是一种特殊的对象,数组的类型也属于Object.
典型的数组特点:
1.元素的数据类型相同
2.使用连续的内存存储
3.通过数字下标获取元素
JavaScript数组特点:
1.元素的数据类型可以不同
2.内存不一定是连续的(对象是随机存储的)
3.不能通过数字下表,而是通过字符串下标
通过以上的特点意味着数组可以有任意的key值,可能有人认为我们在取数组的时候明明用的是数字1.2.3等去取,但是其实都是通过字符串去取到的数组中对应的值

新建数组的方法

普通的创建数组的方法如下:

let arr = [1,2,3]; // 创建数组中还有1,2,3的数组
let arr1 = new Array(1,2,3)// 创建数组中还有1,2,3的数组
let arr2 = new Array(3// 创建还有3个值的数组

在创建数组的方式中还可以通过一些方法进行转化,如下:

let arr = '1,2,3'.split(','//将字符串1,2,3用逗号分隔开创建数组;
let arr1 = '123'.split(''// 将字符串直接拆分成数组;
Array.from('123'// 尝试将字符串转换为数组,这里的转换也可以是伪数组(伪数
组的原型链中没有数组的原型,就是说没有数组共有属性的数组就是伪数组)
Array.from({0:'a',1:'b',2:'c',length:3}); // 此转换的方法就是将伪数组转
换成数组

还可以通过concat方法将两个数组拼成新数组

arr.concat(arr1) //将arr1的数组和arr的数组拼接到一起,返回新的数组

切除数组

arr.slice(3//获取arr数组第3个以后的数组

复制数组

arr.slice(0//截取数组的全部内容,换而言之就是复制数组

数组删除的方式

delete arr[1] // 该方法可以直接删除,但是仅删除下标为1的数据,并不会改变数组的长度
arr.shift() // 删除最前面的数据(会改变原数组)
arr.pop() // 删除最后的数据(会改变原数组)
arr.splice(2,1// 从下标为2的地方删除一个(删除自己),返回的为删除值
arr.splice(2,1,'x') // 删除当前下标的同时增加x,改变原数组

数组查询的方法

Ojbect.keys(arr); // 查所有的key值
Ojbect.values(arr); // 查所有key对应的值
arr.forEach(function(item,index) {console.log(`{index}: {item}`)}) 
//查看数组属性名对应的属性值

在数组中,由于数组的下标值是从0开始,所以当要查询以arr.length为下标时的数组时,值为undefined

arr.indexOf(数值) //在arr数组中查询数值所在的索引值,若没有查询到返回-1,若查询到则返回下标值
arr.find(x => x%5 === 0// 只要有一次为true,返回数值,只返回第一次出现的值,若没有的话则返回undefined

数组增加的方法

arr.push() // 在数组的尾部添加元素
arr.unshift() // 在数组的头部添加元素
arr.splice(index,0,'x') // 在index处插入'x'元素
arr.splice(index,0,'x','y') // 在index处插入多个元素可以.

在数组中还有一个api用来反转数组的顺序,使用方法如下:

arr.reverse() // 这样可以将数组顺序反转

在数组中可以使用sort进行数组排序,但是排序的顺序仅为unicode编码的排序顺序,需要方法中传入一个函数即可正确的排序

function compare (x,y) {
  if(x >y) {
  return 1
  } else if (x === y) {
  return 0
  } else {
  return -1
  }
}
arr.sort(compare)

关于数组的高阶函数

// map函数
arr.map(item => item*item) // arr为一个数组,此函数会将数组中的每一项遍历出来,然后和自己相乘,最后返回一个新的数组,该方法会让n个数组变为n个数组
// filter函数
arr.filter(item => item % 2 === 0// arr为一个数组,此函数会将数组中的每一项遍历出来,然后函数内的条件做对比,若返回true,则会返回一个新数组,包含这个返回true元素.该方法会让n个数组变少
// reduce函数
arr.reduce((result,item) => {return result + item},0//arr为一个数组,该方法会将数组中的每一项遍历出来,然后设定一个初始值,该实例中初始值为0,然后逐个相加,最后返回一个值,该方法会让n个数组变成一个返回值

以上提到的三个函数,都各有其用处,在项目实战中的用处比较大,若读者看到有需要遍历的情况下可以考虑一下这三个函数的用处

总结

博主关于JavaScript总结出了4篇文章供读者参考,其中还有很多未涉及到的内容,例如原型,变量提升,call,apply等一些内容,在以后的博客中博主若有实际应用场景,将会为大家提供参考.谢谢阅读本篇文章.
记得持续学习,不断跟进!加油!