简单了解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 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
基于D3.js实现时钟效果
Jul 17 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
js初始化验证实例详解
2016/11/26 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
基于Vue单文件组件详解
2017/09/15 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
Python 字符串定义
2009/09/25 Python
Python的Django框架中的Context使用
2015/07/15 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
python实现趣味图片字符化
2019/04/30 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
init进程的作用
2012/04/12 面试题
市场开发计划书
2014/05/07 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
信仰纪录片观后感
2015/06/08 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
一级电子管军用接收机测评
2022/04/05 无线电