需求：
此案例在vue中才能体现出真正价值，但是却很好的考察了js的基础扎不扎实
先来个js原生的底层逻辑和js的基础知识
<script>
let arr = ["帅哥", "美女", "程序猿"]
// 筛选出数组的第一个元素
let firstArr = arr.filter((item, index) => index === 0)
// 筛选出数组的除第一个元素的其他元素
let rearArr = arr.filter((item, index) => !index === 0)
// concat 拼接数组 括号里面(firstArr)的会被拼接到(rearArr)数组的最后面
// 得到的数组就可以实现**数组元素依次前后交换位置**
rearArr.concat(firstArr)
// arr = rearArr.concat(firstArr) 如果此时把这个结果赋值给原数组
就实现 [ "美女", "程序猿", "帅哥"]
</script>
这里运用到了
数组的filter()方法： 可以筛选数组里面
满足条件
的元素，
返回一个新数组
，
并且不会影响原来的数组
和concat()方法可以合并两个数
组成一个新数组
，
不会影响原数组
，
()里面是被合并的数组
，会被合并到使用方法的数组的最后面
为什么一直强调会不会影响元数组？因为在vue中是靠数据驱动页面的内容的，如果页面使用到数组里的数据，数组的元素改变的页面也就跟着一起改变了。接下来看vue中的实例
架手架中的文件：
<template>
<div id="app">
<ul>
<li v-for="(item, index) in myArr" :key="index">{{ item }}</li>
</ul>
<button @click="go">走一走</button>
</div>
</template>
<script>
export default {
data() {
return {
myArr: ["帅哥", "美女", "程序猿"],
// isIndex: 0,
firstItem: [],
laterItem: [],
};
},
methods: {
go() {
this.firstItem = this.myArr.filter((item, index) => index == 0);
this.laterItem = this.myArr.filter((item, index) => !index == 0);
this.myArr = this.laterItem.concat(this.firstItem);
},
},
};
</script>
没有脚手架，引入js文件：
<!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>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in myArr" :key="index">{{ item }}</li>
</ul>
<button @click="go">走一走</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
myArr: ["帅哥", "美女", "程序猿"],
// isIndex: 0,
firstItem: [],
laterItem: [],
},
methods: {
go() {
this.firstItem = this.myArr.filter((item, index) => index == 0);
this.laterItem = this.myArr.filter((item, index) => !index == 0);
this.myArr = this.laterItem.concat(this.firstItem);
},
},
})
</script>
</body>
</html>关于数组的所有方法也有小总结：
数组
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(起始位置，结束位置) 分割数组元素
截取数组的某些元素并返回一个新的数组对象，不会影响原来的数组