数组操作的方法总结汇总

一、 数组对象的增删方法

1.unshift方法 - 修改原数组 - 给数组开头添加1个或多个元素

元素:数组.unshift(元素, 元素, ...) - 返回新数组的长度

如果需要添加多个元素直接在括号内添加用逗号隔开即可

var arr = ['a', 'b', 'c'];
var l = arr.unshift('d')   // arr.unshift('d')表示添加元素
console.log(arr);    // ['a', 'b', 'c', 'd']
console.log(l);         //检查数组长度: 4           

2.shift方法 - 修改原数组 - 将数组开头的元素删掉,无参数

语法:数组.shift() - 返回被删掉的元素

var arr = ['a', 'b', 'c'];
var ele = arr.shift()
 
console.log(arr); // ['b', 'c']
console.log(ele); // a

3.push方法 - 修改原数组 - 给数组末尾添加一个或多个元素

语法:数组.push(元素, 元素, ...) - 返回新数组长度

var arr = ['a', 'b', 'c'];
 // arr.push('d')  末尾添加一个元素
 var l = arr.push('d', 'e')  // 末尾添加多个元素  赋值给变量l用来检测数组长度
 console.log(arr); // ['a', 'b', 'c', 'd', 'e']
 console.log(l); // 5

4.pop方法 - 修改原数组 - 将数组的最后一个元素删除,无参数

语法:数组.pop() - 返回被删掉的元素

var arr = ['a', 'b', 'c'];
var ele = arr.pop()
console.log(arr); // ['a', 'b']
console.log(ele); // a

5.splice方法 - 修改原数组 - 给数组的任意一个位置添加、修改、删除 1个或多个元素

语法:数组.splice(开始下标, 删除个数, 新元素, 新元素, ...) - 返回所有被删掉的元素组成的新数组①添加1个元素

扫描二维码关注公众号,回复: 15727971 查看本文章
var arr = ['a', 'b', 'c', 'd'];
var brr = arr.splice(1, 0, 'e');
console.log(arr) // ['a', 'e', 'b', 'c', 'd']
console.log(brr) // []

②添加多个元素

var arr = ['a', 'b', 'c', 'd'];
var brr = arr.splice(1, 0, 'e', 'f')
console.log(arr);  //['a', 'e', 'f', 'b', 'c', 'd']
console.log(brr);   // 此处返回值为删除元素个数,因未删除任何元素,所以返回值是[]

③修改一个元素

var arr = ['a', 'b', 'c', 'd'];
var brr = arr.splice(1, 1, 'e')
console.log(arr) // ['a', 'e', 'c', 'd']
console.log(brr) // ['b']

④修改多个

var arr = ['a', 'b', 'c', 'd'];
var brr = arr.splice(1, 2, 'e', 'f')
console.log(arr);  // ['a', 'e', 'f', 'd']
console.log(brr);  //['b', 'c']

⑤删除1个元素
语法:数组.splice(开始下标, 删除个数) - 返回所有被删掉的元素组成的新数组

var arr = ['a', 'b', 'c', 'd'];
var brr = arr.splice(1, 1)
console.log(arr); // ['a', 'c', 'd']
console.log(brr); // ['b']

⑥删除多个

var arr = ['a', 'b', 'c', 'd'];
var brr = arr.splice(1, 2)
console.log(arr); //  ['a', 'd']
console.log(brr);  // ['b', 'c']

二、 数组对象的其他方法

1.sort方法 - 修改原数组 - 对数组中元素进行排序

语法:数组.sort()让数组中元素按照数字大小进行排序的语法 - 返回这个数组本身

var arr = [11,5,9,7,3,4,6]
 
var brr = arr.sort(function(a, b) {
//return a - b  升序
return b-a      //倒序
})
 
console.log(arr); // 输出结果从大到小排列[11, 9, 7, 6, 5, 4, 3]
console.log(brr); // [11, 9, 7, 6, 5, 4, 3]
console.log(arr === brr); // true

2.reverse方法 - 修改原数组 - 翻转数组

语法:数组.reverse() - 返回当前数组

var arr = ['a', 'b', 'c']
 
var brr = arr.reverse()
 
console.log(arr); // ['c', 'b', 'a']
 
console.log(brr);
 
console.log(arr === brr); // true

3. join方法 - 不修改原数组 -将数组中所有元素通过指定的连接符,连接成一个字符串

语法:数组.join(连接符) - 返回连接后的字符串

var arr = ['a', 'b', 'c']
var str = arr.join('-')
var str = arr.join('') // 将所有元素直接拼接在一起
var str = arr.join() // 如果省略连接符,默认使用逗号连接
console.log(str); // a,b,c
console.log(arr); //['a', 'b', 'c']

4.concat方法 - 不修改原数组 - 将1个或多个元素或数组 跟 当前数组组合成一个更大的数组

 语法:数组.concat(1个或多个元素或数组) - 返回组合后的更大的数组

