✊总有人要成为第一，为什么不是你。

2021年08月09日

工作重点

| | 3 | 下午讲JavaScript字符串的方法 | 已完成 |
- [x]

| | 4 | 晚上做练习 | 已完成 |
- [x]

|

遇到的问题和解决思路

遇到的问题

1. 字符串的方法都不能改变原字符串

2. 
   

   解决思路

3. 字符串是有序不可变

4. 
   

   今日总结

   (1)对象属性

   (2)对象赋值

   (3)对象方法

   (4)对象的创建

   (5)构造器

   (6)模拟构造器

   (7)对象中括号

   (8)对象的循环遍历

   (9)内置对象

   (10)sort

   
   
   

   (11)包装数据类型

   (12)字符串操作方法

   (13)字符串的操作方法

   (14)字符串的检索方法

   (15)自己悟

   JavaScript-对象

   1.1 对象的相关概念

• 什么是对象？

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的。

• 属性：事物的特征，在对象中用属性来表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

• 为什么需要对象？
  保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。

如果要保存一个人的完整信息呢？例如，将“张美丽”的个人的信息保存在数组中的方式为：

var arr = [‘张美丽’, ‘女’, 18,20001];

上述例子中用数组保存数据的缺点是：数据只能通过索引值访问，开发者需要清晰的清除所有的数据的排列才能准确地获取数据，而当数据量庞大时，不可能做到记忆所有数据的索引值。

为了让更好地存储一组数据，对象应运而生：对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。

使用对象记录上组数据为：

var obj = { name:”张美丽”, sex:”女”, age:18, height:165 }

JS中的对象表达结构更清晰，更强大。

1.2 创建自定义对象的三种方式

• 使用对象字面量创建对象：

就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示

• 键：相当于属性名
• 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

代码如下：

var person = { name : ‘zhangmeili’, age : 18, sex : ‘女’, sayHi : function(){ alert(‘今天很开心’); } };

• 上述代码中 person即是创建的对象。

• 对象的使用
• 对象的属性
• 对象中存储具体数据的 “键值对” 中的 “键” 称为对象的属性，即对象中存储具体数据的项
• 对象的方法
• 对象中存储函数的 “键值对”中的 “键”称为对象的方法，即对象中存储函数的项
• 访问对象的属性
• 对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ”
• 对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号

示例代码如下：
console.log(person.name) // 调用名字属性 console.log(person[‘name’]) // 调用名字属性

• 调用对象的方法
• 对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号

示例代码如下：
person.sayHi(); // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

• 变量、属性、函数、方法总结

属性是对象的一部分，而变量不是对象的一部分，变量是单独存储数据的容器

• 变量：单独声明赋值，单独存在

• 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征

方法是对象的一部分，函数不是对象的一部分，函数是单独封装操作的容器

• 函数：单独存在的，通过“函数名()”的方式就可以调用

• 方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

• 利用 new Object 创建对象
• 创建空对象

var person = new Object();

• 通过内置构造函数Object创建对象，此时person变量已经保存了创建出来的空对象

• 给空对象添加属性和方法
• 通过对象操作属性和方法的方式，来为对象增加属性和方法

示例代码如下：
person.name = ‘zhangmeili’; person.age = 18; person.sex = ‘女’; person.sayHi = function(){ alert(‘今天很开心’); }

• 注意：
• Object() ：第一个字母大写
• new Object() ：需要 new 关键字
• 使用的格式：对象.属性 = 值;

• 利用构造函数创建对象
• 构造函数
• 构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。
• 我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

构造函数的封装格式：
function 构造函数名(形参1,形参2,形参3) { this.属性名1 = 参数1; this.属性名2 = 参数2; this.属性名3 = 参数3; this.方法名 = 函数体; }

构造函数的调用格式：

var obj = new 构造函数名(实参1，实参2，实参3)
以上代码中，obj即接收到构造函数创建出来的对象。

• 注意事项

