JavaScript_数组常用方法( 1 )

雨季mo浅忆

已于 2022-07-26 15:20:20 修改

阅读量242

点赞数 1

分类专栏：前端 JavaScript 文章标签：前端 JavaScript

于 2021-07-11 18:50:06 首次发布

本文链接：https://blog.csdn.net/weixin_58099903/article/details/118656369

版权

前端同时被 2 个专栏收录

159 篇文章 29 订阅

订阅专栏

JavaScript

30 篇文章 0 订阅

订阅专栏

下一篇跳转链接 : JavaScript_数组常用方法( 2 )

什么是数组常用方法 ?
+ 就是 JS 提供给我们专门用来操作 数组 [ ] 的方法

为什么会有数组常用方法 ?

          => 因为数组是一个有序的集合

          => 当你想从中间插入一些数据的时候, 会很不方便

          => 删除数组中的某一个数据时也很不方便

=> 例子: [10, 30, 20, 40, 50]

          => 想去掉 10 这个数据

          => arr[0] = arr[1]

          => arr[1] = arr[2]

          => arr[2] = arr[3]

          => arr[3] = arr[4]

          => arr.length -= 1

+ 所有数组常用方法的语法 :

          => 数组名.xxx( )

          => 区别: 方法名 不一样, 小括号里面传递的参数不一样

+ 注意 : 数组和伪数组的区别

          => 因为伪数组不能使用数组常用方法

数组常用方法 1 :

// 0. 准备一个数组
var arr = [10, 20, 30]
console.log('原始数组 : ', arr)    // 原始数组 :  (3) [10, 20, 30]

1. push( )

        => 语法 : 数组.push('数据')

        => 作用 : 向数组的末尾追加数据

        => 返回值 : 添加数据以后, 数组最新的 **长度** length + ( 会改变原始数组 )
// 1. push()
// 把 '新来的' 这个数据追加到 arr 数组的末尾
var res = arr.push('新来的')
console.log('push 以后 : ', arr)  // [10, 20, 30, "新来的"]
console.log('返回值 : ', res)     // 返回值 :  4

2. pop( )

        => 语法: 数组.pop( )

        => 作用: 删除数组的最后一个数据

        => 返回值: 被删除的数据 + ( 会改变原始数组 )
// 2. pop()
// 删除数组的最后一个数据
var res = arr.pop()
console.log('pop 以后 : ', arr)   // [10, 20]
console.log('返回值 : ', res)     // 返回值 :  30

3. unshift( )

        => 语法: 数组.unshift('数据')

        => 作用: 向数组的 最前面 添加一个数据

        => 返回值: 添加数据以后, 数组最新的 **长度**length + ( 会改变原始数组 )
// 3. unshift()
// 向数组的最前面添加一个 '新来的'
var res = arr.unshift('新来的')
console.log('unshift 以后 : ', arr)   // ["新来的", 10, 20, 30]
console.log('返回值 : ', res)         // 返回值 :  4

4. shift( )

        => 语法: 数组.shift( )

        => 作用: 删除数组最前面一个数据

        => 返回值: 被删除的数据 + ( 会改变原始数组 )
// 4. shift()
// 删除数组最前面一个数据
var res = arr.shift()
console.log('shift 以后 : ', arr)   // [20, 30]
console.log('返回值 : ', res)       // 返回值 :  10

5. reverse( )

        => 语法: 数组.reverse( )

        => 作用: 反转数组

        => 返回值: 反转后的数组 + ( 会改变原始数组 )

// 5. reverse()
var arr = [ '你好', '世界', 'hello', 'world' ]
console.log('原始数组 : ', arr)    // ["你好", "世界", "hello", "world"]
// 把 arr 数组颠倒过来
var res = arr.reverse()
console.log('reverse 以后 : ', arr)// ["world", "hello", "世界", "你好"]
console.log('返回值 : ', res)      // ["world", "hello", "世界", "你好"]

6. sort( )

        => 语法:

          -> 数组.sort( )

            + 把每一个数据一位一位的来看待, 按照 顺序排列

          -> 数组.sort(function (a, b) { return a - b })

            + 把所有数据按照 升序排列

          -> 数组.sort(function (a, b) { return b - a })

            + 把所有数据按照 降序排列

        => 作用: 对数组进行排序

        => 返回值: 排序后的数组 + ( 会改变原始数组 )

// 6. sort()
var arr = [ 1, 23, 32, 20, 19, 10, 3, 5, 43 ]
console.log('原始数组 : ', arr) // [1, 23, 32, 20, 19, 10, 3, 5, 43]

语法 1 : 按照一个数字的第一个字符的大小去做比较，然后再用第二个字符去做比较，小的在前面

// 语法1: 一位一位看待
var res = arr.sort()
console.log('排序之后 : ', arr) // [1, 10, 19, 20, 23, 3, 32, 43, 5]
console.log('返回值 : ', res)   // [1, 10, 19, 20, 23, 3, 32, 43, 5]

// 语法2: 升序排列
var res = arr.sort(function (a, b) { return a - b })
console.log('排序之后 : ', arr) // [1, 3, 5, 10, 19, 20, 23, 32, 43]
console.log('返回值 : ', res)   // [1, 3, 5, 10, 19, 20, 23, 32, 43]

// 语法3: 降序排列
var res = arr.sort(function (a, b) { return b - a })
console.log('排序之后 : ', arr) // [43, 32, 23, 20, 19, 10, 5, 3, 1]
console.log('返回值 : ', res)   // [43, 32, 23, 20, 19, 10, 5, 3, 1]

数组的 sort 方法里面的参数是一个 回调函数 ，有两个值，返回值如果是第一个值减去第二个值那么就是 从小到大 排序，如果是第二个值减去第一个值就是 从大到小 排序

7. splice( )

        => 语法:

          -> 数组.splice(开始索引, 多少个)

          -> 数组.splice(开始索引, 多少个, 要插入的数据)

            数据: 指的是要插入到原始数组中的数据

            注意: 从哪个索引开始删除, 就从哪一个索引位置开始插入

        => 作用: 截取数组中的部分数据, 并且选择性的插入数据内容

        => 返回值: **必然是一个新的数组** + ( 会改变原始数组 )

          -> 如果你截取了内容, 那么截取多少新数组里面就有多少内容

          -> 如果你没有截取内容, 那么就是一个空的新数组

// 7. splice()
var arr = [10, 20, 30, 40, 50]
//          0   1   2   3   4
console.log('原始数组 : ', arr)   // [10, 20, 30, 40, 50]

// 语法1: 直接截取
// 表示从 索引[1] 开始, 截取 两个数据
var res = arr.splice(1, 2)
console.log('splice 以后 : ', arr)// [10, 40, 50]
console.log('返回值 : ', res)     // [20, 30]

// 语法2: 截取内容, 并插入新内容
// 表示从原始数组中 [1] 开始截取 两个数据, 并且把 '新来的' 插入到 [1] 位置
var res = arr.splice(1, 2, '新来的')
console.log('splice 以后 : ', arr)// [10, "新来的", 40, 50]
console.log('返回值 : ', res)     // [20, 30]

// 小练习 :

// var res = arr.splice(1, 0, '新来的') // 从索引 1 开始，删除 0 个，插入 '新来的'

// [10, 20, '新来的', 30, 40, 50] false

// [10, '新来的', 20, 30, 40, 50] true ( 正确打印结果 )

=============== 以上 7 个数组常用方法, 会直接对原始数组进行修改 =================

============ 以下 5 个方法, 不会改变原始数组, 以返回值的形式给到结果 =============

8. concat( )

        + 语法: 数组.concat(数据或者数组, ...)

        + 作用: 进行数组的拼接

        + 返回值: 拼接好的数组

        + 注意: 不会改变原始数组

// 8. concat( )
var arr = [ 'hello', 'world' ]
console.log('原始数组 : ', arr)    // ["hello", "world"]
// 会把 '新来的' 这个数据拼接在数组的末尾
var res = arr.concat([ 10, 20 ])
console.log('concat 之后 : ', arr) // ["hello", "world"]
console.log('返回值 : ', res)      // ["hello", "world", 10, 20]

9. join( )

        + 语法: 数组.join('连接符')

          => 参数 '连接符' 不写, 默认使用 逗号( , ) 连接

        + 作用: 使用连接符把数组内的每一项连接在一起成为一个字符串

        + 返回值: 连接好的 字符串

        + 注意: 不会改变原始数组, 返回值是一个 字符串 类型

数组 [ ] 转字符串 " " 的常用方法

  <script>
    // 9. join()
    var arr = [10, 20, 30]
    console.log('原始数组 : ', arr)       // 原始数组 : [10, 20, 30]
    // 开始连接
    var res = arr.join()
    console.log('join 之后 : ', arr)      // join 之后 : [10, 20, 30]
    console.log('返回值 : ', res)         // 返回值 : 10,20,30
    console.log('返回值 : ', typeof res)  // 返回值 : string
    // 开始连接
    // var res = arr.join('^_^')
    // console.log('join 之后 : ', arr)      // join 之后 : [10, 20, 30]
    // console.log('返回值 : ', res)         // 返回值 : 10^_^20^_^30
    // console.log('返回值 : ', typeof res)  // 返回值 : string
  </script>