var arr = ['a', 'b']
var brr = arr.concat('c', 'd')
var brr = arr.concat(['c', 'd'])
console.log(brr); // ['a', 'b', 'c', 'd', 'e', 'f']
console.log(arr) // ['a', 'b']

5.slice方法 - 不修改原数组 - 截取数组

语法:数组.slice(开始下标, 结束下标) - 返回被截取出来的一段组成的数组,结果不包含结束下标对应的字符,如果省略结束下标,就截取到数组的末尾,/在省略结束下标的基础上,还可以省略开始下标 - 从开头截取到末尾

var arr = ['a', 'b', 'c', 'd', 'e', 'f']
var brr = arr.slice(2, 5)
console.log(brr); // ['c', 'd', 'e']
console.log(arr); //['a', 'b', 'c', 'd', 'e', 'f']

6. indexOf方法 - 查找某个元素在数组中第一次出现的下标

①语法:数组.indexOf(元素) - 找到元素就返回对应的下标,找不到元素就返回-1

var arr = [1,5,9,1,3,6,8,7] // 找 10 在arr中第一次出现的下标
var index = arr.indexOf(10)
console.log(index) // -1

②语法:数组.indexOf(元素, 开始查找的下标) - 找到元素就返回对应的下标,找不到元素就返回-1

var arr = [1,5,9,1,3,6,8,7] // 找 10 在arr中第一次出现的下标
var index = arr.indexOf(1, 2)
console.log(index); //3

7.lastIndexOf - 查找某个元素在数组中最后一次出现的下标 - 语法和返回值跟indexOf是一样的

8.map方法 - 修改原数组 - 遍历数组,并将数组中每个元素都处理成新的元素,将所有新元素组成新的数组

语法:

var brr = 数组.map(function(value, index) {

    value表示遍历出来的每个元素

    index是每个value对应的下标 - 可选项

    return 新元素

})

var arr = [
{
 name: '张三',
  age: 12
},
 {
name: '李四',
age: 15
 },
]
var brr = arr.map(function(v) {
v.age = v.age + 1
return v
})
console.log(brr);
console.log(arr)

9.filter方法 - 不修改原数组 -  将数组中满足条件的所有元素组成新的数组返回

语法:

var brr = 数组.filter(function(value, index) {

value表示遍历出来的每个元素

index是每个value对应的下标 - 可选项

return 条件

})

var arr = [50,65,88,76,35,24]
 
var brr = arr.filter(function(v) {
 
 return v < 60
 
})
 
console.log(brr); //[50, 35, 24]
console.log(arr) //[50, 65, 88, 76, 35, 24]

10.forEach方法 - 专业用来遍历数组的

 语法:

数组.forEach(function(value, index) {

value表示每个值

index表示每个下标

})

var arr = ['a', 'b', 'c']
 
arr.forEach(function(v, i) {
 
 // if(i === 1) {
 
  // break // forEach方法中不能使用break和continue关键字
 
 // }
 
console.log(v, i);
 
})

11.some - 判断数组中是否有一个元素是满足条件的 —— 返回布尔值

语法 布尔值 = 数组.some( function (value, index ) ){ return }

var arr = [10, 20, 30, 50, 40, 80, 99, 100]
var bool = arr.some(function(v){
    return v > 90
})
console.log(bool) // true

12.every  -  判断数组中是否所有元素都满足指定条件  -  返回布尔值

语法:布尔值  =  数组.every(function(vaindex)){  return  条件  }

var arr = [10, 20, 30, 50, 40, 80, 99, 100]
var bool = arr.every(function(v) {
    return v > 60  //判断条件
})
console.log(bool);   //false

13.find - 查找数组中第一个满足指定条件的元素,找到了就会返回元素,找不到就返回undefined

语法:元素 = 数组.find(function(value, index) {  return 条件 })

var arr = [10, 20, 30, 50, 40, 80, 99, 100]
var ele = arr.find(function(v) {
 return v > 60
// return v > 100 // undefined
})
console.log(ele); //80

14.findIndex - 查找数组中满足指定条件的第一个元素对应的下标,找到了就会返回下标,找不到就返回-1

语法:下标 = 数组.findIndex ( function (value, index) { return  条件 })

var arr = [10, 20, 30, 50, 40, 80, 99, 100]
var index = arr.findIndex(function(v) {
return v > 60
// return v > 100
})
console.log(index);  //5

15.reduce - 归并数组 - 数组求和

语法:

数组.reduce(function(a, b) {

reduce遍历数组,会少遍历一次

a第一次遍历,代表第一个元素,第二次开始,就代表上次遍历return的结果

b第一次遍历,代表第二个元素,第二次遍历,代表第三个元素,第三次遍历,代表第4个元素...

})

var arr = [10, 20, 30, 50, 40, 80]
var sum = arr.reduce(function(a, b) {
return a + b
})
console.log(sum) //230

猜你喜欢

转载自blog.csdn.net/qq_37485170/article/details/130267501