简单了解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 相关文章推荐
js用图作提交按钮或超连接
Mar 26 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
jQuery异步提交表单实例
May 30 jQuery
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
vue实现商城购物车功能
Nov 27 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 Javascript
送你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
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
python实现ID3决策树算法
2017/12/20 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
python命令 -u参数用法解析
2019/10/24 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
C语言笔试集
2012/07/24 面试题
劳动实践课感言
2014/02/01 职场文书
生态养殖创业计划书
2014/05/06 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
统计员岗位职责范本
2015/04/14 职场文书
个人借条范本
2015/05/25 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电