2 基本程序设计结构
摘要
对于学习JS的程序员来说，一定是具备了一定的编程功底的，故在下面的概述中，我们不再提及一些简单的概念。
声明：在使用本文的代码时，为了避免文章冗长，我只附上了script标签内的代码供演示，如有需要详细代码可以前往代码仓库获取。
作者：来自ArimaMisaki创作
文章目录
2.1 变量
格式：var 变量名1,变量名2,…
- var是一个JS关键字，用来声明变量。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管理。
- 变量名可以用来访问内存中分配的空间。
- 变量名要赋初始值，否则会提示undefined。
命名：
- 由字母、数字或下划线美元符号组成
- 严格区分大小写
- 不能以数字开头
- 不能是关键字、保留字
- 变量名需要有意义
- 遵守驼峰命名法
2.2 数据类型
说明：与Java和C++等强类型语言不同，JavaScript是一种弱类型或者说动态类型语言，这意味着无需声明变量的类型，在程序运行过程中，使用var系统会自动确定数据类型。
对于Js来说，其数据类型分为简单数据类型（基本数据类型或值类型）和复杂数据类型（引用数据类型）。
值类型：变量存储的是值本身，故又名值类型。如number,boolean,undefined,null,string。
引用数据类型：变量存储的仅仅是地址，通过new关键字创建的对象，如Object、Array、Date等。
<script>
var a = 1
var b = true
var c = 'hello'
var d
var e = null
// 如果需要查看一个变量的数据类型，可以使用typeof 数据的方式来检查
console.log(a,typeof a);
console.log(b,typeof b);
console.log(c,typeof c);
console.log(d,typeof d);
// 如果使用typeof检查null变量，则其返回的不是null这个数据类型，而是一个Object
console.log(e,typeof e);
// null代表空值，即什么都没有。需要注意的是undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true
console.log(d == e);
// 如果要判断一个值是否为数字，可以使用isNaN(数据)的方式来检查，其返回一个布尔值
console.log(a,isNaN(a));
// JS中的字符串型可以使用单引号也可以使用双引号，一般来说推荐单引号
// 字符串可以进行嵌套，其遵循外双内单（外面双引号，里面单引号）准则
var str1 = "hello"
var str2 = 'world'
// 多个字符串可以使用+进行拼接，多个数据类型拼接只要一个含有字符串，则其他数据类型与其拼接时最终结果也是字符串
console.log(str1 + str2);
console.log(str1 + 1);
// 如果需要判断字符串的长度，可以使用.length的方式查看其长度。使用小数点调用是属性调用的一种方式
console.log(str1.length);
</script>
2.3 数据类型转换
2.3.1 概述
引入：使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算了，而需要转换变量的数据类型。
说明：通俗来说，就是把数据类型的变量转换为另外一种数据类型。通常我们会涉及三种方式转换：
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
2.3.2 字符串转换
<script>
// 字符串的转换
// 1. toString()可以将某些数据类型转为字符串
var a = 1
console.log(a, typeof a)
var str = a.toString()
console.log(str, typeof str)
// 2.String(变量或字面量)可以将其他数据类型强转字符串
var num1 = 1
var str1 = String(num1)
console.log(str1, typeof str1)
// 3.字符串拼接
var str2 = 1
var str3 = ''
console.log(str2 + str3,typeof (str2+str3))
</script>
2.3.3 字符串转数字型
| 方式 | 说明 | 案例 |
|---|---|---|
| parseInt(String) | 将字符串类型转为整数数字型 | parseInt(‘78’) |
| parseFloat(String) | 将字符串类型转为浮点数数字型 | parseFloat(‘78.21’) |
| Number(变量或字面量) | 将String强转数值型 | Number(‘12’) |
| js隐式转换 | 利用算数运算隐式转换为数值型 | ‘12’-0 |
<script>
str1 = '78';
str2 = '78.01'
str3 = '78px'
// 1.将字符串类型转为整数数字型
console.log(parseInt(str1), typeof parseInt(str1));
// 如果使用parseInt将小数字符串转为整数，则小数点后的数字会被截断
console.log(parseInt(str2), typeof parseInt(str2));
// 如果使用parseInt将数字+单位格式的字符串转为整数，则单位会被去掉
console.log(parseInt(str3), typeof parseInt(str3));
// 2.将字符串类型转为浮点数数字型
console.log(parseFloat(str2),typeof parseFloat(str2));
// 3.将String强转数值型
console.log(Number(str1),typeof(Number(str1)));
// 4.隐式转换
console.log(str1-2);
</script>
2.3.4 布尔型转换
说明：使用Boolean()可以实现强转布尔型，其中代表空和否定的值会被转换为false，而其他值则会变为true
<script>
var a = 1
var b = 12
var c = 0
var d // 没有初始化，值为undefined
console.log(Boolean(a),typeof Boolean(a));
console.log(Boolean(b),typeof Boolean(b));
console.log(Boolean(c),typeof Boolean(c));
console.log(Boolean(d),typeof Boolean(d));
</script>
2.4 解释型语言和编译型语言
说明：计算机只能理解机器语言，故编程语言都得通过翻译器翻译为机器语言才可执行。翻译的两种方式是编译和解释。编译是代码执行前先进行编译生成中间代码文件，典型代表为Java；而解释器是边运行边解释，并立即执行，典型代表为JavaScript，python。
2.5 运算符
2.5.1 比较运算符
<script>
//比较运算符运算的结果是一个布尔值
console.log(1<2);
console.log(1>2);
console.log(1>=2);
console.log(1<=2);
console.log(1 == '1');//JS中的==会转型，要求值和数据类型可以不一致
console.log(1 != 2);
console.log(1 === '1');//全等，要求值和数据类型都一致
</script>
2.5.2 逻辑运算符
<script>
console.log(2 > 1 && 2 > 3);//逻辑与，一假必假
console.log(2 > 1 || 2 > 3);//逻辑或，一真必真
console.log(!(2 > 1));//逻辑非
</script>
2.6 流程控制
2.6.1 代码块
JS的语句和Java一样，都是以分号结尾。在书写流程控制时，我们难免在执行体中需要书写多条语句。JS沿袭了C++和Java的风格使用了代码块，即使用花括号（大括号）将所有语句括起，代码块的作用是将所有的语句视为一条语句。
2.6.2 条件判断语句
条件判断语句中的if、if-else、if-else if和switch都与Java相同，故这里不再赘述。
2.6.3 循环控制
循环控制中的while、do…while、for语法都与Java相同，故这里不再赘述。
2.6.4 跳转控制
跳转控制中的break和continue都与Java相同，故这里不再赘述。
2.7 函数
<script>
//1. 函数定义
function myfn() {
console.log('定义的函数被调用');
}
// 函数调用
myfn()
//2. 函数表达式
var myfn2 = function () {
console.log('函数表达式被调用');
}
myfn2()
//3. 有参函数
var add = function (a, b) {
return a + b;
}
console.log('add函数执行的结果是：'+add(1,2));
//4. 当我们不确定函数的参数有多少个时，可以使用arguments来获取
console.log(myfn2.arguments);
console.log(add.arguments);
//5. 嵌套函数 与高级编程语言不同的是，JS允许函数的定义存在于另一个函数定义的内部。
function outfn(){
function innerfn(){
console.log("我是内层函数");
}
innerfn()
console.log("我是外层函数");
}
outfn()
</script>
2.8 对象
2.8.1 基本概念
对象：在JavaScript中，万物皆是对象，故所有事物都可以传给var变量。Object类型我们就叫做对象类型。前面提到过基本数据类型都属于Object类型。
原始值：原始值指的是没有属性或方法的值。也就是我们前面提到的五种基本数据类型。
2.8.2 创建对象
<script>
//第一种方式：利用Object自带的构造器创建对象后添加属性
var person = new Object();
person.name = " ArimaMisaki ";//利用对象.属性的方式可以添加、修改和访问属性
person.age = 18;
console.log(person);
console.log(person.name);//利用对象.属性 来读取对象中的属性
console.log(person.school);//如果对象中没有该属性而去读取则会显示无定义undefined
//第二种方式：利用对象字面量创建对象
var person = {
name: "ArimaMisaki",
age: 18
};
console.log(person);
//第三种方式：利用构造器生成对象
function Person(aname, aage, asex) {
this.name = aname;
this.age = aage;
this.sex = asex;
}
new Person("刘德华", 18, "男");
//利用instanceof可以查看某对象是否属于某个构造函数
console.log(person instanceof Person);;
</script>
2.8.3 对象属性
<script>
var person = {
uname:'ArimaMisaki',
age:22
}
console.log(person);
//1. 访问属性
// 方式1 利用对象.属性
console.log(person.uname);
// 方式2 利用对象.["属性"]
console.log(person["uname"]);
//2. 修改属性：访问并修改即可
person.uname = 'AM'
console.log(person.uname);
//3. 添加属性：直接对象.属性即可
person.sex = '男'
console.log(person.sex);
console.log(person);
//4. 删除属性：delete 对象.属性
delete person.sex
console.log(person);
//5. 利用增强for遍历对象中的属性
for(var a in person){
console.log(a);
}
</script>
2.8.4 对象方法
2.8.4.1 对象方法概念
对象方法：JS中的方法是用于存储对象属性的函数
访问对象方法：对象.方法名()
2.8.4.2 this对象
this实际上可以看做是一个指针，其作用和Java中的this类似。当在一个构造器中使用this指针时，this指代的是通过构造器new出来的对象。也就是说this.name = aname;如果存在于Person构造函数中，则通过new Person()生成的对象自带一个name属性。
this在函数定义的时候是无法确定的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向是那个调用它的对象。
<script>
function Person(aname,aage,asex){
this.name = aname;
this.age = aage;
this.sex = asex;
this.Select = function(){
console.log(this.name);
console.log(this.age);
console.log(this.sex);
};
}
var person = new Person('ArimaMisaki',18,'男');
person.Select();
</script>
2.8.5 对象构造器
<script>
//构造函数是一种特殊的函数，用于创建对象
function Person(aname, asex) {
this.name = aname;
this.sex = asex;
}
//使用new关键字来创建对象，这个过程叫实例化，无变量接收的为匿名对象
console.log(new Person('ArimaMisaki','fale'));;
</script>
注：构造函数名最好大写，这符合高级编程语言的习惯。
2.8.6 实例成员和静态成员
<script>
//实例成员就是构造函数内部通过this添加的成员，如name sex就实例成员
function Person(name, sex) {
this.aname = name;
this.asex = sex;
}
//实例成员只能通过对象来访问
var person = new Person('ArimaMisaki','fale');
console.log(person.aname);
console.log(Person.aname);
//静态成员就是构造函数上的添加的成员
Person.aage = 13;
//静态成员只能通过构造函数来访问
console.log(Person.aage);
var person1 = new Person('person2','fale');
console.log(person1.aage);
</script>
2.9 作用域
2.9.1 基本概念
2.9.1.1 作用域及其分类
- 作用域：代码名字在某个范围内起作用和效果。其目的是为了提高程序的可靠性，更重要的是减少命名冲突。
- JS作用域的划分：分为全局作用域和局部作用域（函数作用域）
- 全局作用域：整个script标签或者是一个单独的js文件
- 局部作用域：代码只在函数内部起效果
2.9.1.2 变量作用域
说明：根据作用域的划分可以分为全部变量和局部变量。
- 全局变量的特殊情况：如果一个变量在没有声明var的情况下被赋值了，且处于函数内部，那么它也是全局变量。（不建议使用）
- 局部变量的特殊情况：如果一个变量此前没有任何声明，但是出现在了函数的形参列表中，那么它也是局部变量。
全局变量只有在浏览器关闭的时候才会销毁，比较占用资源；局部变量函数执行完毕就会销毁，比较节约资源。
2.9.2 作用域链
查找一个变量时，是由内而外查找，如果找到最外面还未找到变量，则报ReferenceError异常。
function f1() {
var num = 123;
function f2() {
console.log(num);
}
f2;
}
var num = 456;
f1();
//结果输出因为123，因为num离123近。
2.10 对象原型
2.10.1 原型的提出
使用构造函数创建对象会出现的一个问题，即每个对象属性不一样但方法一样。若通过构造函数创建1000个对象，则内存中有1000个相同的方法。为此，我们将构造函数中的方法抽离使其作为全局函数，该全局函数我们会在构造函数中使用。
<script>
function Person(name,age){
this.name = name;
this.age = age;
this.sayName = sayName;
}
function sayName(){
console.log(this.name);
}
var person1 = new Person("同学A",18);
var person2 = new Person("同学B",18);
person1.sayName();
person2.sayName();
</script>
注：这么做虽然不失为一种好方法，但是容易出现不同构造函数的同名方法，容易污染全局作用域的命名空间。为此，我们需要使用到原型来解决这个问题。
2.10.2 构造函数原型对象
<script>
//原型对象prototype
function Person(name, sex) {
this.aname = name;
this.asex = sex;
}
console.log(Person.prototype);
//公共变量为静态变量，想要使用静态变量方式声明
//静态变量也可以使用原型对象声明，但是无法通过构造函数调用了
Person.prototype.aage = 13;
var person = new Person('ArimaMisaki','fale');
console.log(person.aage);
//添加公共方法
Person.prototype.run = function () {
console.log("人会走路");
}
console.log(person.run());
</script>
注：
- 每次创建函数对象，解析器都会向函数中添加一个
prototype原型对象。 - 构造函数通过原型分配的函数是所有对象所共享的。
- 把
不变的方法直接定义在prototype上，所有对象的实例就可以共享这些方法，以达到节省内存的效果。 - 当访问对象方法时，它会在对象自身中寻找，如果有则直接使用，否则会去原型对象中寻找，直至找到并使用。
- 构造器定义好后是无法直接往构造器中添加新方法，但是我们可以往它的原型中添加。
- 以后创建构造函数，可以将对象共有的属性和方法统一添加到构造函数的原型对象中。而无需每个对象一个一个去添加。这样做的好处既避免了污染全局作用域，又使得对象具有独立性。
- 一般来说原型对象上面只存方法，不存属性。如果构造函数的属性都一样了，构造函数就失去意义了。
2.10.3 对象原型
<script>
function Person(name, sex) {
this.aname = name;
this.asex = sex;
}
var person = new Person('ArimaMisaki', 'fale');
//对象中隐含属性__proto__记录原型对象prototype的地址
console.log(person.__proto__);
console.log(person.__proto__ == Person.prototype);
//方法查找规则：先在自身寻找，找不到再去原型对象上找
Person.prototype.aage = 13;
console.log(person.aage);
</script>
2.10.4 原型构造函数
<script>
function Person(name, sex) {
this.aname = name;
this.asex = sex;
}
var person = new Person('ArimaMisaki', 'fale');
//constructor用于指明某对象原型的构造函数
console.log(Person.prototype.constructor);
console.log(person.__proto__.constructor);
console.log(person.constructor);
//用法：手动指回构造函数
function Star(uname,age){
this.uname = uname;
this.age = age;
}
//(1)原型对象被覆盖了，没有用.的方式来添加
Star.prototype = {
//(2)需要用constructor指回原对象
constructor:Star,
sing:function(){
console.log('我会唱歌');
},
movie:function(){
console.log('我会演电影');
}
}
//声明对象
var ldh = new Star('刘德华',18);
console.log(ldh.__proto__);
</script>
2.10.5 构造函数、实例、原型对象
2.10.6 原型链
2.10.6.1 原型链
<script>
//原型链
function Star(uname,age){
this.uname = uname;
this.age = age;
}
Star.prototype.sing = function() {
console.log('我会唱歌');
}
var ldh = new Star('刘德华',18);
//1 只要有对象就有__proto__原型，指向构造函数中的原型对象
console.log(Star.prototype);
//prototype为原型对象，其本质也是对象，其中也存在__proto__，指向Object对象的prototype
console.log(Star.prototype.__proto__ == Object.prototype);
//2 Object原型对象的__proto__为空
console.log(Object.prototype.__proto__);
//3 对象成员规则：按照原型链来寻找
Object.prototype.jump = function() {
console.log('我会跳舞');
}
ldh.jump();//ldh找不到，去Star构造函数中的原型对象找，找不到，去Object的原型对象找，找到了，调用。
</script>
2.10.6.2 原型链示意图
2.10.7 扩展内置对象
<script>
//原型对象的应用：扩展内置对象方法
//1 查看Array的原型对象
console.log(Array.prototype);
//2 为原先的Array添加内置方法
Array.prototype.sum = function() {
var sum = 0;
for (var i = 0; i < this.length; i++) {
sum = this[i];
}
return sum;
}
var arr = [1,2,3];
//3 调用新添加到Array的sum方法
console.log(arr.sum());
</script>
2.11 常用方法
2.11.1 toString
说明：toString函数用于将对象以字符串的形式返回。该方法属于Object，所有对象都继承自Object，故所有对象都可调用该方法。
2.11.2 hasOwnProperty
说明：如需判断当前对象是否包含指定的属性或方法，可以使用属性 in 对象的方式来检查。
前面我们谈论过属性和方法的查找，从对象本身开始找至原型对象。所以如果想要仅仅检查自身对象而不检查原型对象，则可以使用hasOwnProperty方法。同样地，该方法属于Object对象中的原型对象的原型对象。
2.12 内置对象
JS对象分为三种：自定义对象、内置对象、浏览器对象ECMAScript。这一小节中主要讲解内置对象。内置对象就是JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能。
学会利用中文手册查阅内置对象是一件十分有必要的事。常用的中文手册有：
2.12.1 Array对象
2.12.1.1 数组概述
-
数组需要通过构造函数来创建对象。
-
JavaScript支持数组中可以有不同类型的元素，这跟JavaScript的弱类型有关，我们大多数时候都是相同类型元素的集合。
-
数组内的各个值被称作元素，每一个元素都可以通过索引（下标）来快速读取，索引是从零开始的整数。
2.12.1.2 使用数组
<script>
// 1. 创建数组
// （1）构造函数法：利用构造函数
var arr1 = new Array()
console.log(arr1);
// (2) 引用类型：利用数组字面量
var arr2 = [1,2,3,4]
console.log(arr2);
// 2. 数组中可以有不同类型的元素
var arr3 = ['1',1,true,null]
console.log(arr3);
// 3. 访问数组元素
// (1) 使用索引访问元素 数组元素从0开始
console.log(arr2[0]);
// (2) 使用for循环来打印数组元素
for (var i = 0; i < arr2.length; i++) {
console.log(arr2[i]);
}
// (3) 使用增强for循环来打印数组
for(var a in arr2){
console.log(a);
}
//4. 数组常用属性
//(1) 打印数组的长度
console.log(arr3.length);
//(2) 打印数组的原型
console.log(arr3.constructor);
</script>
2.12.1.3 数组方法
<script>
var arr1 = [1, 2, 3]
var arr2 = [1]
var arr3 = [2]
var arr4 = [5, 4, 2, 1, 8]
// 1.使用push方法可以向数组末尾添加元素
arr1.push(4);
console.log(arr1);
// 2.使用pop方法可以删除数组的最后一个元素,并且将删除的元素作为返回值返回
console.log(arr1.pop());
console.log(arr1);
// 3.使用unshift方法可以向数组开头添加元素
arr1.unshift(0);
console.log(arr1);
// 4.使用shift方法可以删除数组的第一个元素，并且将删除的元素作为返回值返回
console.log(arr1.shift());
console.log(arr1);
// 5.使用forEach方法可以遍历数组
arr1.forEach(function (value, index, array) {
console.log('数组元素为：' + value);
console.log('数组索引为:' + index);
console.log('来自数组：' + array);
})
// 6.使用slice(起始位置，终止位置)方法可以读取数组元素，并将读取后的元素装到一个新数组中返回。
console.log(arr1.slice(0, 2));
// 7.使用concat方法合并两个数组并将合并后的新数组返回。
arr = arr2.concat(arr3);
console.log(arr);
// 8.使用join(“分隔符”)方法可以将数组转换为字符串。其中分隔符的指定不是刚需，如没有指定分隔符则默认使用逗号。
var str = arr1.join("-");
console.log(str);
// 9.使用reverse方法可以用于反转数组
console.log(arr1.reverse());
// 10.使用sort方法可以用于数组排序
console.log(arr4.sort());
// 如果想要指定排序规则可以使用回调函数，具体实现为arr.sort(function (a,b)){return a-b}。如果升序则返回a-b，如果降序则返回b-a。
console.log(arr4.sort(function (a, b) {
return b - a;
}));
// 11.使用filter可以筛选数组，并且返回一个新数组
var filterStr = arr1.filter(function (value, index) {
// 筛选数组中大于等于2的元素并作为一个数组返回
return value >= 2
})
console.log(filterStr);
// 12.使用some可以查找数组中是否有满足条件的元素，并返回布尔值。当找到符合条件的第一个元素后便不再查找
console.log(arr1.some(function (value, index) {
// 查找数组中是否有大于等于2的元素存在
return value >= 2
}));
</script>
2.12.2 Math对象
2.12.2.1 Math概述
Math是一个内置对象，它具有数学常数和函数的属性和方法，不是一个函数对象
与其他全局对象不同的是，Math不是一个构造器，Math的所有属性和方法都是静态的，通过小数点的方式即可调用。
2.12.2.2 Math常用常量及方法
<Script>
/*常用数学常量*/
console.log(Math.PI);//圆周率
console.log(Math.E);//欧拉常数e
console.log(Math.LN2);//以2为底自然对数
console.log(Math.LN10);//以10为底自然对数
console.log(Math.SQRT1_2);//二分之一的平方根
console.log(Math.SQRT2);//2的平方根
/*常用方法*/
console.log(Math.abs(-2));//返回绝对值
console.log(Math.floor(2.3));//向下取整
console.log(Math.ceil(2.3));//向上取整
console.log(Math.round(3.6));//四舍五入
console.log(Math.min(1,99,3));//求最小值
console.log(Math.max(1,99,3));//求最大值
console.log(Math.random());//0-1左闭右开随机数，通过运算符可以扩大其随机数范围
</Script>
2.12.3 Date对象
2.12.3.1 Date概述
创建Date实例用来处理日期和时间。Date对象基于1970年1月1日起的毫秒数。
必须使用构造函数创造对象。
2.12.3.2 Date常见方法以及格式化
<script>
/*构造方式1：如果是无参构造器，则返回当前时间*/
var date1 = new Date();
console.log(date1);
/*构造方式2：如果是有参构造器，如"2022-7-12"，则返回字符串对应的时间*/
var date2 = new Date("2022-7-12");
console.log(date2);
/*date对象常用方法*/
console.log(date1.getFullYear());//获取当年
console.log(date1.getMonth());//获取当月
console.log(date1.getDate());//获取当天
console.log(date1.getDay());//获取星期几
console.log(date1.getHours());//获取当前时
console.log(date1.getMinutes());//获取当前分
console.log(date1.getSeconds());//获取当前秒
/*日期格式化*/
var date3 = new Date();
var year = date3.getFullYear();
var month = date3.getMonth();
var day = date3.getDate();
var dayOfWeek = date3.getDay();
var arr = ['星期日','星期一1','星期二','星期三','星期四','星期五','星期六'];
function gettime() {
var h = date1.getHours();
var m = date1.getMinutes();
var s = date1.getSeconds();
return h+':'+m+':'+s;
}
console.log('今天是：'+year+'年'+month+'月'+day+'日'+arr[dayOfWeek]+gettime());
</script>
2.12.3.3 Date对象常见应用
<script>
/*获得1970.1.1距今为止过了多少毫秒*/
var date1 = new Date();
var date2 = +new Date();
console.log(date1.valueOf());
console.log(date1.getTime());
console.log(date2);//最常用写法
console.log(Date.now());
/*倒计时*/
//使用输入未来时间和现在时间毫秒时间戳来对减，所得毫秒再转换为时间即可
function countDown(time) {
var nowTime = +new Date();//返回的是当前时间总的毫秒数
var inputTime = +new Date(time);//返回的是用户输入时间总的毫秒数
var times = (inputTime-nowTime)/1000;//time是剩余时间总的秒数
d = d<10?'0'+d:d;
var d = parseInt(times/60/60/24);//计算天数
h = h<10?'0'+h:h;
var h = parseInt(times/60/60%24);//计算小时
m = m<10?'0'+m:m;
var m = parseInt(times/60%60);//计算分数
s = s<10?'0'+s:s;
var s = parseInt(times%60);//计算秒数
return d+'天'+h+'时'+m+'分'+s+'秒';
}
console.log(countDown('2022-7-20 18:00:00'));
</script>
2.12.4 String对象
| 常用方法 | 说明 |
|---|---|
| charAt() | 可以返回字符串中指定位置的字符 |
| charCodeAt() | 可以返回字符串中指定位置字符的Unicode编码 |
| formCharCode() | 可以根据字符编码获取字符，该方法为静态方法 |
| concat() | 可以连接多个字符串，作用等同于加号 |
| indexOf(‘要查找的字符’,开始查找的位置) | 可以检索一个字符串中是否含有指定内容，有就返回索引，没有就返回-1 |
| lastIndexOf(‘要查找的字符’,开始查找的位置) | 和indexOf用法相同， 但该方法是从后往前找 |
| slice(起始索引,结束索引) | 截取子串，但左闭右开。但参数可以有负值 |
| substring(索引1,索引2) | 截取子串，但左闭右开。但参数不能有负值。索引1若大于索引2，则自动交换 |
| toUpperCase() | 将一个字符串转换为大写并返回 |
| toLowerCase() | 将一个字符串转换为小写并返回 |
2.12.5 RegExp对象
2.12.5.1 正则表达式概述
说明：正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在Js中，正则表达式也是对象。
应用场景：验证表单，过滤敏感词
2.12.5.2 正则表达式的使用
<script>
// / 正则表达式内容 /
// 1.通过RegExp对象的构造函数创建
var regexp = new RegExp(/123/);
console.log(regexp);
// 2.通过字面量创建正则表达式
var rg = /123/;
// 测试正则表达式 regexpobject.test(teststr)
console.log(rg.test(456));//false，因为正则表达式要求str为123
console.log(rg.test(123));//true
</script>
2.12.5.3 元字符
| 元字符 | 说明 |
|---|---|
| ^ | 写在开头表示要求行首具有表达式内容，写在范围符[]内部表示取反 |
| $ | 要求行尾具有表达式内容 |
| [] | 字符类，表示[]中的字符满足其中一个即可 |
| - | 范围符，需搭配字符类使用 |
<script>
// 0.正则表达式不需要加引号 无论是数字还是字符
var rg1 = /abc/ //只要有abc这个字符串返回的都是true
console.log(rg1.test('abcd'));//true
console.log(rg1.test('abcde'));//true
console.log('----------');
// 1.要求行首具有表达式内容
var rg2 = /^abc/
console.log(rg2.test('abcd'));//true
console.log(rg2.test('aabcd'));//false
console.log('----------');
// 2.要求行尾具有表达式内容
var rg3 = /abc$/
console.log(rg3.test('abcd'));//false
console.log(rg3.test('aabc'));//true
console.log('----------');
// 3.^和$搭配实现精确匹配，要求必须是指定的字符串
var rg4 = /^abc$/
console.log(rg4.test('abcd'));//false
console.log(rg4.test('abcabc'));//false
console.log(rg4.test('abc'));//true
console.log('----------');
// 4.字符类[]
var rg5 = /[abc]/ //只要包含a或者b或者c任意字母即可
console.log(rg5.test('a'));//true
console.log(rg5.test('ab'));//true
console.log(rg5.test(5));//false
var rg6 = /^[abc]$/ // 只能三选一,即只能匹配a,b,c，即使是aa也是错的
console.log(rg6.test('ab'));//false
console.log('----------');
// 5.范围符-
var rg7 = /^[a-z]$/ //只能输出26个字母任意一个
console.log(rg7.test(5));//false
console.log(rg7.test('a'));//true
console.log(rg7.test('abc'));//false
console.log('----------');
var rg8 = /[a-zA-Z0-9]/ //可以输出大小写字母和数字任意字符
console.log(rg8.test(8));//true
console.log(rg8.test('a'));//true
console.log(rg8.test('aA5'));//true
console.log('----------');
// 6.取反^
var rg9 = /^[^a-z]$/ //可以输出除了小写字母以外的任意字符
console.log(rg9.test(1));//true
console.log(rg9.test('A'));//true
console.log(rg9.test('a'));//false
</script>
2.12.5.4 量词符
说明：用于设定某个模式出现的次数
| 量词 | 说明 |
|---|---|
| * | 可以出现0次或者很多次 |
| + | 可以出现1次或多次 |
| ? | 可以出现1次或0次 |
| {n} | 重复n次 |
| {n,} | 出现大于等于n次 |
| {min,max} | 出现次数大于等于min次，且小于等于max次。需要注意花括号内不要有空格。 |
<script>
// 1.* 可以出现0次或多次
var rg1 = /^a*$/ //表示a可以出现0次到多次
console.log(rg1.test('aaabb'));//false
console.log(rg1.test('aaaa'));//true
console.log(rg1.test(''));//true
console.log(rg1.test(1));//false
console.log('----------');
// 2.+ 可以出现1次或多次
var rg2 = /^a+$/ //表示a可以出现1次或多次
console.log(rg2.test(''));//true
console.log(rg2.test('aa'));//true
console.log(rg2.test('aabb'));//false
console.log('----------');
// 3.? 可以出现1次或0次
var rg3 = /^a?$/ //表示a出现0次或一次
console.log(rg3.test(''));//true
console.log(rg3.test('a'));//true
console.log(rg3.test('aa'));//fasle
console.log('----------');
// 4.{} 重复n次
var rg4 = /^a{3}$/ //要求a重复3次
console.log(rg4.test(''));
console.log(rg4.test('aa'));
console.log(rg4.test('aaa'));
console.log('----------');
// 5.{n,} 出现大于等于n次
var rg5 = /^a{3,}$/ //要求a出现大于等于3次
console.log(rg5.test(''));//false
console.log(rg5.test('aaa'));//true
console.log(rg5.test('aaaa'));//true
console.log('----------');
// 6.{min,max} 出现次数大于等于min次，且小于等于max次
var rg6 = /^a{3,5}$/ //要求a出现3次以上，5次以下 左闭右闭
console.log(rg6.test(''));//false
console.log(rg6.test('a'));//false
console.log(rg6.test('aaaa'));//true
console.log(rg6.test('aaaaaaaa'));//fasle
</script>
2.12.5.5 用户名验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: skyblue;
height: 50px;
width: 70px;
}
</style>
</head>
<body>
<input type="text" class = "uname" placeholder="请输入用户名">
<br>
<span>输入用户名字数在6-16之间,且只能是大小写字母或数字，可以有下划线和横杠</span>
<script>
var uname = document.querySelector(".uname")
// 指定正则表达式
var reg = /^[a-zA-Z0-9_-]{6,16}$/
//表单失去焦点时开始验证
uname.onblur = function(){
if(reg.test(this.value)){
alert('用户名可以使用！')
}else{
alert('用户名格式有误！')
}
}
</script>
</body>
</html>
2.12.5.6 设置匹配模式
RegExp构造器设置匹配模式：new RegExp(/正则表达式/,“匹配模式”)
字面量设置匹配模式：var reg = /正则表达式/[匹配模式]
匹配模式的值：
- i：忽略大小写
- g：全局匹配模式，一段文本中若有多处匹配内容，正则表达式可以选取所有的匹配内容
- ig：忽略大小写且全局匹配模式
2.12.5.7 正则替换
说明：str.replace(“正则表达式”,“替换内容”)可以传入两个参数，第一个为正则表达式，他能将符合的内容替换为第二个参数中的替换内容。以下的案例中所写代码只能替换一个敏感词，若要替换全局敏感词，请设置匹配模式g。
<!-- 设定一个留言框，当数据提交后采用正则将数据中的敏感词汇替换 -->
<textarea name="" id="message"></textarea>
<button>提交</button>
<script>
var text = document.querySelector('textarea')
var sub_btn = document.querySelector('button')
// 这里设定激情为敏感词，并将其替换为**
sub_btn.onclick = function () {
var str = text.value.replace(/激情/,'**')
alert(str)
}
</script>
2.13 继承
面向对象语言都有三大特性：继承、封装和多态，且多数含有类和对象的概念。在ES6之前的ES5版本中没有提供extend来继承，也没有class来体现出类的概念，顾我们需要另辟蹊径。
JS继承有六种，但常用的只有三种：
-
原型链继承
-
借用构造函数继承
-
组合继承
-
原型式继承
-
寄生式继承
-
寄生组合式继承
2.13.1 call方法
格式：fn.call(thisArg,arg1,arg2…)
说明：call用于修改this的指向，thisArg是什么对象，this就指向什么对象。
<script>
//call作用1：调用函数
function fn(x,y){
console.log('喝咖啡');
console.log(this);
console.log(x+y);
}
// fn();
fn.call();
var o = {
name:'andy'
};
//call作用2：修改this指向o
fn.call(o,1,2)
</script>
2.13.2 原型链继承
基本思想：子的原型为父的实例对象。通过原型链来搭建继承关系。
优点：父类方法可以复用
缺点：
- 父类所有的引用类型数据会被类共享，更改一个子类的数据，其他子类都会受到影响跟着改变
- 子类实例不能给父类构造函数传参
- 继承单一
<script>
//父类型的构造函数
function SupperType() {
this.supProp = 'Supper property';
}
//子类型的构造函数
function SubType() {
this.subProp = 'Sub property';
}
//父类型的方法
SupperType.prototype.showSupperProp = function() {
console.log(this.supProp);
};
//父类型的对象就是子类型的原型
SubType.prototype = new SupperType();
SubType.prototype.constructor = SubType;
//子类型的方法
SubType.prototype.showSubProp = function() {
console.log(this.subProp);
};
//调试：创建子类型对象，调用父类型的方法
var sub = new SubType();
sub.showSupperProp();
sub.showSubProp();
</script>
2.13.3 构造函数继承
基本思想：用.call()和.apply()将父类构造函数引入子类函数。
优点：
- 只继承了父类构造函数的属性，没有继承父类原型的属性
- 解决了原型链继承缺点
- 可以继承多个构造函数属性
- 在子实例中可向父实例传参
缺点：
- 只能继承父类构造函数的属性
- 无法实现构造函数的复用
- 每个新实例都有父类构造函数的副本，显得代码臃肿
<script>
function Person(){
this.name = 'xiaoming'
this.colors = ['red','blue','green']
}
Person.prototype.getName = function(){
console.log(this.name);
}
function Child(age){
Person.call(this)
this.age = age
}
var child1 = new Child(23);
var child2 = new Child(12);
child1.colors.push('yellow')
console.log(child1.name);//xiaoming
console.log(child1.colors);//(4) ['red', 'blue', 'green', 'yellow']
console.log(child2.colors);//(3) ['red', 'blue', 'green']
</script>
2.13.4 组合继承
基本思想：结合了前两种继承方式的优点。
优点：
- 可以继承父类原型上的属性，可以传参，可复用
- 每个新实例引入的构造函数属性是私有的
缺点：调用了两次父类构造函数，子类的构造函数会代替原型上的那个父类构造函数
<script>
//1 准备两个构造函数
function Father(uname, age) {
this.uname = uname;
this.age = age;
}
function Son(uname, age, score) {
Father.call(this,uname,age);//使用call改变父构造的指向达到继承效果
this.score = score;//可定制子构造的属性
}
//2 子对象属性的使用
var son = new Son('ArimaMisaki',13,100);
console.log(son);
//3 子对象方法的使用
Son.prototype = new Father();//儿子的原型对象是父亲的构造器
Son.prototype.constructor = Son;//直接覆改原型对象，记得用constructor指回原来的构造函数
Father.prototype.money = function(){
console.log(10000);
};
Son.prototype.exam = function(){
console.log('要考试');
};
var son2 = new Son('ArimaMisaki',14,99)
son2.exam();
son2.money();
</script>
2.14 函数高级
2.14.1 函数的定义
<script>
// 1 直接定义
function fn() {};
// 2 函数表达式
var fun = function() {};
// 3 构造函数形式,利用new Function('参数1','参数2'...'函数体');
var f = new Function('x','y','console.log(x+y)');
f(1,2);
// 4 所有函数都是Function构造函数的实例
console.log(f instanceof Function);
</script>
2.14.2 函数的调用
<script>
function fn() {
console.log('函数被调用');
}
// 1 普通调用
fn();
// 2 call方法调用
fn.call();
// 3 对象方法调用
var o = {
sayHi:function(){
console.log('方法里的函数被调用');
}
}
o.sayHi();
// 4 构造函数调用
function Star(){};
new Star();
// 5 绑定事件函数，后面DOM会学到
// btn.onclick = function(){}
// 6 定时器函数，后面BOM会学到
// btn.setInterval(function(){},10000);
// 7 立即执行函数
(function() {
console.log("立即执行函数被调用");
})();
</script>
2.14.3 this指向问题
<script>
// 1 普通函数this
function fn() {
console.log(this);//this指向window
}
fn();//本质上是window.fn()
// 2 对象方法this
var o = {
sayHi:function(){
console.log(this);//this指向o
}
}
o.sayHi();
// 3 构造函数this
function Star(){
console.log(this);
};
var star = new Star();//this指向star
// 4 绑定事件函数
btn.onclick = function(){
console.log(this);//指向btn对象
}
// 5 定时器函数
btn.setInterval(function(){
console.log(this);//指向window
},10000);
// 6 立即执行函数
(function() {
console.log(this);//指向window
})();
</script>
2.14.4 call方法
详见2.13.1。
2.14.5 apply方法
说明：
- apply方法的参数列表必须以数组形式传入
- apply意为
应用，可以将某个方法应用在某个数据上
<script>
var o = {
name: 'andy'
};
function fn(x,y) {
console.log(this);
console.log(x+y);
}
//apply调用函数
// 1 和call相同第一参数可以改变指向，传参使用数组的形式
fn.apply(o,[1,2]);
// 2 使用apply借助内置对象
var arr = [1,66,3,99,4];
// 3.虽然此时apply不改变指向，但是我们还是写上调用者而不是写null防止出问题
var maxNumber = Math.max.apply(Math,arr);
console.log(maxNumber);
</script>
2.14.6 bind方法
说明：
- bind不会调用原来的函数，且可以改变原来函数内部的this指向
- 返回的原函数是改变this之后产生的新函数
<script>
//call作用1：调用函数
function fn(x,y){
console.log('喝咖啡');
console.log(this);
console.log(x+y);
}
// fn();
fn.call();
var o = {
name:'andy'
};
//bind作用2：意为绑定，用于修改this指向
var f = fn.bind(o,1,2);
f();
</script>
2.14.7 严格模式
说明：JS除了正常模式之外，还提供了严格模式。ES5的严格模式是采用限制性的JS变体，即在严格的条件下运行JS代码。
开启方式：
- 在script的第一行写入
'use strict'即可全局开启严格模式。 - 可以在第一行中写入立即执行函数，在函数中写入
'use strict'即可全局开启严格模式。 - 可以在普通函数中第一行写入
'use strict'，意为只在该函数内部开启严格模式
严格模式的规范内容：
- 变量规定。不加var的变量直接赋值不可使用，且不能通过delete来清除定义好的变量的内存。
- this指向问题。原先的this默认指向window，在严格模式中this默认指向undefined。
- 构造函数调用。在利用构造函数生成对象时可以按普通函数调用，但在严格模式下必须用new生成对象。
- BOM对象的this仍然指向window。
- 函数参数问题。同一个函数中不能写入同名参数。
- 函数作用域问题。函数可以声明或定义在一个函数的作用域内部，但不能存在于其他作用域内部，如if作用域，for作用域。
2.14.8 高阶函数
说明：高阶函数指的是参数列表中使用其他函数为参数，最典型的为callback回调函数。
2.15 预解析
2.15.1 预解析概述
引入：JavaScript代码时由浏览器中的JavaScript解析器来执行的，JavaScript解析器在运行JavaScript代码的时候分为两步，预解析和代码执行。
预解析：js引擎会把js里面所有的var还有function提升到当前作用域的最前面。其分为变量预解析（变量提升）以及函数预解析（函数提升）。
代码执行：按照代码书写的顺序从上往下执行
2.15.2 变量提升和函数提升
变量提升：把所有变量声明提升到其作用域的最前面。
函数(声明)提升：相当于C里面的函数声明。
<script>
// 1.变量提升：a的变量声明提到最前面，但是没有包括赋值操作
console.log(a); //undefined
var a = 3
// 相当于以下代码
// var a
// console.log(a);
// a = 3
// 2.函数表达式的变量提升
fn1() //报错，因为没有定义fn1,相当于undefined
var fn1 = function(){
console.log("调用了fn1");
}
// 3.函数提升：fn2先声明，相当于C里面的函数声明
fn2()
function fn2() {
console.log('调用了fn2');
}
</script>
2.16 闭包
2.16.1 闭包概念
说明：在一个作用域中可以访问另外一个函数内部的局部变量。
作用：延伸了变量的作用范围。
<script>
// 第一种写法
function fn(){
var age = 11
function innerfn(){
console.log(age);
}
innerfn()
}
fn()
// 第二种写法
function fn1(){
var name = "ArimaMisaki"
function fn2(){
console.log(name);
}
return fn2;
}
var f = fn1();
f();
</script>
2.16.2 闭包的应用
说明：我们打算点击li，获取li的索引号。这是一道面试题。
<div>
<ul>
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>大猪蹄子</li>
</ul>
</div>
<script>
// 利用闭包的方式得到当前小li的索引号
var list = document.querySelector('ul').querySelectorAll('li')
for (var i = 0; i < list.length; i++) {
// 立即执行函数也称为小闭包
(function(i){
list[i].onclick = function(){
// 这里的i用的是外面函数的i
console.log(i);
}
})(i);
}
</script>
2.16.3 闭包的生命周期
2.17 递归
2.17.1 递归概述
说明：一个函数可以在内部调用自身，那么其为递归函数。递归函数的效果和循环一样。同理，循环会死循环，递归也会发生栈溢出，我们的函数都是存储在栈中，如果多次调用而不释放，栈的内存不够用就会发生上述情况。为了防止栈溢出，确定边界条件是至关重要的。
2.17.2 递归的应用
目标：求解n的阶乘
<script>
function fn(n){
if(n <= 1) return 1
return n*fn(n-1)
}
console.log(fn(3));
</script>
2.18 内存问题
堆：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构的栈
堆：存储复杂类型的，一般由程序员分配释放，若程序员不释放，则由垃圾回收机制回收
说明：JavaScript并没有堆栈概念，但是却蕴含了这些概念。如果我们写出var arr = new Array()。那么arr存放在栈，new Array()存放在堆，new Array()将其在堆的十六进制地址提供给arr。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
