第四章 Array
面经
类数组转换
js中类数组和真数组的区别
类数组
属性与方法：只有length和下标访问，没有数组方法 迭代： 不可迭代 原型链： 不继承Array.prototype
转换：
- Array.from
- ... 展开运算符
基础
后台数据转为前台通过数组进行处理
引用类型是传址操作
一般数组操作是在封装内定义一个新数组，把需求数组的值复制/把地址传给新数组，然后在新数组的基础上进行修改。
对{}操作可以使用 variable['xxx'] 或者variable.xxx都可
★定义
JavaScript
数组创建
new Arry(obj1,obj2,obj3); 对象形式
const array = []; 字面量形式
Array.of(); 数组只有单个数据时创建
操作超过数组长度的数据时，会使用undefined去填写间隔数据。
多堆数组
[[],[],[],[],]; 多堆数组（嵌套）
{{a1:"v1"},{a2:"v2"},{a3:"v3"},{a4:"v4"}]
array[n][m]; 多堆数组提取：★方法：添连改检
javascript
添加元素：push() (使用forof迭代后追加）
连接数组：join("")；
修改数组：array[n] = "***";
检测是否为数组：~.isArray();
(通过table调用Array更加直观)
追加数组中元素：
数组一般追加有两种：单个增加和数组增加（多个）增加。 array[array.length] = ''
点语法追加数组
array.push(array2)追加数组
array.unshift()
push和unshift返回值是其在数组中的位置（而不是索引）
删除数组中数据：array.pop()从后边弹出
array,shift()从前边移出
清空数组:array.length = 0;|| array = [];||arr.splice(0)
例：
let yz = [1,2,3,4,5];
let arr = yz;
两种清空的区别：array.length = 0是改变yz数组的值，
yz = [] 是改变了yz的引用，而arr里的地址仍然指向[1,2,3,4,5]
填充数组中元素：array.fill
灵活的方法；array.slice(start,end) 截取的是value，end取不到
若slice方法不规定参数，则相当于复制了数组
可以是负值
不修改原数组
array.splice方法
这个方法是修改原数组
可实现增删改所有操作
增加：~.splice(0,0,"content") 前增
~.splice(~.length,0,"content") 后增
~.splice(start,end,"content1",...)
end为0时在其索引为start位置追加内容
截取：~.splice(start,how many)
移除：~.splice(start,how many)
更换：~.splice(start,how many,"fixed con")javascript
new Array 和 Array.of()创建的区别：
new Array(n)创建会创建n个undefined，
Array.of(n)会创建一个value为n的数。
const array = [1,2];
此时改变数组中的值并不会报错，因为其内存地址没有变化，变化的是内存地址中的值js中的数组和其它语言是不能通用的，通用的是字符串、json、xml。
String() 是在前使用的构造函数方法 .toString是在后使用的
★拆分与合并
javascript
拆分字符串：split("") 返回字符，括号内填的是拆分对象标准
合并：join()
.concat() 在原来数组增加数组，可传多个参数
复制；.copywithin(loaction,from,to) 改变原数组
let array = [1,2,3,5,6];
let arr = array.copyWithin(2,0,2)
console.log(arr) 结果为12126
核心编程就是数据处理★查找
javascript
let arr = [1,2,3,4];
1 indexOf() 返回索引位置 查找不到时返回-1 从左查找
2 lastIndexOf() 从右查找
3 includes() 返回布尔 对引用类型不适合查找
includes实现：
function includes(array, find) {
for (const value of array)
if (value === find) return true;
return false;
}
4 find() 遍历元素 非贪婪，找到后返回true就会返回最近的值
返回的是值，找到值后返回值
适合引用类型
5findIndex() 返回索引
let obj = [{ name: "ggg" }, { name: "asdasd" }];
let status = obj.find(function(obj) {
return obj.name == "ggg";
})★字符串与数组的转化
字符串转换为数组：
拆分：str.split("") 按双引号拆分
str.split(",") 按逗号拆分
数组转换为字符串：
arr.from(str) 只要str中有length属性就可以使用，如果是｛｝转换需要加上length:n 属性Dom节点与数组
Dom节点用数组方式进行操作：
数组里可以是字符串，数值，对象，当然也可以是Dom文档元素
let elements = [];
Array.from(elements,function() {}) 第二个参数对数组中元素进行操作
这样做就不用使用循环
过滤器，map，from等等很多方法都可以进行二次处理展开语法(扩展运算符)
使用场景：转换（数组、对象...），传参
javascript
let arr = ["a","b","c","d","e","f"];
arr = [...arr];
展开操作包括添加，所以用来在原有数组上添加新数组十分方便
let arr2 = [1,2,3,4,5];
arr = [...arr,...arr2]JavaScript
多个元素赋值给一个变量：
“放”的含义是将*内容*放进去，内容的数据类型是什么就传什么。
function sum(...vars){
console.table(vars);
}
sum(1,2,3,4)
这里是指将1,2,3,4全部赋值给vars
计算器：
function sum(...vars){
return vars.reduce((s,v)=>{
return s += v;
},0);
}
console.log(sum(35,567,7,567,51))点语法
javascript
[...item] 点语法
作用：
1 释放
2 收集
*一般是放在参数列后边*类数组转换为数字：
javascript
方法1
const div = document.querySelectorAll("div");
Array.from(div).map((item)=>{
console.log(item);
})
方法2）(点语法)
console.log([...div]);
方法3
Array.prototype.map.call(div,(item)=>{
console.log(item);
})★解构语法
含义：将数组里的值批量赋值给变量,平均分布到变量当中。
将右侧数组中的值平均分配给左侧，若右侧的值比左侧的多，可以 使用点语法。
若无默认值可以设置默认值
Tips：对象里用到的比数组多
javascript
原始:
let arr = ["a","b"];
let attribute1 = arr[0];
let attribute2 = arr[1];
console.log(attribute1,attribute2) ==>{"a" "b"}
解构:
let arr = ["a","b"];
let [attribute1,attribute2] = arr;
优化：
function get() {
return["a","b"];
}
let [attribute1,attribute2] = get()javascript
不建议使用以下情况：
[attribute1,attribute2] = ["a","b"]
因为：在"use strict"中不能使用（未定义）javascript
console.log(..."abcd") <===>
const [...args] = "abcd"
[...args] = ["a","b","c","d"];javascript
使用逗号占位以便赋值给想要的变量
let [,year] = [ac,2010];javascript
解构+展开
*放在变量位置时：吸收
let [name,...args] = ["给第一个","给第二个","给第二个"]
*放在赋值位置时：打散
let a = ["text",...args]
console.log(a)javascript
深入理解
function show([name,year]) {
console.log(name,year);
}
show(["想要传的参数1","想要传的参数2"])
这样就通过调用时传参将参数传送到函数里，进而让函数调用，达到数组传参的意义。移动数组位置
javascript
移动数组位置
let array = [1, 2, 3, 4];
function move(array, bg, ed) {
if (bg < 0 || bg > array.length) {
console.error("参数错误");
}
const newArray = [...array];
let item = newArray.splice(bg, 1);
newArray.splice(ed, 0, ...item);
console.log(item)
return newArray;
}
console.table(move(array, 1, 3))排序
javascript
arr.sort(function(a,b) {
return a-b;//升序
return b-a;//降序
})//系统提供的原始sort方法
所谓的体验就是让人感觉舒适
冒泡：
let array = [5,345,34,63,214,2,34]
function sort(array,callback) {
for (const n in array) {
for (const m in array) {
if(callback(array[n],array[m]) < 0) {
const temp = array[n];
array[n] = array[m];
array[m] = temp;
}
}
}
return array;
}
array = sort(array,function(a,b) {
return b-a;
});
console.table(array);传址与传值
js
遍历之后的引用类型和值类型不同，
（遍历后是）引用类型在遍历之后会改变原有定义的引用类型，
[{},{},{}]这样的引用类型遍历，修改的是一个个的{}，所以会改变原有数组
而值类型[1,2,3,4]（遍历后是值），在遍历之后
for (let value of arr) {
value += 10;
}
会在内存地址中新开辟一个地方，原有的数组不变。js
for in
[
0{},
1{},
2{},
3{},
4{},
]
for of
[
{value},
{value},
{value},
{value},
]★forEach
js
语法：
忘了自己搜去
.forEcah(value,index,arr){
}
操作DOM元素
let lis = document.querySelectorAll("li");
lis.forEach(function(item) {
item.addEventListener('click',function () {
this.style.color = "red";
})
});★迭代器
js
.keys 取索引
.keys.next() 取值
返回的value是索引，done情况是是否迭代完成
.values 取值
返回的value是值done情况是是否迭代完成```js
数组可用迭代器进行操作：
while ({value,done} = values.next()) {
}相当于while true
while (({value,done} = values.next())&&done===false)
console.log(value)★判断&过滤
统一判断的时候：
1 every
.every(function(value,index,arr){
return true;
})
全为真返回真
2 some
.some(function(value,index),arr) {
return true;
}
有一个为真就是真js
过滤
使用场景：获取某个区间里的数据
.filter(item,index,arr) {
return true
}
只返回为真，过滤调掉其它的数据
自写过滤练习：（列表）
let array = [1, 2, 3, 4]
function filter(array, callback) {
let newArray = [];
for (const value of array) {
if (callback(value) == true) {
newArray.push(value);
}
}
return newArray;
}
console.log(filter(array, function (value) {
return value > 1;
}));★map
javascript
对数组进行二次操作，返回新数组
let arr = [];
.map(function(item,index,arr) {
return
})★reduce
javascript
let arr = [];
使用场景：统计
arr.reduce(function(pre,cur,index,arr){
},pre初始值)
不设定初始值：第一次和第二次分别执行pre和cur，剩下的值为返回值
设定初始值，比如为0，那么pre=0，其它的值按顺序走
查找最大值
let arr = [1, 235, 645, 75, 2134, 74];
function max(arr) {
return arr.reduce(function (pre, cur) {
return pre > cur ? pre : cur;
})
}
console.log(max(arr))查看元素内文本
element.textContent()
利用此方式，结合展开语法，将其变为数组
判断语句：
A == B &&C; 判断A是否等于B ，若等于就执行C
小案例
javascript
结合css和js
<div name="demo">text file</div>
body {
display: flex;
justify-content: center;
text-align: center;
width: 100vw;
height: 100vh;
color: #2980b9;
}
div {
font-size: 5em;
font-weight: bold;
text-transform: uppercase;
color: #16a085;
}
div>span {
position: relative;
display: inline-block;
}
.color{
animation-name: color;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: linear;
animation-direction: alternate;
}
@keyframes color{
50%{
color:#81ecec;
transform: scale(2);
}
to{
color:#00cec9;
transform: scale(.5);
}
}
const div = document.querySelector('[name="demo"]');
[...div.textContent].reduce(function (pre, cur, arr) {
pre == 0 && (div.innerHTML = '');
let span = document.createElement("span");
span.innerHTML = cur;
div.appendChild(span);
span.addEventListener("mouseover",function(){
this.classList.add('color');
})
span.addEventListener("animationend",function(){
this.classList.remove('color');
})
}, 0)