10. slice( )

          + 语法: 数组.slice(开始索引, 结束索引)

            => 开始索引: 默认值是 0

            => 结束索引: 默认值是 length

          + 特点:

            => 包前不包后 , 包含开始索引, 不包含结束索引

            => 可以填写负整数, 表示倒数第几个,

              当你填写负整数的时候, 等价于负整数 + length

          + 作用: 截取数组, 从数组内复制一些内容出来

          + 返回值: **必然是一个 新数组**

            => 如果你截取了数据, 那么截取多少个, 新数组内就有多少个数据

            => 如果你没有截取数据, 那么就是一个空的数组

          + 注意: 不会改变原始数组

// 10. slice( )
var arr = [ 10, 20, 30, 40, 50 ]
//           0   1   2   3   4
console.log('原始数组 : ', arr)   // [10, 20, 30, 40, 50]
// 表示从 [1] 开始截取到 [4], 包含 [1] 位置, 不包含 [4] 位置
var res = arr.slice(1, 4)
console.log('slice 之后 : ', arr) // [10, 20, 30, 40, 50]
console.log('返回值 : ', res)     // [20, 30, 40]

// 第一个参数也可以不写, 表示 [0]
var res = arr.slice()
console.log('slice 之后 : ', arr) // [10, 20, 30, 40, 50]
console.log('返回值 : ', res)     // [10, 20, 30, 40, 50]

// 第二个参数可以不写, 表示从 [2] 直接到数组的末尾
var res = arr.slice(2)
console.log('slice 之后 : ', arr) // [10, 20, 30, 40, 50]
console.log('返回值 : ', res)     // [30, 40, 50]

// 因为 length === 5
// 我们填写的 -2 就等价于 5 + -2 得到 3
// 表示从 [1] 截取到 [arr.length + -2]
var res = arr.slice(1, -2)
console.log('slice 之后 : ', arr) // [10, 20, 30, 40, 50]
console.log('返回值 : ', res)     // [20, 30]

// 表示从 [arr.length + -4] 截取到 [arr.length + -2]
// 其实就是表示的从 [1] 截取到 [3] , 包含[1], 不包含[3]
var res = arr.slice(-4, -2)
console.log('slice 之后 : ', arr) // [10, 20, 30, 40, 50]
console.log('返回值 : ', res)     // [20, 30]

11. indexOf( )

          + 语法:

          -> 数组.indexOf(数据)

          -> 数组.indexOf(数据, 开始索引)

            => 开始索引选填, 默认值是 0

          + 作用: 从开始索引向后检索该数组中是否有该数据

          + 返回值:

            => 如果数组内检索到了该数据, 那么就是该数据第一次出现的 索引位置

            => 如果数组内没有检索到该数据, 那么就是  -1

          + 注意: 不会改变原始数组

// 11. indexOf( )
var arr = [ 10, 20, 30, 40, 50, 30, 40, 30 ]
//           0   1   2   3   4   5   6   7
console.log('原始数组 : ', arr)   // [10, 20, 30, 40, 50, 30, 40, 30]
// 从 arr 数组里面查询出现的第一个 30 这个数据的索引位置
var res = arr.indexOf(30)
console.log('indexOf 以后 : ', arr) // [10, 20, 30, 40, 50, 30, 40, 30]
console.log('返回值 : ', res)     // 2

// 从 [3] 开始向右查询 30 出现的第一次
var res = arr.indexOf(30, 3)
console.log('indexOf 以后 : ', arr) // [10, 20, 30, 40, 50, 30, 40, 30]
console.log('返回值 : ', res)     // 5

// 在 arr 这个数组中从 [0] 开始, 向后检索, 100 这个数据是否存在
var res = arr.indexOf(100)
console.log('indexOf 以后 : ', arr) // [10, 20, 30, 40, 50, 30, 40, 30]
console.log('返回值 : ', res)     // -1

场景题 ：也是工作中遇到的问题：

举例：

有两个已知得到的数组（ allAnswerArray 和  answerArray ），

数组 allAnswerArray ：是所有需要回答的必答选项在里面，

数组 answerArray  ：是所有已经回答过的选项都在里面，

