【JS】JS 数组操作:（压缩,打包,遍历,增删,断言,过滤,查找,归并-删除更新）

JS 数组 API -1

包括对象在内，尽量用字面量来声明

let arr = [1, 2, 'a', 'b', true, { x: 1, y: 2 }, [1, 2, 3], function () { }]
console.log(arr)

1. …rest 压缩与展开

//fn.apply(null,[1,2,3])
arr = [1,2,3]
let arr1 = [...arr]//数组完全复制
console.log(arr1)
arr = [...arr,4,5,6]
console.log(arr)
console.log('-------------------')

2. Array.of 打包

let items = [1,2,3,4,5,6]
console.log(Array.of(items))

3. Array.from() :

类数据（对象） -> 包装成一个真正的数组

const linkArr = {
    0:'red',
    1:'blue',
    2:'green',
    length:3
}
 // 为什么要转真数组？
 // 因为数组上有非常多的方法可以使用
const data = Array.from(linkArr)
console.log(Array.isArray(data)?'Array':'No Array')

数组遍历方法

for(let item of data){
    console.log(item)
}
console.log('=========================')

数组 API -2

增删受限： push:放入,pop:取出,unshift,shift

1. 尾部操作

let arr2 = []
console.log(arr2.push(10))
console.log(arr2.push(20,30))
//长度：3，分别是：10，20，30
console.log(arr2.pop())
console.log(arr2.pop())
console.log(arr2.pop())
console.log(arr2.pop())
console.log(arr2.length)
console.log(arr2)
console.log('------------------')

2.头部操作

//添加 unshift，注意顺序
//头部取出 shift
console.log(arr2.unshift(10))
console.log(arr2.unshift(30,20))
console.log(arr2)
console.log(arr2.shift())
console.log(arr2)
console.log('------------------')
// * 3.删除
arr3 = [1,2,3,4]
//删除第2个索引上的值，但索引还在
delete arr3[2]
console.log(arr3)
//输出：[ 1, 2, <1 empty item>, 4 ]
console.log('=========================')

数组 API -3

迭代方法，遍历元素

• 1.forEach,map
• 2.every,some
• 3.filter,find,findIndex
• 4.reduce

let arr4 = [1,2,3,4]

1. forEach:没有返回值，参数：值、索引、数组

arr4.forEach(function(item,key,arr4){
    console.log(item,key,arr4)
})
//只有item（值）是必须的，其他两个参数可不写
console.log('------------------')

2. map:有返回值

let result = arr4.map(function (item,key,arr4){
    return item * 2
})
console.log(result)
console.log('------------------')

3. every,some:断言，true /false

//every():全部满足条件才返回true,否则为false
console.log(arr4.every(item => item >= 0)) //true
console.log(arr4.every(item => item >= 3)) //false
//some():只要有一个值满足：返回true
console.log(arr4.some(item => item >= 1)) //true
console.log(arr4.some(item => item >= 10)) //false
console.log('------------------')

4. filter:过滤器，将满足条件的元素打包到一个数组中返回

console.log(arr4.filter(item => item >= 2))
//返回[2.3.4]
console.log('------------------')

5. find:查找，从结果中返回第一个，满足条件的元素

console.log(arr4.find(item => item >= 3))
//返回：3
console.log(arr4.findIndex(item => item >= 3))
//返回索引值：2
console.log('------------------')

6. reduce: 归并

/**
 * * 1. 回调函数
 * * 2. 初始值，如0,''
 */
/**
 * 回调函数说明：
 * * 1. acc: 累加器，结束不断的累加给它，最终返回也是它
 * * 2. cur: 当前元素
 * * 3. key: 当前元素的索引
 * * 4. arr: 当前正在遍历的数组
 * ? cur, key, arr, 与之前的迭代方法参数一样
 * ? init 为初始值
 */
// arr.reduce(function(acc,cur,key,arr){},init)
result = arr4.reduce(function(acc,cur,key,arr){
    //观察执行过程
    console.log(`acc = ${acc}, cur = ${cur}, key = ${key}, arr= [${arr}]`)
    return acc+cur
},0)
//将数组内容进行累加，初始值为10
console.log(result)

数组常用 API-4

1. sort：排序

let arr = [10, 1, 22, 8]
console.log(arr.sort(function (a, b) {
    return a - b
}))
//简化成箭头函数，省略 function 和 {}
//升序 asc
console.log(arr.sort((a, b) => a - b))
//降序 desc
console.log(arr.sort((a, b) => b - a))
arr = arr.sort((a, b) => a - b)//对数组排序
console.log(arr)
console.log('----------------------')

2. join:array->string字符串数组拼接

arr = ['<ul>\n', ' <li>xxx</li>\n', '</ul>']
console.log(arr.join(''))
//模板字面量更方便
console.log('----------------------')

3. slice()：子元素

//slice(2,3),参数2，3：从索引2取到索引3，一个数值
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr.slice(2,6))
console.log(arr.slice(-4,-2))//取反
console.log('----------------------')

4. splice()：删除（扩展功能：新增，更新）

//4.1 删除
console.log(arr)
//从第2个元素开始，删除2个元素,返回删除的数组
console.log(arr.splice(1,2))
console.log(arr)
//4.2 更新,
console.log(arr.splice(1,2,'a','b'))
console.log(arr.splice(1,2,['a','b']))
console.log(arr.splice(1,2,...['a','b']))
console.log(arr)
//4.2 新增
//删除的数据，必须小于新增的元素数据
//第2个参数为0，第3个参数只要不是一个，就实现新增/插入/insert
console.log(arr.splice(4,0,'x','y'))
console.log(arr)
console.log('----------------------')