前端学习（七）

14-基本包装类型

14.1 基本数据类型不能绑定属性和方法

属性和方法只能添加给对象，不能添加给基本数据类型。

1、基本数据类型：

注意，基本数据类型string是无法绑定属性和方法的。

var str = 'qianguyihao';

str.aaa = 12;
console.log(typeof str); //打印结果为：string
console.log(str.aaa); //打印结果为：undefined

2、引用数据类型：

引用数据类型String是可以绑定属性和方法的。

var strObj = new String('smyhvae');
strObj.aaa = 123;
console.log(strObj);
console.log(typeof strObj); //打印结果：Object
console.log(strObj.aaa);

内置对象 Number 也有一些自带的方法，比如：

• Number.MAX_VALUE;

• Number.MIN_VALUE;

内置对象 Boolean 也有一些自带的方法，但是用的不多。

14.2 基本包装类型

JS 为我们提供了三个基本包装类：

• String()：将基本数据类型字符串，转换为 String 对象。

• Number()：将基本数据类型的数字，转换为 Number 对象。

• Boolean()：将基本数据类型的布尔值，转换为 Boolean 对象。

通过上面这这三个包装类，我们可以将基本数据类型的数据转换为对象。

14.3 基本包装类型的作用

当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将基本数据类型转换为引用数据类型，这样的话，基本数据类型就有了属性和方法，然后再调用对象的属性和方法；调用完以后，再将其转换为基本数据类型。

14.4 在底层，字符串以字符数组的形式保存

在底层，字符串是以字符数组的形式保存的。

上方代码中，smyhvae这个字符串在底层是以["s", "m", "y", "h", "v", "a", "e"]的形式保存的。因此，我们既可以获取字符串的长度，也可以获取指定索引 index 位置的单个字符。这很像数组中的操作。

15-内置对象 String：字符串的常见方法 

15.1 内置对象简介 

JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象。

前面两种对象：是JS的基础内容，属于 ECMAScript； 第三个浏览器对象：属于JS独有，即 JS 内置的API。

内置对象：就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用或者最基本而必要的功能（属性和方法）。

内置对象最大的优点就是帮助我们快速开发。  

15.2 字符串

15.2.1 查找字符串

1、indexOf()/lastIndexOf()：获取字符串中指定内容的索引

语法一：

索引值 = str.indexOf(想要查询的字符串);

indexOf() 是从前向后查找字符串的位置。同理，lastIndexOf()是从后向前寻找。

解释：可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其第一次出现的索引；如果没有找到指定的内容，则返回 -1。

语法二：

这个方法还可以指定第二个参数，用来指定查找的起始位置。语法如下：  

索引值 = str.indexOf(想要查询的字符串, [起始位置]);

var str = 'qianguyihao';
result = str.indexOf('a', 3); // 从下标为3的位置开始查找 'a'这个字符 【重要】

console.log(result); // 打印结果：9

2、search()：获取字符串中指定内容的索引（参数里一般是正则）

语法：

索引值 = str.search(想要查找的字符串);
索引值 = str.search(正则表达式);

解释：可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其第一次出现的索引；如果没有找到指定的内容，则返回 -1。

备注：上方的/yi/i采用的是正则表达式的写法，意思是，让 name去匹配字符yi，忽略大小写。我们在后面会专门介绍正则表达式。

3、includes()：字符串中是否包含指定的内容

语法：

布尔值 = str.includes(想要查找的字符串, [position]);

解释：判断一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回 true；否则返回 false。

参数中的 position：如果不指定，则默认为0；如果指定，则规定了检索的起始位置。

4、startsWith()：字符串是否以指定的内容开头

语法：

布尔值 = str.startsWith(想要查找的内容, [position]); 

解释：判断一个字符串是否以指定的子字符串开头。如果是，则返回 true；否则返回 false。

参数中的position：

• 如果不指定，则默认为0。

• 如果指定，则规定了检索的起始位置。检索的范围包括：这个指定位置开始，直到字符串的末尾。即：[position, str.length)

5、endsWith()：字符串是否以指定的内容结尾

语法：

布尔值 = str.endsWith(想要查找的内容, [position]); 

解释：判断一个字符串是否以指定的子字符串结尾。如果是，则返回 true；否则返回 false。

参数中的position：

• 如果不指定，则默认为 str.length。

• 如果指定，则规定了检索的结束位置。检索的范围包括：从第一个字符串开始，直到这个指定的位置。即：[0, position)

• 或者你可以这样简单理解：endsWith() 方法里的position，表示检索的长度。

15.2.2 获取指定位置的字符

1、charAt(index)

字符 = str.charAt(index); 

解释：返回字符串指定位置的字符。这里的 str.charAt(index)和str[index]的效果是一样的。

