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


Posted in Javascript onJune 17, 2019

数组的相关方法如下

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()从头至尾搜索,而后者则是反向搜索。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
loading动画特效小结
Jan 22 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
送你43道JS面试题(收藏)
Jun 17 #Javascript
通过实例学习React中事件节流防抖
Jun 17 #Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 #Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 #Javascript
通过js给网页加上水印背景实例
Jun 17 #Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 #Javascript
通过实例解析js简易模块加载器
Jun 17 #Javascript
You might like
一个MYSQL操作类
2006/11/16 PHP
PHP开发框架总结收藏
2008/04/24 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
javascript调试说明
2010/06/07 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
详解Python做一个名片管理系统
2019/03/14 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
公司人力资源的自我评价
2014/01/02 职场文书
21岁生日感言
2014/02/27 职场文书
行政求职信
2014/07/04 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
艺术节开幕词
2015/01/28 职场文书
自主招生专家推荐信
2015/03/26 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
红高粱观后感
2015/06/10 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android