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关键字来声明 第二种就是使用函数表达式,将函数以表达式的形式赋值给一个变量,这个变量就 ...
随机推荐
- C语言实现的反转字符串
这段代码大约是10年前写的了,一直收藏在自己的代码仓库里面,贴出来分享下. 网上也有很多类似的代码,学生们用的比较多,工作中用的很少,权做参考. char* ReverseString(char* s ...
- redis make编译失败的原因
make clean redis编译失败可能是: 1.未安装gcc,gcc-c++ yum install gcc yum install gcc-c++ 2.未安装tcl yum install t ...
- py2与py3区别总结
1. py2中的str是py3中的bytes py2中的Unicode是py3中的str 声明一个字符串变量时,py2 和py3都是str类型,但py2代表字节类型,py3代表文本类型 隐式转换: p ...
- Element-UI使用指南
原网址:https://blog.csdn.net/u012285967/article/details/53023825 Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌 ...
- yum源解释。。。。。
主要说明下如何配置linux上的本地yum源,主要关于一些原理上的说明. 1.yum是什么,yum源又是什么 在windows上安装一个软件,我们可以通过360管家.因为360管家提供了软 ...
- mysql命令行常用指令
一. 启动mysql:service mysql start 停止mysql:service mysql stop 重启mysql:service mysql restart 查看mysql服务状态: ...
- oracle 执行顺序 select查询优化
今天把这几天做的练习复习了一下,不知道自己写得代码执行的效率如何以及要如何提高,于是乎上网开始研究一些材料,现整理如下: 首先,要了解在Oracle中Sql语句运行的机制.以下是sql语句的执行步骤: ...
- vue项目强制清除页面缓存
异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...
- linux服务器系统负载监控-shell脚本
一.监控服务器系统负载情况: 1.用uptime命令查看当前负载情况(1分钟,5分钟,15分钟平均负载情况) # uptime 15:43:59 up 186 days, 20:04, 1 us ...
- React Redux 记数器
npm init react-app counter cd counter npm install 将 src/index.js改为 import React from 'react'; import ...