JavaScript Array 教程
           作为一个 前端开发,JS 数组的熟练使用显得非常重要,ECMAScript数组的大小是可以动态调整的,可以随着数据的添加自动增长长度。
创建数值有两种方式:

  • 使用Array的构造函数
  • 使用数组字面量

和对象一样,在使用数组字面量时,也不会调用Array构造函数。

检测数组


自ECMAScript3后,对于一个网页或者一个全局作用域而言,使用instanceof操作符可以得到满意的结果。
if (value instanceof Array) {}ECMAScript5新增了Array.isArray()方法。
if (Array.isArray(value)) {} 转换方法


var colors = ["red", "blue", "green"];alert(colors.toString()); //red,blue,greenalert(colors.valueOf()); //red,blue,greenalert(colors); //red,blue,greenvar person1 = {    toLocaleString : function () {        return "Nikolaos";    },    toString : function () {        return "Nicholas";    }};var person2 = {    toLocaleString : function () {        return "Grigorios";    },    toString : function () {        return "Greg";    }};var people = [person1, person2];alert(people);alert(people.toString());alert(people.toLocaleString());可以使用join()方法来重现toString()方法。
join()方法只接收一个参数,即用作分隔符的字符串,然后返回包含所有数组项的字符串。
如果不给join()传入参数,或者传入undefined,则使用逗号作为分隔符。IE7及更早版本会错误的使用字符串"undefined"作为分隔符。

如果数组中某一项的值是null或undefined,那么该值在join()、toLocaleString()、toString()和valueOf()方法返回的结果中以空字符串表示。

栈方法


ECMAScript为数组提供了push()和pop()方法,以便实现类似栈的行为。
push()方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
pop()方法则从数组末尾移除最后一项,减少数组的Length值,然后返回移除的项。
var colors = new Array();var count = colors.push("red", "green");alert(count); //2count = colors.push("blank");alert(count); //3var item = colors.pop();alert(item); //"blank"alert(colors.length); //2 队列方法


shift()能够移除数组中的第一项并返回该项,同时将数组长度减一。结合使用shift()和push()方法,可以像队列一样使用数组。
ECMAScript还为数组提供了unshift()方法,它能在数组的前端添加任意个项并返回新数组的长度。同时使用unshift()和pop()方法,可以从相反的方向来模式队列。

IE7以及更早的版本对JavaScript的实现中存在一个偏差,其unshift()方法总是返回undefined而不是数组的新长度。IE8在非兼容模式下会返回正确的长度值。

重排序方法


reverse()和sort()两个方法可以用来重排序。
reverse()会反转数组项的顺序。
var values = [1, 2, 3, 4, 5];values.reverse();alert(values); //5,4,3,2,1在默认情况下,sort()方法按升序排列数组项。为了实现排序,sort()方法会调用每个数组项的toString()方法,然后得到比较字符串,以确定如何排序。
var valuse = [0, 1, 5, 10, 15];values.sort();alert(valuse); //0,1,10,15,5sort()方法可以通过接收一个比较函数作为参数,来指定哪个值位于哪个值的前面。比较函数接收两个参数,如果第一个参数应该位与第二个之前则返回一个负数,如果两个参数相等则返回0,如果第一个参数应该位与第二个之后则返回一个正数。例如:
function compare (value1, value2) {    if (value1 < value2) {        return -1;    } else if (value1, value2) {        return 1;    } else {        return 0;    }}var values = [0, 1, 5, 10, 15];values.sort(compare);alert(values); //15, 10, 5, 1, 0 操作方法


concat()方法会先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。
concat()在没有传递参数的情况下,只是返回当前数组的一个副本。
如果传递给concat()的是一个或者一组数组,该方法会将这些数组中的每一项添加到结果数组中。如果不是数组,这些值就简单地添加到结果数组的末尾。
var colors = ["red", "green", "blue"];var colors2 = colors.concat("yellow", ["black", "brown"]);alert(colors); //red,green,bluealert(colors2); //red,green,blue,yellow,black,brownslice()方法接收一或两个参数,即返回项的起始和结束位置。只有一个参数时,slice()方法返回从该位置到当前数组末尾的所有项。有两个参数时,返回起始和结束之间的项(但是不包括结束位置的项)。slice()不影响原始数组。
var colors = ["red", "green", "blue", "yellow", "purple"];var colors2 = colors.slice(1);var colors3 = colors.slice(1, 4);alert(colors2); //green, blue, yellow, purplealert(colors3); //green, blue, yellow

slice()方法的参数中有一个负数,则用数组的长度加上该数来确定相应的位置。例如:slice(-2, -1)和slice(3, 4)结果是一样的。如果结束位置小于起始位置,则返回空数组。

splice()主要用来向数组中部插入项。

  • 删除:需要指定两个参数,删除的起始项和删除的项数。例如:splice(0, 2)会删除数组的前两项。
  • 插入:需要指定三个参数,起始位置、0(要删除的项数)和要插入的项。例如:splice(2, 0, "red", "green")会从位置2开始插入字符串"red"和"green"。
  • 替换:需要指定三个参数,起始位置、要删除的项数和要插入的任意数量的项。例如:splice(2, 1, "red", "green")。

