JavaScript高级程序设计之引用类型(上)

引用类型是比较复杂的一种类型。在面向对象的编程中,会经常用到引用类型,可以说它是编程语言的核心。在JS中内置了几种引用类型,下边会进行一一的介绍。

内置引用类型

Object类型

1、声明方式:直接使用new操作符(const Data = new Object())和使用对象字面量(const Data = {})两种方式。使用对象字面量方式声明的话,花括号内可以写属性和方法,也可以什么都不写。需要注意的是虽然什么都不写,但对象并不是空对象,它会包含一些默认的属性和方法。

2、访问值:可以使用对象名直接点属性名访问值(const Data = {name:123}; console.log(Data.name)),也可以对象名方块号,方括号内写属性名访问值(const Data = {name:123}; console.log(Data["name"]))。使用方括号访问时,方括号内可以写变量。

Array类型

JS的数组和其它编程语言数组有些不同,它的值可以是任何类型,字符串、数值、对象都可以,而且它的长度是动态的,会随着值得增加而动态调整。声明数组的方式也分两种(数组最多包含4294967295个值),第一种使用构造函数(const a = new Array()),第二种使用字面量(const a = [])。使用构造函数的方式创建数组,可以传参,也可以不传参,不传参的话,数组将是一个长度为零的数组,传参的话,共支持两种传参方式,例:

 1 //构造函数创建方式
 2           let b = () =>{
 3               const a = new Array(); //不传参,创建length为零的数组
 4
 5               console.log(a)
 6           }
 7
 8           b = () =>{
 9             const a = new Array(3); //创建长度为3的数组
10
11             console.log(a[2]); //由于没有值,所以为undefined
12           }
13
14           b = () =>{
15               const a = new Array("blue","green","red"); //创建长度3并且含有3个值得数组
16
17               console.log(a[2]); //由于有值,所以值为red
18           }

构造函数声明数组

字面量创建方式例:

 1  //字面量创建方式
 2          b = () =>{
 3              let a = ["3","5","6"]; //创建一个数组
 4
 5              a = [1,2,]; //创建两个值得数组,ie创建三个值得数组
 6
 7              a = [,,,,,,]; //由于没有写具体值,数组里边的值都是undefined
 8
 9              a.length = 3; //修改长度会改变数组,所以可以通过修改长度来删除值。
10
11              a[7] = 5 //给数组新增一个值。长度变8,间隔之间的部分会被undefined代替。
12
13              console.log(a[1]); //访问数组的中第2个值
14          }

字面量创建方式

 数组检测

JS数组提供了两种检测数组的方式,第一种是用Instanceof操作符,来判断变量是否是Array的实例。不过这种检测方式存在一个问题,就是当时用多个框架的时候,另一个框架也拥有自己封装的Array构造函数,这时候就会出现问题,你无法去确定变量是否是原生的Array。第二种使用ES5的新API,Array.isArray()方法。ES5之所以提出这个方法,就是为了解决第一种方法存在的问题。例:

1 const a = ()=>{
2               const b = [3,2,4,1];
3                  //instanceof操作符检测
4               const c = b instanceof Array; //返回true
5
6               //Array.isArray
7
8               const d = Array.isArray(b); //返回true
9           }

转换方法

数组的转换方式有toString()、toLocalString()、valueOf()、join()几种。toString()会把数组变为以逗号分隔的字符串,转换时,后台会调用每个值自己的toString()方法。toLocalStirng()转换的结果和toString()的结果一般是相同的,也是一逗号分隔的字符串,不同的是,转换时,后台调用的是每个值得toLocalString()方法。valueOf()返回数组。join()接收一个参数,指定数组以什么字符,作为连接符,来把数组连接成字符串。参数如果不传或是undefined的话,会默认以逗号连接各项值。例:

 1 const ah = () =>{
 2               const b = [3,2,4,1];
 3
 4               const c = {
 5                   toString:()=>{return "y"},
 6                   toLocaleString:()=>{ return "y" }
 7               },
 8               d = {
 9                   toString:() =>{return "x"},
10                   toLocaleString:()=>{ return "x"}
11               },
12               f = [c,d];
13
14               b.toString() // "3,2,4,1"
15
16               b.toLocaleString() //"3,2,4,1"
17
18               b.valueOf() //3,2,4,1
19
20               b.join("-")//"3-2-4-1"
21               //由于后台会调用每个值得toString方法,所以值为"y,x"
22               f.toString() //"y,x"
23
24               f.toLocaleString() //"y,x"
25           }

 栈方法(pop和push)

