javaScript中的array.reverse()用法注意項

前端的小禿頭們我相信很多人對於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()改變了原始數組內容  所以就會出現問題

建議換一種寫法

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章