前端的小禿頭們我相信很多人對於array.reverse()翻轉數組的這個函數肯定很熟悉的,但是其實我個人建議還是需要根據自己的場景來使用這個函數 因爲它有可能讓你採坑掉頭髮
首先我們來回顧一下array的常用函數吧
Array對象常用方法:
不改變原數組:
1、concat() 連接兩個或多個數組,並將新的數組返回,不改變原數組,返回新的數組
2、join() 把數組中所有元素放入一個字符串,將數組轉換爲字符串,不改變原數組,返回字符串
3、slice() 從已有的數組中返回選定的元素,提取部分元素,放到新數組中,參數解釋:1:截取開始的位置的索引,包含開始索引;2:截取結束的位置的索引,不包含結束索引。不改變原數組,返回一個新數組
4、toString() 把數組轉爲字符串,不改變原數組,返回數組的字符串形式
改變原數組:
5、pop() 刪除數組最後一個元素,如果數組爲空,則不改變數組,返回undefined,改變原數組,返回被刪除的元素
6、push() 向數組末尾添加一個或多個元素,改變原數組,返回新數組的長度
7、reverse() 顛倒數組中元素的順序,改變原數組,返回該數組
8、shift() 把數組的第一個元素刪除,若空數組,不進行任何操作,返回undefined,改變原數組,返回第一個元素的值
9、sort() 對數組元素進行排序,改變原數組,返回該數組
10、splice() 從數組中添加/刪除項目,改變原數組,返回被刪除的元素
11、unshift() 向數組的開頭添加一個或多個元素,改變原數組,返回新數組的長度
循環數組
12、forEach() 瀏覽器會在回調函數中傳遞三個參數
第一個參數就是當前正在遍歷的元素
第二個參數就是當前正在遍歷的元素的索引
第三個參數就是正在遍歷的數組
var arr=['a','b','c'];
arr.forEach(function(item,index){
console.log(item); //a b c
console.log(index);//0 1 2
})
所以array.reverse()只適用於原始數組只改變一次的場景
下面是一個 點擊正序和倒序來顯示的demo
1、使用array.reverse()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
</head>
<body>
<div id="app">
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="正序顯示" name="first">正序顯示</el-tab-pane>
<el-tab-pane label="倒序顯示" name="second">正序顯示</el-tab-pane>
</el-tabs>
<div>
<el-card class="box-card" v-for="(item,index) in list" :key="index">
<div slot="header" class="clearfix">
<span>{{item.id}}</span>
<el-button type="text">{{item.name}}</el-button>
{{'列表內容 ' + item.address }}
</div>
</el-card>
</div>
</template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
activeName: 'first',
itemList: [
{
"id": 0,
"name": "王小婷",
"address": "徐家彙"
},
{
"id": 1,
"name": "小星星",
"address": "秀沿路"
},
{
"id": 2,
"name": "王小婷",
"address": "迪斯尼"
},
{
"id": 3,
"name": "李俊飛",
"address": "徐家彙"
},
{
"id": 4,
"name": "小金龍",
"address": "東方體育中心"
},
{
"id": 5,
"name": "小星星",
"address": "漕寶路"
},
{
"id": 6,
"name": "小潘子",
"address": "合川路"
},
{
"id": 7,
"name": "小婷婷",
"address": "龍漕路"
},
{
"id": 8,
"name": "小兔子",
"address": "松江大學城"
},
{
"id": 9,
"name": "王對對",
"address": "龍耀路"
},
{
"id": 10,
"name": "王胖胖",
"address": "三林東"
}
],
rankFlag: true,//默認正序
},
computed: {
// 計算屬性的 getter
list: function () {
// `this` 指向 vm 實例
return this.rankFlag==true?this.itemList:this.itemList.reverse();
}
},
methods: {
handleClick(tab, event) {
this.rankFlag = tab.name=='first'?true:false;
}
}
})
</script>
</html>
2、不使用array.reverse()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
</head>
<body>
<div id="app">
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="正序顯示" name="first"></el-tab-pane>
<el-tab-pane label="倒序顯示" name="second"></el-tab-pane>
</el-tabs>
<div>
<el-card class="box-card" v-for="(item,index) in list" :key="index">
<div slot="header" class="clearfix">
<span>{{item.id}}</span>
<el-button type="text">{{item.name}}</el-button>
{{ item.address }}
</div>
</el-card>
</div>
</template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
activeName: 'first',
itemList: [
{
"id": 0,
"name": "王小婷",
"address": "徐家彙"
},
{
"id": 1,
"name": "小星星",
"address": "秀沿路"
},
{
"id": 2,
"name": "王小婷",
"address": "迪斯尼"
},
{
"id": 3,
"name": "李俊飛",
"address": "徐家彙"
},
{
"id": 4,
"name": "小金龍",
"address": "東方體育中心"
},
{
"id": 5,
"name": "小星星",
"address": "漕寶路"
},
{
"id": 6,
"name": "小潘子",
"address": "合川路"
},
{
"id": 7,
"name": "小婷婷",
"address": "龍漕路"
},
{
"id": 8,
"name": "小兔子",
"address": "松江大學城"
},
{
"id": 9,
"name": "王對對",
"address": "龍耀路"
},
{
"id": 10,
"name": "王胖胖",
"address": "三林東"
}
],
rankFlag: true,//默認正序
},
computed: {
// 計算屬性的 getter
list: function () {
// `this` 指向 vm 實例
return this.rankFlag ? this.itemList : this.listDescFunc();
}
},
methods: {
handleClick(tab, event) {
this.rankFlag = tab.name == 'first' ? true : false;
},
listDescFunc() {
let newArr = [];
let arr = this.itemList;
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}
}
})
</script>
</html>
使用了array.reverse()改變了原始數組內容 所以就會出現問題
建議換一種寫法