数组是什么
使用单独的变量名来存储一系列的值
跟对象区别:
数组是以数字为索引,是一种特别的对象,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)
}
迭代方法:
过滤:
排序: