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

已于 2023-07-10 15:58:30 修改
阅读量344 收藏
点赞数 1
分类专栏： 知识点 文章标签： 前端 javascript vue.js
于 2023-01-09 14:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42154189/article/details/128578404
版权
本文详细介绍了JavaScript中数组的四个常用方法：pop、push、shift和unshift。pop用于从数组尾部删除一项并返回该值；push在尾部添加元素并返回新长度；shift移除数组开头的一项并返回移除的值；unshift在数组开头添加元素并返回新长度。这些方法都会改变原数组。
摘要由CSDN通过智能技术生成

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>

操作前

操作前

操作后

操作后

神膘护体小月半
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中数组的pop方法_数组pop（）方法以及JavaScript中的示例
07-02 8607
js中数组的pop方法 JavaScript pop()方法 (JavaScript pop() method) pop() method is used remove an element from the end of an array, it changes the length of the array. pop()方法用于从数组末尾删除元素，它会更改数组的长度。 Syntax: 句...
JavaScript 数组的常用方法之push、pop、shift、unshift
weixin_54012475的博客
02-13 696
文章目录一、push二、使用步骤1.引入库2.读入数据总结 一、push push方法是在数组的末尾添加元素，返回添加元素后数组的长度。该方法会改变原数组。 语法：arr.push( element，…，elementN ) 返回值：添加元素后的数组的长度 const array = [1,2,3] const result = array.push(4) // array [1,2,3,4] // result 4 二、使用步骤 1.引入库 代码如下（示例）： import numpy as n
js数组操作大全（转）
weixin_30414305的博客
12-21 441
shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefinedvar a = [1,2,3,4,5];var b = a.shift(); //a：[2,3,4,5] b：1 unshift：将参数添加到原数组开头，并返回数组的长度var a = [1,2,3,4,5];var b = a.unshift(-2,-1); //a：[-2,-1,1,2,3,4,5]...
数字改变滑动动画，element table数据更新动画
qq_37167086的博客
02-22 1767
数字在更新时，有一个向上滑动的动画 使用vue watch监听，有一个新值和一个旧值 两个值纵向排列 ，使用定位将该div向上移动 watch监听对象时，新旧值相等，需要搭配计算属性一起使用 <div class="animation"> <span>{{ oldInfo.alarm}}</span> <span>{{ info.alarm}}</span> </div> data() { r
vue+element ui中的tableData中的数据格式
taotie_的博客
01-05 8346
tableData接收的是一个数组，数组中的元素是一个个的键值对。 如图： tableData接收从后端返回的值，遍历一维数组，就是说， tabelData=member，那么从纵向而言，就是遍历数组的个数， tableData从member中，取出下标为0的所有数据，分别放在一个个label中。 如果是传入recruit或者follow的数据，都是不行的。 ...
数组push、pop、shift、unshift的模拟实现
Dear
12-22 358
Array.prototype.myPush = function (val) { const arr = this; arr[arr.length] = val; return arr.length; }; Array.prototype.myPop = function() { if (!this.length) { return undefined; } const val = this[this.length - 1]; this.length -= 1;
JS数组push、unshift、pop、shift方法的实现与使用方法示例
10-15
`push`、`unshift`、`pop`和`shift`是四个重要的数组方法，分别用于在数组的尾部和头部进行添加和删除元素的操作。 1. **push()方法**： `push()`方法用于在数组的末尾添加一个或多个元素，并返回更新后的数组长度...
js数组要用的方法：push、pop、unshift、shift、splice、reverse、sort、concat、join、slice、indexof、foreash、map、filter
YY的博客
10-12 1639
js数组方法：push、pop、unshift、shift、splice、reverse、sort、concat、join、slice、indexof、foreash、map、filter、every、some、reduce
JavaScript数组函数unshift、shift、pop、push使用实例
10-25
总结以上，JavaScript数组的unshift、shift、pop和push函数为开发者提供了非常便捷的方式来操作数组元素，这些函数的功能和使用场景需要牢记于心，以便在编程时能够灵活运用。通过这些函数，我们可以有效地管理数组...
Js数组的操作push,pop,shift,unshift等方法详细介绍
10-27
下面我们详细介绍push, pop, shift, unshift和splice等数组操作方法。 首先，push和pop方法主要用于数组的尾部操作。push方法可以将一个或多个元素添加到数组的末尾，并返回数组的新长度。例如，对于数组[1, 2, 3]...
使用transform使定位元素居中
神膘护体小月半的博客
11-16 9292
1.1水平居中 下面举一个例子，父元素里面有一个子元素。 子元素相对于父元素定位时，如果不写left和top，默认定位在父元素的左上角。 子元素加上left:50%之后，此时的50%是指父元素宽度的50%，也就是100px，也就是子元素以它自己的左边为基准，平移了100px的距离。 因为是以子元素的左边为基准，不算是完全的水平居中，需要再让子元素向左平移一丢丢(子元素宽度一半的距离)。如果前期不知道子元素的宽度，就可以用transform的translate属性了。transfo..
es6 特性之解构赋值
神膘护体小月半的博客
12-15 1040
解构赋值是什么 解构赋值是将一个对象的属性解构出来，赋值给需要的变量。属于表达式的语法糖。 // 赋值 let a,b; [a,b]=[1,2]; console.log(a,b);// 1 2 // 赋值 let c,d; [c,...d]=[1,2,3,4,5]; console.log(c);// 1 console.log(d);// [2,3,4,5] // 两个变量交换 let e=1,f=2; [e,f]=[f,e]; console.log(e);// 2 console.log(f
数组常用方法总结 (5) ：find / findIndex / filter
神膘护体小月半的博客
01-13 816
数组常用方法总结 (5) ：find / findIndex / filter
es6 特性之 Promise
神膘护体小月半的博客
12-16 737
Promise 是什么 Promise 是一个对象 在控制台打印 Promise 可以看到输出的结果为一个构造函数 Promise 上有自己的方法，reject 和 resolve ，原型上有 catch 和 then Promise 的作用 主要用于异步执行函数 控制函数执行顺序 在对象之间传递和操作 Promise Promise 的参数 Promise 函数接收一个参数，这个参数是一个回调函数 function ，这个 function 有两个入参，分别是 reject 和 resolve
数组常用方法总结 (4) ：slice / splice
神膘护体小月半的博客
01-12 715
数组常用方法总结 (4) ：slice / splice
visibilitychange 的使用
神膘护体小月半的博客
08-02 608
visibilitychange 的使用
数组常用方法总结 (6) ：includes / indexOf / lastIndexOf / valueOf / toString / isArray
神膘护体小月半的博客
01-16 599
数组常用方法总结 (6) ：includes / indexOf / lastIndexOf / valueOf / toString / isArray
宏任务与微任务
最新发布
神膘护体小月半的博客
04-12 555
宏任务与微任务
数组常用方法总结 (2) ：sort / join / reverse / concat
神膘护体小月半的博客
01-10 407
数组常用方法总结 (2) ：sort / join / reverse / concat
ES6数组操作方法总结：push、unshift、pop、shift、reverse与sort
"ES6数组方法的集合包括push(), unshift(), pop(), shift(), reverse(), 和sort()。这些方法都是用于操作和变换数组中的元素。" 在ES6中，数组提供了一系列便捷的方法来处理和操作数组元素。以下是这些方法的详细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值