JavaScript引用类型Array实例分析


Posted in Javascript onJuly 24, 2018

本文实例讲述了JavaScript引用类型Array。分享给大家供大家参考,具体如下:

1、ECMAScript数组的特点

(1)ECMAScript数组的每一项可以保存任何类型的数据。

(2)ECMAScript数组的大小是可以动态调整的。

2、创建数组

(1)使用Array构造函数(new操作符可省略)

var arr1 = new Array();
var arr2 = new Array(3);
var arr3 = new Array("teacher", 3, true);

(2)使用数组字面量表示法

var arr1 = [];
var arr2 = ["teacher", 3, true];

3、length属性

ECMAScript数组的length属性不是只读的,通过设置这个属性可以从数组末尾移除项或向数组中添加新项。

eg1:从数组末尾移除项

var arr = ["teacher", 3, true];
arr.length = 1;
alert(arr[2]);//undefined

eg2:如果将length设置为大于当前数组长度的值,则新增的每一项都会取得undefined值

var arr = ["teacher", 3, true];
arr.length = 4;
alert(arr[3]);//undefined

eg3:向数组中添加新项

var arr = ["teacher", 3, true];
arr[arr.length] = "doctor";

eg4:当一个值放在超出当前数组大小的位置上时,数组会重新计算其长度值,等于最后一项的索引加一。

var arr = ["teacher", 3, true];
arr[9] = "doctor";
alert(arr.length);//10

4、检测数组

(1)instanceof操作符

if (value instanceof Array) {
  ...
}

适用范围:一个网页或一个全局作用域

问题:若网页中包含多个框架,则实际上存在两个以上不同的全局执行环境,从而存在两个以上不同版本的Array构造函数。若从一个框架向另一个框架传入一个数组,那么传入的数组在与第二个框架中原生创建的数组分别具有各自不同的构造函数。

(2)Array.isArray()方法

if (Array.isArray(value)) {
  ...
}

用途:确定给定值是否是数组,无论它是在哪个全局执行环境中创建的。

5、转换方法

(1)toString():返回每一项的字符串形式拼接而成的一个以逗号分隔的字符串,为了取得每一项的值,调用的是每一项的toString()方法。

(2)valueOf():返回的还是数组

(3)toLocaleString():为了取得每一项的值,调用的是每一项的toLocaleString()方法,而不是toString()方法。

(4)join():使用指定的分隔符来构建字符串

说明:alert()方法要接收字符串参数,所以它会在后台调用toString()方法。

eg1:

var friends = ["Alice","Bruce","Cindy"];
alert(friends.toString());//Alice,Bruce,Cindy
alert(friends.valueOf());//Alice,Bruce,Cindy
alert(friends.toLocaleString());//Alice,Bruce,Cindy
alert(friends);//Alice,Bruce,Cindy
alert(friends.join());//Alice,Bruce,Cindy
alert(friends.join("|"));//Alice|Bruce|Cindy

eg2:

var person1 = {
  toLocaleString: function() {
    return "Alice";
  },
  toString: function() {
    return "Bruce";
  }
}
var person2 = {
  toLocaleString: function() {
    return "Cindy";
  },
  toString: function() {
    return "David";
  }
}
var person = [person1, person2];
alert(person);//Alice,Bruce
alert(person.toString());//Alice,Bruce
alert(person.toLocaleString());//Cindy,David

6、栈方法

(1)push():接收任意数量的参数,逐个添加到末尾,返回修改后数组的长度。

(2)pop():从数组末尾移除最后一项,数组的长度减一,返回移除的项。

var friends = new Array();
var len = friends.push("Alice","Bruce");
alert(len);//2
var friend = friends.pop();
alert(friend );//"Bruce"
alert(friends.length);//1

7、队列方法

(1)shift():移除数组的第一项,数组的长度减一,返回移除的项。

(2)unshift():在数组前端添加任意数量的项,返回修改后数组的长度。

var friends = new Array();
var len = friends.unshift("Alice","Bruce");
alert(len);//2
var friend = friends.shift();
alert(friend );//"Alice"
alert(friends.length);//1

8、重排序方法

(1)reverse():翻转数组项的顺序

(2)sort():按升序排列数组项

sort()方法会调用每项的toString()方法,然后比较得到的字符串。

var items=[0,1,3,15,18];
items.sort();
alert(items);//0,1,15,18,3

sort()方法可以接收一个比较函数作为参数:比较函数接收两个参数,若第一个参数应该位于第二个参数之前则返回一个负数;若两个参数相等则返回0;若第一个参数应该位于第二个参数之后则返回一个正数。

function compare(item1, item2) {
  if (item1 < item2)
    return -1;
  else if (item1 > item2)
    return 1;
  else
    return 0;
}
var items=[0,1,3,15,18];
items.sort(compare);
alert(items);//0,1,3,15,18

对于数值类型或其valueOf()方法会返回数值类型的对象类型,可以简写比较函数。

function compare(item1, item2) {
  return item1 - item2;
}

9、操作方法

