数组常用方法总结 01_数组常用方法
=> 数组基础方法
=> push() 在尾部追加
=> pop() 删除最后一个数据
=> unshift() 最前面插入数据
=> shift() 删除最前面的数据
02_数组常用方法
=> ES3.0, IE 6 7 8 可以是使用
=> reverse() 反转数组
=> sort() 数组排序
=> splice() 1.截取数组,2.替换新内容
=> join() 把每一个数据用连接符连接起来
=> slice() 获取数组中的某些数据
=> concat() 如果参数是数组, 那么把数组拆开, 里面每一项追加到原数组后面
如果参数数数据, 那么直接追加
03_数组常用方法
ES5.0, IE 6 7 8 不好使了
=> indexOf() 正向查看数组里面指定这个数据的索引
=> lastIndexOf() 反向查看数组里面指定这个数据得索引
=> forEach() 取代 for 循环得作用, 遍历数组
=> map() 映射数组
=> fliter() 过滤原始数组中得数据, 把满足条件得放在新数组里面
=> every() 判断原始数组里面是不是每一个都满足条件(true/false)
=> some() 判断数组中是不是有某一个满足条件(true/false)
04_数组常用方法
ES2015(ES6) 以后, 标准浏览器, IE 10 以上
=> fill() 使用指定数据区填充数组
=> copyWithin() 使用数组里面得内容替换数组里面得内容
=> includes() 查看数组中是不是有某一个数据
=> flat() 拍平数组
=> flatMap() 拍平数组, 但是只能拍一层
=> find() 根据条件找到数组里面满足条件得数据
=> findIndex() 根据条件找到数组里面满足条件得数据
数组常用方法 就是 JS 自带一些操作数组得方法
常用方法得使用格式, 必须是 数组.xxx()
+ 数组和伪数组得区别
=> length 和 索引都一样, 循环遍历都一样
=> 长得也一样
=> 唯独数组常用方法, 伪数组同不了
1. push() => 语法: 数组.push(数据1, 数据2, 数据3, …) => 作用: 把所有得参数按照顺序追加到数组得末尾位置 => 返回值: 追加以后数组得长度 => 直接操作原始数组
var arr = ['hello', 'world', '你好', '世界'] var res = arr.push('新来的', '新来的2', [10, 20]) console.log(res) console.log(arr)
2. pop() => 语法: 数组.pop() => 作用: 删除数组得最后一个数据 => 返回值: 被删除得数据 => 直接操作原始数组
var arr = ['hello', 'world', '你好', '世界'] var res = arr.pop() console.log(res) console.log(arr)
3. unshift() => 语法: 数组.unshift(数据1, 数据2, 数据3, …) => 作用: 从数组得最前面插入一些数据 => 返回值: 插入后得数组长度 => 直接操作原始数组
var arr = ['hello', 'world', '你好', '世界'] var res = arr.unshift('新来的', '新来的2') console.log(res) console.log(arr)
4. shift() => 语法: 数组.shift() => 作用: 删除数组得最前面一个数据 => 返回值: 被删除得数据 => 直接操作原始数组
var arr = ['hello', 'world', '你好', '世界'] var res = arr.shift() console.log(res) console.log(arr)
5. reverse() => 语法: 数组.reverse() => 作用: 反转数组 => 返回值: 反转后得数组 => 直接操作原始数组
var arr = ['hello', 'world', '你好', '世界'] var res = arr.reverse() console.log(res) console.log(arr)
6. sort() => 语法:
1. arr.sort()
-> 按照每一个数据中得每一位数据得 ASCII 码进行排列
2. arr.sort(function (a, b) { return a - b })
-> 升序排列
3. arr.sort(function (a, b) { return b - a })
-> 降序排列
=> 作用: 数组排序
=> 返回值: 排序后得数组
=> 直接操作原始数组
var arr = [1, 11, 33, 26, 51, 19, 32, 27, 15, 100]
var res = arr.sort()
console.log(res)
console.log(arr)
var res = arr.sort(function (a, b) { return a - b })
console.log(res)
console.log(arr)
var res = arr.sort(function (a, b) { return b - a })
console.log(res)
console.log(arr)
7. splice() => 语法: 1.数组.splice(开始索引, 多少个) -> 从开始索引, 截取多少个 -> 第二个参数可以不写, 直接到末尾 2.数组.splice(开始索引, 多少个, 替换数据1, 替换数据2, 替换数据3, ...) -> 把替换数据按照顺序插入到你截取得位置 -> 注意: **从哪个索引开始删除, 替换数据得第一个就插入哪个位置** => 作用: 有两个 1.截取数组 2.替换新内容 => 返回值: 一定是一个数组 -> 如果你截取多个数据, 数组里面有多个 -> 如果你说截取一个数据, 数组里面有一个 -> 如果你一个都不截取, 那么是一个空数组 => 直接操作原始数组
var arr = ['hello', 'world', '你好', '世界']
var res = arr.splice(1, 2)
console.log('res: ', res)
console.log('arr: ', arr)
var res = arr.splice(1, 0, '新来的', '新来的2')
console.log('res: ', res)
console.log('arr: ', arr)
// ['hello', 'world', '新来的', '你好', '世界']
// ['hello', '新来的', 'world', '你好', '世界']
8. concat() => 语法: 数组.concat(数组1, 数据2, ...)
=> 作用:
-> 如果参数是数组, 那么把数组拆开, 里面每一项追加到原数组后面
-> 如果参数数数据, 那么直接追加
=> 返回值: 追加好得数组
=> 不改变原始数组
var arr = ['hello' , 'world' , '你好' , '世界' ] var res = arr.concat ([10 , 20 ], [30 , 40 ], 100 ) console .log (res) console .log (arr)
9. slice() => 语法:
1. 数组.slice(开始索引, 结束索引) - 包前不包后
-> 第一个参数可以不写, 表示从头
-> 第二个参数可以不写, 表示到尾
2. 数组.slice(开始索引, 结束索引) - 包前不包后
-> 参数可以写一个负整数
-> 当你书写了一个负整数以后, 表示 length + 负整数
=> 作用: 获取数组里面得某些数据
=> 返回值: 一个数组
-> 如果你获取多个数据, 数组里面有多个
-> 如果你获取一个数据, 那么数组里面有一个
-> 如果你一个都不获取, 那么是个空数组
=> 不改变原始数组
var arr = ['hello' , 'world' , '你好' , '世界' ] var res = arr.slice (1 , 3 ) console .log ('res : ' , res) console .log ('arr : ' , arr) var res2 = arr.slice (1 , -1 ) console .log ('res2 : ' , res2) console .log ('arr : ' , arr)
10. join() => 语法: 数组.join('连接符号')
-> 不传递, 是按照 逗号(,) 连接
-> 你传递什么, 按照什么连接
=> 作用: 把数组里面得每一个数据使用连接符号连接在一起
=> 返回值: 是一个连接好得内容, 是一个 String 类型
var arr = ['hello' , 'world' , '你好' , '世界' ] var res = arr.join ('abcd' ) console .log (res) console .log (arr)
11. indexOf() => 语法:
1. 数组.indexOf(数据)
2. 数组.indexOf(数据, 开始索引)
-> 从哪个索引开始向后查找
=> 作用: 正向查看数组里面指定这个数据得索引
=> 返回值:
-> 如果有这个数据, 是第一个满足条件得数据得索引
-> 如果没有这个数据, 那么是 -1
12. lastIndexOf() => 语法:
1. 数组.lastIndexOf(数据)
2. 数组.lastIndexOf(数据, 开始索引)
-> 从哪一个索引开始向前查找
=> 作用: 反向查看数组里面指定这个数据得索引
=> 返回值:
-> 如果有, 就是找到得第一个数据得索引
-> 如果没有就是 -1
-> 注意: 虽然是从后向前查找, 但是索引还是正常索引
13. forEach() => 语法: 数组.forEach(function (item, index, arr) {})
-> item: 数组得每一项
-> index: 数组每一项得索引
-> arr: 原始数组
=> 作用: 取代 for 循环得作用, 遍历数组
=> 没有返回值
14. map() => 语法: 数组.map(function (item, index, arr) {})
-> item: 数组得每一项
-> index: 数组每一项得索引
-> arr: 原始数组
=> 作用: 映射数组
=> 返回值: 是一个新的数组
-> 里面是对原始数组每一个数据得操作
-> 返回值数组, 一定和原始数组长度一样
=> 不改变原始数组
15. filter() => 语法: 数组.filter(function (item, index, arr) {})
-> item: 数组得每一项
-> index: 数组每一项得索引
-> arr: 原始数组
=> 作用: 过滤原始数组中得数据, 把满足条件得放在新数组里面
=> 返回值: 新数组, 里面是所有原始数组中满足条件得项
=> 不改变原始数组
16. every() => 语法: 数组.every(function (item, index, arr) {})
-> item: 数组得每一项
-> index: 数组每一项得索引
-> arr: 原始数组
=> 作用: 判断原始数组里面是不是每一个都满足条件
=> 返回值: 是一个布尔值
-> 如果原始数组中每一个都满足条件, 那么返回 true
-> 只要原始数组中有任意一个不满足条件, 那么就返回 false
17. some() => 语法: 数组.some(function (item, index, arr) {})
-> item: 数组得每一项
-> index: 数组每一项得索引
-> arr: 原始数组
=> 作用: 判断数组中是不是有某一个满足条件
=> 返回值: 一个布尔值
-> 如果数组中有任意一个数据满足条件, 那么返回 true
-> 如果数组中所有数据都不满足条件, 那么返回 false
18. copyWithin() => 语法: 数组.copyWithin(目标位置, 开始索引, 结束索引) -> 目标位置: 当你替换内容得时候, 从哪一个索引位置开始替换 -> 开始索引: 数组哪一个索引位置开始当作替换内容, 默认值是 0 -> 结束索引: 数组哪一个索引位置结束当作替换内容, 默认是末尾 -> 包前不包后 => 作用: 使用数组里面得内容替换数组里面得内容 => 返回值: 是一个新的数组 -> 替换后得数组
19. fill() => 语法: 数组.fill(要填充得数据, 开始索引, 结束索引)
-> 要填充得数据: 你想用什么数据填充数组里面每一位
-> 开始索引: 从哪一个索引开始填充, 默认值是 0
-> 结束索引: 填充到哪一个索引位置, 默认值是 末尾
-> 前提: 数组要有 length
-> 包前不包后
=> 作用: 使用指定数据区填充数组
=> 返回值: 填充好得数组
20. includes() => 语法: 数组.includes(数据)
=> 作用: 查看数组中是不是有某一个数据
=> 返回值: 一个布尔值
-> 有这个数据, 就是 true
-> 没有这个数据, 就是 false
21. flat() => 语法: 数组.flat(数字)
-> 数字: 表示扁平化多少层, 默认是 1
-> 数字这个参数还可以填写 Infinity
=> 作用: 拍平数组
=> 返回值: 拍平以后得数组
22. flatMap() => 语法: 数组.flatMap(function (item, index, arr) {})
=> 作用: 拍平数组, 但是只能拍一层
=> 返回值: 是一个新的数组
-> 一边拍平, 一边映射
23. find() => 语法: 数组.find(function (item) {})
=> 作用: 根据条件找到数组里面满足条件得数据
=> 返回值: 找到得那个 **数据**
24. findIndex() => 语法: 数组.findIndex(function (item) {})
=> 作用: 根据条件找到数组里面满足条件得数据
=> 返回值: 找到得那个 **数据得索引**