1. [filtro] Filtrar, filtrar matrices y objetos de acuerdo con las condiciones especificadas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js操作数组大全</title>
</head>
<style>
.old {
background-color: rgb(234, 234, 234);
width: 350px;
height: auto;
border: 1px rgb(70, 70, 70) solid;
padding-left: 10px;
padding-top: 15px;
padding-bottom: 20px;
padding-right: 10px;
margin-bottom: 30px;
}
input {
height: 20px;
width: 200px;
}
.line {
width: 100%;
height: 2px;
margin-top: 20px;
margin-bottom: 20px;
background-color: rgb(187, 187, 187);
}
</style>
<script src="vue.js"></script>
<body>
<div id="arrlist">
<div>
<h5>======== 【filter】按指定条件筛选、过滤数组</h5>
<div class="old">
<div style="margin-bottom: 20px;">
<span v-for="(value,index) in mAges" :key="index"> {
{value}} ,  </span>
</div>
<button @click="nClick">筛选(大于3,小于5)</button>
<div class="line"></div>
<div>
<span v-for="(value,index) in mCitys" :key="index"> {
{value}} ,  </span>
</div>
<div>
<ul>
<li v-for="(value,index) in mStudents">
{
{value.id}} - {
{value.name}} - {
{value.age}} - {
{value.sex}}
</li>
</ul>
</div>
<div>
<input type="text" name="" id="" v-model:value="mText">
<button @click="mClick">开始过滤筛选</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
// 通过Js操作数组和对象最详细实例（图文+完整源代码）
var arrlist = new Vue({
el: "#arrlist",
data: {
ages: [6, 3, 8, 1, 5, 4, 2, 7],
citys: ["2.北京", "4.邯郸", "1.石家庄", "3.西安"],
students: [
{ id: "01", name: "张飞", age: 18, sex: "男" },
{ id: "02", name: "燕飞", age: 20, sex: "女" },
{ id: "03", name: "孔明", age: 35, sex: "男" },
{ id: "04", name: "貂蝉", age: 17, sex: "女" },
{ id: "05", name: "孔融", age: 23, sex: "男" }
],
mText: "",
mCitys: "",
mStudents: "",
mAges: ""
},
methods: {
// ======== 过滤筛选数组(>=3 and <=5)
nClick() {
this.mAges = this.ages.filter(
(value, index, SuiBian) => {
return (value >= 3 && value <= 5);
}
);
},
// 过滤筛选数组和对象(包含某个字符)
mClick() {
// 一维数组筛选过滤
this.mCitys = this.citys.filter(
(value, index, SuiBian) => {
return value.indexOf(this.mText) !== -1;
}
);
// 二维数组(对象)的筛选过滤
this.mStudents = this.students.filter((p) => {
return p.name.indexOf(this.mText) !== -1;
})
}
},
})
// 初始化数据
arrlist.mAges = arrlist.ages;
arrlist.mCitys = arrlist.citys;
arrlist.mStudents = arrlist.students;
</script>
</html>2. [ordenar] Ordenar por columnas ascendentes y descendentes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js操作数组大全</title>
</head>
<style>
.old {
background-color: rgb(234, 234, 234);
width: 350px;
height: auto;
border: 1px rgb(70, 70, 70) solid;
padding-left: 10px;
padding-top: 15px;
padding-bottom: 20px;
padding-right: 10px;
margin-bottom: 30px;
}
input {
height: 20px;
width: 200px;
}
.line {
width: 100%;
height: 2px;
margin-top: 20px;
margin-bottom: 20px;
background-color: rgb(187, 187, 187);
}
</style>
<script src="vue.js"></script>
<body>
<div id="arrlist">
<div>
<h5>======== 【sort】按定列进行升降排序</h5>
<div class="old">
<div style="margin-bottom: 20px;">
<span v-for="(value,index) in mAges" :key="index"> {
{value}} ,  </span>
</div>
<button @click="a_Click(1)">升序</button>
<button @click="a_Click(2)">降序</button>
<button @click="a_Click(0)">原始数据</button>
<div class="line"></div>
<div>
<span v-for="(value,index) in mCitys" :key="index"> {
{value}} ,  </span>
</div>
<div>
<ul>
<li v-for="(value,index) in mStudents">
{
{value.id}} - {
{value.name}} - {
{value.age}} - {
{value.sex}}
</li>
</ul>
</div>
<div>
<button @click="b_Click(2,'id')">序号降序</button>
<button @click="b_Click(1,'age')">年龄升序</button>
<button @click="b_Click(0)">原始数据</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
// 通过Js操作数组和对象最详细实例（图文+完整源代码）
var arrlist = new Vue({
el: "#arrlist",
data: {
ages: [6, 3, 8, 1, 5, 4, 2, 7],
students: [
{ id: "01", name: "张飞", age: 18, sex: "男" },
{ id: "02", name: "燕飞", age: 20, sex: "女" },
{ id: "03", name: "孔明", age: 35, sex: "男" },
{ id: "04", name: "貂蝉", age: 17, sex: "女" },
{ id: "05", name: "孔融", age: 23, sex: "男" }
],
mText: "",
mCitys: "",
mStudents: "",
mAges: "",
sortType: 0
},
methods: {
// ======== 数组排序
a_Click(n) {
if (n == 0) {
this.mAges = JSON.parse(JSON.stringify(this.ages));
}
if (n == 1) {
this.mAges = this.mAges.sort((p1, p2) => { return p1 - p2 });
}
if (n == 2) {
this.mAges = this.mAges.sort((p1, p2) => { return p2 - p1 });
}
},
// ======== 对象和二维数据排序
b_Click(n,m) {
if (n == 0) {
this.mStudents = JSON.parse(JSON.stringify(this.students));
}
if (n == 1) {
// 变量传参写法:将传参数m中的值放入命令行中
comm = "this.mStudents = this.mStudents.sort((p1, p2) => { return p1."+m+" - p2."+m+" });"
eval(comm);
// 非传参写法:this.mStudents = this.mStudents.sort((p1, p2) => { return p1.age - p2.age });
}
if (n == 2) {
// 变量传参写法:将传参数m中的值放入命令行中
comm = "this.mStudents = this.mStudents.sort((p1, p2) => { return p2."+m+" - p1."+m+" });"
eval(comm);
// 非传参写法:this.mStudents = this.mStudents.sort((p1, p2) => { return p2.id - p1.id });
}
},
},
})
// 初始化数据
arrlist.mAges = JSON.parse(JSON.stringify(arrlist.ages));
arrlist.mStudents = JSON.parse(JSON.stringify(arrlist.students));
</script>
</html>3. [Añadir, eliminar, modificar] orden ascendente y descendente según determinadas columnas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js操作数组大全</title>
</head>
<style>
.old {
background-color: rgb(234, 234, 234);
width: 500px;
height: auto;
border: 1px rgb(70, 70, 70) solid;
padding-left: 10px;
padding-top: 15px;
padding-bottom: 20px;
padding-right: 10px;
margin-bottom: 30px;
}
input {
height: 20px;
width: 200px;
}
.line {
width: 100%;
height: 2px;
margin-top: 20px;
margin-bottom: 20px;
background-color: rgb(187, 187, 187);
}
button {
margin-top: 10px;
}
</style>
<script src="vue.js"></script>
<body>
<div id="arrlist">
<div>
<h5>======== 【增加和删除】按定列进行升降排序</h5>
<div class="old">
<div style="margin-bottom: 20px;">
<span v-for="(value,index) in mAges" :key="index"> {
{value}} ,  </span>
</div>
<button @click="a_Click(1)">末尾添加9</button>
<button @click="a_Click(3)">开头添加0</button>
<button @click="a_Click(2)">末尾删除</button>
<button @click="a_Click(4)">开头删除</button><br>
<button @click="a_Click(5)">删除3-5数值</button>
<button @click="a_Click(6)">从位置2添加0,9</button>
<button @click="a_Click(7)">从位置5替换0,0</button>
<button @click="a_Click(0)">原始数据</button>
<div class="line"></div>
<div>
<span v-for="(value,index) in mCitys" :key="index"> {
{value}} ,  </span>
</div>
<div>
<ul>
<li v-for="(value,index) in mStudents">
{
{value.id}} - {
{value.name}} - {
{value.age}} - {
{value.sex}}
</li>
</ul>
</div>
<div>
<button @click="b_Click(1)">末尾增加记录</button>
<button @click="b_Click(3)">开头添加记录</button>
<button @click="b_Click(2)">删除末尾记录</button>
<button @click="b_Click(4)">删除开头记录</button><br>
<button @click="b_Click(5)">删除2-3数值</button>
<button @click="b_Click(6)">从位置3添加2组</button>
<button @click="b_Click(7)">从位置2替换2组</button>
<button @click="b_Click(0)">原始数据</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
// 通过Js操作数组和对象最详细实例（图文+完整源代码）
var arrlist = new Vue({
el: "#arrlist",
data: {
ages: [6, 3, 8, 1, 5, 4, 2, 7],
students: [
{ id: "01", name: "张飞", age: 18, sex: "男" },
{ id: "02", name: "燕飞", age: 20, sex: "女" },
{ id: "03", name: "孔明", age: 35, sex: "男" },
{ id: "04", name: "貂蝉", age: 17, sex: "女" },
{ id: "05", name: "孔融", age: 23, sex: "男" }
],
mText: "",
mCitys: "",
mStudents: "",
mAges: "",
sortType: 0
},
methods: {
// ======== 数组排序
a_Click(n) {
if (n == 0) {
this.mAges = JSON.parse(JSON.stringify(this.ages));
}
if (n == 1) {
// push向后面添加数组
this.mAges.push(9);
}
if (n == 2) {
// pop从末尾删除数组
this.mAges.pop();
}
if (n == 3) {
// unshift向后面添加数组
this.mAges.unshift(0);
}
if (n == 4) {
// shift从末尾删除数组
this.mAges.shift();
}
if (n == 5) {
// splice(位置,个数)删除3-5数组,从0开始
this.mAges.splice(2, 3);
}
if (n == 6) {
// 从某位置添加,splice(index,len,[item]),index:位置,len:个数为0,是添加
this.mAges.splice(1, 0, 0,9);
}
if (n == 7) {
// 替换splice(index,len,[item]),index:位置,len:替换个数,值
this.mAges.splice(4, 2, 0,0);
}
},
// ======== 对象和二维数据排序
b_Click(n) {
if (n == 0) {
this.mStudents = JSON.parse(JSON.stringify(this.students));
}
if (n == 1) {
// push向后面添加数组
this.mStudents.push({ id: "06", name: "李白", age: 23, sex: "男" });
}
if (n == 2) {
// push从末尾删除数组
this.mStudents.pop();
}
if (n == 3) {
// unshift向后面添加数组
this.mStudents.unshift({ id: "00", name: "杜甫", age: 21, sex: "男" });
}
if (n == 4) {
// push从末尾删除数组
this.mStudents.shift();
}
if (n == 5) {
// splice(位置,个数)删除3-5数组,从0开始
this.mStudents.splice(2, 2);
}
if (n == 6) {
// 从某位置添加,splice(index,len,[item]),index:位置,len:个数为0,是添加
this.mStudents.splice(2, 0,{ id: "00", name: "杜甫", age: 21, sex: "男" },{ id: "00", name: "杜甫", age: 21, sex: "男" });
}
if (n == 7) {
// 替换splice(index,len,[item]),index:位置,len:个数,从0开始
this.mStudents.splice(1, 2, { id: "02", name: "杜甫", age: 21, sex: "男" },{ id: "03", name: "杜甫", age: 21, sex: "男" });
}
},
},
})
// 初始化数据
arrlist.mAges = JSON.parse(JSON.stringify(arrlist.ages));
arrlist.mStudents = JSON.parse(JSON.stringify(arrlist.students));
</script>
</html>Continuando con la actualización...