简单了解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 相关文章推荐
IE8下关于querySelectorAll()的问题
May 13 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
vue地区选择组件教程详解
May 04 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
搭建vue开发环境
2018/07/19 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
js实现随机抽奖
2020/03/19 Javascript
python中的yield使用方法
2014/02/11 Python
Python+django实现文件上传
2016/01/17 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
简单了解如何封装自己的Python包
2020/07/08 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
UNIX文件名称有什么规定
2013/03/25 面试题
铁路个人事迹材料
2014/01/30 职场文书
城管综合整治方案
2014/05/01 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
学习十八大标语
2014/10/09 职场文书