数组知识
数组
添加元素
// 在数组最后面添加
arr.push('element')
// 在数组最前面添加
arr.unshift('element')
// js 数组没有 insert 方法,需要通过 splice 间接的实现
let array = [1,2,3,4,5,"张三","李四","王五"]
Array.prototype.insert = function(index, value){
this.splice(index,0, value);
}
console.log(array); //[1, 2, 3, 4, 5, "张三", "李四", "王五"]
array.insert(4, 10);
console.log(array); //[1, 2, 3, 4, 10, 5, "张三", "李四", "王五"]
删除元素
//删除尾部元素
var array = ['草莓','香蕉','苹果','西瓜','番茄','葡萄'];
array.pop();
console.log(array);//['草莓','香蕉','苹果','西瓜','番茄'];
//删除头部元素
var array = ['草莓','香蕉','苹果','西瓜','番茄','葡萄'];
array.shift();
console.log(array);//['香蕉','苹果','西瓜','番茄','葡萄'];
//删除指定下标的元素
let arr=[1,2,3,4,5,6];
let splice = arr.splice(1,1);//删除从下标1开始,1个元素
console.log(arr);//[1, 3, 4, 5, 6]
console.log(splice);//[2]
合并数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [7,8,9];
//1) concat:合并数组
console.log(arr1.concat(arr2,arr3));//[1, 2, 3, 4, 5, 6, 7, 8, 9]
//...方法
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [7,8,9];
//2)...:扩展运算符合并数组
console.log([...arr1,...arr2,...arr3])//[1, 2, 3, 4, 5, 6, 7, 8, 9]
判断是否包含某个元素
//indexOf:是否包含某个元素,包含返回下标,不包含返回-1
let arr = [1,2,3,4,5];
console.log(arr.indexOf(1)); //0 元素为1的下标
console.log(arr.indexOf(10)); //-1 不存在
//includes:是否包含某个元素,包含返回true,不包含返回false
let arr = [1,2,3,4,5];
console.log(arr.includes(1)); //true
console.log(arr.includes(10)); //false
console.log(arr.includes('1')); //false
将类数组转化为数组
let obj = {0:'小明',1:'小红',2:'小丽',3:'小兰','length':4};
console.log(Array.from(obj)); //["小明", "小红", "小丽", "小兰"]
判断是否为数组
let obj = {0:'小明',1:'小红',2:'小丽',3:'小兰','length':4};
console.log(Array.isArray(obj));//false
foreach 遍历数组
var array =[
{
id:'001',
name:'小新',
age:5
},
{
id:'002',
name:'小葵',
age:1
},
{
id:'003',
name:'美冴',
age:28
},
{
id:'004',
name:'广志',
age:30
},
];
array.forEach((value,key) => {
console.log(key);
console.log(value);
//console.log(value.name);
});
value,key 的名字是自己命名的,位置不能调换
打印结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uHNjmjbr-1667555424724)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20221104085714611.png)]
sort 数组排序
let arr = [44,23,21,45,67,1];
const arr1 = arr.sort((a,b)=>{
//从小到大排序
return a-b;
})
const arr2 = arr.sort((a,b)=>{
return b-a;
})
console.log(arr1);//[1, 21, 23, 44, 45, 67]
console.log(arr2);//[67, 45, 44, 23, 21, 1]
一定要写成array.sort((a,b)=>{return a-b})
若是array.sort();只会对数字的第一位进行排序
map 映射一个新数组
使数组中每个人的年龄 +1
var array =[
{
id:'001',
name:'小新',
age:5
},
{
id:'002',
name:'小葵',
age:1
},
{
id:'003',
name:'美冴',
age:28
},
{
id:'004',
name:'广志',
age:30
},
];
let newArr = array.map((v)=>{
v.age = v.age+1;
return v;
})
当数组中元素是值类型,map不会改变原数组;当是引用类型,则可以改变原数组(具体看浅拷贝和深拷贝)
reduce()累加器
let arr=[1,2,3,4];
let b=arr.reduce((pre,cur)=>pre + cur)
console.log(b);//10
分隔符
var arr = [1,2,3,4,5,6,7];
var str = arr.join("★"); //转为字符串用新变量接收
console.log(str);//1★2★3★4★5★6★7
splice
-
splice 删除写法
array.splice(index,n);
参数含义,index:数组中需要删除数据的起始位置;
n:需要删除的元素,数据的个数;
let a=[1,2,3,4];
let b=a.splice(0,2);
console.log(b); //[1,2] 这是输出删除的元素
console.log(a); // 这是输出删除完的原数组
-
splice插入写法,array.splice(index,0,data1,data2,…);
参数含义,index:数组中需要插入数据的起始位置;
0:删除的个数为0;
data1,data2:需要插入的元素,用逗号隔开let a=[1,2,3,4]; a.splice(2,0,[2,3,4]); console.log(a);//[1,2,[2,3,4],3,4]
-
splice替换写法,array.splice(index,n,data1,data2,…);
参数含义,index:需要替换的元素的起始位置;
n:需要替换的元素的个数,实质是删除;
data1,data2:需要插入元素,用逗号隔开;let a=[1,2,3,4]; a.splice(2,2,8); console.log(a);//[1,2,8]
过滤元素
filter 过滤元素
将所有元素进行判断,将满足条件的作为一个新的数组返回
let newArr = array.filter((v)=>{
return v.age>20;
})
console.log(newArr)
find 过滤元素
与 filter 不同的是,他找到第一个满足条件的值就不在继续寻找
let newArr = array.find((v)=>{
return v.age>20;
})
some 过滤元素
与 find 类似,找到满足条件的值就返回 true
let newArr = array.some((v)=>{
return v.age>20;
})
every 过滤元素
只有当数组中所有的值都满足条件,才返回 true
let newArr = array.every((v)=>{
return v.age>20;
})
findIndex 过滤元素
找到满足条件的元素,返回该元素的索引位置
let arr=[1,2,3,4,5]
let b=arr.findIndex((i,index)=>{
return i == 3
})
console.log(b);
前端开发中常用的数组方法
场景1
获取一个数组中全部的商品名称
// 商品信息数组
const Material_Array=[
{MaterialCode:'00061057',MaterialName:'运动袜',ColorName:'浅花灰/黑'},
{MaterialCode:'00064060',MaterialName:'闪光背包',ColorName:'宝蓝/灰色'},
{MaterialCode:'00066062',MaterialName:'拉托克背包',ColorName:'黑色/灰'},
{MaterialCode:'00069063',MaterialName:'单车背包',ColorName:'红色/灰'},
]
const material_name= Material_Array.map(e=>e.MaterialName)
console.log(materials_name)
结果如图:
如何获取数组中的两个属性的值
想法:将不需要的属性值删除掉
第一种方法 for 循环
const Material_Array=[
{MaterialCode:'00061057',MaterialName:'运动袜',ColorName:'浅花灰/黑'},
{MaterialCode:'00064060',MaterialName:'闪光背包',ColorName:'宝蓝/灰色'},
{MaterialCode:'00066062',MaterialName:'拉托克背包',ColorName:'黑色/灰'},
{MaterialCode:'00069063',MaterialName:'单车背包',ColorName:'红色/灰'},
]
for (const i in Material_Array) {
// 删除id属性
delete Material_Array[i].MaterialCode;
}
console.log(Material_Array);
第二种方法 map数组方法
第一种方法
const Material_Array=[
{MaterialCode:'00061057',MaterialName:'运动袜',ColorName:'浅花灰/黑'},
{MaterialCode:'00064060',MaterialName:'闪光背包',ColorName:'宝蓝/灰色'},
{MaterialCode:'00066062',MaterialName:'拉托克背包',ColorName:'黑色/灰'},
{MaterialCode:'00069063',MaterialName:'单车背包',ColorName:'红色/灰'},
]
let new_Material_Array = JSON.parse(JSON.stringify(Material_Array)) //数组是引用类型, 深拷贝一下
new_Material_Array.map(e => { delete e.MaterialName }) //然后删除属性
console.log(new_Material_Array);
插入对两个概念的解释
- 引用数据类型
JS分为两种数据类型:
基本数据类型
基本数据类型在上一篇文章中已经介绍,其包括:
Number
String
Boolean
Null
Undefined
Symbol(ES6中的语法,后续文章中会介绍)
基本数据类型 - 键值储存在栈内存中,当复制时栈内存会开辟一个新的内存空间,所以修改原值时,复制的值不会随之变化
引用数据类型
引用数据类型即 Object ,在JS中,所有除了基本数据类型外的数据类型都属于Object,例如数组、函数方法、对象等。
引用数据类型 - 键储存在栈内存中,值储存在堆内存中,但是栈内存会提供一个引用的地址来指向堆内存中的值
当b=a进行拷贝时,其实复制的是a的引用地址,而并非堆里面的值。
当 a 进行修改时,由于 a 和 b 指向的是同一个地址,所以自然 b 也会受到影响
在堆内存中也开辟一个新的内存专门为b存放值,就像基本类型那样,岂不就达到深拷贝的效果了
- 深、浅拷贝
如何区分深浅拷贝
A 复制 B,当 B 修改时,观察 A 是否跟着变化,如果 A 也跟着变化,那么就是深拷贝
深拷贝的格式
// 深拷贝 const form_copy = JSON.parse(JSON.stringify(this.form));
参考地址:https://blog.csdn.net/HelloWord176/article/details/103769515?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-103769515-blog-117200611.pc_relevant_landingrelevant&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-103769515-blog-117200611.pc_relevant_landingrelevant&utm_relevant_index=2
第三种方法 forEach 方法
const Material_Array=[
{MaterialCode:'00061057',MaterialName:'运动袜',ColorName:'浅花灰/黑'},
{MaterialCode:'00064060',MaterialName:'闪光背包',ColorName:'宝蓝/灰色'},
{MaterialCode:'00066062',MaterialName:'拉托克背包',ColorName:'黑色/灰'},
{MaterialCode:'00069063',MaterialName:'单车背包',ColorName:'红色/灰'},
]
Material_Array.forEach(item => {
if (item.MaterialCode) {
// 删除id属性
delete item.MaterialCode;
}
})
console.log(Material_Array);
这个方法没什么好说的简单粗暴