栈是一种后进先出的数据结构,而pop和push实现了它的这种特点。例:

1 //栈方法
2             const strack = ()=>{
3                     let a = [1,2];
4
5                     a.push(3) //后进,在数组的尾部添加元素,并返回新长度
6
7                     a.pop() //先出,在数组的尾部删除一个元素,并返回被删除的项
8             }

队列方法(shift)

队列是一种先进先出的数据结构,JS中通过push和shift模拟队列,通过unshift和pop实现反向队列。下边请看具体例子:

 1 //队列方法
 2
 3             const queque = () =>{
 4                 let a = [3,4];
 5
 6                 //正向队列
 7                 a.push(5); //向数组尾部添加元素
 8                 a.shift(); //在数组头部删除元素,并返回删除的项
 9
10                 //反向队列
11                 a.unshift(3) //在数组的头部添加元素,并返回新长度
12                 a.pop() //从尾部删除元素,并返回被删除的项
13             }

排序方法(reverse 和 sort)

 1 //排序方法
 2             const sort = ()=>{
 3                  let a = [4,3,5];
 4
 5                  //reverse 和 sort都换把排完序的新数组返回出来
 6                  a.reverse() //翻转数组顺序
 7
 8                  a.sort() //会把每个项的值转成字符串进行比较,因此排序结果不尽如意,通常是传入回调函数来实现排序。
 9
10                 a.sort((val1,val2)=>val1>val2); //3,4,5
11             }

操作方法(concat 、slice和splice)

 1  //操作方法
 2             const dos = ()=>{
 3                 let b = [3,5,3];
 4                 //把传入的数组货值,连接生成一个新的数组并返回
 5                 let d = b.concat() //由于没有传参数,返回的是原数组的一个副本
 6                 d = b.concat("5",["9","10"]) //返回值[3,5,3,5,9,10]
 7                 //在数组指定位置开始截取,返回截取后生成的新数组。 两个参数start and end,
 8                 //只传start,会一直截取到末尾。 参数支持负值。参数为负值的话,会通过数组长度加上
 9                 //参数值,来确定位置
10                 b.slice(1) //[5,3]
11                 b.slice(1,2) //[5]
12                 b.slice(-1) //[3]
13                 b.slice(-3,-1)//[3,5]
14                 b.slice(-1,-2) //起始位置大于结束位置,返回空数组
15                 //会根据其传入的参数,来确定是删除、插入和替换操作.第一个参数为起始位置
16                 //第二个参数为删除几个。第三个参数为要插入的新值
17                 //splice会改变原数组
18                 b.splice(0,1) //删除操作 返回[3]
19                 b.splice(0,0,4) //插入操作 [4,3,5,3]
20                 b.splice(0,1,4)//替换操作 [4,5,3】
21
22             }

位置方法(indexOf 和 lastIndexOf)

1 const position = () =>{
2                 const pos = [4,3,2];
3                 //查找数组内是否存在该元素,存在返回元素位置,不存在返回-1.查找规则,按===比较。
4                 pos.indexOf(3) // 返回1
5
6                 //与indexOf相似,不同之处,lastIndexOf在数组的末尾开始查找。
7                 pos.lastIndexOf(3) //返回1
8             }

迭代方法

 1 //迭代方法
 2             const fors = () =>{
 3                 const d = [3,4,5,6];
 4                 //判断结果都为true是返回true。参数为回调函数,回调函数有三个参数,1当前项。2索引。3数组对象
 5                 d.every(e=>e>5);
 6                 //判断结果有一个为true,返回true。使用方式与every相同
 7                 d.some(e=>e>5)
 8                 //返回符合条件的值,并生成一个新数组
 9                 d.filter(e=>e>5)
10                 //返回运算后的值,并生成一个新数组
11                 d.map(e=>e-1)
12                 //单纯执行迭代操作
13                 d.forEach(e=>console.log(e))
14             }

归并方法

1 const c = ()=>{
2                 const f = [3,4,5,6];
3                 //对数组进行累加(减、乘、除)操作,并返回其结果。回调函数有两个参数,第一个为上一次元素的结果,第二个为当前项
4                 f.reduce((sum,val)=>sum + val);
5                 //与reduce相同,但是从末尾到开始进行循环
6                 f.reduceRight((sum,val)=>sum + val);
7             }

