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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
Mar 04 Javascript
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
星际争霸中的热键
2020/03/04 星际争霸
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
python简单的函数定义和用法实例
2015/05/07 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
html5 标签
2009/07/16 HTML / CSS
最新计算机专业自荐信
2013/10/16 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
2015年消防工作总结
2015/04/24 职场文书
2015年环保局工作总结
2015/05/22 职场文书
离婚协议书范文2016
2016/03/18 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
用Java实现简单计算器功能
2021/07/21 Java/Android