/*
方法的作用和含义
方法的实参(类型和含义)
方法的返回值
原来的数组是否会发生改变
*/
// 一.数组的增删改查方法
// 以下方法都会修改原有的数组
// 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]
网友评论