时间: 2024-10-11 22:26:01

JavaScript高级程序设计之引用类型(上)的相关文章

JavaScript高级程序设计之引用类型(下)

此篇内容紧接<JavaScript高级程序设计之引用类型(上)>,下边继续开始: Date类型 Date是一个日期类,用它可以来获取日期和时间以及指定日期的毫秒数.Date类提供了丰富的API,可以通过MDN上的文档来了解:点击这里跳到MDN,这里便不详细阐述了. RegExp类型 正则表达式绝对是编程语言中的一把利器,无使而不利,在日常编码中会经常用正则来匹配一些东西.JS中的正则,可以通过两种方式来创建:字面量形式和实例化构造函数方式.需要注意的是,字面量创建的正则,会共享一个实例,实例化

JavaScript高级程序设计-(4) 引用类型

1.object var person={};//与new Object()相同 一般创建对象 var person=new Object(); person.Name="admin"; Json方式创建 var person={ Name:"admin", Age:23 }; object作为参数传递 function GetPerson(Person p){ alert(p.Name) } SetPerson({Name:"admin",Ag

《JavaScript高级程序设计》学习笔记(4)——引用类型

欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起,通常也被称为类,有时候也被成为对象定义,因为他们描述的是一类对象所具有的属性和方法.对象是某个特定引用类型的实例,新对象是使用new操作符后跟一个构造函数来创建的, var person = new Object() ; 创建了一个object对象.构造函数

《Javascript高级程序设计》阅读记录(三):第五章 上

这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较深入,而且实际使用价值较大的内容记录下来,并且注释上我的一些想法.做这个一方面是提升了我的阅读效果以及方便我以后阅读 另一个目的是,Javascript高级程序设计这本书内容很多也很厚,希望其他没有时间的人可以通过看这系列摘录,就可以大体学到书里面的核

JavaScript高级程序设计学习笔记--引用类型

Object类型 对象字面量表示法: var person={ name:"Nicholas", age:29, 5:true }; 这人例子会创建一个对象,包含三个属性:name,age和5.但这里的数值属性名会自动转换为字符串. 对象属性的访问:点表示法和方括号语法 alert(person["name"]); // "Nicholas" alert(person.name); // "Nicholas" 从功能上看,这两

JavaScript高级程序设计学习(四)之引用类型

在javascript中也是有引用类型的,java同样如此. javascript常见也比较常用的引用类型就熟Object和Array. 一个对象和一个数组,这个在前后端分离开发中也用的最多.比如ajax传参,有时我不仅仅只是需要一个参数,例如添加方法,传的是一个对象,对象存在属性.在java中对象也可以说类.因为类存在属性,例如人类,他的属性有身高,体重,姓名,年龄,性别等.而js对象,也可以这样,比如车,它可以有品牌,颜色,造型等等. js对象可以做什么呢?同java对象有什么区别呢? 第一

《JavaScript高级程序设计第五章--引用类型》之Object对象和array对象

这一章主要就是介绍各种内置对象的用法,认识其经常用到的属性和方法. 5.1Object类型 创建objec的方式,一种是new Object(),一种是对象字面量(简化创建包含大量属性的对象的过程) var person = { name = "Nicholas"; age = 27 };//最后一个属性不必添加逗号,ie7等会导致错误 //在使用对象字面量语法时,属性名也可以使用字符串.这里的数值属性会自动转字符串. var person = { "name" :

JavaScript高级程序设计之函数

函数实际上是对象,每个函数都是Function类型的实例. 函数是引用类型. 函数名实际上是一个指向函数对象的指针,不会与某个函数绑定. // 这种写法更能表达函数的本质 var sum = function(num1, num2) { return num1 + num2; }; var anotherSum = sum; sum = null; console.log(anotherSum(10, 20)); // 30 console.log(sum(10, 20)); // typeer

《Javascript高级程序设计》阅读记录(二):第四章

这个系列之前文字地址:http://www.cnblogs.com/qixinbo/p/6984374.html 这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较深入,而且实际使用价值较大的内容记录下来,并且注释上我的一些想法.做这个一方面是提升了我的阅读效果以及方便我以后阅读 另一个目的是,Javascript高级程序设计这本书内容很多也很厚,希望其他没有时间的人可以通过看这系列摘录,就可以大体学到书里面的核心内容. 绿色背景的内容是我认为比较值得注意的原著内容.