简单了解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的反射问题
Apr 07 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 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+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
javascript动态加载三
2012/08/22 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
js编写简易的计算器
2020/07/29 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python正则抓取网易新闻的方法示例
2017/04/21 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
详解Django配置优化方法
2019/11/18 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
美国精油公司:Plant Therapy
2019/05/17 全球购物
单位人事专员介绍信
2014/01/11 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
《窃读记》教学反思
2016/02/18 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
全新239军机修复记
2022/04/05 无线电