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()改变了原始数组内容所以就会出现问题

建议换一种写法

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

AI模型 Llama 3体验笔记

【面试准备】又一次失败的面试经历，题目离谱～资深软件测试工程师

dotnet 8 版本与银河麒麟V10和UOS系统的 glibc 兼容性

vue修改data數據不能重新渲染

laravel框架的whereIn條件或者where條件裏面的in條件怎麼寫

2020京東618疊蛋糕腳本，親測可以用

2020京東618疊蛋糕一鍵做任務程序PC端

php微服務

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結