JS常用数组方法整理

数组是什么
使用单独的变量名来存储一系列的值

跟对象区别：
数组是以数字为索引，是一种特别的对象，typeof返回Object
对象是属性名为索引

创建数组4种方法

//构造函数
let arr = new Array(1,2,3,4,5) // 创建新数组为 [1,2,3,4,5]
// 字面量
let arr = ["a","b","c"......'n']
let arr = []  arr.length = 4   //创建一个长度为4的数组， 元素值为undefined
// Array.of
Array.of(7)
let arr = new Array (7)   // 创建一个长度为7的空数组， 

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：
Array.of(7) 创建一个具有单个元素 7 的数组
Array(7) 创建一个长度为7的空数组(这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组)

操作数组的方法：

新增：

arr.push(...arr1) //   后加，返长度
arr.unshift(1，2，3) //  前加，返长度

删除：

arr.pop() // 后删，返元素
arr.shift() // 前删除， 返元素

剪切：
slice 截取数组，不改变原数组

arr.slice(start, end) //  [start, end) 

splice对原数组进行操作：

arr.splice(start, length, val) // start起始位置， length删除长度， val 新增元素
追加： arr.splice(start, 0, val)
替换： arr.splice(start, 1, val)
删除： arr.splice(start, length)
末尾追加： arr.splice(arr.length, 0, val)
清空数组： arr.splice(0, arr.length)

从数组的指定位置拷贝元素到数组的另一个指定位置中，改变原来数组

arr.copyWithin(target, start, end) 

填充：

let arr = Array(5).fill(0)
arr.fill(val, start, end).  [start, end)

合并：
生成新的数组，不改变原来数组，进行多次操作时会造成内存浪费

arr.concact(arr2) 
[...arr1, ...arr2]

改变原来数组

arr1.push.apply(arr1, arr2)
arr1.push(...arr2)
for (let i in arr2) {
    arr1.push(arr2[i])
}

清空数组：

arr.splice(0, arr.length)
while(arr.pop()) {}
arr.length = 0
arr = []

查找：
查找基本类型:

arr.indexOf(target， start)  
// 返回第一个元素索引，没有返回-1，严格校验数据类型
arr.lastIndexOf(target， start)   // 返回最后一个元素索引
arr.include(target)  // 返回布尔值

查找引用类型:

arr.find() // 返回符合条件的的第一个值 （一般用于查找引用了类型的值）
let arr = [{name: 'jenny'}, {name: 'Tron'}]
arr.find(item => {
	return item.name === 'Jenny'
})

arr.findIndex() 返回符合条件的索引

数组转字符串：

arr.toString() // 逗号分隔
String(arr)   // 逗号分隔
arr.join('|') // 元素以，分割开

字符串转数组：

str.split("") // 按什么字符 切割成数字，这个字符会被切割掉
Array.from(str)  // 有长度的变量就可以转, 每个字符都会被切割
// 带长度属性的对象
let obj = {     0: "hdcms",     1: "houdunren",     length: 2 } console.log(Array.from(obj)); 
//有长度转化为["hdcms","houdunren"]
Array.from(arrayLike,)
let [...arr] = 'jenny'
console.log(arr) // ["j", "e", "n", "n", "y"]

展开语法，合并或深拷贝数组

let arr1 = [1,2]
let arr2 = [3,4]
arr1 = [...arr1, arr2]

解构语法

let [...arr] = 'jenny'
console.log(arr) // ["j", "e", "n", "n", "y"]
let arr = ['jenny', 2021]
// 方法一
let name = arr[0]
let year= arr[1]
// 方法二
let [name, year = 2012 ] = arr
let [, year] = arr
// 方法三
let arr = ['jenny', 2021, 2020, 2019]
let [name, ...years] = arr

Dom调用数组方法：

let btns = document.querySelectorAll("button");    
console.log(btns);//获取的dom元素是包含length属性的     
Array.from(btns,(item)=>{
	item.innerhtml
	 //这里的item指的就是dom对象，既然是dom对象，那么就可以使用dom所有操作        
	item.style.background = 'red';
});

数组移动：

function move(arr, from, to) {
if(from< 0 || to>arr.length) {
	console.error('参数错误')
	return
}
let newArr = [...arr]
let start = newArr[from]
let end = newArr[to]
newArr.splice(from, 1, end)
newArr.splice(end, 1, from)
}

迭代方法：
过滤：
排序：