那么如何比对两个数组，把这两个数组内不一样的数据内容过滤拿出来

从而得到未回答的选项内容的数组呢？

假设：

[ 1, 2, 3, 4, 5 ] 是已知所有需要回答的数组

[ 1, 2 ] 是已知所有已经回答了的数组

现在需要拿到两个数组内不一样的数据  [ 3, 4, 5 ]

代码实现：（推荐前两种方法）

最简便的方法： ( 利用 filter + indexOf )
let allAnswerArray = [ 1, 2, 3, 4, 5 ]
let answerArray = [ 1, 2 ]
const getArrDifference = (allAnswerArray, answerArray) => {
  return allAnswerArray.filter((item) => answerArray.indexOf(item) === -1)
}
方法二：（利用 indexOf + lastIndexOf ）
getArrDifference(arr1, arr2) {
    return arr1.concat(arr2).filter(function(v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v);
    });
}
方法三：（双重 for 循环）
getArrEqual(arr1, arr2) {
    let newArr = [];
    for (let i = 0; i < arr2.length; i++) {
        for (let j = 0; j < arr1.length; j++) {
            if(arr1[j] === arr2[i]){
                newArr.push(arr1[j]);
            }
        }
    }
    return newArr;
},

12. lastIndexOf( )

        + 语法:

          -> 数组.lastIndexOf(数据)

          -> 数组.lastIndexOf(数据, 开始索引)

          => 开始索引选填, 默认值是 length

        + 作用: 从开始索引向前( 从右向左 )检索该数据在数组中出现的第一次的 索引位置

        + 返回值:

          => 如果检索到了该数据, 那么就是该数据第一次出现的索引位置

          => 如果没有检索到该数据, 那么就是  -1

        + 注意:

          => 不会改变原始数组

          => 不会改变索引位置
lastIndexOf()  从右向左查找
lastIndexOf(search, start) 方法接收 search 和 start 两个参数 ，
返回 search 第一次出现的位置 ，如果没有找到则返回 -1 
search 参数表示要搜索的项 ； 使用严格相等运算符（ === ）进行比较
start  表示该搜索的开始位置 ，该方法会隐式调用 Number() 转型函数 ，
将 start 非数字值 ( undefined 除外 ) 转换为数 。
若忽略该参数或该参数为 undefined 或 NaN 时 ，start = 0 
与字符串的 lastIndexOf() 方法不同 ，当 search 方法为 负数 时 ，
search = max(0, length + search)

// 12. lastIndexOf( )
var arr = [ 10, 20, 30, 40, 50, 30, 40, 30 ]
//           0   1   2   3   4   5   6   7
console.log('原始数组 : ', arr)   // [10, 20, 30, 40, 50, 30, 40, 30]
// 从数组的末尾开始, 向前检索 30 这个数据在 arr 数组里面第一次的索引位置
var res = arr.lastIndexOf(30)
console.log('lastIndexOf 以后 : ', arr) // [10, 20, 30, 40, 50, 30, 40, 30]
console.log('返回值 : ', res)     // 7

// 从 [6] 开始向前查找 30 这个数据在 arr 数组里面第一次的索引位置
var res = arr.lastIndexOf(30, 6)
console.log('lastIndexOf 以后 : ', arr) // [10, 20, 30, 40, 50, 30, 40, 30]
console.log('返回值 : ', res)     // 5

// 从数组的末尾开始, 向前检索 100 这个数据是否存在
var res = arr.lastIndexOf(100)
console.log('lastIndexOf 以后 : ', arr) // [10, 20, 30, 40, 50, 30, 40, 30]
console.log('返回值 : ', res)     // -1

splice 和 slice 的区别

        1. 改变原始数组

          => splice 改变 => 返回值 : ** 新数组 **

          => slice 不改变 => 返回值 : ** 新数组 **

        2. 功能

          => splice 可以插入数据 => 数组.splice(开始索引, 多少个, 要插入的数据)

          => slice 不可以插入数据 => 数组.slice(开始索引, 结束索引)

        3. 参数

          => splice(开始索引, 多少个)

          => slice(开始索引, 结束索引)

图例 :

下一篇跳转链接 : JavaScript_数组常用方法( 2 )

雨季mo浅忆

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_数组常用方法( 1 )

目录数组常用方法 1 :1.push( )2.pop( )3.unshift( )4.shift( )5.reverse( )6.sort( )7.splice( )什么是数组常用方法+ 就是 JS 提供给我们专门用来操作数组的方法
复制链接

扫一扫

专栏目录