数组
arr.push() 给数组的末尾添加数据，并返回新的长度, 影响原来的数组
arr.pop() 删除数组的最后一个元素，并返回删除的这个元素, 影响原来的数组
arr.shift() 删除数组的第一个元素，并返回删除的这个元素, 影响原来的数组
arr.unshift() 向数组的第一个位置添加元素，并返回新的长度, 影响原来的数组
arr.reverse() 翻转数组 翻转数组的排序：顺序 倒序 切换, 影响原来的数组
arr.splice(起始位置,结束位置,替换的值) splice 方法可以实现数组的删除、添加、修改。取决于第二个值，删除数组元素指定元素 如果只传一个参数 表示从这个起始位置删除到最后, 影响原来的数组
arr.sort((a,b)=> a-b) 数组排序
a-b：升序排列
b-a：降序排列
arr.reduce() 数组求和方法，不会影响原来的数组
arr.filter() 筛选过滤数组里满足的元素，并存入一个空数组里面返回这个数组，不会影响原来的数组
arr.findIndex() 筛选满足条件的数组的索引值，不会影响原来的数组
arr.concat() 方法用于连接两个或多个数组，不会影响原来的数组
arr.indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
arr.join('') 分隔 把数组用给定的分隔符隔开 存入一个字符串，不会影响原来的数组
arr.slice(起始位置，结束位置) 分割数组元素 截取数组的某些元素并返回一个新的数组对象，不会影响原来的数组
vue和js原生实现数组元素依次前后交换位置_幸亏IE没主流的博客-CSDN博客_数组前后位置互换
需求：此案例在vue中才能体现出真正价值，但是却很好的考察了js的基础扎不扎实先来个js原生的底层逻辑和js的基础知识 <script> let arr = ["帅哥", "美女", "程序猿"] // 筛选出数组的第一个元素 let firstArr = arr.filter((item, index) => index === 0) // 筛选出数组的除第一个元素的其他元素 let rearArr = arr.filter
https://blog.csdn.net/qq_46325260/article/details/122992773
1、循环遍历数组修改某键值的value值
// 把dayChecklistMge的updateUsern修改内容为“张三”
this.pdDesc.dayChecklistMge.forEach(item => {
item.updateUser = "张三";
2、将两个数组合并
// 把dayFuwuMge添加到dayChecklistMge中
this.pdDesc.dayChecklistMge.push(...this.pdDesc.dayFuwuMge);
3、数组按某个键值列排序
相反排序可将b和a交换即可
// checkTime排序
this.pdDesc.dayChecklistMge.sort((b, a) => {
return new Date(a.checkTime) - new Date(b.checkTime);
4、修改数组 中的革某个键值名称
// 遍历数组，将 fullName 改为 text, id 改为 value,
this.dataTree = this.dataTree.map(function(item) {
return {
text: item.fullName,
value: item.id
5、向数组中添加“键值对”
var jsonArray = [
{ id: 1, name: "A" },
{ id: 2, name: "B" },
{ id: 3, name: "C" }
console.log(jsonArray);
// 向所有数组中添加一个新键值对：age
jsonArray.forEach(function (item) {
item.age = 18;
console.log(jsonArray);
6、把数组A作为数组B的某个键值
let aaa = [{text: "text",value: 110000},{text: "text",value: 110}]
let bbb = {
children: [{
text: "请选择",
value: "请选择",
children: [{
text: "请选择",
value: "请选择",
aaa.forEach(item => {
item.children = bbb.children
一、遍历数组对象方式进行修改数组值
<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>数组修改案例</title>
<script src="js/vue/vue.js"></script>
</head>
<style>
margin: 0;
padding: 0;
margin-left: 10px;
margin-top: 10px;
button {
height: 40px;
width: 200px;
margin-bottom: 15px;
</style>
<div id="app">
<div id="card_list">
<button @click="card_click">【修改】id=003的内容为睡觉</button>
<div v-for="item in card_list" class="card_list_1">
{ id：{{item.id}}，title：{{item.title}} },
<button @click="delete_click">【删除】id=002的一行</button>
<button @click="add_click">【增加】004，睡觉</button>
</body>
<!-- 选中效果 -->
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
card_list: [
{ id: "001", title: "抽烟" },
{ id: "002", title: "喝酒" },
{ id: "003", title: "烫头" },
methods: {
card_click() {
this.card_list.forEach((item) => {
if (item.id === "003") {
item.title = "睡觉";
delete_click() {
this.card_list.forEach((item, index) => {
if (item.id === "002") {
this.card_list.splice(index, 1);
add_click() {
let listObj1={id:"000",title:"于钱"};
this.card_list.unshift(listObj1);
let listObj2={id:"004",title:"睡觉"};
this.card_list.push(listObj2);
</script>
二、【filter】按指定条件筛选、过滤数组与对象
<!DOCTYPE html>
<html lang="en">
<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>
<div id="arrlist">
<h5>======== 【filter】按指定条件筛选、过滤数组</h5>
<div class="old">
<div style="margin-bottom: 20px;">
<span v-for="(value,index) in mAges" :key="index"> {{value}} ,  </span>
<button @click="nClick">筛选(大于3,小于5)</button>
<div class="line"></div>
<span v-for="(value,index) in mCitys" :key="index"> {{value}} ,  </span>
<li v-for="(value,index) in mStudents">
{{value.id}} - {{value.name}} - {{value.age}} - {{value.sex}}
<input type="text" name="" id="" v-model:value="mText">
<button @click="mClick">开始过滤筛选</button>
</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>
三、【sort】按定列进行升降排序
<!DOCTYPE html>
<html lang="en">
<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>
<div id="arrlist">
<h5>======== 【sort】按定列进行升降排序</h5>
<div class="old">
<div style="margin-bottom: 20px;">
<span v-for="(value,index) in mAges" :key="index"> {{value}} ,  </span>
<button @click="a_Click(1)">升序</button>
<button @click="a_Click(2)">降序</button>
<button @click="a_Click(0)">原始数据</button>
<div class="line"></div>
<span v-for="(value,index) in mCitys" :key="index"> {{value}} ,  </span>
<li v-for="(value,index) in mStudents">
{{value.id}} - {{value.name}} - {{value.age}} - {{value.sex}}
<button @click="b_Click(2,'id')">序号降序</button>
<button @click="b_Click(1,'age')">年龄升序</button>
<button @click="b_Click(0)">原始数据</button>
</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>
四、【增加和删除、修改】按定列进行升降排序
<!DOCTYPE html>
<html lang="en">
<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>
<div id="arrlist">
<h5>======== 【增加和删除】按定列进行升降排序</h5>
<div class="old">
<div style="margin-bottom: 20px;">
<span v-for="(value,index) in mAges" :key="index"> {{value}} ,  </span>
<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>
<span v-for="(value,index) in mCitys" :key="index"> {{value}} ,  </span>
<li v-for="(value,index) in mStudents">
{{value.id}} - {{value.name}} - {{value.age}} - {{value.sex}}
<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>
</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>
持续更新中......
一、【filter】按指定条件筛选、过滤数组与对象<!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-sc
<div id=fb-root></div>
[removed](function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
转自：https://www.cnblogs.com/curedfisher/p/12267867.html
1，锁定数组的长度(只读模式)[ Array.join() ]
var a = [1,2,3] //定义一个数组<br>
Object.defineProperty(a,"length",{
writable:false
}) //将a数组的长度属性设为只读<br>
a.length = 0 //将a的长度改为0<br>
console.log(a.l
<div class="list">
<h3>数组排序</h3>
<div><span>排序后</span>{{sortAry}}</div>
在vue中，遍历数组和对象的方式略有不同，不能完全以数组或对象的遍历方式给对方使用并获取数据。为了记录以及以后方便查看，现在对其进行整理。
数组遍历
array = [1,2,3,4,5]
数组的遍历有以下几种
获取数组的长度进行遍历
for (let i = 0; i<array.length;i++) {
Console.log("遍历后的数据",array[i]);
使用foreach遍历
array.foreach((index) => {
vue中数组的常用方法：push、pop、shift、unshift、splice、sort、reverse、filter、find、findIndex、some、every。
1、push在数组的末尾增加一个元素，一次可以增加多个
2、pop在数组末尾删除一个元素
3、shift删除第一个元素
4、unshift在数组头部增加一个元素或者多个
5、splice删除、插入或者替换元素
6、sort数组排序
7、reverse 数组反转
8、filter创建一个新数组，新数组中的元素是符合指定条
在上面的示例中，我们使用v-for指令来遍历名为items的对象数组。每个数组项都会被渲染为一个li元素，并显示item.name的值。需要注意的是，我们还为每个li元素提供了一个唯一的key属性，以便Vue能够跟踪每个元素的身份。
如果你想在遍历过程中获取索引值，可以使用以下语法：
```html
<li v-for="(item, index) in items" :key="item.id">
{{ index + 1 }}. {{ item.name }}
在上面的示例中，我们使用(index + 1)来显示索引值，并将其与item.name一起显示在li元素中。
【Vue】Vue中在html元素插入表达示{{print.createTime.substring(0,10)}}中，报错 (reading ‘substring‘)的解决方法
2301_77529681:
【小程序】已有公众号认证，一步一步申请小程序（图文）
Fraser207:
【JS】JavaScript中创建数组的6种方式（代码示例合集）
jp2221982388:
【小程序】已有公众号认证，一步一步申请小程序（图文）
林钟三江:
【Vue】通守v-if加载div时，总是闪一下的解决方法（已解决，代码示例）
lyweb32:
