7.10.2 JavaScript基础 -- 引用类型

ECMAScript数组与其他语言中数组都是数据的有序数组,不懂的是ECMAScript数组的「每一项可以保存任何类型的数据」,而且ECMAScript「数组的大小是可以动态调整」的。

创建数组

7.10.2 JavaScript基础 -- 引用类型_第1张图片
image.png
7.10.2 JavaScript基础 -- 引用类型_第2张图片
image.png

数组读写

image.png
7.10.2 JavaScript基础 -- 引用类型_第3张图片
image.png

数组属性

length

7.10.2 JavaScript基础 -- 引用类型_第4张图片
image.png
7.10.2 JavaScript基础 -- 引用类型_第5张图片
image.png

数组栈&队列方法

push()

功能:方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。
语法:arr.push(element1, ..., elementN)
参数:element1, ..., elementN:被添加到数组末尾的元素。
返回值:新数组的长度

7.10.2 JavaScript基础 -- 引用类型_第6张图片
image.png

unshift()

功能:方法将一个或多个元素添加到数组的开头,并返回新数组的长度。
语法:arr.unshift(element1, ..., elementN)
参数:element1, ..., elementN要添加到数组开头的元素。
返回值:新数组的长度

7.10.2 JavaScript基础 -- 引用类型_第7张图片
image.png

pop()

功能:方法从数组中删除最后一个元素,并返回该元素的值。
语法:arr.pop()
参数:该方法没有参数
返回值:该元素的值。

7.10.2 JavaScript基础 -- 引用类型_第8张图片
image.png

shift()

功能:方法从数组中删除第一个元素,并返回该元素的值。
语法:arr.shift()
参数:该方法没有参数
返回值:该元素的值。

7.10.2 JavaScript基础 -- 引用类型_第9张图片
image.png

数组转换方法

join()

功能:方法将数组(或一个类数组对象)的所有元素连接到一个字符串中。
语法:str = arr.join(separator) // 分隔符
参数:separator。
指定一个字符串来分隔数组的每个元素。
如果需要(separator),将分隔符转换为字符串。
如果省略(),数组元素用逗号分隔。默认为 ","。
如果separator是空字符串(""),则所有元素之间都没有任何字符。
返回值:一个所有数组元素连接的字符串。如果 arr.length 为0,则返回空字符串

7.10.2 JavaScript基础 -- 引用类型_第10张图片
image.png

数组重排序方法

reverse()

功能:方法将数组中元素的倒序排列。
语法:arr.reverse()
参数:该方法没有参数
返回值:排序后的数组。原数组已经被排序后的数组代替。

7.10.2 JavaScript基础 -- 引用类型_第11张图片
image.png

sort()

功能:方法在适当的位置对数组的元素进行排序,并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。
语法:arr.sort(compareFunction)
参数:compareFunction,可选。用来指定按某种顺序进行排列的函数。
返回值:排序后的数组。原数组已经被排序后的数组代替。

7.10.2 JavaScript基础 -- 引用类型_第12张图片
image.png
7.10.2 JavaScript基础 -- 引用类型_第13张图片
image.png

数组合并方法

concat()

功能:方法用于合并两个或多个数组。
语法:arr.concat(value1[, value2[, ...[, valueN]]])
参数:valueN,将数组和/或值连接成新数组。
返回值:一个新数组。原数组不会被改变,

7.10.2 JavaScript基础 -- 引用类型_第14张图片
image.png

数组截取方法

slice()

功能:方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。
语法:arr.slice(begin,end)
参数:begin(可选),end(可选),slice(1,4)提取原数组索引为1,2,3的元素
返回值:一个新数组。原数组不会被改变,

7.10.2 JavaScript基础 -- 引用类型_第15张图片
image.png

数组拼接方法

splice()

方法可以「删除」、「插入」和「替换」数组项。该方法会改变原数组

