简单了解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数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
原生js实现照片墙效果
Oct 13 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
送你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
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
python中reduce()函数的使用方法示例
2017/09/29 Python
Python pymongo模块用法示例
2018/03/31 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
python异常触发及自定义异常类解析
2019/08/06 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
学校门卫岗位职责
2014/03/16 职场文书
美术课外活动总结
2014/07/08 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
教师四风问题整改措施
2014/09/25 职场文书
农村党支部承诺书
2015/04/30 职场文书
酒店宣传语大全
2015/07/13 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
八年级历史教学反思
2016/02/19 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python