注意：字符串中第一个字符的下标是 0。如果参数 index 不在 [0, string.length) 之间，该方法将返回一个空字符串。

2、str[index]

str.charAt(index)和str[index]的效果是一样的，不再赘述。区别在于：str[index]是 H5 标准里新增的特性。

3、charCodeAt(index)

字符 = str.charCodeAt(index); 

解释：返回字符串指定位置的字符的 Unicode 编码。不会修改原字符串。

在实际应用中，通过这个方法，我们可以判断用户按下了哪个按键。

15.2.3 字符串截取

1、slice()

新字符串 = str.slice(开始索引, 结束索引); //两个参数都是索引值。包左不包右。 

解释：从字符串中截取指定的内容。不会修改原字符串，而是将截取到的内容返回。

注意：上面的参数，包左不包右。参数举例如下：

• (2, 5) 截取时，包左不包右。

• (2) 表示从指定的索引位置开始，截取到最后。

• (-3) 表示从倒数第三个开始，截取到最后。

• (1, -1) 表示从第一个截取到倒数第一个。

• (5, 2) 表示前面的大，后面的小，返回值为空。

2、substring()

新字符串 = str.substring(开始索引, 结束索引); //两个参数都是索引值。包左不包右。 

解释：从字符串中截取指定的内容。和slice()类似。

substring()和slice()是类似的。但不同之处在于：

• substring()不能接受负值作为参数。如果传递了一个负值，则默认使用 0。

• substring()还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。比如说， substring(1, 0)相当于截取的是第一个字符。

3、substr()

字符串 = str.substr(开始索引, 截取的长度); 

解释：从字符串中截取指定的内容。不会修改原字符串，而是将截取到的内容返回。

注意，这个方法的第二个参数截取的长度，不是结束索引。

参数举例：

• (2,4) 从索引值为 2 的字符开始，截取 4 个字符。

• (1) 从指定位置开始，截取到最后。

• (-3) 从倒数第几个开始，截取到最后。

备注：ECMAscript 没有对 substr() 方法进行标准化，因此不建议使用它。

15.3 String.fromCharCode()

String.fromCharCode()：根据字符的 Unicode 编码获取字符。

15.4 ConCat()

 新字符串 = str1.concat(str2)； //连接两个字符串 

15.5 split()：字符串转换为数组 【重要】

新的数组 = str.split(分隔符); 

解释：通过指定的分隔符，将一个字符串拆分成一个数组。不会改变原字符串。

备注：split()这个方法在实际开发中用得非常多。一般来说，从接口拿到的 json 数据中，经常会收到类似于"q, i, a, n"这样的字符串，前端需要将这个字符串拆分成['q', 'i', 'a', 'n']数组，这个时候split()方法就派上用场了。

15.6 replace() 

新的字符串 = str.replace(被替换的子串，新的子串); 

解释：将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串。

注意：这个方法，默认只会替换第一个被匹配到的字符。如果要全局替换，需要使用正则。

15.7 repeat()：重复字符串

newStr = str.repeat(重复的次数); 

解释：将字符串重复指定的次数。会返回新的值，不会修改原字符串。

15.8 trim() 

trim()：去除字符串前后的空白。

15.9 大小写转换

var str = 'abcdEFG';

//转换成小写
console.log(str.toLowerCase());

//转换成大写
console.log(str.toUpperCase());

15.10 html方法

var str = '你好';

console.log(str.anchor());
console.log(str.big());
console.log(str.sub());
console.log(str.sup());
console.log(str.link('http://www.baidu.com'));
console.log(str.bold());

16-内置对象：Number和Math

16.1 内置对象number的常见方法

16.1.1 Number.isInteger()判断是否为整数

布尔值 = Number.isInteger(数字); 

16.1.2 toFixed()小数点后面保留多少位

字符串 = myNum.toFixed(num);

解释：将数字 myNum 的小数点后面保留 num 位小数（四舍五入），并返回。不会改变原数字。注意，返回结果是字符串。

参数 num：指定了小数点后面的位数。

16.2 内置对象MATH的常见方法

Math 和其他的对象不同，它不是一个构造函数，不需要创建对象。所以我们不需要 通过 new 来调用，而是直接使用里面的属性和方法即可。

Math属于一个工具类，里面封装了数学运算相关的属性和方法。

16.3 Math.abs()：获取绝对值

    console.log(Math.abs(2)); // 2
    console.log(Math.abs(-2)); // 2

    // 先做隐式类型转换，将 '-2'转换为数字类型 -2，然后再调用 Math.abs()
    console.log(Math.abs('-2'));

    console.log(Math.abs('hello')); // NaN

16.4 Math.random()方法：生成随机数

方法定义：生成 [0, 1) 之间的随机浮点数。  

生成 [0, x) 之间的随机数

    Math.round(Math.random()*x)