var colors = ["red", "green", "blue"];var removed = colors.splice(0, 1);alert(colors); //green, bluealert(removed); //red,返回只包含一个项的数组removed = colors.splice(1, 0, "yellow", "orange");alert(colors); //green, yellow, orange, bluealert(removed); //返回一个空数组removed = colors.splice(1, 1, "red", "purple");alert(colors); //green, red, purple, orange, bluealert(removed); //yellow, 返回只包含一个项的数组 位置方法


ECMAScript5添加了两个位置方法:indexOf()和lastIndexOf()。
这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中,indexOf()方法从数组的开头(位置0)开始向后查找,lastIndexOf()方法则从数组的末尾开始向前查找。
这两个方法都返回要查找的项在数组中的位置,没找到就返回-1。在比较时,会使用全等操作符(===)。
var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];alert(numbers.indexOf(4)); //3alert(numbers.lastIndexOf(4)); //5alert(numbers.indexOf(4, 4)); //5alert(number.lastIndexOf(4, 4)); //3

程序员谈 JavaScript 数组 Array 的学习相关推荐

  1. Java程序员日常积累-向大神学习(三)

    前言 <Java程序员日常积累-向大神学习>系列是本人根据日常工作中碰到的问题写的一个问题记录,比较琐碎零散. 主要用于记录和忘记时可以有个地方查询.现分享给大家,这是这个系列的第三篇. ...

  2. 好程序员Web前端教程分享Vue学习心得

    为什么80%的码农都做不了架构师?>>>    好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...

  3. 转载:一位资深程序员大牛给予Java初学者的学习路线建议

    一位资深程序员大牛给予Java初学者的学习路线建议 java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打算来 ...

  4. Java程序员谈一谈-----java程序员成长之路

    转载:http://www.banzg.com/archives/679.html?ref=myread 阿里面试回来,想和Java程序员谈一谈 引言 其实本来真的没打算写这篇文章,主要是LZ得记忆力 ...

  5. react组件卸载调用的方法_好程序员web前端培训分享React学习笔记(三)

    好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...

  6. (转)一位资深程序员大牛给予Java初学者的学习路线建议

    一位资深程序员大牛给予Java初学者的学习路线建议 java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打算来 ...

  7. 黑马程序员最新版JavaWeb基础教程-学习笔记

    da@黑马程序员最新版JavaWeb基础教程-学习笔记 day06-HTML&CSS HTML HTML(HyperTest Markup Language):超文本标记语言 是一门语言,所有 ...

  8. 隆中对,程序员修炼之道,技术学习前进之路

    之前写的 一个IT工薪族的4年奋斗成果  这篇文章,更多针对白领.互联网从业者.技术人员等广泛人群提出来的"职业发展路线",更准确的说法应该是"能力模型". 本 ...

  9. 阿里面试回来,想和Java程序员谈一谈

    阿里面试回来,想和Java程序员谈一谈 引言 其实本来真的没打算写这篇文章,主要是LZ得记忆力不是很好,不像一些记忆力强的人,面试完以后,几乎能把自己和面试官的对话都给记下来.LZ自己当初面试完以后, ...

最新文章

  1. bootstrap 标题居中加颜色_BootStrap从基础到项目实战_第1季_03章_01_CSS样式之栅格布局...
  2. 科大星云诗社动态20210907
  3. 调用webservice时提示对操作的回复消息正文进行反序列化时出错
  4. pixhawk PX4FMU和PX4IO最底层启动过程分析
  5. E 做任务三(区间)
  6. 万法归宗之Hadoop编程无界限
  7. poj 3693 后缀数组
  8. 充分发挥计算机在教学中的辅助作,充分发挥计算机在教学中的辅助作用
  9. 英文科技写作 · 经验分享 · 讨论合集
  10. 记次浙大月赛 134 - ZOJ Monthly, June 2014
  11. 7 - Struts.xml各属性说明(待补充)
  12. 自然辩证法与计算机科学的关系,科学技术与自然辩证法的关系 毕业论文
  13. http://kylin.apache.org/development/new_metadata.html
  14. 浅谈互联网那些防不胜防的人肉搜索技巧
  15. 游戏思考11:游戏服务器类型简单分类(有服务器的会讲的详细一点)
  16. Microsoft buildup new website for open-source project
  17. 国足0:2不敌韩国 淘汰赛将战泰国
  18. 什么是user agent(用户代理)
  19. 病毒式传播2.0时代的社交游戏开发5要素
  20. Tensorflow 2.0 视频分类(四) C3D 3D convolutional Networks

热门文章

  1. wps for linux alpha 15 语言包,WPS Office for Linux Alpah 7发布
  2. java x锁_基于Java名称的锁?
  3. 树莓派安装mysql5.6_Linux上安装MySQL5.6
  4. arraylist扩容是创建新数组吗 java_Java编程之数组扩容
  5. 桃李不言,下自成蹊——《大数据》编辑部祝各位老师节日快乐!
  6. 作者:钱卫宁(1976-),男,华东师范大学计算机科学与软件工程学院教授、博士生导师。...
  7. 软件工程知识——软件配置管理
  8. 利用好手头的资源解决海量语料资源收集以及利用哈工大的LTP云平台解决依存句法和语义依存分析
  9. 如何更好的组织你的Laravel模型
  10. C 标准库 - limits.h