简单了解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 array 数组详解
Mar 22 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 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
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
土木工程个人自荐信范文
2013/11/30 职场文书
司马光教学反思
2014/02/01 职场文书
高考寄语大全
2014/04/08 职场文书
安全员岗位职责范本
2015/04/11 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
组织委员竞选稿
2015/11/21 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js