数组常用方法总结 (2) ：sort / join / reverse / concat

本文链接：https://blog.youkuaiyun.com/weixin_42154189/article/details/128581273

本文介绍了JavaScript中数组的sort方法用于排序，包括默认升序及自定义排序逻辑，同时展示了reverse方法进行反向排序以及concat方法用于数组拼接，所有操作均影响原数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

sort

排序后会改变原有数组。
简单数组和对象数组都可以进行排序。
默认升序排序。

<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">
                {{ newObject ? "操作后的数组" : "操作前的数组" }}
            </div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="index" label="序号" width="200">
                </el-table-column>
                <el-table-column prop="name" label="昵称"> </el-table-column>
            </el-table>
            <div class="simpleTable">
                <div class="title">提取序号简单数组</div>
                <div class="indexArr">
                    <div v-for="(item, index) in indexArr" :key="index">
                        {{ item }}
                    </div>
                </div>
                <div class="title">提取昵称简单数组</div>
                <div class="nameArr">
                    <div v-for="(item, index) in nameArr" :key="index">
                        {{ item }}
                    </div>
                </div>
            </div>
        </div>
        <div class="operate">
            <el-button type="success" plain @click="operate(1)">
                sort-提取序号-默认排序
            </el-button>
            <el-button type="success" plain @click="operate(2)">
                sort-提取序号-控制升降
            </el-button>
            <el-button type="success" plain @click="operate(3)">
                sort-提取昵称-默认排序
            </el-button>
            <el-button type="success" plain @click="operate(4)">
                sort-使用序号-控制升降
            </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                { index: "20", name: "ac" },
                { index: "11", name: "bz" },
                { index: "25", name: "az" },
                { index: "4", name: "zz" },
            ],
            indexArr: [],
            nameArr: [],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {
        this.indexArr = [];
        this.nameArr = [];
        this.tableData.forEach((item, index) => {
            // 提取序号，生成简单数组
            this.indexArr.push(item.index);
        });
        this.tableData.forEach((item, index) => {
            // 提取昵称，生成简单数组
            this.nameArr.push(item.name);
        });
    },
    methods: {
        operate(flag) {
            if (flag == 1) {
                // 进行默认排序
                // 先比较第一位数字，再比较第二位数字，与 number 类型数字比较逻辑不同
                this.newObject = this.indexArr.sort();
            } else if (flag == 2) {
                // 控制顺序的排序
                this.newObject = this.indexArr.sort(function (prev, next) {
                    // prev 和 next 为相邻的两个元素，遍历数组比较元素
                    // 这里的比较会将 index 转换成 number 类型进行排序
                    // 升序
                    return prev - next;
                    // 降序
                    // return next - prev;
                });
            } else if (flag == 3) {
                // 进行默认排序
                // 先比较第一位字母，再比较第二位字母，按照码表排序
                this.newObject = this.nameArr.sort();
            } else if (flag == 4) {
                // 直接对原始数组进行排序
                this.newObject = this.tableData.sort(function (prev, next) {
                    // prev 和 next 为相邻的两个元素，遍历数组比较元素
                    // 升序
                    return prev.index - next.index;
                    // 降序
                    // return next.index - prev.index;
                });
            }

            this.num += 1;
        },
    },
};
</script>

操作前

操作后

sort-提取序号-默认排序

// 进行默认排序
// 先比较第一位数字，再比较第二位数字，与 number 类型数字比较逻辑不同
this.newObject = this.indexArr.sort();

先对比数字的第一位，再对比第二位。
与 number 类型的升序逻辑不同。
即使是 number 类型的数值参与排序，也会被转换成字符串类型排序。

操作后

sort-提取序号-控制升降

// 控制顺序的排序
this.newObject = this.indexArr.sort(function (prev, next) {
    // prev 和 next 为相邻的两个元素，遍历数组比较元素
    // 这里的比较会将 index 转换成 number 类型进行排序
    // 升序
    return prev - next;
    // 降序
    // return next - prev;
});

复杂排序时，控制升降，用到了运算符，所以将字符串类型的内容转换成了 number 类型进行排序
根据 return 的值可以控制是升序还是降序

操作后

sort-提取昵称-默认排序

// 进行默认排序
// 先比较第一位字母，再比较第二位字母，按照码表排序
this.newObject = this.nameArr.sort();

先比较第一位字母，再比较第二位字母
按照码表进行排序

操作后

sort-使用序号-控制升降

// 直接对原始数组进行排序
this.newObject = this.tableData.sort(function (prev, next) {
    // prev 和 next 为相邻的两个元素，遍历数组比较元素
    // 升序
    return prev.index - next.index;
    // 降序
    // return next.index - prev.index;
});

原始的数组在排序后会被改变。
返回值为改变顺序后的数组。

操作后

join

使用字符将数组内容拼接起来。
返回值为字符串类型。
不会改变拼接前数组的内容。
可用于拼接键值对数组内容（如下示例）。

<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">原始数组</div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="key" label="键名"> </el-table-column>
                <el-table-column prop="value" label="值"> </el-table-column>
            </el-table>
        </div>
        <div class="operate">
            <el-button type="success" plain @click="operate"> join </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                { key: "name", value: "张三" },
                { key: "age", value: "18" },
                { key: "phone", value: "153****0000" },
                { key: "idCard", value: "100000********0000" },
            ],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {},
    methods: {
        operate() {
            let keyVal = [];
            this.tableData.forEach((item, index) => {
                keyVal.push(item.key + "=" + item.value);
            });
            this.newObject = keyVal.join("&");
        },
    },
};
</script>

操作前

操作后

reverse

改变原有数组的排序（反向）。
适用普通数组和对象数组。
原始数组会改变。
返回值为改变顺序后的数组。

<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">原始数组</div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="key" label="键名"> </el-table-column>
                <el-table-column prop="value" label="值"> </el-table-column>
            </el-table>
        </div>
        <div class="operate">
            <el-button type="success" plain @click="operate">
                reverse
            </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                { key: "name", value: "张三" },
                { key: "age", value: "18" },
                { key: "phone", value: "153****0000" },
                { key: "idCard", value: "100000********0000" },
            ],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {},
    methods: {
        operate() {
            this.newObject = this.tableData.reverse();
            this.num += 1;
        },
    },
};
</script>

操作前

操作后

concat

将原始数组与新数组进行拼接。
适用普通数组和对象数组。
不改变原有的数组。
返回值为拼接后的数组。

<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">原始数组</div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="key" label="键名"> </el-table-column>
                <el-table-column prop="value" label="值"> </el-table-column>
            </el-table>
        </div>
        <div class="operate">
            <el-button type="success" plain @click="operate">
                concat
            </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                { key: "name", value: "张三" },
                { key: "age", value: "18" },
                { key: "phone", value: "153****0000" },
                { key: "idCard", value: "100000********0000" },
            ],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {},
    methods: {
        operate() {
            let tempArr = [
                { key: "link", value: "http://XXX.XX.XX" },
                { key: "image", value: "XXX.png" },
            ];
            this.newObject = this.tableData.concat(...tempArr);
            this.num += 1;
        },
    },
};
</script>