生成 [x, y) 之间的随机数

    Math.round(Math.random()*(y-x)+x)

【重要】生成 [x, y]之间的随机整数

也就是说：生成两个整数之间的随机整数，并且要包含这两个整数。

这个功能很常用，我们可以将其封装成一个方法，代码实现如下：

    /*
    * 生成两个整数之间的随机整数，并且要包含这两个整数
    */
    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    console.log(getRandom(1, 10));

16.5 pow()：乘方 

	Math.pow(a, b);  //a的b次方

16.6 Sqrt()：开方 

如果想计算数值a的开二次方，可以使用如下函数：

     Math.sqrt(a);

16.7 url 编码和解码

URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码，以便发送给浏览器。有效的URI中不能包含某些字符，例如空格。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解。

17-内置对象：Date 

内置对象 Date 用来处理日期和时间。

需要注意的是：与 Math 对象不同，Date 对象是一个构造函数 ，需要先实例化后才能使用。

17.1 创建Date对象

创建Date对象有两种写法：

• 写法一：如果Date()不写参数，就返回当前时间对象

• 写法二：如果Date()里面写参数，就返回括号里输入的时间对象

写法一：不传递参数时，则获取系统的当前时间对象

var date1 = new Date();
console.log(date1);
console.log(typeof date1);

代码解释：不传递参数时，表示的是获取系统的当前时间对象。也可以理解成是：获取当前代码执行的时间。

写法二：传递参数

传递参数时，表示获取指定时间的时间对象。参数中既可以传递字符串，也可以传递数字，也可以传递时间戳。

通过传参的这种写法，我们可以把时间字符串/时间数字/时间戳，按照指定的格式，转换为时间对象。

17.2 日期的格式化

方法名	含义	备注
getFullYear()	获取年份
getMonth()	获取月： 0-11	0代表一月
getDate()	获取日：1-31	获取的是几号
getDay()	获取星期：0-6	0代表周日，1代表周一
getHours()	获取小时：0-23
getMinutes()	获取分钟：0-59
getSeconds()	获取秒：0-59
getMilliseconds()	获取毫秒	1s = 1000ms

17.3 获取时间戳

17.3.1 时间戳：指的是从格林威治标准时间的1970年1月1日，0时0分0秒到当前日期所花费的毫秒数（1秒 = 1000毫秒）。

计算机底层在保存时间时，使用的都是时间戳。时间戳的存在，就是为了统一时间的单位。

我们经常会利用时间戳来计算时间，因为它更精确。而且，在实战开发中，接口返回给前端的日期数据，都是以时间戳的形式。

17.3.2 getTime()：获取时间戳

getTime() 获取日期对象的时间戳（单位：毫秒）。这个方法在实战开发中，用得比较多。但还有比它更常用的写法，我们往下看。

17.3.3 获取当前时间的时间戳

如果我们要获取当前时间的时间戳，除了上面的几种方式之外，还有另一种方式。

console.log(Date.now()); // 打印结果举例：1589448165370

17.3.4 利用时间戳检测代码的执行时间

我们可以在业务代码的前面定义 时间戳1，在业务代码的后面定义 时间戳2。把这两个时间戳相减，就能得出业务代码的执行时间。

18-数组简介 

18.1 数组简介

数组和普通对象的功能类似，也是用来存储一些值的。不同的是：

• 普通对象是使用字符串作为属性名的，而数组是使用数字作为索引来操作元素。索引：从 0 开始的整数就是索引。

数组的存储性能比普通对象要好。在实际开发中我们经常使用数组来存储一些数据（尤其是列表数据），使用频率非常高。

18.2 创建数组对象 

方式一：使用字面量创建数组

var arr1 = []; // 创建一个空的数组

var arr2 = [1, 2, 3]; // 创建带初始值的数组

方式二：使用构造函数创建数组

let arr = new Array(参数);

let arr = Array(参数);

如果参数为空，则表示创建一个空数组；如果参数是一个数值时，表示数组的长度；如果有多个参数时，表示数组中的元素。

18.3 数组中的元素类型

数组中可以存放任意类型的数据，例如字符串、数字、布尔值、对象等。

18.4 数组的基本操作

18.4.1 数组的索引

索引 (下标) ：用来访问数组元素的序号，代表的是数组中的元素在数组中的位置（下标从 0 开始算起）。

数组可以通过索引来访问、设置、修改对应的数组元素。我们继续看看。

18.4.2 向数组中添加元素

数组[索引] = 值;

18.4.3 获取数组中的元素

数组[索引];

如果读取不存在的索引（比如元素没那么多），系统不会报错，而是返回 undefined。

18.4.4 获取数组的长度

可以使用length属性来获取数组的长度(即“元素的个数”)。

数组的长度是元素个数，不要跟索引号混淆。

数组的长度 = 数组名.length；

