简单了解vue.js数组的常用操作

数组的相关方法如下

1，锁定数组的长度(只读模式)[ Array.join() ]

var a = [1,2,3] //定义一个数组<br>
Object.defineProperty(a,"length",{
writable:false
}) //将a数组的长度属性设为只读<br>
a.length = 0 //将a的长度改为0<br>
console.log(a.length); //打印a数组的长度，还是3

2、将数组合并成字符串（返回字符串）[ Array.join() ]

var a = [1,2,3];
var b = a.join("");
console.log(a); //[1, 2, 3],原数组不改变
console.log(b); //"123",变成字符串

3、返回逆序数组（倒叙排列数组）[ Array..reverse() ]

var a = [1,2,3];
a.reverse();
console.log(a); //直接改变a数组的值 返回的是[3,2,1]

4、Array.sort()方法，返回排序后的数组。如果数组包含undefined，会被排到数组的尾部。如果不带参数的调用sort()，数组元素以字母表顺序排序。

从大到小排列
var a = [2,33,1111,444];
a.sort()
console.log(a); //返回的结果是[1111, 2, 33, 444]
从小到大排列
var a = [2,33,1111,444];
a.sort(function (a,b) {
return a-b
})
console.log(a); //[2, 33, 444, 1111]

5、Array.concat(),创建并返回一个新数组

var a = [1,2,3];
var b = a.concat(4,5);
var c = a.concat([4,5]);
console.log(a); //返回的还是[1,2,3]
console.log(b); //返回[1,2,3,4,5]
console.log(c); //返回[1,2,3,4,5]
// 复制数组
var a = [1,2,3];
var b = a.concat();
console.log(a); //返回[1,2,3]
console.log(b); //返回[1,2,3]

6、Array.slice()方法，返回指定数组的片段或者子数组。不会改变原数组

var a = [1,2,3,4,5];<br>
a.slice(0,3); //返回[1,2,3] 第一个参数是截取开始的位置（包括），第二个参数是截取结束的位置（不包括）
a.slice(3); //返回[4,5]
a.slice(1,-1); //返回[2,3,4] 负数表示倒数
console.log(a); //返回[1,2,3,4,5]

7、Array.splice()方法，用来删除或插入元素，会修改原数组！

数组的起始位置为0
var a = [1,2,3,4,5,6,7,8];
var b = a.splice(1,2); //第一个参数是截取的起始位置（包括），第二个参数是截取的个数，之后的参数就是添加在元数组的新值
console.log(a); //返回[1, 4, 5, 6, 7, 8]
console.log(b); //返回[2, 3]

可以用来解决在数组起始部位加入数据

this.noticeMessageList.splice(0, 0, { fromUser: 'zhangq1',
noticeMessage: '此处添加message'})

8、push()方法与pop()方法

push()方法在数组的尾部添加一个或者多个元素，并返回数组的新长度。注意的是，改变的是原数组的值，返回的是新数组的长度。

pop()方法删除数组的最后一个元素，并返回它的删除值。也是改变原数组，返回的是删除的值。

9、unshift()方法与shift()方法

unshift()方法类似于push()不同的是，他是在数组头部添加，其他都一样

shift()方法则类比pop()方法。

10、toString()和toLocaleString()

toString()方法将每个元素转化为字符串，类似于不传参的join()方法。

toLocaleString()方法是toString()的本地化版本。

11、forEach()方法，从头至尾遍历数组，为每个元素调用指定的函数。

var a = [1,2,3,4,5];
var sum = 0;
a.forEach(function (value) {
sum += value
})
console.log(sum); //sum = 15

12、map()方法

和forEach()类似，调用数组的每个元素传递给指定函数，并返回一个数组，所以它和forEach()的区别在于，有一个返回值。不修改原数组，返回的数组长度和原数组相同

var a = [1,2,3,4,5];
var b = a.map(function (value) {
return value+1
})
console.log(b); //返回[2,3,4,5,6]

13、filter()方法，返回的是调用数组的一个子集

var a = [1,2,3,4,5];
var b = a.filter(function (value) {
return value > 3
})
console.log(b); //返回[4,5]
注意：如果使用map()方法，返回的是[false, false, false, true, true]

filter()会跳过稀疏数组中缺少的元素，他的返回数组总是稠密的。所以可以用一下方法来压缩稀疏数组的空缺。

var a = [1,2,,,5];
var b = a.filter(function (value) {
return true
})
console.log(b); //返回[1,2,5]

14、every()和some()
every()方法是只有数组中所以元素都满足某个条件才会返回true；some()方法是只要有满足条件的值，就返回true。
以every()方法为例

var a = [1,2,3,4,5];
a.every(function (value) {
return value < 10
}) //true
a.every(function (value) {
return value % 2 === 0
}) //false

15、indexOf()和lastIndexOf()

这两个方法都是用来搜索整个数组中具有给定值的元素，返回找到的第一个元素的索引，如果没找到，则返回-1。

