JS数组常用的几种方法

数组的常用方法

1、push() 后增加

push，压栈，相当于在数组的末尾加上一个元素

eg：

var arr = [1, 2, 3]

// 使用 push 方法追加一个元素在末尾
arr.push(4)

console.log(arr) // [1, 2, 3, 4]

2、pop() 后删除

pop出栈，相当于从数组的末尾删除一个数据

eg：

var arr = [1, 2, 3]

// 使用 pop 方法删除末尾的一个元素
arr.pop()

console.log(arr) // [1, 2]

3、unshift() 前增加

unshift方法可以在数组的最前面加上一个元素，即往数组的索引为0的位置加上一个元素，原有的数组元素的索引均往后移一位

eg：

var arr = [1, 2, 3]

// 使用 unshift 方法想数组的最前面添加一个元素
arr.unshift(4)

console.log(arr) // [4, 1, 2, 3]

4、shift() 前删除

shift可以用来删除数组最前面的一个元素

eg：

var arr = [1, 2, 3]

// 使用 shift 方法删除数组最前面的一个元素
arr.shift()

console.log(arr) // [2, 3]

5、splice() 截取

splice方法用于截取数组中某些内容，可以用于删除数组中某些元素

语法：splice（要截取的索引位置，截取的元素个数，替换新的元素(可不写)）

eg:

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

// 使用 splice 方法截取数组
arr.splice(1, 2)// 表示从索引 1 开始截取 2 个内容第
                //第三个参数没有写，就是没有新内容替换掉截取位置
console.log(arr) // [1, 4, 5]

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

// 使用 splice 方法截取数组
arr.splice(1, 2, '我是新内容')

console.log(arr) // [1, '我是新内容', 4, 5]

• arr.splice(1, 2, '我是新内容') 表示从索引 1 开始截取 2 个内容
• 然后用第三个参数把截取完空出来的位置填充

6、reverse() 反转

是用来反转数组使用的

var arr = [1, 2, 3]

// 使用 reverse 方法来反转数组
arr.reverse()

console.log(arr) // [3, 2, 1]

7、sort() 排序

var arr = [2, 3, 1]

// 使用 sort 方法给数组排序
arr.sort()

console.log(arr) // [1, 2, 3]

默认的是从小到大排序，相当于如下 ⬇

var arr = [2, 3, 1]

// 使用 sort 方法给数组排序
arr.sort(function(a,b){
    
    return a - b;
    
})

console.log(arr) // [1, 2, 3]

从大到小排序时应该改成: ⬇

var arr = [2, 3, 1]

// 使用 sort 方法给数组排序
arr.sort(function(a,b){
    
    return b - a;
    
})

console.log(arr) // [1, 2, 3]

8、concat() 数组拼接不改变原数组

var arr = [1, 2, 3]

// 使用 concat 方法拼接数组
var newArr = arr.concat([4, 5, 6])

console.log(arr) // [1, 2, 3]
console.log(newArr) // [1, 2, 3, 4, 5, 6]

9、join()

• join 是把数组里面的每一项内容链接起来，变成一个字符串

• 可以自己定义每一项之间链接的内容 join(要以什么内容链接)

• 不会改变原始数组，而是把链接好的字符串返回

  var arr = [1, 2, 3]
  
  // 使用 join 链接数组
  var str = arr.join('-')
  
  console.log(arr) // [1, 2, 3]
  console.log(str) // 1-2-3
  

  ES5 中常见的数组常用方法

• 之前我们讲过的数组常用方法都是 ES3 的方法

• 今天来说一些 ES5 中的方法

1.2.1. indexOf

• indexOf 用来找到数组中某一项的索引

• 语法： indexOf(你要找的数组中的项)

  var arr = [1, 2, 3, 4, 5]
  
  // 使用 indexOf 超找数组中的某一项
  var index = arr.indexOf(3)
  
  console.log(index) // 2
  

  • 我们要找的是数组中值为 3 的那一项
  • 返回的就是值为 3 的那一项在该数组中的索引

• 如果你要找的内容在数组中没有，那么就会返回 -1

  var arr = [1, 2, 3, 4, 5]
  
  // 使用 indexOf 超找数组中的某一项
  var index = arr.indexOf(10)
  
  console.log(index) // -1
  

  • 你要找的值在数组中不存在，那么就会返回 -1

1.2.2. forEach

• 和 for 循环一个作用，就是用来遍历数组的

• 语法：arr.forEach(function (item, index, arr) {})

  var arr = [1, 2, 3]
  
  // 使用 forEach 遍历数组
  arr.forEach(function (item, index, arr) {
    // item 就是数组中的每一项
    // index 就是数组的索引
    // arr 就是原始数组
    console.log('数组的第 ' + index + ' 项的值是 ' + item + '，原始数组是', arr)
  })
  

  • forEach() 的时候传递的那个函数，会根据数组的长度执行
  • 数组的长度是多少，这个函数就会执行多少回

1.2.3. map

• 和 forEach 类似，只不过可以对数组中的每一项进行操作，返回一个新的数组

  var arr = [1, 2, 3]
  
  // 使用 map 遍历数组
  var newArr = arr.map(function (item, index, arr) {
    // item 就是数组中的每一项
    // index 就是数组的索引
    // arr 就是原始数组
    return item + 10
  })
  
  console.log(newArr) // [11, 12, 13]
  

1.2.4. filter

• 和 map 的使用方式类似，按照我们的条件来筛选数组

• 把原始数组中满足条件的筛选出来，组成一个新的数组返回

  var arr = [1, 2, 3]
  
  // 使用 filter 过滤数组
  var newArr = arr.filter(function (item, index, arr) {
    // item 就是数组中的每一项
    // index 就是数组的索引
    // arr 就是原始数组
    return item > 1
  })
  
  console.log(newArr) // [2, 3]
  

  • 我们设置的条件就是 > 1
  • 返回的新数组就会是原始数组中所有 > 1 的项