简单了解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 相关文章推荐
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
vue一步步实现alert功能
Jul 05 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
php define的第二个参数使用方法
2013/11/04 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
关于python2 csv写入空白行的问题
2018/06/22 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
python3人脸识别的两种方法
2019/04/25 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
员工晚婚的请假条
2014/02/08 职场文书
环保公益广告语
2014/03/13 职场文书
品酒会策划方案
2014/05/26 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
商务代表岗位职责
2015/02/15 职场文书
身份证丢失证明
2015/06/19 职场文书
2019安全宣传标语大全
2019/08/14 职场文书