目录
下一篇跳转链接 : 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 )