谈谈JavaScript中数组对象常用的方法

760 阅读4分钟

这是我参与8月更文挑战的第21天,活动详情查看:8月更文挑战

前言

如上篇文章所言,数组对象是特别常见的,所以一些数组对象的方法也需要经常复习才能做到温故而知新。所以今天我们就来谈一谈JavaScript中数组对象常用的方法。

数组转换字符串

array.join()    // 将数组的值拼接成字符串。

var arr = [1,2,3,4,5]

arr.join()   // 不传参数,默认按【,】进行拼接

arr.join("-")  // 参数是字符串类型 按【-】进行拼接

数组的增删操作

array.push(value,[value[,...]])   //将一个或多个元素添加到数组的结尾,并返回新的长度。

array.pop()   //从数组中删除最后一个元素,并返回该元素的值,改变了数组的长度

array.unshift(value,[value[,...]])   //将一个或多个元素添加到数组的开头,并返回新的长度。

array.shift()    //从数组中删除第一个元素,并返回该元素的值,改变了数组的长度

         

数组的翻转与排序

array.reverse()    // 翻转数组,返回翻转过的数组

array.sort()    // 默认排序顺序是根据字符串Unicode码点,比如如果是数字的话,排序结果是10小于2,因为比较的是第一位

var arr = [1,3,10,2,4,40,5]
arr.sort()    // [1, 10, 2, 3, 4, 40, 5]

// sort方法可以传递一个函数作为参数,这个参数用来控制数组如何进行排序
var arr = [1,2,10,4,40,5]
arr.sort(function(a,b)
    return a-b;  //按照正序
    return b-a //按照倒序
})

       

数组的拼接与截取

concat:数组合并,不会影响原来的数组,会返回一个新数组。

var arr = [1,2,3]
var arr1 = ["a","b","c"]
var newArray = arr.concat(arr1)    //[1,2,3,"a","b","c"];

slice:复制数组的一部分到一个新数组,并返回这个新数组,原来的数组不受影响,包含头,不包含尾 

var newArray = array.slice(begin, end)
var arr = [1,2,3,4,5]
arr.slice(0,3) //[1,2,3]
arr.slice(-3,-1) //[3,4]

splice: 以新元素来替换旧元素,以此来修改数组的内容,返回被替换的内容,原数组被改变

start:开始位置  deleteCount:删除的个数  items:替换的内容 

array.splice(start, deleteCount, [items[,items...])
var arr = [1,2,3,4,5]
var newArray = arr.splice(0,3,"a","b","c","d")
console.log(newArray)    //[1, 2, 3]
console.log(arr)    // ["a", "b", "c", "d", 4, 5]

数组查找元素

indexOf方法用来查找数组中某个元素第一次出现的位置,如果找不到,返回-1 

array.indexOf(search, [fromIndex])

lastIndexOf()从后面开始查找数组中元素第一次出现位置,如果找不到,返回-1  

array.lastIndexOf(search, [fromIndex])

操作数组里的元素

1、filter方法

filter方法返回一个由符合函数要求的元素组成的新数组,调用数组的filter方法,添加过滤方法,符合规则的元素会被存放到新数组里。参数说明:

  • element: 表示数组里的元素
  • index: 表示索引值
  • array: 表示传入的数组
var arr = [12,34,56,89,78,23,45,19]

var newArr = arr.filter(function(element,index,array){
    return element > 30    // 返回true表示保留该元素(通过测试),false则不保留
})
console.log(arr)     // filter方法不会改变原数组里的数据[12,34,56,89,78,23,45,19]
console.log(newArr)    // 新数组里保存符合要求的元素[34, 56, 89, 78, 45]

2、forEach() 方法

forEach() 方法对数组的每个元素执行一次提供的函数,且这个函数没有返回值。

var result = arr.forEach(function (element, index, array) {
    // 数组里的每一个元素都会被打印
    console.log("第" + index + "个元素是" + element);
})
console.log(result)   //函数没有返回值

3.some()方法

some()方法测试数组中的某些元素是否通过由提供的函数实现的测试.

result =  arr.some(function (element,index,array) {
    // 数组里否有一些元素大于50.只要有一个元素大于,就返回true
    console.log(element)    // 12,34,56
    return element > 50
})
console.log(result// true

4.every()

every()方法测试数组的所有元素是否都通过了指定函数的测试。

result =  arr.every(function (element,index,array) {
    //数组里是否每一个元素都大于50.只有在所有的数都大于50时,才返回true
    console.log(element);  //12.0个数字就已经小于50了,就没有再比较的意义了
    return element > 50
})
console.log(result)   //false

清空数组

方式1,重新赋值(推荐) 
    arr = []
方式2,长度重置
    arr.length = 0
方式3,截取
    arr.splice(0, arr.length)

后记

你好哇,我是南极大冰块,一个技术与颜值成正比的前端工程师,崇尚一针见血的搞定前端问题,希望我的博客有帮助到了你。

关注我,前端路途一起走。嘿哈~😛