/*
方法的作用和含义
方法的实参(类型和含义)
方法的返回值
原来的数组是否会发生改变
*/
// 一.数组的增删改查方法
// 以下方法都会修改原有的数组
// 1.push
/* push: 向数组末尾增加内容
@params: 多个任意类型
@return:返回新增后的数组长度
*/
let arr = [1, 2];
let res = arr.push(3, 'qq')
console.log(res) // => 4
console.log(arr) // => [1, 2, 3, "qq"]
// 也可以向数组末尾追加内容,这是基于原生JS操作键值对的方法
arr[arr.length] = 4
// 2. unshift
/* unshift: 向数组开始位置增加内容
@params: 多个任意类型
@return:返回新增后的数组长度
*/
let arr1 = [1, 2];
let res1 = arr1.unshift(3, 'qq')
console.log(res1) // => 4
console.log(arr1) // => [3, "qq", 1, 2]
// 基于原生ES6展开运算符,把原生的arr1克隆一份,
// 在新的数组中创建第一项,其余的内容使用原生arr1中的内容
// 实现了向数组第一位增加内容,
// 其实这是根据数组创建了一个新数组
arr1 = [5, ...arr1]
console.log(arr1) // => [5, 3, "qq", 1, 2]
// 3.shift
/* shift: 删除数组的第一项
@params
@return:删除的那一项
*/
let arr2 = [12, 13, 14, 15];
let res2 = arr2.shift()
console.log(res2) // => 12
console.log(arr2) // => [13,14,15]
// 基于原生JS中的delete,把数组当做普通的对象
// 确实可以删除掉某一项内容
// 但是不会影响数组本身的结构特点(length长度不变)
// 在项目中严禁这样使用
delete arr2[0]
console.log(arr2) //[empty, 14, 15]
// 1: 14
// 2: 15
// length: 3
//4. pop
/* pop: 删除数组的最后一项
@params
@return:删除的那一项
*/
let arr3 = [12, 13, 14, 15];
let res3 = arr3.pop()
console.log(res3) // => 15
console.log(arr3) // => [12,13,14]
// 基于原生JS让数组长度减1,默认删除数组中最后一位
arr3.length--
console.log(arr3) // => [12,13]
//5. splice
/* splice: 实现数组的增删改
@params: (参数都是数字)
n: 从索引n开始删除到末尾
n,m: 从索引n开始删除m个元素
n,m,x: 从索引n开始删除m个元素,用x占用删除的部分(修改)
n,0,x: 从索引n开始,一个也不删,把x放到索引n的前面(增加)
@return:把删除的部分作为一个新数组返回
*/
// (1)删除
let arr4 = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
let res4 = arr4.splice(2, 4)
console.log(res4) // => [12,13,14,15]
console.log(arr4) // => [10, 11, 16, 17, 18, 19]
console.log(arr4.splice(0)) // => [] 清空数组
// 删除第一项
arr4.splice(0, 1)
// 删除数组的最后一项
arr4.splice(arr4.length - 1)
// 删除第2项至倒数第二项的值
arr4 = arr4.splice(1, arr4.length - 2)
console.log(arr4)
// (2)增加和修改
let arr5 = [10, 11, 12, 13, 14, 15];
let res5 = arr5.splice(1, 2, 'AA', 'BB')
console.log(res5) // => [11, 12]
console.log(arr5) // => [10, "AA",'BB', 13, 14, 15]
arr5.splice(3, 0, 'CCC')
console.log(arr5) // => [10, "AA", "BB", "CCC", 13, 14, 15]
// 向数组末尾追加
arr5.splice(arr5.length, 0, '16')
console.log(arr5) // => [10, "AA", "BB", "CCC", 13, 14, 15, "16"]
// 向数组中首位添加
arr5.splice(0, 0, 9)
console.log(arr5) // => [9, 10, "AA", "BB", "CCC", 13, 14, 15, "16"]
// 二、数组的查询和拼接
// 以下方法,原数组不会改变
//1. slice 查询
/* slice: 实现数组的查询 查找到内容组成新数组返回
@params: n,m 从索引n开始,找到索引m(不包含m)的地方
只传n:从n开始找到末尾
@return:把找到的部分作为一个新数组返回 原数组不变
*/
let arr6 = [10, 11, 12, 13, 14, 15, 16];
let res6 = arr6.slice(1, 3)
console.log(res6) // => [11,12]
/* 注意:(1)当n,m为负数 / n>m / n,m都为小数/都为非有效数字/ n大于数组长度,返回 []
(2)当n为正,m为负数,则向左查找
(3)当n为小数/非有效数字,m为正数,从0开始向右查找
(4)当n小于数组长度,m大于数组长度,则返回从n开始到数组末尾
*/
// 2.concat 数组拼接
/* concat: 实现数组的拼接
@params: 传多个任意类型值,
@return:返回拼接后的新数组,原数组不变
*/
let ary1 = [10, 11, 12, 13];
let ary2 = [14, 15, 16];
let res = ary1.concat(ary2, 'AAA', 'BBB', [20, 30])
console.log(res) // => [10, 11, 12, 13, 14, 15, 16, "AAA", "BBB", 20, 30]
// 三、把数组转成字符串
// 原有数组不变
// 1.toString
/* toString: 把数组转成字符串
@params:
@return:返回转换后的字符串,每一项用逗号分隔。 (原数组不变)
*/
let ary3 = [10, 11, 12, 13]
let res = ary3.toString()
console.log(res) // => '10,11,12,13'
// 2.join
/* join: 把数组转成字符串
@params: 指定的分隔符(字符串格式) 默认是逗号
@return:返回转换后的字符串,每一项用指定分隔符分隔。 (原数组不变)
*/
let ary3 = [10, 11, 12, 13]
let res = ary3.join('-')
console.log(res) // => '10-11-12-13'
console.log(ary3.join('')) // => '10111213'
console.log(ary3.join('+')) // => '10+11+12+13'
// 数组求和
console.log(eval(ary3.join('+'))) // => 46 eval把字符串变为js表达式执行
// 四、检测数组中是否包含某一项
// 1.indexOf / lastIndexOf (在IE6~8不兼容)
/* indexOf / lastIndexOf: 检测当前项在数组中第一次 / 最后一次出现位置的索引值
@params: 要检索的内容
@return:该项出现位置的索引值,如果索引中没有该项返回结果-1 (原数组不变)
*/
let ary4 = [10, 11, 12, 13, 19, 12]
console.log(ary4.indexOf(12)) // => 2
console.log(ary4.lastIndexOf(12)) // => 5
// 验证是否包含某个值
if (ary4.indexOf('AA') === -1) {
console.log('不包含')
}
/***** ES6新提供的 includes: 如果包含,返回true ******/
console.log(ary4.includes(10)) // => true
// 五、数组的排序
//1.reverse
/* reverse: 数组倒过来
@params:
@return:返回新数组 (原数组改变)
*/
let array = [10, 11, 12, 13, 19, 12]
console.log(array.reverse()) // => [12, 19, 13, 12, 11, 10]
//1.sort
/* sort: 数组排序 默认按照每一项对应位比较大小排序的
@params: 可以没有,也可以是个函数
@return:返回排序后的新数组 (原数组改变)
*/
let array1 = [10, 21, 12, 23, 19, 12, 31, 8]
console.log(array1.sort()) // => [10, 12, 12, 19, 21, 23, 31, 8]
// 传个函数
console.log(array1.sort((m, n) => m - n)) //升序 => [8, 10, 12, 12, 19, 21, 23, 31]
console.log(array1.sort((m, n) => n - m)) //降序 => [31, 23, 21, 19, 12, 12, 10, 8]
// 六、遍历数组中每一项
// forEach,map,filter,find,reduce,some,every ...
// 1.forEach
/* forEach: 遍历数组中的每一项内容
@params: 回调函数
@return:(原数组不变)
*/
let array2 = [10, 21, 12, 23, 19, 31, 8]
array2.forEach((item, index) => {
// index:索引值 0,1,2...
// item:当前索引对应的值
console.log('index:' + index, 'item:' + item)
})
// 七、数组去重
let array2 = [1, 2, 1, 3, 2, 3, 5]
// 方法一:循环数组中的每一项,每拿到一项添加到一个新数组里,
//添加之前验证该项在新数组中是否存在,若不存在则添加,存在则跳过
let newArr = []
for (let index = 0; index < array2.length; index++) {
const element = array2[index];
if (!newArr.includes(element)) {
newArr.push(element)
}
}
console.log(newArr) // => [1, 2, 3, 5]
//forEach
let newArr1 = []
array2.forEach(item => {
if (!newArr1.includes(item)) {
newArr1.push(item)
}
})
console.log(newArr1) // => [1, 2, 3, 5]
//方案二:分别拿出数组中的每一项和他后面的每一项依次做比较,如果相等,则删除
// 数组塌陷问题
for (var i = 0; i < array2.length; i++) {
var item = array2[i];
// 当前项后面的内容组成一个新数组
// var itemBack = array2.slice(i+1)
for (var j = i+1; j < array2.length; j++) {
var itemBack = array2[j];
// 如果item等于itemBack 删除itemBack
if (itemBack === item) {
array2.splice(j,1)
j-- // 解决数组塌陷问题。删除后j后面的每一项索引都提前了一位
}
}
}
console.log(array2) // => [1, 2, 3, 5]
// 方案三:
// 1.创建一个新对象
let obj = {}
// 2.循环数组中的每一项,把每一项的值作为对象的key和value进行存储
for (let i = 0; i < array2.length; i++) {
let item = array2[i];
if (obj[item] !== undefined) {
// 基于splice实现删除性能不好,当前项被删除后,
// 后面每一项的索引都会向前移动一位,如果后面数据量大,会影响性能
// array2.splice(i,1)
array2[i] = array2[array2.length-1]
array2.length--
i--
continue
}
obj[item] = item
}
console.log(array2) // => [1, 2, 3, 5]
// 3.数组倒着取值,解决数组塌陷问题
let obj = {}
let array2 = [1, 2, 1, 3, 2, 3, 5]
for (let i = array2.length - 1; i >= 0; i--) {
let item = array2[i];
if (obj[item] !== undefined) {
array2.splice(i,1)
continue
}
obj[item] = item
}
console.log(array2) // => [1, 2, 3, 5]
// 4.正则去重
let array3 = [1,2,3,4,2,3,1,4]
// 先排序(从小到大)
array3.sort((m,n) => m-n)
let str = array3.join('@') + '@'
let reg = /(\d+@)\1*/g
array3 = []
str.replace(reg,(n,m) => {
m = Number(m.slice(0,m.length - 1))
array3.push(m)
})
console.log(array3) // => [1, 2, 3, 4]
// 5.基于ES6的Set去重
let array4 = [1,2,3,4,2,3,1,4]
array4 = [...new Set(array4)]
console.log(array4) // => [1, 2, 3, 4]
JS 数组中常用的方法
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 语句的分类: 条件判断语句:if else 条件分支语句:switch /case 循环语句:while for ...
- 语句的分类: 条件判断语句:if else 条件分支语句:switch /case 循环语句:while for ...
- 语句的分类: 条件判断语句:if else 条件分支语句:switch /case 循环语句:while for ...