对于连续的数组，使用 length 可以获取到数组的长度（元素的个数）；对于非连续的数组，使用 length 会获取到数组的最大的索引+1。因此，尽量不要创建非连续的数组。

18.4.5 修改数组的长度（修改 length）

• 如果修改的 length 大于原长度，则多出部分会空出来，置为 null。

• 如果修改的 length 小于原长度，则多出的元素会被删除，数组将从后面删除元素。

• （特例：伪数组 arguments 的长度可以修改，但是不能修改里面的元素，后面单独讲。）

18.4.6 遍历数组

遍历: 就是把数组中的每个元素从头到尾都访问一次。

最简单的做法是通过 for 循环，遍历数组中的每一项。

19-数组的常见方法 

19.1 数组的方法清单

方法	描述	备注
Array.isArray()	判断是否为数组
toString()	将数组转换为字符串
Array.from(arrayLike)	将伪数组转化为真数组
Array.of(value1, value2, value3)	创建数组：将一系列值转换成数组

19.2 数组元素的添加和删除

方法	描述	备注
push()	向数组的最后面插入一个或多个元素，返回结果为新数组的长度	会改变原数组
pop()	删除数组中的最后一个元素，返回结果为被删除的元素	会改变原数组
unshift()	在数组最前面插入一个或多个元素，返回结果为新数组的长度	会改变原数组
shift()	删除数组中的第一个元素，返回结果为被删除的元素	会改变原数组
slice()	从数组中提取指定的一个或多个元素，返回结果为新的数组	不会改变原数组
splice()	从数组中删除指定的一个或多个元素，返回结果为被删除元素组成的新数组	会改变原数组
fill()	填充数组：用固定的值填充数组，返回结果为新的数组	会改变原数组

19.3 数组的合并与拆分

方法	描述	备注
concat()	合并数组：连接两个或多个数组，返回结果为新的数组	不会改变原数组
join()	将数组转换为字符串，返回结果为转换后的字符串	不会改变原数组
split()	将字符串按照指定的分隔符，组装为数组	不会改变原字符串

19.4 数组排序

方法	描述	备注
reverse()	反转数组，返回结果为反转后的数组	会改变原数组
sort()	对数组的元素,默认按照Unicode 编码，从小到大进行排序	会改变原数组

19.5 数组排序

方法	描述	备注
reverse()	反转数组，返回结果为反转后的数组	会改变原数组
sort()	对数组的元素,默认按照Unicode 编码，从小到大进行排序	会改变原数组

19.6 查找数组的元素

方法	描述	备注
indexOf(value)	从前往后索引，检索一个数组中是否含有指定的元素
lastIndexOf(value)	从后往前索引，检索一个数组中是否含有指定的元素
includes(item)	数组中是否包含指定的内容
find(function())	找出第一个满足「指定条件返回 true」的元素
findIndex(function())	找出第一个满足「指定条件返回 true」的元素的 index
every()	确保数组中的每个元素都满足「指定条件返回 true」，则停止遍历，此方法才返回 true	全真才为真。要求每一项都返回 true，最终的结果才返回 true
some()	数组中只要有一个元素满足「指定条件返回 true」，则停止遍历，此方法就返回 true	一真即真。只要有一项返回 true，最终的结果就返回 true

19.7 遍历数组

方法	描述	备注
for 循环	这个大家都懂
forEach()	和 for 循环类似，但需要兼容 IE8 以上	forEach() 没有返回值。也就是说，它的返回值是 undefined
map()	对原数组中的每一项进行加工，将组成新的数组	不会改变原数组
filter()	过滤数组：返回结果是 true 的项，将组成新的数组，返回结果为新的数组	不会改变原数组
reduce	接收一个函数作为累加器，返回值是回调函数累计处理的结果

19.8 isArray()：判断是否为数组

布尔值 = Array.isArray(被检测的数组); 

以前，我们会通过 A instanceof B来判断 A 是否属于 B 类型。但是在数组里，这种 instanceof 方法已经用的不多了，因为有 isArray()方法。

19.9 toString()：数组转换为字符串

方式 1：字符串 = 数组.toString();

方式 2：字符串 = String(数组);

方式 3：字符串 = 数组.join(','); // 将数组转为字符串，每一项用 英文逗号 分隔

解释：把数组转换成字符串，每一项用,分割。

备注：大多数的数据类型都可以使用.toString()方法，将其转换为字符串。

19.10 Array.from()：将伪数组转换为真数组

array = Array.from(arrayLike); 

作用：将伪数组或可遍历对象转换为真数组。

19.10.1 伪数组与真数组的区别

伪数组：包含 length 属性的对象或可迭代的对象。

另外，伪数组的原型链中没有 Array.prototype，而真数组的原型链中有 Array.prototype。因此伪数组没有数组的一般方法，比如 pop()、join() 等方法。