(1)concat():基于当前数组中的所有项创建一个新数组。先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。若没有给concat()传递参数,则只是复制当前数组并返回副本;若传递给concat()的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组;若传递给concat()的不是数组,则这些值都简单地添加到结果数组的末尾。

var friends = ["Alice", "Bruce"];
var newFriends = friends.concat("Cindy", ["David", "Emy"]);
alert(newFriends);//Alice,Bruce,Cindy,David,Emy

(2)slice():基于当前数组的一或多项创建一个新数组。接收一或两个参数,即要返回项的开始和结束位置(不包括结束位置)。slice()方法不会影响原始数组。若参数中有负数,则用数组长度加上该负数来确定相应的位置。若结束位置小于开始位置,则返回空数组。

var friends = ["Alice", "Bruce", "Cindy"];
var friends1 = friends.slice(1);
alert(friends1);//Bruce,Cindy
var friends2 = friends.slice(1, 2);
alert(friends2);//Bruce

(3)splice():主要用途是向数组的中部插入项,返回一个包含从原始数组中删除的项的数组,若没有删除任何项,则返回空数组。使用方式有3种:

1)删除:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。

2)插入:可以向指定位置插入任意数量的项,只需指定3个参数:起始位置、要删除的项数和要插入任意数量的项。

3)替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置、要删除的项数和要插入任意数量的项。插入的项数不必和删除的项数相等。

var friends = ["Alice", "Bruce", "Cindy"];
var friends1 = friends.splice(0, 1);
alert(friends1);//Bruce,Cindy
var friends2 = friends.slice(1, 0, "David", "Emy");
alert(friends2);//Bruce,David,Emy,Cindy
var friends3 = friends.slice(1, 1, "Fancy", "Gary");
alert(friends3);//Bruce,Fancy,Gary,Emy,Cindy

10、位置方法

(1)indexOf():接收两个参数——要查找的项和可选的查找起点位置的索引,从开头开始查找,没找到则返回-1。

(2)lastIndexOf():接收两个参数——要查找的项和可选的查找起点位置的索引,从末尾开始查找,没找到则返回-1。

在比较第一个参数与数组中的每一项时,会使用全等操作符,也就是要求查找的项必须严格相等。

var person = {name : "Alice"};
var people1 = [{name : "Alice"}, person];
alert(people1.indexOf(person));//1,不是0

11、迭代方法

ECMAScript数组有5个迭代方法。每个方法接收两个参数——要在每一项上运行的函数和可选的运行该函数的作用域对象(影响this的值)。传入的函数接收三个参数——数组项的值、该项在数组中的位置和数组对象本身。

(1)every():对数组中的每一项运行给定函数,若该函数对每一项都返回true,则返回true。

(2)some():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

(3)filter():对数组中的每一项运行给定函数,若该函数对每一项都返回true,则返回true。

(4)foreach():对数组中的每一项运行给定函数,无返回值。

(5)map():对数组中的每一项运行给定函数,若该函数对每一项都返回true,则返回true。

var nums = [1,2,3,4,1,2,3];
var every = nums.every(function(item, index, array) {
  return (item > 2);
});
alert(every);//false
var some = nums.some(function(item, index, array) {
  return (item > 2);
});
alert(some);//true
var filter = nums.filter(function(item, index, array) {
  return (item > 2);
});
alert(filter);//[3,4,3]
var map = nums.map(function(item, index, array) {
  return (item * 2);
});
alert(map);//[2,4,6,8,2,4,6]
nums.foreach(function(item, index, array) {
  ...
});

12、归并方法

迭代数组的所有项,然后构建一个最终返回的值。接收两个参数——一个在每一项上调用的函数和可选的作为归并基础的值。传入的函数接收四个参数——前一个值、当前值、项的索引和数组对象。函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数是数组的第二项。

(1)reduce():从数组的第一项开始,逐个遍历到最后。

var items = [1,2,3,4];
var sum = items.reduce(function(prev, cur, index, array) {
  return prev + cur;
});
alert(sum);//10

(2)reduceRight():接收两个参数——一个在每一项上调用的函数和可选的作为归并基础的值。从数组的最后一项开始,向前遍历到第一项。

var items = [1,2,3,4];
var sum = items.reduceRight(function(prev, cur, index, array) {
  return prev + cur;
});
alert(sum);//10

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript html 静态页面传参数
Apr 10 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
详解微信小程序调起键盘性能优化
Jul 24 #Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 #Javascript
js+canvas实现验证码功能
Sep 21 #Javascript
微信小程序网络请求封装示例
Jul 24 #Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 #Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 #jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 #jQuery
You might like
PHP制作图型计数器的例子
2006/10/09 PHP
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
php 无限分类的树类代码
2009/12/03 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
nodejs基础知识
2017/02/03 NodeJs
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
记录Django开发心得
2014/07/16 Python
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
python groupby 函数 as_index详解
2019/12/16 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
工商治理实习生的自我评价
2014/01/15 职场文书
父母对孩子说的话
2014/04/12 职场文书
城管年度个人总结
2015/02/28 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python
vue 自定义组件添加原生事件
2022/04/21 Vue.js