区别在于indexOf()从头至尾搜索，而后者则是反向搜索。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js在数组中插入重复数据的实现代码

    1.在默认的情况下,Vue.js默认不支持往数组中加入重复的数据.可以使用track-by="$index"来实现. 2.不使用track-by="$index"的数组插入,数组不支持重复数据的插入 2.1  JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type=&q

  • 浅析vue.js数组的变异方法

    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 都有什么功能?动手试验了一下: <body> <div id="app"> <div> push方法: <input type="text" v-model="text" @keyup.enter="me

  • Vue.js中数组变动的检测详解

    前言 最近在尝试用Vue.js重构公司的现有业务代码,组件化的设计思路和MVVM的思想让我深深沉迷于其中.但是是踩到了不少坑,就比如这篇文章介绍的数组绑定后的更新检测. 相信大家都知道Observer,Watcher,vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.在 vue.js中$watch的用法示例 中,我们讨论了如何实现基本的 watch . 接下来,我们来看看如何实现数组变动检测. 例子: // 创建 vm let vm = new Vue({ data: {

  • vue.js移动数组位置,同时更新视图的方法

    使用vue.js v-for绑定若干个选项,需要对选项进行排序上下移动操作. 需要对options里面数组的位置进行交换,通常是这样来写: 假设向前移动一个: var index = this.options.indexOf(option); //获取当前选项对象在数组里面的索引. var tempOption = this.options[index-1]; //存储前一个 this.options[index-1] = option;(this.options[index]) this.op

  • Vue.js绑定HTML class数组语法错误的原因分析

    Vue.js绑定HTML class数组语法错误,详情如下所示: 昨天在官网教程上发现一个错误是这样的,下面看图 http://cn.vuejs.org/guide/class-and-style.html 当有多个条件class时这样写有些繁琐.在1.0.19+中,可以在数组语法中使用对象语法: 如果这样写是可以执行成功的,但有错误 data: { classA: 'class-a', classB: 'class-b', classC: 'class-c', isB: true, isC:

  • vue.js中$set与数组更新方法

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当利用索引直接设置数组的某一项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength,不会更新数组. 当然vue中给了解决方法,就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice,caoncat等修改数组,同时也将触发状态更新: ex: 所以如果在实例创建后添加新的属性到实例上,则不会触

  • 简单了解vue.js数组的常用操作

    数组的相关方法如下 1,锁定数组的长度(只读模式)[ Array.join() ] var a = [1,2,3] //定义一个数组<br> Object.defineProperty(a,"length",{ writable:false }) //将a数组的长度属性设为只读<br> a.length = 0 //将a的长度改为0<br> console.log(a.length); //打印a数组的长度,还是3 2.将数组合并成字符串(返回字符串

  • vue.js语法及常用指令

    Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同

  • 超简单的Vue.js环境搭建教程

    超简单的Vue.js环境搭建教程

    vue这个新的工具,确实能够提高效率,vue入门的精髓:(前提都是在网络连接上的情况下) 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到

  • 三步搞定:Vue.js调用Android原生操作

    第一步: Android对Js的接口,新建AndroidInterfaceForJs.js import android.content.Context; import android.os.Build; import android.os.Handler; import android.os.Looper; import android.support.annotation.RequiresApi; import android.util.Log; import android.webkit.

  • javascript对数组的常用操作代码 数组方法总汇

    1. shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 2. unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,2,3,4,5]; var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5] b:7 注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7,

  • JS数组的常用10种方法详解

    数组在JavaScript中经常使用,如何对数组进行增删改非常重要,下面为数组的常用方法: 在数组末尾插入元素 arr.push(value),在数组的末尾添加一个或多个元素,并返回数组的新长度. 例如: let arr=[1,2,3,4,5] var longth=arr.push(6,7); console.log(arr, longth); 数组的arr的值变为arr[1,2,3,4,5,6,7]; length接收返回的是修改后数组的长度7; 删除数组末尾的元素 arr.pop()删除索

  • JS根据json数组多个字段排序及json数组常用操作

    js 根据json数组多个字段排序的实现代码如下所示: /**数组根据数组对象中的某个属性值进行排序的方法 * 使用例子:newArray.sort(sortByArr(['number'],false)) //表示根据number属性降序排列;若第二个参数不传递,默认表示升序排序 * @param attr 排序的属性 ['name','sex'...],根据一个字段或者多个字段排序 * @param rev true表示升序排列,false降序排序 * */ function sortByA

  • js数组常见操作及数组与字符串相互转化实例详解

    本文实例讲述了js数组常见操作及数组与字符串相互转化方法.分享给大家供大家参考,具体如下: 数组与字符串的相互转化 <script type="text/javascript"> var obj="new1abcdefg".replace(/(.)(?=[^$])/g,"$1,").split(","); //字符串转化为数组 var obj2 = "new2abcdefg".split(&qu

  • JavaScript数组常用操作技巧汇总

    本文实例汇总了JavaScript数组的常用操作技巧.分享给大家供大家参考.具体如下: 前言 相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法.这里无非是对原生js的数组操作多了一些包装. 这里主要汇总一下JavaScript数组操作的常用API.相信对大家解决程序问题很有帮助. 一.性质 JavaScript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数.然而,这些数字索

随机推荐