删除功能
语法:array.splice(start, deleteCount)
参数:start,要删除项的起始位置 ,deleteCount,要删除的数量
返回值:一个新数组,数组中是被删掉的元素,如果没有删除元素,则返回空数组。

7.10.2 JavaScript基础 -- 引用类型_第16张图片
image.png

插入(替换)功能:如果参数2 deleteCount是0,则是插入,否则是替换
语法:array.splice(start, deleteCount, item1, item2, ... itemN)
参数:start: 要插入项的起始位置; deleteCount: 删除的项项,item: 插入元素
返回值:一个新数组,数组中是被删掉的元素,如果没有删除元素,则返回空数组。

7.10.2 JavaScript基础 -- 引用类型_第17张图片
image.png
7.10.2 JavaScript基础 -- 引用类型_第18张图片
image.png

数组位置方法

ECMAScript 5 为数组实例添加了两个位置方法: indexOf() 和 lastIndexOf() 。这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, indexOf() 方法从数组的开头(位置 0)开始向后查找, lastIndexOf() 方法则从数组的末尾开始向前查找。返回值是查找项在数组中的位置,如果没有找到,则返回-1

indexOf()

7.10.2 JavaScript基础 -- 引用类型_第19张图片
image.png

数组迭代方法

ECMAScript 5 为数组定义了 5 个迭代方法,迭代方法包含some()、every()、filter()、map()和forEach()这些方法都接收两个参数,第一个参数是一个函数,接收三个参数,数组当前项的值、当前项在数组中的索引、数组对象本身。第二个参数是执行第一个函数参数的作用域对象,也就是上面说的函数中this所指向的值。注意,「这几种方法都不会改变原数组」。

ervery()

对数组中的每一项运行给定函数,如果该函数对每一项都返回 true ,则返回 true 。

7.10.2 JavaScript基础 -- 引用类型_第20张图片
image.png

some()

对数组中的每一项运行给定函数,如果该函数对任一项返回 true ,则返回 true 。

7.10.2 JavaScript基础 -- 引用类型_第21张图片
image.png

filter()

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

7.10.2 JavaScript基础 -- 引用类型_第22张图片
image.png

map()

数组映射,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

7.10.2 JavaScript基础 -- 引用类型_第23张图片
image.png

forEach()

遍历数组的每一项,对数组中的每一项运行给定函数。这个方法没有返回值。

7.10.2 JavaScript基础 -- 引用类型_第24张图片
image.png

什么是包装类型

之前我们说过,ECMAScript中有 5 种基本数据类型:「Undefined 、Null 、Boolean 、Number、String」 ,和一种复杂数据类型「Object」。其中基本数据类型Boolean 、Number、String这三种基础数据类型。都有对应包装类型。

上文要怎么理解呢,我们来看下边这个例子

7.10.2 JavaScript基础 -- 引用类型_第25张图片
image.png

str是String基本类型,strObj是一个引用类型,并且这个引用类型实际上是String基本类型对应的一个「包装类」

看来一个比较有意思的问题,看下边这个例子

7.10.2 JavaScript基础 -- 引用类型_第26张图片
image.png

这段代码,会有两个比较诡异的点:

  1. String是基本类型,不是引用类型,按道理说是不应该有属性和方法的,而上边的例子不单有length属性,还可以调用一个叫substring的方法。

  2. 当尝试给变量str添加一个属性「t」并赋值100;我们看到浏览器返回了100,说明这个赋值也是成功的 ,可是当我们再去调用str.t的时候,返回的值却是undefined

在JavaScript中,当一个基本类型尝试以对象的方式去使用它的时候,JavaScript会隐式的把这个基本类型转换成对应的包装类型对象。相当于做了这个操作new String()。这能解释第一个诡异的点。

而当完成这个访问之后,这个临时的对象就会被销毁掉,这能解释第二个诡异的点。

包装类型概念总结

