数组常用方法总结 (1) ：pop / push / shift / unshift

news2024/11/16 12:27:36

pop

从尾部删除一项。
改变原有数组。
返回删除掉的内容。

<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">
                {{ newObject ? "操作后的数组" : "操作前的数组" }}
            </div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="name" label="姓名" width="200">
                </el-table-column>
                <el-table-column prop="phone" label="电话" width="200">
                </el-table-column>
                <el-table-column prop="idCard" label="证件号">
                </el-table-column>
            </el-table>
        </div>
        <div class="operate">
            <el-button type="success" plain @click="operate">
                pop
            </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {
    	// 渲染假数据
        for (var i = 1; i < 4; i++) {
            this.tableData.push({
                name: "员工" + i + "号",
                phone: "153****0000",
                idCard: "1111**********0000",
            });
        }
    },
    methods: {
        operate() {
            this.newObject = this.tableData.pop();
            // 更新 table 节点，可以直观看到原有数组是否改变
            this.num += 1;
        },
    },
};
</script>

操作前

操作后

push

从尾部添加一项。
改变原有数组。
返回操作后的数组的长度。

<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">
                {{ newObject ? "操作后的数组" : "操作前的数组" }}
            </div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="name" label="姓名" width="200">
                </el-table-column>
                <el-table-column prop="phone" label="电话" width="200">
                </el-table-column>
                <el-table-column prop="idCard" label="证件号">
                </el-table-column>
            </el-table>
        </div>
        <div class="operate">
            <el-button type="success" plain @click="operate">
                push
            </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {
    	// 渲染假数据
        for (var i = 1; i < 4; i++) {
            this.tableData.push({
                name: "员工" + i + "号",
                phone: "153****0000",
                idCard: "1111**********0000",
            });
        }
    },
    methods: {
        operate() {
            this.newObject = this.tableData.push({
                name: "test",
                phone: "testPhone",
                idCard: "testIdCars",
            });
            // 更新 table 节点，可以直观看到原有数组是否改变
            this.num += 1;
        },
    },
};
</script>

操作前

操作后

shift

从头部删除一项。
改变原有数组。
返回删除掉的内容。

<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">
                {{ newObject ? "操作后的数组" : "操作前的数组" }}
            </div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="name" label="姓名" width="200">
                </el-table-column>
                <el-table-column prop="phone" label="电话" width="200">
                </el-table-column>
                <el-table-column prop="idCard" label="证件号">
                </el-table-column>
            </el-table>
        </div>
        <div class="operate">
            <el-button type="success" plain @click="operate">
                shift
            </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {
    	// 渲染假数据
        for (var i = 1; i < 4; i++) {
            this.tableData.push({
                name: "员工" + i + "号",
                phone: "153****0000",
                idCard: "1111**********0000",
            });
        }
    },
    methods: {
        operate() {
            this.newObject = this.tableData.shift();
            // 更新 table 节点，可以直观看到原有数组是否改变
            this.num += 1;
        },
    },
};
</script>

操作前

操作后

unshift

从头部添加一项。
改变原有数组。
返回添加后的数组的长度。

<template>
    <div class="myBlock">
        <div class="tableBlock">
            <div class="title">
                {{ newObject ? "操作后的数组" : "操作前的数组" }}
            </div>
            <el-table :data="tableData" :key="num" stripe border>
                <el-table-column prop="name" label="姓名" width="200">
                </el-table-column>
                <el-table-column prop="phone" label="电话" width="200">
                </el-table-column>
                <el-table-column prop="idCard" label="证件号">
                </el-table-column>
            </el-table>
        </div>
        <div class="operate">
            <el-button type="success" plain @click="operate">
                unshift
            </el-button>
        </div>
        <div class="title" v-if="newObject">操作后的返回值</div>
        <div class="newObject">
            {{ newObject }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            num: 0,
            newObject: null,
        };
    },
    watch: {},
    mounted() {
    	// 渲染假数据
        for (var i = 1; i < 4; i++) {
            this.tableData.push({
                name: "员工" + i + "号",
                phone: "153****0000",
                idCard: "1111**********0000",
            });
        }
    },
    methods: {
        operate() {
            this.newObject = this.tableData.unshift({
                name: "test",
                phone: "testPhone",
                idCard: "testIdCars",
            });
            // 更新 table 节点，可以直观看到原有数组是否改变
            this.num += 1;
        },
    },
};
</script>