JavaScript中Array的实用操作技巧分享


Posted in Javascript onSeptember 11, 2016

一、关于Array

Array的创建很灵活,可以使用Array构造函数,也可以直接创建数组“字面量”。

var arr = new Array(); //[]
var brr = Array();  //[] 两者等效

var arr = Array(3); //[]
arr.length;   //3 长度为3的空数组

var arr = Array(22,33,'qq',{}); //[22, 33, "qq", Object]
var brr = [22,33,'qq',{}];  //同上

Array是JavaScript的内置对象,是的,虽然是数组,也是一种对象!!

使用typeof判断会返回Object! 而Array.isArray方法能更精准判断其类型。

var a = [];
typeof a;   //object
Array.isArray(a); //true

二、常用方法

push()方法

push方法能添加一个或者多个元素至数组的末端,并返回被改变后的数组的长度!

注意: ①其返回的是数组的长度,而不是数组!

            ②此方法会改变原数组!!

var arr = Array(22,33,'qq',{});
arr.push('weibo');    //5
arr       //[22, 33, "qq", {}, "weibo"]

当我们想合并两个数组时需要这样使用

var a = [22,33];
var b = [44,55];

Array.prototype.push.apply(a, b)
// 或者
a.push.apply(a, b)
// 或者
a.push(44,55);   //此时的数组a = [22,33,44,55];

注意不能写成以下这样!!

a.push(b);
a;      //[22,33,[44,55]]
a.length;     // 3 !!
console.log(a);   //[22, 33, Array[2]]

直接写成a.push(b) ,会将b认为是一个元素添加到a,并不能得到理想效果!

倘若现在又两个对象数组需要合并就像如下:

var a = [
 {name: 'Stark', value: 'Ironman'},
 {name: 'Cap' , value: 'Oldman'}
];
var b = [
 {name: 'Jerry', email: 'Jerry@qq.com'},
 {name: 'Lory' , email: 'Lory@163.com'},
 {name: 'susan', email: 'susan@gmail.com'}
];
//错误写法
a.push(b);   //3
console.log(a);  //[Object, Object, Array[3]]
//正确写法
a.push.apply(a.b); //5
console.log(a);  //[Object, Object, Object, Object, Object]

pop()方法

push相反,是删除数组最后一个元素并返回这个被删除的元素:

var a = ['qq', 'weibo', 'weixin'];
a.pop();        // 'weixin'
a;         // ['qq', 'weibo']

join()方法

将数组按照相应参数分隔开,并以字符串形式返回,若空参数,则使用‘,'分隔。此方法并不会改变原数组:

var a = [1, 2, 3, 4];
a.join(' ')  // '1 2 3 4'
a.join(' | ')  // "1 | 2 | 3 | 4"
var b = a.join() // "1,2,3,4"
console.log(a); // [1, 2, 3, 4]
console.log(b); // "1,2,3,4"

concat()方法

能将多个数组合并,返回一个新的数组,但原数组不变:

var a = [22,33];
var b = [44,55];
var c = a.concat(b);
console.log(a);  //[22, 33]
console.log(b);  //[44, 55]
console.log(c);  //[22, 33, 44, 55]
var a = [{name: 'tom', email: 'tom@example.com'},
   {name: 'peter', email: 'peter@163.com'}];
var b = [{name: 'Jerry', email: 'Jerry@qq.com'},
   {name: 'Lory', email: 'Lory@dfl.com'},
   {name: 'susan', value: 'susan@gmail.com'}];
var c = a.concat(b);
c;   // [{name: 'tom', email: 'tom@example.com'},
   // {name: 'peter', email: 'peter@163.com'},
   // {name: 'Jerry', email: 'Jerry@qq.com'},
   // {name: 'Lory', email: 'Lory@dfl.com'},
   // {name: 'susan', value: 'susan@gmail.com'}]

map()方法

map方法会对数组的各个成员依次调用一个函数,返回一个经函数处理后的新数组,但原数组并不会被改变!

var numbers = [1, 2, 3];
var num  = numbers.map(function (n) {  // [2, 4, 6]
     return n * 2;
    });
numbers;          //[1,2,3]

map方法调用的函数的参数为一个时,此参数表示数组的当前成员;当参数为三个是依次为

当前成员elem,索引index,原数组本身arr

var brr = [1, 2, 3].map( function(elem, index, arr) {
 return elem * index;
});
brr; // [0, 2, 6]

map方法还可以接受第二个参数,表示回调函数执行时this所指向的对象。

var arr = ['a', 'b', 'c'];

var brr = [0, 2].map(function(e){
 return this[e];
}, arr)
brr; // ['a', 'c']

在应用中,有时使用ajax技术需要动态利用参数数组转换成一个url请求时,map方法会非常方便,例如:

var b = [
 {name: 'Jerry', email: 'Jerry@qq.com'},
 {name: 'Lory', email: 'Lory@dfl.com'},
 {name: 'susan', value: 'susan@gmail.com'}];
 
var url = b.
   map(function(n){
    return n.name + "=" + n.email
   })
   .join("&");
   
console.log(url); 
   //Jerry=Jerry@qq.com&Lory=Lory@dfl.com&susan=susan@gmail.com

然后在url前面加上ip地址以及action和方法,就能完成一个ajax所需的动态url的拼接,例如:

var endURL = "localhost:8080/XXXX/" + eventAction + "!" + operation + "?"
    + url;

总结

以上就是这篇文章的全部内容,希望对能大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
npm 常用命令详解(小结)
Jan 17 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
JS实现六边形3D拖拽翻转效果的方法
Sep 11 #Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 #Javascript
简单分析javascript中的函数
Sep 10 #Javascript
javascript数组常用方法汇总
Sep 10 #Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 #Javascript
Three.js快速入门教程
Sep 09 #Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 #Javascript
You might like
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
深入了解Python enumerate和zip
2020/07/16 Python
如何在python中判断变量的类型
2020/07/29 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
DIY手工制作经营店创业计划书
2014/02/01 职场文书
高中军训感言600字
2014/03/11 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
自我鉴定书
2014/03/24 职场文书
解除合同协议书
2014/04/17 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
个人思想政治总结
2015/03/05 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
Python基础之操作MySQL数据库
2021/05/06 Python
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android