JavaScript的包装类型。实际上就是一个隐式类型转换。当尝试将一个基本数据类型按对象去使用的时候。会隐式的把这个基本类型转成对应的包装类型实例,当完成访问之后,临时的包装类型实例会被销毁。

如果你认真的看到这里,相信你应该会明白为什么有人会说「JavaScript万物皆对象」这句话了。


String 类型

字符串类型位置方法

charAt()方法

功能:方法从一个字符串中返回指定的字符。
语法:str.charAt(index)
参数:一个介于0 和字符串长度减1之间的整数。 (0~length-1)。如果没有提供索引会使用0。
返回值:字符串,方法不会改变原字符串

7.10.2 JavaScript基础 -- 引用类型_第27张图片
image.png

另外还有一个方法叫「charCodeAt()」。只是返回值是字符的字符编码。

image.png

indexOf()方法

功能:方法返回调用 String对象中第一次出现的指定值的索引。如果未找到该值,则返回-1。
语法:str.indexOf(searchValue)
参数:searchValue,一个字符串表示被查找的值。
返回值:数值,方法不会改变原字符串

7.10.2 JavaScript基础 -- 引用类型_第28张图片
image.png

另外还有一个方法是lastIndexOf(),是从后往前开始查的。

在学习的时候,一些不常用的方法了解一下即可,如果有需要有用的时候mdn查一下就行了。

字符串类型截取方法

slice()

功能:方法截取一个字符串的一部分,并返回一新的字符串。
语法:str.slice(start, end)
参数:start,必需,指定字符串的开始位置。end,可选,表示字符串截取到哪里,end本身不在截取范围,如果没有该参数,则截取至字符串的尾部
返回值:字符串,方法不会改变原字符串

7.10.2 JavaScript基础 -- 引用类型_第29张图片
image.png

substring()

这个方法跟slice一样,唯一的区别在于当传入负数的时候,自动将参数转换为0,而slice会转成字符串的长度+这个负数,在实际开发中,我想没有谁会传个负数当参数。

substr()

功能:方法截取一个字符串的一部分,并返回一新的字符串。
语法:str.substr(start, len)
参数:start,必需,指定字符串的开始位置。len,可选,表示字符串截取的数量,
返回值:字符串,方法不会改变原字符串

7.10.2 JavaScript基础 -- 引用类型_第30张图片
image.png

练习


7.10.2 JavaScript基础 -- 引用类型_第31张图片
image.png

var str = '"JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。JavaScript 是因特网上最流行的脚本语言。JavaScript很容易使用!你一定会喜欢它的!"';
var sum = 0;
var result = '';

for (var i=0; i';
        sum++;
    }
}
result+='JavaScript这段话出现了'+sum+'次'
document.write(result);

字符串转数组方法

split()

功能:方法把字符串分割成数组
语法:str.split(separator)
参数:separator,必需,分隔符
返回值:数组,方法不会改变原字符串

7.10.2 JavaScript基础 -- 引用类型_第32张图片
image.png

字符串替换组方法

replace()

功能:方法把字符串分按传入的值替换。
语法:str.replace(substr, newSubStr)
参数:substr,一个要被 newSubStr 替换的字符串。
返回值:字符串,方法不会改变原字符串

7.10.2 JavaScript基础 -- 引用类型_第33张图片
image.png

另外字符串还有转换大小写的方法,这里边就不举例了。

JavaScript引用类型一览

  • Object 类型
  • Array 类型
  • Date 类型
  • Funciton 类型
  • 包装类型
    1. String 类型
    2. Boolean 类型
    3. Number类型
  • Math 对象:Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。

我没有把所有的引用类型的属性、方法全部列举,大家可以去MDN上查到很详细的说明。无非都是属性作用和方法如何使用。只要你能够理解引用类型和对象的概念和JavaScript包装类型的转换机制,剩下的就是多写,多练,多查文档了。至于Funciton类型,后边会有文章拿出来单独说!

你可能感兴趣的:(7.10.2 JavaScript基础 -- 引用类型)