1. 构造函数约定首字母大写。
2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
3. 构造函数中不需要 return 返回结果。
4. 当我们创建对象的时候，必须用 new 来调用构造函数。

• 其他
  构造函数，如 Person()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
  创建对象，如 new Person()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化

• new关键字的作用

1. 创建新对象
2. 将构造函数的作用域赋给了新对象(this指向这个新对象)
3. 指向构造函数的代码(为这个新对象添加属性)
4. 返回新对象赋值给实例化对象

1.3 遍历对象

• 使用for…in遍历
  用于循环对象属性。
  循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

for…in 语句用于对数组或者对象的属性进行循环操作。
其语法如下：

for (变量 in 对象名字) { // 在此执行代码 }

• 语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

for (var k in obj) { console.log(k); // 这里的 k 是属性名 console.log(obj[k]); // 这里的 obj[k] 是属性值 }

2.对象分类

2.1 对象

JS中，可以将对象分为“内部对象”、“宿主对象”和“自定义对象”三种。

• 1.内部对象分为本地对象和内置对象

• 本地对象
  js中的本地对象包括Number、String、Boolean、Array、Function、Date、Object、RegExp、Error等
• Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。

• 内置对象（built-in object）定义为“由 ECMAScript 实现提供的，在 ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象，它已被实例化了。
• 2.宿主对象

• 宿主对象就是执行JS脚本的环境提供的对象。
• 对于嵌入到网页中的JS来说，其宿主对象就是浏览器提供的对象，所以又称为浏览器对象，如IE、Firefox等浏览器提供的对象。
• 不同的浏览器提供的宿主对象可能不同，即使提供的对象相同，其实现方式也大相径庭！这会带来浏览器兼容问题，增加开发难度。
• 浏览器对象有很多，如Window和Document等等。
• 3.自定义对象

• 顾名思义，就是开发人员自己定义的对象。JS允许使用自定义对象，使JS应用及功能得到扩充。

2.2 数组对象（回忆）

2.2.1创建数组的两种方式

• 字面量方式
• 示例代码如下：

var arr = [1,”test”,true];

• new Array()
• 示例代码如下：

var arr = new Array();

注意：上面代码中arr创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数

参数传递规则如下：

• 如果只传入一个参数(且是数值类型)，则参数规定了数组的长度
• 如果传入了多个参数，则参数称为数组的元素

2.2.2 数组对象的方法

sort()
对数组的元素进行排序（默认是从小到大来排序 并且是根据字符串来排序的）
参数：可选(函数) 规定排序规则 默认排序顺序为按字母升序
返回值：排序后新数组
是否改变原数组：改变
sort在不传递参数情况下，只能处理10以内（个位数）数字排序
var ary1 = [32,44,23,54,90,12,9]; ary1.sort(function(a,b){ // return a-b; // 结果[9, 12, 23, 32, 44, 54, 90] // return b-a; // 结果[90, 54, 44, 32, 23, 12, 9] }) console.log(ary1);

2.3 字符串对象

2.3.1基本包装类型

为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

// 下面代码有什么问题？ var str = ‘zhangmeili’; console.log(str.length);

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下：

// 1. 生成临时变量，把简单类型包装为复杂数据类型 var temp = new String(‘zhangmeili’); // 2. 赋值给我们声明的字符变量 str = temp; // 3. 销毁临时变量 temp = null;

2.3.2 String对象方法

• 创建字符串对象

var str = new String(‘Hello World’); // 获取字符串中字符的个数 console.log(str.length);

2.4 字符串对象的常用方法

字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。

1.字符方法

• charAt(index) :返回指定索引处的字符。索引范围为从 0 到 length- 1。
  参数：index — 字符的索引。
  返回值：返回指定索引处的字符。

• charCodeAt(index):可返回指定位置的字符的 Unicode 编码()。
  参数：index — 字符的索引。
  返回值：返回在指定的位置的字符的 Unicode 编码。

• String.fromCharCode():可接受一个指定的 Unicode 值作为参数，然后返回相应字符
  参数：必需。一个或多个 Unicode 值，即要创建的字符串中的字符的 Unicode 编码。
  返回值： 返回代表 Unicode 编码的字符。

注意：str[index]:和charAt(index)等效

2.字符串操作方法

• concat():用于连接两个或多个字符串。 | 参数 | 描述 | | —- | —- | | string1, string2, …, stringX | 必需。将被连接为一个字符串的一个或多个字符串对象。 |

• slice(start,end):提取字符串的片断，并在新的字符串中返回被提取的部分。从start位置开始，截取到end位置，end取不到。 | 参数 | 描述 | | —- | —- | | start | 必须. 要抽取的片断的起始下标。第一个字符位置为 0 | | end | 可选。 紧接着要截取的片段结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。 |

• substring(from，to)：用于提取字符串中介于两个指定下标之间的字符。 | 参数 | 描述 | | —- | —- | | from | 必需。一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。 | | to | 可选。一个非负的整数，规定要提取的子串结束位置的下标（不包含）。 如果省略该参数，那么返回的子串会一直到字符串的结尾。 |

• substr(start,length)：可在字符串中抽取从 开始 下标开始的指定数目的字符。 | 参数 | 描述 | | —- | —- | | start | 必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。 | | length | 可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。 |

3.位置方法

• includes(searchvalue, start)方法用于判断字符串是否包含指定的子字符串。 | 参数 | 描述 | | —- | —- | | searchvalue | 必需，要查找的字符串。 | | start | 可选，设置从那个位置开始查找，默认为 0。如果该参数为负数,将按照索引为0开始检索 |

• indexof（searchvalue，start）：返回指定内容在元字符串中的位置 | 参数 | 描述 | | —- | —- | | searchvalue | 必需。规定需检索的字符串值。 | | start | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数，则将从字符串的首字符开始检索。如果该参数为负数,将按照索引为0开始检索 |

• lastIndexOf(searchvalue,start)：该方法将从后向前检索字符串，但返回是从起始位置 (0) 开始计算子字符串最后出现的位置。 看它是否含有字符串。 | 参数 | 描述 | | —- | —- | | searchvalue | 必需。规定需检索的字符串值。 | | start | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。 |

4.去除空白

• trim() ：参数值无。只能去除字符串前后的空白。 | 返回值类型 | 描述 | | —- | —- | | tring | 返回移除头尾空格的字符串。 |

5.大小写转换方法

• to(Locale)UpperCase() ：参数值无。所有小写字符全部被转换为大写字符。
• to(Locale)LowerCase()：参数值无。所有大写字符全部被转换为小写字符。

6.其它

• search(searchvalue) ：方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。 | 参数 | 描述 | | —- | —- | | searchvalue | 必须。查找的字符串或者正则表达式。 |

• replace(searchvalue，newvalue)：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 | 参数 | 描述 | | —- | —- | | searchvalue | 必需。规定子字符串或要替换的模式的 RegExp 对象。 请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。 | | newvalue | 必需。一个字符串值。规定了替换文本或生成替换文本的函数。 |

• split(separator,limit)：用于把一个字符串分割成字符串数组。 | 参数 | 描述 | | —- | —- | | separator | 可选。字符串或正则表达式，从该参数指定的地方分割 string Object。 | | limit | 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。 |

注意点： 如果把空字符串 (“”) 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

总结String 对象操作方法

自己总结

数据类型

数组是有序可变的
字符串是有序不可变的
对象是无序可变的

总结String 对象操作方法

对象调用属性的方式

对象.属性名的方式，属性名是必须已经存在的，若没有则返回undefined
对象[属性名]的方式，属性名可以是已经存在的，也可以是没有的

构造函数的执行流程

第一步，在内存中创建一个空对象
第二步：将函数内部的this指向空对象
第三步：通过this 添加属性或方法
第四步：将this隐式的返回

自己悟