Javascript高级编程学习笔记(13)—— 引用类型(2)Array类型
除了Object类型之外ECMA中最常用的引用类型可能就是Array类型了
并且ECMA中的数组类型和其他大多数编程语言的数组类型存在着很大的区别
今天就介绍一下JS中的Array的特别之处
区别
1. JS中的数组类型可以存储任意类型的数据(其他语言中一般来说只能存储固定类型的数据)
2. 数组的大小是动态调整的,也就是说你数组中的元素的大小有多大,数组的大小就有多大
3.length属性可写,与一些面向对象的语言不同,JS数组的length属性可写,就是说我们可以通过length属性来移除数组中的元素或添加新元素(新增的数组项默认为undefined)
4. 数组的最大长度为 4294976295(2^32-1)我猜测是因为length的实现是一个无符号整型,创建长度接近该值的数组会导致JS运行事件过长的错误
创建方式
1.通过Array构造函数进行创建
var colors = new Array(20); // 创建length为20的数组
var colors = new Array("red","blue","green"); //以传入的参数创建数组
PS. 除此而外,在使用Array构造函数的时候可以省略 new 操作符
2.通过字面量的形式进行创建
var colors = ["red","green","blue"];
这种也是我们平时最常用的创建方式
但是和Object类型一样,由于不是调用的构造函数进行创建,所以在不同版本的浏览器上表现会存在一些区别
比如下面的例子
高版本浏览器:
低版本IE(8以下):
所以如果小伙伴们的项目需要兼容低版本IE时使用字面量的创建形式要十分注意才行
检测数组
很多时候我们都需要判断一个对象是不是一个数组才能对他进行后续操作,检测是否为数组也是十分重要的
首先我们要分为两种情况
1.只有一个全局作用域(一个页面)
那么十分简单
if(value instance of Array){
// code
}
其问题就在于 instanceof 操作符假定只有一个全局执行环境,如果页面中包含多个框架,那么就会存在不止一个全局执行环境
如果一个框架向页面传递了一个数组,那么 instanceof 检测该值会返回 false 因为该值是另一个Array构造的
2. 存在多个全局作用域
对于这种情况,ES5中给出了Array.isArray()函数用于解决此类情况
而对于那些低版本的某E浏览器我们则需要另寻他路,比如我们自己写一个isArray函数
function isArray(value){
return Object.prototype.toString.call(value) === "[object Array]";
}
其具体原理在后面会讲到(因为还需要很多铺垫,才能让小伙伴们明白)
数组的方法
Array为我们提供了许多方法让我们能够便利地进行一系列的操作
下面我们来详细介绍一下
- 转换方法
- valueOf() 返回数组本身
- toString() 返回由数组中的每个值的toString方法的返回值并以逗号间隔的字符串
- toLocaleString() 返回由数组中的每个值的toLocaleString方法的返回值并以逗号间隔的字符串
- 栈方法
- push() 接收任意数量的参数,并将其逐个添加到数组末尾,返回数组修改后的length
- pop() 从数组末尾移除最后一项,减少length的值,返回移除的项
- 队列方法
- shift() 移除数组第一项,减少length,返回移除的项 (入队操作使用push)
- unshift() 在数组前端添加一项,增加length,返回修改后数组长度(与pop配合可模拟反向队列)
- PS. IE7及以下 unshift 返回 undefined
- 重排序
- reverse() 用于反转数组
- sort() 按升序排列数组,会将数组中的每个值调用toString方法后进行比较,也可以接收一个接收两个参数的比较函数,该函数需对你认为相等的值返回0 第一个参数应该在第二个参数之后返回1,反之返回-1
- 操作方法
- concat() 创建一个当前数组的副本,并将参数添加到该数组的末尾,返回新数组(如果参数是一个数组,那么会将数组中的值取出后添加到末尾)
- slice() 传入起始位置和结束位置,并以该范围内的值创建一个新的数组(不包括结束位置),然后返回该数组(不影响原数组),如果传入负值,那么会用数组长度加上该值以确定下标,如果起始位置小于结束位置返回空数组
- splice()该方法接收三个参数 初始位置 要删除的项数 要插入该位置的值(可以不止一项,也可以没有)
- 位置方法
- indexOf()接收要查找的项和查找的起始位置,如果找到该值则返回该值的下标,没有找到则返回-1(从前往后找)
- lastIndexOf()接收要查找的项和查找的起始位置,如果找到该值则返回该值的下标,没有找到则返回-1(从后往前找),两种方法都是使用全等进行判断
- 迭代方法
- 都接收两个参数,在每一项上运行的函数 该函数的作用域(this指向的对象)可选
- 传入的函数都接收三个参数:1、数组项 2、该数组项的下标 3、数组本身
- every() 传入的函数对于所有的项都返回 true 那么该方法返回 true
- filter() 返回所有传入函数 返回值为 true 的数组项的集合
- forEach() 没有返回值
- map() 返回传入函数处理过的数组(即如果在遍历过程中对数组每一项都乘以2 那么返回乘以二后的数组)
- some() 传入函数只要对任意一项数组项返回 true 则返回 true
- PS. IE9+支持
- 归并方法
- 都接收两个参数 1、对每一项数组项调用的函数 2、归并基础的初始值
- 对于传入的函数接收四个参数 1、前一个值 2、当前值 3、项的索引 4、数组本身
- 每次调用函数的返回值都会作为第一个参数传入下一次迭代
- reduce() 从前往后迭代
- reduceRight()从后往前迭代
- PS. IE9+支持
PS. 有关迭代的方法低版本浏览器一般都是不支持的
明天介绍Date对象,尽请期待。。。。
Javascript高级编程学习笔记(13)—— 引用类型(2)Array类型的更多相关文章
- Javascript高级编程学习笔记(14)—— 引用类型(3)Date类型
除了前两天介绍的Object.Array类型,Date应该就是JS中最常用的引用类型了 先介绍一下Date类型,该类型使用在Java的 java.until.Date 类的基础上构建的 使用UTC 1 ...
- JavaScript高级编程学习笔记(第三章之一)
继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感: ...
- Javascript高级编程学习笔记(18)—— 引用类型(7)单体内置对象
什么是内置对象呢? js高级程序设计中给出的定义为:由ES规定不依赖于宿主环境的对象,这些对象在JS执行前就已经存在 前面我们介绍的引用类型都是内置对象 除了这些对象外ECMA还规定了两个单体内置对象 ...
- Javascript高级编程学习笔记(15)—— 引用类型(4)RegExp类型
JS中处理字符串最常用的应该就是正则了 同样正则(RegExp)类型也是JS中引用类型的一种 ECMAScript通过 RegExp类型 来支持正则表达式 创建正则 var expression = ...
- Javascript高级编程学习笔记(17)—— 引用类型(6)基本包装类
基本包装类 基本包装类这个概念或许有的小伙伴没有听说过 但是小伙伴们有没有想过,为什么基本数据类型的实例也有方法呢? 其实这些方法都来自基本包装类型 这是JS为了方便操作基础数据类型而创建的特殊引用类 ...
- Javascript高级编程学习笔记(16)—— 引用类型(5) Function类型
JS中许多有趣的地方都和函数脱不了联系 那么是什么让JS中的函数这么有趣呢? 我们一起来看看吧 Function类型 在JS中函数实际上就是对象,每个函数都是Function类型的实例,和JS的其他引 ...
- Javascript高级编程学习笔记(12)—— 引用类型(1)Object类型
前面的文章中我们知道JS中的值分为两种类型 基础类型的值和引用类型的值 基础类型的值我已经大概介绍了一下,今天开始后面几天我会为大家介绍一下引用类型的值 Object类型 对象是引用类型的值的实例,在 ...
- Javascript高级编程学习笔记(69)—— 事件(13)触摸与手势事件
触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的W ...
- Javascript高级编程学习笔记(23)—— 函数表达式(1)递归
前面的文章中,我在介绍JS中引用类型的时候提过,JS中函数有两种定义方式 第一种是声明函数,即使用function关键字来声明 第二种就是使用函数表达式,将函数以表达式的形式赋值给一个变量,这个变量就 ...
随机推荐
- python3编译安装no module named _ssl
使用源码编译安装python3.6.7以后用pip 安装库, 出现如下问题 Retrying (Retry(total=4, connect=None, read=None, redirect=Non ...
- Linux网络编程学习(一) ----- 概论和Linux模型(第一章第二章)
1.什么是计算机网络,通信方式是什么? 计算机网络就是通过通信线路相互连接的计算机的集合,主要通过双绞线.同轴电缆.电话线或者光缆等有形传输介质通信,还有就是通过激光.微波.卫星等实现无线通信 2.W ...
- 详细分析MySQL事务日志(redo log和undo log) 表明了为何mysql不会丢数据
innodb事务日志包括redo log和undo log.redo log是重做日志,提供前滚操作,undo log是回滚日志,提供回滚操作. undo log不是redo log的逆向过程,其实它 ...
- Java学习笔记(十七):构造器和setter方法选用
- oracle随机数(转)
1.从表中随机取记录SELECT * FROM (SELECT * FROM STUDENT ORDER BY DBMS_RANDOM.RANDOM) WHERE ROWNUM < 4--表示从 ...
- C++ 获取字符串中的所有汉字
#include<iostream> using namespace std; int main() { char str[20] = "cd大家好df"; ...
- Spring事务管理的四种方式(以银行转账为例)
Spring事务管理的四种方式(以银行转账为例) 一.事务的作用 将若干的数据库操作作为一个整体控制,一起成功或一起失败. 原子性:指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不 ...
- Go学习笔记:Win7+LiteIDE+Go+Beego 环境搭建
安装过程比较简单 1.安装go语言环境: 2.安装git: 3.git bash 安装beego,输入“go get github.com/astaxie/beego”,等待一会儿,在D盘的 ...
- 工欲善其事,必先利其器-ecplise配置和优化
1.eclipse下的编码设置:eclipse 中使用模板新建 JSP,xhtml等 文件时,默认的编码为:ISO-8859-1. ISO-8859-1 编码对于中文的显示是不支持的,如果要支持简体中 ...
- Quartz.Net进阶之四:CronTrigger 详述
以前都是将所有的内容放在一篇文章里,就会导致文章很长,对于学习的人来说,有时候这也是一个障碍.所以,以后我的写作习惯,我就会把我写的文章缩短,但是内容不会少,内容更集中.这样,学习起来也不会很累,很容 ...