JS学习笔记(JavaScript基础学习必备)

2022年05月13日 阅读数:8
这篇文章主要向大家介绍JS学习笔记(JavaScript基础学习必备),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

讲解JavaScript 基础语法、关键特性、JSON、WebAPI 等知识点。涉及网页窗口交互的方法以及经过 DOM 进行网页元素的相关操做。
请添加图片描述javascript


1、JavaScript 基础

1.什么是 JavaScript

JavaScript,一般缩写为 JS,是一种高级的,解释执行的编程语言。JavaScript 是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等,不支持 I/O,好比网络、存储和图形等,但这些均可以由它的宿主环境提供支持。它已经由 ECMA(欧洲计算机制造商协会)经过 ECMAScript 实现语言的标准化。它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支持。
虽然 JavaScript 与 Java 这门语言无论是在名字上,或是在语法上都有不少类似性,但这两门编程语言从设计之初就有很大的不一样,JavaScript 的语言设计主要受到了 Self(一种基于原型的编程语言)和 Scheme(一门函数式编程语言)的影响。在语法结构上它又与 C 语言有不少类似,例如 if 条件语句、while 循环、switch 语句、do-while 循环等。
在客户端,JavaScript 在传统意义上被实现为一种解释语言,但在最近,它已经能够被即时编译(JIT)执行。随着最新的 HTML5 和 CSS3 语言标准的推行,它还可用于游戏、桌面和移动应用程序的开发和在服务器端网络环境运行,如 Node.js。css

注:定义来自于维基百科。html

JavaScript 的组成java

  • ECMAScript:JavaScript 的语法标准。
  • DOM:JavaScript 操做网页上的元素的 API。
  • BOM:JavaScript 操做浏览器的部分功能的 API。

JavaScript 的特色node

  • 可使用任何文本编辑工具编写,而后使用浏览器就能够执行程序。
  • 是一种解释型脚本语言:代码不进行预编译,从上往下逐行执行,不须要进行严格的变量声明。
  • 主要用来向 HTML 页面添加交互行为。

2.JavaScript 范例

新建一个 test.html 文件,用于编写代码。web

范例代码:正则表达式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script>
      console.log("hello world");
    </script>
  </body>
</html>

上述代码的含义就是在控制台打印一句话:hello world。编程

首先教你们怎么查看:将上述代码复制到一个 html 文件中,而后在浏览器中运行,点击 F12,再点击控制台上的 Console,便可查看。以下图所示:
在这里插入图片描述
值得注意的是咱们能够直接在控制台上输入 JavaScript 代码,而后点击 enter 让其执行。以下图所示咱们执行几行简单的加减乘除:
在这里插入图片描述
经过上面的代码,咱们能够看出 JavaScript 代码是放在 标签里,而包含 JavaScript 代码的 script 标签,咱们能够放在 …… 标签里,也能够放在 …… 标签里。好比上述范例也能够这样写:json

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script>
      console.log("hello world");
    </script>
  </head>
  <body></body>
</html>

执行结果没有什么区别,不一样的是执行顺序,简单的来讲,放在前面的会先执行。此外,和 CSS 引入相相似,JavaScript 也能够经过外部引入。首先咱们须要建立一个扩展名为 .js 的文件,而后在 html 页面中引入它。一样的拿上述范例来修改,咱们首先建立一个叫 test.js,名字能够本身取,可是扩展名必定要是 .js,只有这样才可以识别包含 JavaScript 代码的文件,而后在里面写上咱们的 JavaScript 代码:数组

console.log("hello world");

在 html 文件中写上以下代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script src="test.js"></script>
  </body>
</html>

值得注意的是 test.js 文件要和你的 html 文件在同一目录下才能用上面的方式引用,不然的话须要使用绝对路径来引入 js 文件,具体引入须要根据实际状况灵活运用了。前两种方式都是直接把 JavaScript 代码放在 HTML 中,在页面加载的同时,那些 JavaScript 的代码就被解析了。而把 JavaScript 代码放在外部文件中,只有在事件被触发,须要该段 JavaScript 代码时,才调用执行。这样作有个好处,当页面比较复杂的时候,把大量的 JavaScript 代码放到外部文件,只有在须要的时候才执行,那么会明显地加快页面加载速度,并且实现结构化分离,也便于维护本身的代码,因此建议养成外部引入的方式来写 JavaScript 代码。

3.变量

变量是什么

在计算机中,数据都存在内存中。而一个变量,就是一个用于存放数值的容器,每一个变量存放的数值是可变的,每一个变量都有其独有的名字,每一个变量都占有一段内存。

注:变量不是数值自己,变量仅仅是一个用于储存数值的容器。

声明变量

经过 var 关键字来声明变量,好比:

var name = "LW";

上述代码声明了一个名为 name 的变量,并赋值为“实验楼”。注意此处的等于符号(=)为赋值符号,不是咱们传统意义上理解的等号。

变量的命名规则以下:

  • 变量名必须以字母、下划线 “_”、美圆符号 “$” 开头,不能以数字开头。
  • 变量能够包含字母、数字、下划线和美圆符号。
  • 不能使用 JavaScript 中的关键字作为变量名。
  • 变量名不能有空格。
  • 变量名对大小写敏感,好比:name 和 Name 就是两个彻底不一样的变量。

另外在 JavaScript 中,变量也能够不做声明,而在使用时再根据数据的类型来确其变量的类型,如:

x = 50; // 变量 x 为整数

变量类型

  • Number:能够在变量中存储数字,不论这些数字是 10(整数),或者是 3.1415926(浮点数)。
var x1 = 10;
var x2 = 3.1415926;
  • String:存储字符(好比 “xiaoniuma”)的变量,字符串能够是引号中的任意文本,可使用单引号或双引号,也能够在字符串中使用引号,只要不匹配包围字符串的引号便可:
var carname = "lw";
var carname = "lw";
var answer = "I am 'lw'";
var answer = 'I am "lw"';
  • Boolean:布尔类型的值有两种:true 和 false。一般被用于在适当的代码以后,测试条件是否成立,后续会讲到。

  • Array:数组是一个单个对象,其中包含不少值,方括号括起来,并用逗号分隔。后续将会对数值进行详细的讲解,此处看两个简单的数值例子:

var myNameArray = ["Tom", "Bob", "Jim"];
var myNumberArray = [10, 15, 20];
  • Object:对象类型。此处先看一个简单的例子:
var student = {
   
    name: "Tom", age: 18 };

动态类型

JavaScript 是一种“动态类型语言”,这意味着不一样于其余一些语言(如 C、Java),不须要指定变量将包含什么数据类型(例如 number 或 string),所有用 var 关键字声明就是了。好比若是声明一个变量并给它一个带引号的值,浏览器就会知道它是一个字符串:

var myString = "Hello";

值得注意的就是引号中若是是一个数字,它依然是 string 类型的。咱们能够在控制台中经过 typeof 函数,来查看咱们声明的变量是什么类型的。
在这里插入图片描述
注释

单行注释:用来描述下面一个或多行代码的做用。单行注释快捷键:Ctrl + /。

// 这是一个变量
var name = "zhangsan";

多行注释:用来注释多条代码。多行注释快捷键:Ctrl + Shift + /。

/*
var name = "zhangsan";
var age = 18;
console.log(name, age);
*/

4.数字与运算符

数字类型

  • 整数。例如:1, 2, 100, -10。
  • 浮点数:就是小数。例如:0.2, 3.1415926。
  • 双精度:是一种特定类型的浮点数,它们具备比标准浮点数更高的精度。

注:由于和其余语言不一样的是,在 JavaScript 中,无论什么数字类型的所有用 var 声明就能够了,并且 JavaScript 中只有一个数据类型:Number。

算术运算符
在这里插入图片描述
加减乘除的运算和平时所用的差很少。这里须要提醒的是累加运算和累减运算的用法:
在这里插入图片描述
从上述的图片中能够看出咱们不能将这些直接应用于一个数字,不是对值进行操做,而是为变量赋值一个新的更新值。num++ 实际上是 num = num + 1 的省略写法。从图片上来看可能很差理解 num++ 和 ++num 的区别。写一个例子:

var num1 = 3;
var result1 = num1++;
console.log(result1);
console.log(num1);
var num2 = 4;
var result2 = ++num2;
console.log(result2);
console.log(num2);

最后控制台打印的数字为:3 4 5 5。这里也能够看出 num++ 和 ++num 的区别,前者是先赋值再自增,后者是先自增再赋值。一样的 num-- 和 --num 也是同样的效果。

操做运算符
在这里插入图片描述
比较运算符
在这里插入图片描述
在控制台中输入这些示例,若是成立的话会返回 true 若是不成立的话则返回 false。

逻辑运算符
在这里插入图片描述
运算符的优先级
在这里插入图片描述

5.数组概述

经过前面所学能够知道若是要保存一个数据,能够用 var 关键字去定义一个变量,可是若是数据不少呢?难道须要一个个去定义?好比一个班上不少人, var name1 = “张三”; var name2 = “李四”; … 一直这样定义下去?显然这是不科学的,而这也由此引出了咱们的数组。首先咱们来看看维基百科对于数组的定义:

在计算机科学中,数组数据结构(英语:array data structure),简称数组(英语:Array),是由相同类型的元素(element)的集合所组成的数据结构,分配一块连续的内存来存储。利用元素的索引(index)能够计算出该元素对应的存储地址。

最简单的数据结构类型是一维数组。例如,索引为 0 到 9 的 32 位整数数组,可做为在存储器地址 2000,2004,2008,…2036 中,存储 10 个变量,所以索引为 i 的元素即在存储器中的 2000+4×i 地址。数组第一个元素的存储器地址称为第一地址或基础地址。

数组语法

var myarray = new Array(1, 2, 3, 4, 5); // 建立数组同时赋值
// or
var myarray = [1, 2, 3, 4, 5]; // 直接输入一个数组(称“字面量数组”)

注:能够用上述两种方法建立数组,myarray 指的是定义的数组名,能够本身取,数组储存的数据能够是任何类型(数字,字符,布尔值等)。每个值都有一个索引值,从 0 开始。好比:

var color = ["red", "green", "blue", "yellow"];
color[0]; // returns "red"
color[1]; // returns "green"
color[2]; // returns "blue"
color[3]; // returns "yellow"
color[4]; // returns undefined

多维数组

多维数组就是数组中还包含数组,咱们能够一层一层的来看。好比:

var student = [
  ["张三", "男", "18"],
  ["李四", "女", "20"],
];
student[0][2]; // returns "18"

6.操做数组

修改数组

修改数组中的元素内容也很简单,直接为它提供新值就能够了。好比:

var color = ["red", "green", "blue", "yellow"];
color[0] = "black";
color; // returns ["black", "green", "blue", "yellow"]

获取数组长度

一样的咱们使用 length 来获取数组的长度。好比:

var color = ["red", "green", "blue", "yellow"];
color.length; // returns 4

数组和字符串之间的转换

经过 split() 方法,将字符串转换为数组。好比:

"1:2:3:4".split(":"); // returns ["1", "2", "3", "4"]
"|a|b|c".split("|"); // returns ["", "a", "b", "c"]

相反的咱们经过 join() 方法将数组转换为字符串。好比:

["1", "2", "3", "4"].join(":"); // returns "1:2:3:4"
["", "a", "b", "c"].join("|"); // returns "|a|b|c"

注:一样可使用 toString() 方法将数组转换为字符串,可是 join() 方法能够指定不一样的分隔符,而 toString() 方法只能是逗号。

添加和删除数组项

在数组尾部添加一个或多个元素,使用 push() 方法。好比:

var arr = ["1", "2", "3", "4"];
arr.push("5", "6");
arr; // returns ["1", "2", "3", "4", "5", "6"]

使用 pop() 方法将删除数组的最后一个元素,把数组长度减 1,而且返回它删除的元素的值。若是数组已经为空,则 pop() 不改变数组,而后返回 undefined 值。好比:

var arr = ["1", "2", "3", "4"];
arr.pop(); // returns 4
arr; // returns ["1", "2", "3"]
var arr1 = [];
arr1.pop(); // returns undefined
arr1; // returns []

unshift() 和 shift() 从功能上与 push() 和 pop() 彻底相同,只是它们分别做用于数组的开始,而不是结尾。你们能够直接在控制台自行尝试一番。

注:数组的方法其实还有不少,将在后续中一一讲解。

7.Null 和 Undefined

null 和 undefined 都表示无,可是也有一些区别。如今控制台上执行如下语句:
在这里插入图片描述
这里须要说明的是:== 是相等操做符,比较值是否相等,若是相等输出为 true,不然为 false。=== 是全等操做符,比较值和类型是否都相等,若是都相等输出为 true,不然为 false。经过在控制台中的实践能够发现:

  • null 和 undefined 的值不等于 0,它们的值相等,可是类型不相等。
  • undefined 表示全部没有赋值变量的默认值。
  • 而 null 则表示一个变量再也不指向任何对象地址。

8.字符串

在前面的变量章节中,已经简单讲过字符串的基础知识,这里拓展一下。前面讲过可使用单引号或双引号,也能够在字符串中使用引号,只要不匹配包围字符串的引号便可。好比:

var carname = "lw";
var carname = "lw";
var answer = "I am 'lw'";
var answer = 'I am "lw"';

下面的代码将会出现错误,由于它会混淆浏览器和字符串的结束位置:

var x1 = 'I've got no right to take my place...';

能够换种方法,好比:

var x1 = "I have got no right to take my place...";

或者:

var x1 = "I've got no right to take my place...";

没错这样作都是可行的方法,可是其实咱们还有另一种方法,使用转义符号。转义字符意味着咱们对它们作一些事情,以确保它们在文本中被承认,而不是代码的一部分。在 JavaScript 中,咱们经过在字符以前放一个反斜杠来实现这一点。试试这个:

var x1 = 'I\'ve got no right to take my place...';

经常使用的转义符:
在这里插入图片描述
链接字符串

经过 “+” 链接字符串,好比在控制台中输入下面的代码:

var one = "Hello,jack.";
var two = "I'm rose";
result = one + two;

最后控制台显示结果为:“Hello,jack.I’m rose”。

若是咱们在控制台输入的是 “jack”+18 思考一下会报错吗?
结果是:浏览器很聪明的把数字转换成了字符串,最后结果为 “jack18”。另外输入 “20”+“19”,最后的结果也是字符串 “2019”。

字符串转换

咱们能够经过 toString() 方法把数字转换成字符串。

var myNum = 123;
var myString = myNum.toString();
typeof myString;

也能够经过 Number() 对象把传递给它的字符串类型的数字转换为数字。

var myString = "123";
var myNum = Number(myString);
typeof myNum;

注:若是传递的不是纯数字的字符串,则返回的不是数字,而是 NaN(not a number)。

获取字符串的长度

经过 length 属性获取字符串的长度,结果返回一个数字。好比:

var myString = "hello world ";
myString.length;

上述代码在控制台中运行的结果为:12(除了字母还有两个空格)。

若是要查找这个字符串的第一个字符,能够这么作:

myString[0];

一样的你也能够查找到其余的字符,好比第五个字符,就是 myString[4],这是由于电脑是从 0 开始,而不是 1,所以咱们都要执行减一操做。

在字符串中查找子字符串并提取它

  1. 有时候须要判断一个较长的字符串里面是否存在一个指定的较小的字符串,就好比要查找一段话里面是否包含一个词或者一个字,这个时候可使用 indexof() 方法来完成,更详细的语法为:
str.indexOf(searchValue, fromIndex);

str 指的是须要查的较长的字符串,searchValue 表示咱们指定的较小的字符串,fromIndex 表示调用该方法的字符串中开始查找的位置,是一个可选的任意整数值,也能够不写,默认是 0 表示从头开始查,fromIndex < 0 和 fromIndex = 0 是同样的效果,表示从头开始查找整个字符串。若是 fromIndex >= str.length,则该方法的返回值为 -1。这里有个特殊的状况:就是若是被查找的字符串(searchValue)是一个空字符串,那么当 fromIndex <= 0 时返回 0,0 < fromIndex <= str.length 时返回 fromIndex,fromIndex > str.length 时返回 str.length。这样说可能不太明白,咱们来实践一下看看实际效果:

"Blue Sky".indexOf("Blue"); // returns  0
"Blue Sky".indexOf("Ble"); // returns -1
"Blue Sky".indexOf("Sky", 0); // returns  5
"Blue Sky".indexOf("Sky", -1); // returns  5
"Blue Sky".indexOf("Sky", 5); // returns  5
"Blue Sky".indexOf("Sky", 9); // returns -1
"Blue Sky".indexOf("", 0); // returns  0
"Blue Sky".indexOf("", 5); // returns 5
"Blue Sky".indexOf("", 9); // returns 8

注:返回值指的是指定值第一次出现的索引,若是没有找到返回 -1。indexOf() 方法区分大小写,好比:

"Blue Sky".indexOf("blue"); // returns -1
"Blue Sky".indexOf("Blue"); // returns 0
  1. 当知道字符串中的子字符串开始的位置,以及想要结束的字符时,slice() 方法能够用来提取它。好比:
"Blue Sky".slice(0, 3); // returns "Blu"

注:slice(strat,end),第一个参数 start 是开始提取的字符位置,第二个参数 end 是提取的最后一个字符的后一个位置。因此提取从第一个位置开始,直到但不包括最后一个位置。另外第二个参数也能够不写,不写表明某个字符以后提取字符串中的全部剩余字符。好比:

"Blue Sky".slice(2); // returns "ue Sky"

转换大小写

字符串方法 toLowerCase() 和 toUpperCase() 字符串并将全部字符分别转换为小写或大写。好比:

var string = "I like study";
string.toLowerCase(); // returns "i like study"
string.toUpperCase(); // returns "I LIKE STUDY"

替换字符串的某部分

可使用 replace() 方法将字符串中的一个子字符串替换为另外一个子字符串。好比:

var string = "I like study";
string.replace("study", "sleep"); // returns "I like sleep"

注意这样只能替换第一个出现的字符串,若是字符串是相似 I like study study,那么第二个 study 不会被替换。

此时可使用全局替换方法。

var string = "I like study study";
string.replace(/study/g, "sleep");

注:字符串的操做方法其实还有不少,我将在后续再做深刻讲解。

9.转换成字符串

  1. 几乎每一个值都有 toString() 方法。好比在控制台输入如下代码:
var num = 8;
var numString = num.toString();
numString; // returns "8"
var result = true;
var resultString = result.toString();
resultString; // returns "true"

数值类型的 toString(),能够携带一个参数,输出对应进制的值。好比:

var num = 16;
console.log(num.toString()); // "16" 默认是10进制
console.log(num.toString(10)); // "16"
console.log(num.toString(2)); // "10000"
console.log(num.toString(8)); // "20"
console.log(num.toString(16)); // "10"
  1. String() 函数。好比在控制台中输入如下代码:
var num1 = 8;
var num2 = String(num1);
num2; // returns "8"
var result = true;
var result1 = String(result);
result1; // returns "true"

注:由于有的值没有 toString() 方法,因此须要用 String(),好比 null 和 undefined。以下所示:
在这里插入图片描述
使用拼接字符串。好比在控制台中输入如下代码:

var num1 = 16;
var num2 = num1 + "";
num2; // returns "16"

10.转换成数值类型

  1. Number() 能够把任意值转换成数值,若是要转换的字符串中有一个不是数值的字符,返回 NaN(not a number)。好比在控制台中依次输入如下代码:
var num1 = Number(true);
num1; // true 返回 1,false 返回 0

var num2 = Number(undefined);
num2; // 返回 NaN

var num3 = Number(null);
num3; // 返回 0

var num4 = Number("xnm");
num4; // 返回 NaN

var num5 = Number("   ");
num5; // 若是是空字符串返回 0

var num6 = Number(123);
num6; // 返回123,若是是数字型的字符,返回数字

var num7 = Number("123abc");
num7; // 返回 NaN
  1. parseInt() 把字符串转换成整数。好比在控制台中依次输入如下代码:
var num1 = parseInt("12.3abc");
num1; // 返回 12,若是第一个字符是数字会解析知道遇到非数字结束,只取整,不是约等于

var num2 = parseInt("abc123");
num2; // 返回 NaN,若是第一个字符不是数字或者符号就返回 NaN

var num3 = parseInt("");
num3; // 空字符串返回 NaN,可是 Number("")返回 0

var num4 = parseInt("520");
num4; // 返回 520

var num5 = parseInt("0xA");
num5; // 返回 10

另外值得注意的是,parseInt() 能够传递两个参数,第一个参数是要转换的字符串,第二个参数是要转换的进制。你们能够自行尝试一下。

  1. parseFloat() 把字符串转换成浮点数。写法和 parseInt() 类似,主要有如下几个不一样点:
  • parseFloat 不支持第二个参数,只能解析 10 进制数。
  • 若是解析的内容里只有整数,解析成整数。

例子:

parseFloat("10"); // returns 10
parseFloat("10.000"); // returns 10
parseFloat("10.01"); // returns 10.01
parseFloat("10"); // returns 10
parseFloat("10 hours"); // returns 10
parseFloat("aaa 10"); // returns NaN
  1. 执行减 0 操做。好比:
var n = "10";
var m = n - 0;
m; // returns 10

值得注意的是,若是该字符串不是纯粹的数字字符串,那么它执行减 0 操做后,虽然变成了一个数字类型,可是返回值为 NaN。好比:

var n = "abc";
var m = n - 0;
m; // returns NaN
typeof m; // returns "number"

11.转换成布尔类型

  1. 使用 Boolean() 函数。好比:
Boolean(123); // returns true
Boolean("abc"); // returns true
Boolean(null); // returns false
Boolean(undefined); // returns false
Boolean(NaN); // returns false
Boolean(0); // returns false
Boolean(""); // returns false
Boolean(false); // returns false
Boolean("false"); // returns true
Boolean(-1); // returns true

2.流程控制语句会把后面的值隐式转换为布尔类型。好比:

var message;
if (message) {
   
   
  //会自动把 message 转换成 false,最后打印结果为:我很好
  console.log("你好啊");
} else {
   
   
  console.log("我很好");
}

二 、JavaScript 关键特性

1.条件

生活中,条件与咱们息息相关。举几个例子:若是这周放假,那么我就要出去玩;若是明天不下雨,我就和小花出去踢足球;若是我饿了,我要么吃饭,要么吃面,要么就忍着。一样的,在 JavaScript 中,咱们也有条件语句,下面为你们讲解在 JavaScript 中如何使用条件语句。

if…else 语句
最基本的 if…else 语句。它的语法为:

if (条件) {
   
   
  // 当条件为 true 时执行的语句
} else {
   
   
  // 当条件为 false 时执行的语句
}

例子:

if (3 > 2) {
   
   
  console.log("我真帅");
} else {
   
   
  console.log("不可能");
}

上述例子在控制台中打印的语句为:我真帅。

  1. if…else 嵌套。它的语法是:
if(条件 1){
   
   
    // 当条件 1 为 true 时执行的代码
    }
else if(条件 2){
   
   
    // 当条件 2 为 true 时执行的代码
    }
else{
   
   
    // 当条件 1 和 条件 2 都不为 true 时执行的代码
    }

注:根据实际状况,还能够嵌套更多的 else if。

例子:

var d = new Date().getDay();
if (d == 0) {
   
   
  console.log("今天星期天");
} else if (d == 1) {
   
   
  console.log("今天星期一");
} else if (d == 2) {
   
   
  console.log("今天星期二");
} else {
   
   
  console.log("好多啊,我不想写了");
}

switch case 语句

从前面的例子中咱们能够看出来,当条件不少的时候,一直嵌套 else if 语句,显然是有点不科学的,由此咱们引出了 switch case 语句,先来看看它的语法:

switch(k){
   
   
    case 1:
        执行代码块 1 ;
        break;
    case 2:
        执行代码块 2 ;
        break;
    default:
        默认执行(k 值没有在 case 中找到匹配时);
}

经过 switch case 语句来改写上面的例子:

var d = new Date().getDay();
switch (d) {
   
   
  case 0:
    console.log("今天星期天");
    break;
  case 1:
    console.log("今天星期一");
    break;
  case 2:
    console.log("今天星期二");
    break;
  case 3:
    console.log("今天星期三");
    break;
  case 4:
    console.log("今天星期四");
    break;
  case 5:
    console.log("今天星期五");
    break;
  default:
    console.log("今天星期六");
    break;
}

三元运算符

语法:

条件表达式?结果 1:结果 2

含义:问号前面的位置是判断的条件,判断结果为 boolean 型,为 true 时执行结果 1,为 false 时执行结果 2。

例子:

3 > 2 ? console.log("3 比 2 大") : console.log("3 比 2 小");

2.循环

经过循环函数来帮助咱们完成一些重复性的工做。

for 循环

for 循环是咱们编码中常常会使用到的。先来看看它的语法结构:

for (初始化; 条件; 增量) {
   
   
  循环代码;
}

举个打印 1 到 100 的例子:

for (var i = 1; i <= 100; i++) {
   
   
  console.log(i);
}

使用 break 跳出循环

咱们在前面的 switch case 结构中已经见过 break 语句了,当 switch 语句中符合输入表达式的状况知足时,break 语句当即退出 switch 语句并移动到以后的代码。上述的 for 循环例子,咱们来加个条件,使其能打印一个能被 7 整除的整数。

for (var i = 1; i <= 100; i++) {
   
   
  if (i % 7 == 0) {
   
   
    console.log(i);
    break;
  }
}

使用 continue 跳过迭代

使用 continue 跳过迭代,不是彻底跳出循环,而是跳过当前循环而执行下一个循环。好比咱们使用 continue 能够实现打印 1 到 100 全部能被 7 整除的整数,而前面的例子中只能打印出:7。

for (var i = 1; i <= 100; i++) {
   
   
  if (i % 7 == 0) {
   
   
    console.log(i);
    continue;
  }
}

么写可能很差理解,你们或许会想到上面的例子不写 continue 最后打印的效果和写了是同样的啊,那 continue 是否是就没用了?其实 continue 主要是跳过当前循环去执行下一个循环也就是说,当前循环下的其余语句就不执行了。来看下面的例子:

for (var i = 1; i <= 7; i++) {
   
   
  if (i % 7 == 0) {
   
   
    console.log(i);
    continue;
    console.log("*");
  }
}

能够把上面的代码运行一下,而后把 continue 删除,再运行一下,细细体会一下 continue 语句的做用。

while 语句 和 do while 语句

在 JavaScript 中不止有 for 循环,还有其余的循环语句。咱们先来看看 while 循环的语法结构:

while (条件) {
   
   
  // 须要执行的代码;
}

一样的,咱们来写一个打印 1 到 100 之间整数的例子:

var i = 1;
while (i <= 100) {
   
   
  console.log(i);
  i++;
}

do while 循环的语法结构:

do {
   
   
  // 须要执行的代码;
} while (条件);

例子:

var i = 1;
do {
   
   
  console.log(i);
  i++;
} while (i <= 100);

注:而这二者的区别是,do while 循环在检测条件以前就会执行,也就是说,即便条件为 false,do while 也会执行一次循环代码。而 while 循环只有在条件为真的时候才执行。 能够这样简单记忆:while 循环,先判断再执行;do while 循环先执行一次再判断。

3.函数(参数,函数返回值)

函数是被设计为执行特定任务的代码块,可重复调用执行。咱们平时写代码的时候,也会常常遇到重复使用的代码,那咱们是重复的一行行敲,或者 cv(ctrl c + ctrl v)大法一顿操做呢?显然这样有点不科学,若是咱们使用函数将这些重复的代码封装起来,那么在须要使用的时候,就能够直接调用了。

浏览器内置函数

其实在前面学习字符串和数组的时候,咱们不知不觉已经使用了不少次函数。好比咱们经过 join() 方法将数组转换为字符串,经过 split() 方法,将字符串转换为数组。这些都是浏览器已经封装好的内置函数,而咱们能够直接调用。严格来讲,内置浏览器函数并非函数,它们是方法,可是不要紧,咱们前期学习阶段能够暂时无论这些,函数和方法在很大程度上是可互换的。

4.建立函数

函数声明建立函数

语法为:

function functionName(parameters) {
   
   
  // 执行的代码
}

例子:

function f(a, b) {
   
   
  console.log(a + b);
} // 建立一个名为 f 的函数,它有两个形参 a,b

f(2, 3); // 调用函数 f,传入实参 2 和 3,最终运行结果为在控制台上打印出 5

函数表达式建立函数

JavaScript 函数能够经过一个表达式定义。函数表达式能够存储在变量中。

语法为:

var functionName = function (parameters) {
   
   
  // 执行的代码
};

把函数声明建立函数的例子改写为用函数表达式建立函数:

var f = function (a, b) {
   
   
  console.log(a + b);
};
f(2, 3);

函数声明和函数表达式的区别

  • 函数声明
// 此处的代码执行没有问题,JavaScript 解析器首先会把当前做用域的函数声明提早到整个做用域的最前面。
f(2, 3);

function f(a, b) {
   
   
  console.log(a + b);
}
  • 函数表达式
// 报错:f is not a function
// 这是由于函数表达式,如同定义其它基本类型的变量同样,只在执行到某一句时也会对其进行解析

f(2, 3);

var f = function (a, b) {
   
   
  console.log(a + b);
};

函数的参数

  • 形参:function f(a, b){return a + b;} // a, b 是形参,占位用,函数定义时形参无值。
  • 实参:当咱们调用上面的函数时好比 f(2, 3);其中 2 和 3 就是实参,会传递给 a 和 b,最后函数中执行的语句就变成了:return 2 + 3;。

注:在 JavaScript 中,实参个数和形参个数能够不相等。

在 JavaScript 中没有重载

function f(a, b) {
   
   
  return a + b;
}
function f(a, b, c) {
   
   
  return a + b + c;
}
var result = f(5, 6);
result; // returns NaN

上述代码中三个参数的 f 把两个参数的 f 覆盖,调用的是三个参数的 f,最后执行结果为 NaN,而不是 11。

在 JavaScript 中函数的返回值

  • 若是函数中没有 return 语句,那么函数默认的返回值是:undefined。
  • 若是函数中有 return 语句,那么跟着 return 后面的值就是函数的返回值。
  • 若是函数中有 return 语句,可是 return 后面没有任何值,那么函数的返回值也是:undefined。
  • 函数在执行 return 语句后会中止并当即退出,也就是说 return 语句执行以后,剩下的代码都不会再执行了。
  • 当函数外部须要使用函数内部的值的时候,咱们不能直接给予,须要经过 return 返回。

好比:

var f = function (a, b) {
   
   
  a + b;
};
console.log(f(2, 3)); // 结果为 undefined
var f = function (a, b) {
   
   
  return a + b;
};
console.log(f(2, 3)); // 结果为 5

匿名函数

匿名函数就是没有命名的函数,通常用在绑定事件的时候。语法为:

function(){
   
   
    // 执行的代码
}

例子:

var myButton = document.querySelector("button");

myButton.onclick = function () {
   
   
  alert("hello");
};

注:将匿名函数分配为变量的值,也就是咱们前面所讲的函数表达式建立函数。通常来讲,建立功能,咱们使用函数声明来建立函数。使用匿名函数来运行负载的代码以响应事件触发(如点击按钮),使用事件处理程序。

自调用函数

匿名函数不能经过直接调用来执行,所以能够经过匿名函数的自调用的方式来执行。好比:

(function () {
   
   
  alert("hello");
})();

5.练习:制做直角三角形

任务要求:自定义一个函数,提示用户输入一个正整数。若是用户输入的非正整数,提示用户输入错误,并返回输入界面让用户输入。直到用户输入一个正确的正整数后,在页面打印出一个由 * 组成的直角三角形。第一行打印一个 * ,第二行打印两个 * ,以此类推下去,最后一行的 * 个数为用户输入的正整数。好比咱们输入 9,最后打效果以下:

在这里插入图片描述
参考源码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <script>
      function star(i) {
   
   
        for (var j = 1; j <= i; j++) {
   
   
          for (var k = 1; k <= j; k++) {
   
   
            document.write("*");
          }
          document.write("<br>");
        }
      }
      do {
   
   
        var n = prompt("请输入一个正整数");
        if (Number(n) > 0 && parseInt(n) == parseFloat(n)) {
   
   
          star(n);
        } else {
   
   
          alert("输入错误,请输入一个正整数");
        }
      } while (!(Number(n) > 0 && parseInt(n) == parseFloat(n)));
    </script>
  </body>
</html>

3、JSON

1.对象基础概念

在 JavaScript 中全部事物都是对象:字符串,数组,日期等等。咱们甚至能够本身建立对象,将相关的函数和变量封装打包成便捷的数据容器。另外值得注意的是 JavaScript 是一门基于对象的语言。感兴趣的话能够自行百度面向对象和基于对象的区别,这里不影响咱们对于 JavaScript 中对象的讲解。

在 JavaScript 中对象是拥有属性和方法的数据。

属性和方法

属性是与对象相关的值,也能够理解为特征。方法是可以在对象上执行的动做,也能够理解为行为。

举个例子:一辆汽车就是现实生活中的对象,它的名字,它的颜色,它的价格等特征就是汽车对象的属性。它可以启动,驾驶,加速,刹车等行为就是汽车对象的方法。

2.JSON

JSON(JavaScript Object Notation,JavaScript 对象表示法)是一种由道格拉斯·克罗克福特构想和设计、轻量级的数据交换语言,该语言以易于让人阅读的文字为基础,用来传输由属性值或者序列性的值组成的数据对象。尽管 JSON 是 JavaScript 的一个子集,但 JSON 是独立于语言的文本格式,而且采用了相似于 C 语言家族的一些习惯。
JSON 数据格式与语言无关,脱胎于 JavaScript,但当前不少编程语言都支持 JSON 格式数据的生成和解析。JSON 的官方 MIME 类型是 application/json,文件扩展名是 .json。

注:定义来自维基百科。

下面给出两个简单的 json 示例:

{
   
   
  "name": "zhangsan",
  "age": 18,
  "gender": "male"
}
{
   
   
  "students": [
    {
   
    "firstName": "san", "lastName": "zhang" },
    {
   
    "firstName": "si", "lastName": "li" },
    {
   
    "firstName": "wu", "lastName": "wang" }
  ]
}

特别须要注意的是:

  • JSON 是一种纯数据格式,它只包含属性,没有方法。
  • JSON 的属性必须经过双引号引发来。
  • JSON 要求两头有 {} 来使其合法。
  • 能够把 JavaScript 对象原本来本的写入 JSON 数据,好比:字符串,数字,数组,布尔还有其它的字面值对象。

3.经常使用内置对象介绍

前面在讲数组的方法和字符串的操做的时候,已经讲解了一部份内置对象的内容。这里我再系统的讲解一下一些经常使用的内置对象。

Array 对象

  1. Array 对象的经常使用属性:length,获取数组的长度。
  2. Array 对象的经常使用方法:
  • concat() 方法用于链接两个或多个数组,并返回结果。

语法为:

arrayObject.concat(arrayX, arrayX, ..., arrayX);

例子:

var a = [1, 2, 3];
var b = [4, 5, 6];
var c = ["one", "two", "three"];
console.log(a.concat(b, c)); // 打印结果为:[1, 2, 3, 4, 5, 6, "one", "two", "three"]
  • join() 方法,将数组转换成字符串。
  • pop() 方法,删除并返回数组的最后一个元素。
  • push() 方法,向数组的末尾添加一个或更多元素,并返回新的长度。
  • reverse() 方法,颠倒数组的顺序。

好比:

var a = [1, 2, 3, 4];
a.reverse();
console.log(a); // a 数组变成:[4, 3, 2, 1]
  • shift() 方法,删除并返回数组的第一个元素。
  • unshift() 方法,向数组的开头添加一个或更多元素,并返回新的长度。
  • slice() 方法,从某个已有的数组返回选定的元素。

语法为:

arrayObject.slice(start, end);
// strat 值是必需的,规定从何处开始选取
// end 值可选,规定从何处结束选取,若是没有设置,默认为从 start 开始选取到数组后面的全部元素

在控制台中输入如下代码:

var a = [1, 2, 3, 4, 5, 6];
a.slice(2, 5); // 结果为[3, 4, 5],另外须要注意的是该方法不会修改数组,只是返回一个子数组,a 数组仍是 [1, 2, 3, 4, 5, 6]
  • splice() 方法,删除或替换当前数组的某些项目。

语法为:

arrayObject.splice(start, deleteCount, options);
// start 值是必需的,规定删除或替换项目的位置
// deleteCount 值是必需的,规定要删除的项目数量,若是设置为 0,则不会删除项目
// options 值是可选的,规定要替换的新项目
// 和 slice() 方法不一样的是 splice() 方法会修改数组

在控制台中输入如下代码:

var a = [1, 2, 3, 4, 5, 6];
a.splice(2, 2, "abc");
a; // 最终 a 数组变成了[1, 2, "abc", 5, 6]
  • sort() 方法,将数组进行排序。

语法为:

arrayObject.sort(sortby);
// sortby 是可选的,规定排序顺序,必需是函数。若是没有参数的话,将会按照字母顺序进行排序,更准确的说是按照字符编码(可自行百度了解)的顺序进行排序。若是想按照其余标准进行排序,则须要提供比较函数

例子:

<script>
    var arr1 = ["a", "z", "k", "w", "x"];
    document.write(arr1 + "<br />");
    document.write(arr1.sort()+ "<br />" + "<br />");

    var arr2 = [11,55,22,44,66,33];
    document.write(arr2 + "<br />");
    document.write(arr2.sort() + "<br />" + "<br />");

    var arr3 = [1,22,44,6,55,5,2,4,66];
    document.write(arr3 + "<br />");
    document.write(arr3.sort() + "<br />" + "<br />");

    function sortNum1(a, b){
   
   
        return a - b; // 从小到大排序
    }
    var arr4 = [1,22,44,6,55,5,2,4,66];
    document.write(arr4 + "<br />");
    document.write(arr4.sort(sortNum1) + "<br />" + "<br />");

    function sortNum2(a,b){
   
   
        return b - a; // 从大到小排序
    }
    var arr4 = [1,22,44,6,55,5,2,4,66];
    document.write(arr4 + "<br />");
    document.write(arr4.sort(sortNum2) + "<br />" + "<br />");
</script>

运行结果为:
在这里插入图片描述

  • toString() 方法,把数组转换为字符串,并返回结果。

String 对象

1.String 对象的经常使用属性:length,获取字符串的长度。
2. String 对象的经常使用方法:

  • charAt() 方法,获取指定位置处字符。

语法为:

stringObject.charAt(index);
// 字符串中第一个字符的下标是 0。若是参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串

例子:

var str = "Hello world!";
document.write(str.charAt(2));
// 以上代码输出为 l
  • charCodeAt() 方法,获取指定位置处字符的 Unicode 编码。

语法为:

stringObject.charCodeAt(index);
// 字符串中第一个字符的下标是 0。若是 index 是负数,或大于等于字符串的长度,则 charCodeAt() 返回 NaN

例子:

var str = "Hello world!";
document.write(str.charCodeAt(2));
// 以上代码输出为 l08
  • oncat() 方法,链接字符串,等效于 “+”,“+” 更经常使用。与数组中的 concat() 方法类似。
  • slice() 方法,提取字符串的片段,并在新的字符串中返回被提取的部分(字符串章节有详细介绍,这里不过多的赘述,下面的相似状况一样处理)。
  • indexOf() 方法,检索字符串。
  • toString() 方法,返回字符串。
  • toLowerCase() 方法,把字符串转换为小写。
  • toUpperCase() 方法,把字符串转换为大写。
  • replace() 方法,替换字符串中的某部分。
  • split() 方法,把字符串分割为字符串数组。

Date 对象

Date 对象方法:

  • Date():返回当日的日期和时间(输出的是中国标准时间)。
  • getDate():从 Date 对象返回一个月中的某一天 (1 ~ 31)。
  • getDay():从 Date 对象返回一周中的某一天 (0 ~ 6)。
  • getMonth():从 Date 对象返回月份 (0 ~ 11)。
  • getFullYear():从 Date 对象以四位数字返回年份。
  • getHours():返回 Date 对象的小时 (0 ~ 23)。
  • getMinutes():返回 Date 对象的分钟 (0 ~ 59)。
  • getSeconds():返回 Date 对象的秒数 (0 ~ 59)。
  • getMilliseconds():返回 Date 对象的毫秒(0 ~ 999)。

Math 对象

Math 对象的经常使用属性:

  • E :返回常数 e (2.718281828…)。
  • LN2 :返回 2 的天然对数 (ln 2)。
  • LN10 :返回 10 的天然对数 (ln 10)。
  • LOG2E :返回以 2 为底的 e 的对数 (log2e)。
  • LOG10E :返回以 10 为底的 e 的对数 (log10e)。
  • PI :返回 π(3.1415926535…)。
  • SQRT1_2 :返回 1/2 的平方根。
  • SQRT2 :返回 2 的平方根。

Math 对象的经常使用方法:

  • abs(x) :返回 x 的绝对值。
  • round(x) :返回 x 四舍五入后的值。
  • sqrt(x) :返回 x 的平方根。
  • ceil(x) :返回大于等于 x 的最小整数。
  • floor(x) :返回小于等于 x 的最大整数。
  • sin(x) :返回 x 的正弦。
  • cos(x) :返回 x 的余弦。
  • tan(x) :返回 x 的正切。
  • acos(x) :返回 x 的反余弦值(余弦值等于 x 的角度),用弧度表示。
  • asin(x) :返回 x 的反正弦值。
  • atan(x) :返回 x 的反正切值。
  • exp(x) :返回 e 的 x 次幂 (e^x)。
  • pow(n, m) :返回 n 的 m 次幂 (nm)。
  • log(x) :返回 x 的天然对数 (ln x)。
  • max(a, b) :返回 a, b 中较大的数。
  • min(a, b) :返回 a, b 中较小的数。
  • random() :返回大于 0 小于 1 的一个随机数。

4.建立对象和访问对象

建立对象的方式有不少,下面讲解几种经常使用的方式。

经过对象字面量来建立

var student = {
   
   
  name: "zhangsan",
  age: 18,
  gender: "male",
  sayHi: function () {
   
   
    console.log("hi,my name is " + this.name);
  },
};

把上面的代码复制到控制台中,而后尝试依次输入下面的代码看看效果:

student.name;
student.age;
student.gender; // 调用对象的属性
student.sayHi(); // 调用对象的方法

经过上面的例子会发现对象的属性和方法经过 “.” 来访问。

经过 new Object() 建立对象

var student = new Object();
(student.name = "zhangsan"),
  (student.age = 18),
  (student.gender = "male"),
  (student.sayHi = function () {
   
   
    console.log("hi,my name is " + this.name);
  });

经过工厂函数建立对象

function createStudent(name, age, gender) {
   
   
  var student = new Object();
  student.name = name;
  student.age = age;
  student.gender = gender;
  student.sayHi = function () {
   
   
    console.log("hi,my name is " + this.name);
  };
  return student;
}
var s1 = createStudent("zhangsan", 18, "male");

自定义构造函数

function Student(name, age, gender) {
   
   
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayHi = function () {
   
   
    console.log("hi,my name is " + this.name);
  };
}
var s1 = new Student("zhangsan", 18, "male");

new 关键字
构造函数,是一种特殊的函数。主要用来在建立对象时初始化对象,即为对象成员变量赋初始值,总与 new 运算符一块儿使用在建立对象的语句中。
这里有须要特别注意的几点:

  • 构造函数用于建立一类对象,首字母要大写。
  • 内部使用 this 关键字给对象添加成员。
  • 使用 new 关键字调用对象构造函数。

this 详解
在 JavaScript 中,咱们常常会使用到 this 关键字,那么 this 到底指向什么呢?这里有一个口诀:谁调用 this,它就是谁。

  • 函数在定义的时候 this 是不肯定的,只有在调用的时候才能够肯定。
  • 通常函数直接执行,内部 this 指向全局 window。

好比:

function test() {
   
   
  console.log(this);
}
test(); // window.test();
  • 函数做为一个对象的方法,被该对象所调用,那么 this 指向的是该对象。
  • 构造函数中的 this,始终是 new 的当前对象。

遍历对象的属性

经过 for…in 语句用于遍历数组或者对象的属性,对数组或者对象的属性进行循环操做。好比:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <script>
      var student = {
   
   
        name: "zhangsan",
        age: 18,
        gender: "male",
      };
      for (var key in student) {
   
   
        console.log(key);
        console.log(student[key]);
      }
    </script>
  </body>
</html>

注:key 是一个变量,这个变量中存储的是该对象的全部的属性的名字。

删除对象的属性

使用 delete 删除对象的属性。好比在控制台中输入如下代码:

var student = {
   
   
  name: "zhangsan",
  age: 18,
  gender: "male",
};
student.name; // zhangsan
delete student.name;
student.name; // undefined

4、Web API

1.API

API(Application Programming Interface,应用程序编程接口):“计算机操做系统”(Operating system)或"程序库"提供给应用程序调用使用的代码。其主要目的是让应用程序开发人员得以调用一组例程功能,而无须考虑其底层的源代码为什么、或理解其内部工做机制的细节。API 自己是抽象的,它仅定义了一个接口,而不涉及应用程序在实际实现过程当中的具体操做。

注:定义来自维基百科。

Web API

Web API 是浏览器提供的一套操做浏览器功能和页面元素的 API(BOM 和 DOM)。

2.BOM 简介

浏览器对象模型(Browser Object Model (BOM))指的是由 Web 浏览器暴露的全部对象组成的表示模型。BOM 与 DOM(Document Object Model,文档对象模型)不一样,其既没有标准的实现,也没有严格的定义,因此浏览器厂商能够自由地实现 BOM。
做为显示文档的窗口,浏览器程序将其视为对象的分层集合。当浏览器分析文档时,它将建立一个对象的集合,以定义文档,并详细说明它应如何显示。浏览器建立的对象称为文档对象,它是浏览器使用的更大的对象集合的一部分。此浏览器对象集合统称为浏览器对象模型或 BOM。
BOM 层次结构的顶层是窗口对象,它包含有关显示文档的窗口的信息。某些窗口对象自己就是描述文档和相关信息的对象。

注:定义来自维基百科。

3.BOM 的顶级对象 window 以及经常使用操做方法

window 是浏览器的顶级对象,当调用 window 下的属性和方法时,能够省略 window。

对话框

  • alert():显示带有一段消息和一个确认按钮的警告框。
  • prompt():显示可提示用户输入的对话框。
  • confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。

页面加载事件

  • onload
window.onload = function () {
   
   
  // 当页面加载完成执行
  // 当页面彻底加载全部内容(包括图像、脚本文件、CSS 文件等)执行
};
  • onunload
window.onunload = function () {
   
   
  // 当用户退出页面时执行
};

浏览器尺寸

var width = window.innerWidth;
document.documentElement.clientWidth;
document.body.clientWidth;

var height = window.innerHeight;
document.documentElement.clientHeight;
document.body.clientHeight;

上述代码能够获取全部浏览器的宽高(不包括工具栏/滚动条)。

定时器

  • setTimeout() 方法在指定的毫秒数到达以后执行指定的函数,只执行一次。clearTimeout() 方法取消由 setTimeout() 方法设置的 timeout。
// 建立一个定时器,2000毫秒后执行,返回定时器的标示
var timerId = setTimeout(function () {
   
   
  console.log("Hello");
}, 2000);

// 取消定时器的执行
clearTimeout(timerId);
  • setInterval() 方法设置定时调用的函数也就是能够按照给定的时间(单位毫秒)周期调用函数,clearInterval() 方法取消由 setInterval() 方法设置的 timeout。
// 建立一个定时器,每隔 2 秒调用一次
var timerId = setInterval(function () {
   
   
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 2000);

// 取消定时器的执行
clearInterval(timerId);

注:BOM 的操做方法还有不少,可是通常状况下咱们经常使用的就是上面所介绍的。有兴趣的能够自行百度了解 BOM 的更多操做方法和介绍。

4.DOM 简介

文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。DOM 定义了访问 HTML 和 XML 文档的标准。咱们这里主要学习 HTML DOM。DOM 能够把 HTML 看作是文档树,经过 DOM 提供的 API 能够对树上的节点进行操做。下面来看一下 W3C 上的 DOM 树:
在这里插入图片描述

5.DOM HTML

DOM 可以操做 HTML 的内容。

改变 HTML 输出流

在 JavaScript 中,使用 document.write() 可用于直接向 HTML 输出流写内容。好比:

document.write("新设置的内容<p>标签也能够生成</p>");

在控制台中复制上述代码运行后:
在这里插入图片描述
改变 HTML 内容

使用 innerHTML 属性改变 HTML 内容。好比修改 p 标签中的内容:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <p id="p1">Hello World!</p>
    <script>
      document.getElementById("p1").innerHTML = "Hello World";
    </script>
  </body>
</html>

改变 HTML 属性

语法:

document.getElementById(id).attribute = new value();

6.DOM CSS

DOM 可以改变 HTML 元素的样式。语法为:

document.getElementById(id).style.property = new style();

例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <p id="syl" style="color: red;">Hello</p>
    <script>
      document.getElementById("syl").style.color = "green";
    </script>
  </body>
</html>

注:在上述例子中,p 标签中Hello的颜色原本为红色,可是经过 DOM 方法,最后将其改变成了绿色。运行上述代码,最终的效果是显示一个颜色为绿色的Hello文本。

7.DOM 节点

根据 W3C 的 HTML DOM 标准,HTML 文档中的全部内容都是节点:整个文档就是一个文档节点,而每个 HTML 标签都是一个元素节点。HTML 标签中的文本则是文本节点,HTML 标签的属性是属性节点,一切都是节点。
在这里插入图片描述

8.DOM 节点的操做

获取节点

要操做节点,首先咱们要找到节点。主要有如下三种办法:

  1. 经过 ID 找到 HTML 元素:使用方法 getElementById() 经过元素的 ID 而选取元素,好比:
document.getElementById("demo"); // 假定已经有一个 ID 名为 demo 的标签,能够这样来获取它
  1. 经过标签名找到 HTML 元素:使用方法 getElementsByTagName() 来选取元素,若是有多个同类型标签,那么咱们能够经过下标来确认,好比:
<html>
  <body>
    <input type="text" />
    <input type="text" />
    <script>
      document.getElementsByTagName("input")[0].value = "hello"; // 下标为 [0] 表示选取第 1 个 input 标签
      document.getElementsByTagName("input")[1].value = "world"; // 下标为 [1] 表示选取第 2 个 input 标签
    </script>
  </body>
</html>
  1. 经过类名来找到 HTML 元素:使用方法 getElementsByClassName() 经过元素的类名来选取元素。好比:
document.getElementsByClassName("name"); // 返回包含 class = "name" 的全部元素的一个列表。

DOM 节点之间的关系

DOM 的节点并非孤立的,咱们从 DOM 树中也能够看出,节点与节点之间存在着相对的关系,就如同一个家族同样,有父辈,有兄弟,有儿子等等。下面咱们来看一下都有哪些节点:

父节点 兄弟节点 子节点 全部子节点
parentNode nextSibling firstChild childNodes
nextElementSibling firstElementChild children
previousSibling lastChild
previousElementSibling lastElementChild

例子:

<html>
  <head>
    <title>DOM 节点演示</title>
  </head>
  <body>
    <h1>我是h1标签</h1>
    <p>我是p标签</p>
  </body>
</html>

上面的例子中:

  • <html>节点没有父节点,它是根节点。
  • <head> 和 <body> 的父节点是<html> 节点。
  • 文本节点 我是 p 标签 的父节点是 <p> 节点。
  • <html> 节点有两个子节点:<head> 和 <body>。
  • <h1> 节点和 <p> 节点是兄弟节点,同时也是 <body> 的子节点。

须要注意如下几点:

  • childNodes:它是标准属性,它返回指定元素的子元素集合,包括 HTML 节点,全部属性,文本节点。
  • children:非标准属性,它返回指定元素的子元素集合。但它只返回 HTML 节点,甚至不返回文本节点。
  • nextSibling 和 previousSibling 获取的是节点,获取元素对应的属性是 nextElementSibling 和 previousElementSibling。
  • nextElementSibling 和 previousElementSibling 有兼容性问题,IE9 之后才支持。

DOM 节点的操做

  1. 建立节点
  • 建立元素节点:使用 createElement() 方法。好比:
var par = document.createElement("p");
  • 建立属性节点:使用 createAttribute() 方法。
  • 建立文本节点:使用 createTextNode() 方法。
  1. 插入子节点
  • appendChild () 方法向节点添加最后一个子节点。
  • insertBefore (插入的新的子节点,指定的子节点) 方法在指定的子节点前面插入新的子节点。若是第二个参数没写或者为 null,则默认插入到后面。
  1. 删除节点:使用 removeChild() 方法。写法为:
父节点.removeChild(子节点);
node.parentNode.removeChild(node); // 若是不知道父节点是什么,能够这样写
  1. 替换子节点:使用 replaceChild() 方法。语法为:
node.replaceChild(newnode, oldnode);
  1. 设置节点的属性:
  • 获取:getAttribute(name)
  • 设置:setAttribute(name, value)
  • 删除:removeAttribute(name)

9.DOM 事件

事件的定义

在何时执行什么事。

事件三要素

事件由:事件源 + 事件类型 + 事件处理程序组成。

  • 事件源:触发事件的元素。
  • 事件类型:事件的触发方式(好比鼠标点击或键盘点击)。
  • 事件处理程序:事件触发后要执行的代码(函数形式,匿名函数)。

经常使用的事件
请添加图片描述
例子 1 :鼠标单击事件:

<p onclick="this.innerHTML = '我爱学习,身体好好!'">请点击该文本</p>

例子 2 :鼠标双击事件:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <h1 ondblclick="changetext(this)">请点击该文本</h1>
    <script>
      function changetext(id) {
   
   
        id.innerHTML = "我爱学习,身体棒棒!";
      }
    </script>
  </body>
</html>

例子 3 :鼠标移除悬停:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div
      onmouseover="mOver(this)"
      onmouseout="mOut(this)"
      style="background-color:deepskyblue;width:200px;height:100px;"
    >
      把鼠标移到上面
    </div>
    <script>
      function mOver(obj) {
   
   
        obj.innerHTML = "你把鼠标移到了上面 ";
      }

      function mOut(obj) {
   
   
        obj.innerHTML = "你把鼠标移开了";
      }
    </script>
  </body>
</html>

10.练习:导航栏样式切换

请添加图片描述

参考源码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      #list li {
   
   
        list-style-type: none;
        width: 100px;
        height: 50px;
        line-height: 50px;
        background-color: beige;
        text-align: center;
        float: left;
      }

      #list li.current {
   
   
        background-color: red;
      }

      #list li a {
   
   
        text-decoration: none;
      }
    </style>
  </head>

  <body>
    <div id="menu">
      <ul id="list">
        <li class="current">
          <a href="javascript:void(0)">首页</a>
        </li>
        <li>
          <a href="javascript:void(0)">HTML</a>
        </li>
        <li>
          <a href="javascript:void(0)">CSS</a>
        </li>
        <li>
          <a href="javascript:void(0)">JavaScript</a>
        </li>
        <li>
          <a href="javascript:void(0)">关于</a>
        </li>
        <li>
          <a href="javascript:void(0)">帮助</a>
        </li>
      </ul>
    </div>

    <script>
      // 获取全部的 li 标签
      var liObjs = document.getElementById("list").getElementsByTagName("li");
      // 循环遍历,找到每一个 li 中的 a,注册点击事件
      for (var i = 0; i < liObjs.length; i++) {
   
   
        // 每一个 li 中的 a
        var aObj = liObjs[i].firstElementChild;

        aObj.onclick = function () {
   
   
          // 把这个 a 所在的 li 的全部的兄弟元素的类样式所有移除
          for (var j = 0; j < liObjs.length; j++) {
   
   
            liObjs[j].removeAttribute("class");
          }
          //当前点击的 a 的父级元素 li(点击的这个 a 所在的父级元素 li),设置背景颜色
          this.parentNode.className = "current";
        };
      }
    </script>
  </body>
</html>

5、值类型和引用类型以及异常

1.值类型和引用类型

值类型

值类型又叫基本数据类型,在 JavaScript 中值类型有如下五种:

  • 数值类型
  • 布尔类型
  • undefined
  • null
  • 字符串

值类型存储在栈(stack)中,它们的值直接存储在变量访问的位置。好比:

var num = 18;
var flag = true;
var un = undefined;
var nu = null;
var str = "zhangsan";

上面定义的这些值类型的数据在内存中的存储以下图所示:
在这里插入图片描述
引用类型

引用类型又叫复合数据类型,在 JavaScript 中引用类型有如下三种:

  • 对象
  • 数组
  • 函数

引用类型存储在堆中,也就是说存储在变量处的值是一个指针,指向存储对象的内存处。好比:

var arr = [1, 2, 3];
var p = {
   
    name: "张三", age: 18 };

上面定义的这些引用类型的数据在内存中的存储以下图所示:
在这里插入图片描述

2.值类型和引用类型的特征

值类型的特征

  • 值类型的值是不可变的,不可变是指值类型指向的空间不可变。好比:
var a = 2;
a = a + 2;
console.log(a); // 打印结果为 4。

在上述例子中,a 变量指向的值变了,可是 2 的内存没有变。

  • 按值传递的变量之间互不影响。好比:
var a = 1;
var b = a;
a = a + 2;
console.log(a, b); // 打印结果为 3, 1
  • 值类型赋值,直接将值赋值一份。好比:
var num1 = 10;
var num2 = num1;

上述代码在内存中的体现为:
在这里插入图片描述

  • 当参数为值类型的时候,函数内和函数外的两个变量彻底不一样,仅仅只是存的值同样而已,修改时互不影响。好比:
function foo(num) {
   
   
  num = num + 1;
}

var a = 1;
foo(a);
console.log(a); // 打印结果为 1

引用类型的特征

  • 引用类型赋值,是将地址复制一份。好比:
var p = {
   
    name: "zhangsan", age: 18 };
var p1 = p;

上述代码在内存中的体现为:
在这里插入图片描述

var p = {
   
    name: "张三", age: 18 };
var p1 = p;
console.log(p.name); // 打印结果为张三
console.log(p1.name); // 打印结果为张三
p.name = "李四";
console.log(p.name); // 打印结果为李四
console.log(p1.name); // 打印结果为李四
  • 当参数为引用类型的时候,函数内和函数外的两个变量不一样,可是共同指向同一个对象,在函数内修改对象数据时会影响外部。好比:
function foo(o) {
   
   
  o.age = o.age + 1;
}

var p = {
   
    name: "zhangsan", age: 18 };

foo(p);

console.log(p.age); // 打印结果为 19。

注:能够这样理解。引用类型中的地址是一把钥匙,钥匙指向的是宝藏,复制一把钥匙后,两把钥匙能打开的是同一个宝藏。

3.调试工具的使用

在编写 JavaScript 代码时,若是碰见错误,首先在浏览器中运行咱们的代码,而后 F12,查看错误信息。好比运行如下代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script>
      alerttt("hello");
    </script>
  </body>
</html>

首先查看控制台信息,在控制台中会有报错提示,通常看这个就能知道问题是什么了。
在这里插入图片描述
在 Sources 中可以清楚的看到哪一行的代码出问题了,会有很明显地提醒。
在这里插入图片描述
若是咱们想知道变量的值,在调试的时候,能够加一句 console.log(变量) 语句来打印出来,而后在控制台中看。console.log() 语句也是咱们编程中常常须要使用的,由于有时候,咱们也不能直观的一下就知道传递进来的值究竟是什么,可能须要看半天的逻辑而后计算半天。直接打印出来的方式也有利于帮助咱们判断,不过通常状况下你们记得调试完,要把这行语句注释掉或者删掉。

设置断点,逐步执行

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script>
      for (var i = 1; i <= 100; i++) {
   
   
        for (var j = 1; j <= 10; i++) {
   
   
          j = i * j;
          console.log(j);
        }
      }
    </script>
  </body>
</html>

首先运行上述代码,点击 F12 进行调试界面,点击 Sources,设置断点的方法很简单,直接左键点击代码旁边的数字行数。以下所示:
请添加图片描述
将变量添加到 Watch 窗口,实时查看它的值的变化,以下所示:
请添加图片描述
准备工做作好以后咱们还须要点击一下刷新.而后就能够经过点击运行按钮,逐行运行咱们设置断点时的代码,并在 Watch 中查看变量值的变化,以下所示:请添加图片描述

4.异常处理

在咱们实际编程过程当中,常常会遇到各类各样的错误,有多是语法错误,也多是拼写错误,也多是浏览器的兼容性问题或者其它莫名其妙的问题。当出现错误时,JavaScript 引擎一般会中止,并生成一个错误信息。那咱们应该怎么来调试咱们的代码呢?

异常捕获

咱们使用 try-catch 语句开捕获异常,语法为:

try {
   
   
  // 这里写可能出现异常的代码
} catch (err) {
   
   
  // 在这里写,出现异常后的处理代码
}

例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <input type="button" value="点击一下" onclick="message()" />
    <script>
      var txt = "";

      function message() {
   
   
        try {
   
   
          alertt("我爱学习,身体好好"); // 故意写错 alert
        } catch (err) {
   
   
          txt = "There was an error on this page.\n\n";
          txt += "Error description: " + err.message + "\n\n";
          txt += "Click OK to continue.\n\n";
          alert(txt);
        }
      }
    </script>
  </body>
</html>

须要注意如下几点:

  • 语句 try 和 catch 是成对出现的。
  • 若是在 try 中出现了错误,try 里面出现错误的语句后面的代码都再也不执行,直接跳转到 catch 中,catch 处理错误信息,而后再执行后面的代码。
  • 若是 try 中没有出现错误,则不会执行 catch 中的代码,执行完 try 中的代码后直接执行后面的代码。
  • 经过 try-catch 语句进行异常捕获以后,代码将会继续执行,而不会中断。

throw 语句

经过 throw 语句,咱们能够建立自定义错误。throw 语句经常和 try catch 语句一块儿使用。

例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <p>请输入 0 到 100 之间的数字:</p>
    <input id="demo" type="text" />
    <button type="button" onclick="myFunction()">测试输入值</button>
    <p id="throwText"></p>
    <script>
      function myFunction() {
   
   
        try {
   
   
          var x = document.getElementById("demo").value;
          if (x == "") throw "您输入的值为空";
          if (isNaN(x)) throw "您输入的不是数字";
          if (x > 100) throw "您输入的值太大";
          if (x < 0) throw "您输入的值过小";
        } catch (err) {
   
   
          var y = document.getElementById("throwText");
          y.innerHTML = "错误提示:" + err + "。";
        }
      }
    </script>
  </body>
</html>

6、面向对象编程

1.面向对象编程举例

经过一个例子,来感觉一下什么叫面向对象编程。好比咱们设置页面中的 div 标签 和 p 标签的背景色为 color。若是按照咱们前面所需咱们可能会这样写:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      div,
      p {
   
   
        width: 200px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div>你好吗?</div>
    <p>我很好</p>
    <div>测试一下嘛</div>
    <p>好的啊</p>
    <script>
      var divs = document.getElementsByTagName("div");
      for (var i = 0; i < divs.length; i++) {
   
   
        divs[i].style.backgroundColor = "red";
      }
      var ps = document.getElementsByTagName("p");
      for (var j = 0; j < ps.length; j++) {
   
   
        ps[j].style.backgroundColor = "red";
      }
    </script>
  </body>
</html>

是否是以为有点麻烦?好像有重复的?有的人可能会想到用函数来封装一下相同的代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      div,
      p {
   
   
        width: 200px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div>你好吗?</div>
    <p>我很好</p>
    <div>测试一下嘛</div>
    <p>好的啊</p>
    <script>
      function getTagname(tagName) {
   
   
        return document.getElementsByTagName(tagName);
      }

      function setStyle(arr) {
   
   
        for (var i = 0; i < arr.length; i++) {
   
   
          arr[i].style.backgroundColor = "red";
        }
      }

      var divs = getTagname("div");
      setStyle(divs);
      var ps = getTagname("p");
      setStyle(ps);
    </script>
  </body>
</html>

咱们再来看看使用面向对象的方式:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      div,
      p {
   
   
        width: 200px;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div>你好吗?</div>
    <p>我很好</p>
    <div>测试一下嘛</div>
    <p>好的啊</p>
    <script>
      var test = {
   
   
        getEle: {
   
   
          // 实际上本案例只须要写 tag,可是为了体现面向对象的思想,咱们把获取节点的三种方式都写出来
          tag: function (tagName) {
   
   
            return document.getElementsByTagName(tagName);
          },
          id: function (idName) {
   
   
            return document.getElementById(idName);
          },
          class: function (className) {
   
   
            return document.getElementsByClassName(className);
          },
        },
        // 实际上本案例只须要写 setStyle,一样的为了体现面向对象编程的思想,咱们能够设置添加移除修改样式的函数。
        setCss: {
   
   
          setStyle: function (arr) {
   
   
            for (var i = 0; i < arr.length; i++) {
   
   
              arr[i].style.backgroundColor = "red";
            }
          },

          updateCss: function () {
   
   },
          deleteCss: function () {
   
   },
          // ...
        },
      };

      var divs = test.getEle.tag("div");
      test.setCss.setStyle(divs);
      var ps = test.getEle.tag("p");
      test.setCss.setStyle(ps);
    </script>
  </body>
</html>

2.构造函数

首先,咱们来复习一下建立对象的方式。

  • 经过对象字面量来建立。
var student = {
   
   
  name: "zhangsan",
  age: 18,
  gender: "male",
  sayHi: function () {
   
   
    console.log("hi,my name is " + this.name);
  },
};
  • 经过 new Object() 建立对象。
var student = new Object();
(student.name = "zhangsan"),
  (student.age = 18),
  (student.gender = "male"),
  (student.sayHi = function () {
   
   
    console.log("hi,my name is " + this.name);
  });

上面两种都是简单的建立对象的方式,可是若是有两个 student 实例对象呢?cv(Ctrl C + Ctrl V) 大法?分别命名一下 student1 和 student2?那若是是一个班的学生,n 个学生呢?显然若是这样作的话代码冗余率过高,是不可取的。咱们也学过函数,因此简单方式的改进是:工厂函数。

  • 经过工厂函数来建立对象。
function createStudent(name, age, gender) {
   
   
  var student = new Object();
  student.name = name;
  student.age = age;
  student.gender = gender;
  student.sayHi = function () {
   
   
    console.log("hi,my name is " + this.name);
  };
  return student;
}
var s1 = createStudent("zhangsan", 18, "male");
var s2 = createStudent("lisi", 19, "male");

这样封装代码确实解决了代码冗余的问题,可是每次调用函数 createStudent() 都会建立新函数 sayHi(),也就是说每一个对象都有本身的 sayHi() 版本,而事实上,每一个对象都共享一个函数。为了解决这个问题,咱们引入面向对象编程里的一个重要概念:构造函数。

  • 经过构造函数来建立对象。
function Student(name, age, gender) {
   
   
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayHi = function () {
   
   
    console.log("hi,my name is " + this.name);
  };
}
var s1 = new Student("zhangsan", 18, "male");

来看看构造函数与工厂函数的区别:

  • 首先在构造函数内没有建立对象,而是使用 this 关键字,将属性和方法赋给了 this 对象。
  • 构造函数内没有 return 语句,this 属性默认下是构造函数的返回值。
  • 函数名使用的是大写的 Student。
  • 用 new 运算符和类名 Student 建立对象。

3.构造函数存在的问题

构造函数虽然科学,但仍然存在一些问题。

咱们使用前面的构造函数例子来说解(修改了 sayHi() 方法):

function Student(name, age, gender) {
   
   
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayHi = function () {
   
   
    console.log("hi");
  };
}

首先咱们建立两个实例化对象:

var s1 = new Student("zhangsan", 18, "male");
s1.sayHi(); // 打印 hi

var s2 = new Student("lisi", 18, "male");
s2.sayHi(); // 打印 hi

console.log(s1.sayHi == s2.sayhi); // 结果为 false

效果:
在这里插入图片描述
因为每一个对象都是由 new Student 建立出来的,所以每建立一个对象,函数 sayHi() 都会被从新建立一次,这个时候,每一个对象都拥有一个独立的,可是功能彻底相同的方法,这样势必会形成内存浪费。有的人可能会想,既然是同样的那咱们就单独把它提出来,写一个函数,每次调用不就能够了吗?好比:

function sayHi() {
   
   
  console.log("hi");
}

function Student(name, age, gender) {
   
   
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayHi = sayHi;
}

var s1 = new Student("zhangsan", 18, "male");
s1.sayHi(); // 打印 hi
var s2 = new Student("lisi", 18, "male");
s2.sayHi(); // 打印 hi
console.log(s1.sayHi == s2.sayHi); // 结果为 true

在这里插入图片描述
可是这样作会致使全局变量增多,可能会引发命名冲突,代码结果混乱,维护困难。经过使用原型能够很好的解决这个问题。

4.原型

原型:prototype

在 JavaScript 中,每个函数都有一个 prototype 属性,指向另外一个对象。这个对象的全部属性和方法,都会被构造函数的实例继承。咱们来看看前面例子原型的写法:

function Student(name, age, gender) {
   
   
  this.name = name;
  this.age = age;
  this.gender = gender;
}

Student.prototype.sayHi = function () {
   
   
  console.log("hi");
};

var s1 = new Student("zhangsan", 18, "male");
s1.sayHi(); // 打印 hi
var s2 = new Student("lisi", 18, "male");
s2.sayHi(); // 打印 hi
console.log(s1.sayHi == s2.sayHi); // 结果为 true

在这里插入图片描述

5.构造函数、实例、原型三者之间的关系

咱们以前提到过:每个函数都有一个 prototype 属性,指向另外一个对象。让咱们用代码验证一下,在编辑器中输入如下代码:

<script type="text/javascript">
  function F() {
   
   }
  console.log(F.prototype);
</script>

上述代码在浏览器中打印结果为 Object,验证了咱们所说的 prototype 属性,指向另外一个对象。

构造函数的 prototype 对象默认都有一个 constructor 属性,指向 prototype 对象所在函数。在控制台中运行下面的代码:

function F() {
   
   }
console.log(F.prototype.constructor === F); // 结果为 ture

经过构造函数获得的实例对象内部会包含一个指向构造函数的 prototype 对象的指针 __ proto__。__ proto__属性最先是火狐浏览器引入的,用以经过实例对象来访问原型,这个属性在早期是非标准的属性。在控制台中运行下面的代码:

function F() {
   
   }
var a = new F();
console.log(a.__proto__ === F.prototype); // 结果为 true

实例对象能够直接访问原型对象成员,全部实例都直接或间接继承了原型对象的成员。

总结:每一个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针 constructor,而实例都包含一个指向原型对象的内部指针__proto__。

6.原型链

咱们说过全部的对象都有原型,而原型也是对象,也就是说原型也有原型,那么如此下去,也就组成了咱们的原型链。

属性搜索原则

属性搜索原则,也就是属性的查找顺序,在访问对象的成员的时候,会遵循如下原则:

  • 首先从对象实例自己开始找,若是找到了这个属性或者方法,则返回。
  • 若是对象实例自己没有找到,就从它的原型中去找,若是找到了,则返回。
  • 若是对象实例的原型中也没找到,则从它的原型的原型中去找,若是找到了,则返回。
  • 一直按着原型链查找下去,找到就返回,若是在原型链的末端尚未找到的话,那么若是查找的是属性则返回 undefined,若是查找的是方法则返回 xxx is not a function。

更简单的原型语法

在前面的例子中,咱们是使用 xxx.prototype. 而后加上属性名或者方法名来写原型,可是每添加一个属性或者方法就写一次显得有点麻烦,所以咱们能够用一个包含全部属性和方法的对象字面量来重写整个原型对象:

function Student(name, age, gender) {
   
   
  this.name = name;
  this.age = age;
  this.gender = gender;
}
Student.prototype = {
   
   
  hobby: "study",
  sayHi: function () {
   
   
    console.log("hi");
  },
};

var s1 = new Student("wangwu", 18, "male");
console.log(Student.prototype.constructor === Student); // 结果为 false

可是这样写也有一个问题,那就是原型对象丢失了 constructor 成员。因此为了保持 constructor 成员的指向正确,建议的写法是:

function Student(name, age, gender) {
   
   
  this.name = name;
  this.age = age;
  this.gender = gender;
}
Student.prototype = {
   
   
  constructor: Student, // 手动将 constructor 指向正确的构造函数
  hobby: "study",
  sayHi: function () {
   
   
    console.log("hi");
  },
};

var s1 = new Student("wangwu", 18, "male");
console.log(Student.prototype.constructor === Student); // 结果为 true

7.原型链继承

JavaScript 中也有继承。原型链继承的主要思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

function Student(name, age, gender) {
   
   
  this.name = name;
  this.age = age;
  this.gender = gender;
}
Student.prototype.sayHi = function () {
   
   
  console.log("hi");
};

var s1 = new Student("zhangsan", 18, "male");
s1.sayHi(); // 打印 hi
var s2 = new Student("lisi", 18, "male");
s2.sayHi(); // 打印 hi

上述例子中实例化对象 s1 和 s2 都继承了 sayHi() 方法。

8.Object.prototype 成员介绍

在控制台中输入如下代码:

Object.prototype;

在这里插入图片描述
经常使用的几个 Object.prototype 成员:
在这里插入图片描述

7、函数进阶

1.call、apply、bind

在学习 call()、apply()、bind() 方法以前,咱们先来复习一下 this 的指向问题,咱们前面说过一个口诀:谁调用 this,它就指向谁。让咱们先来看一个例子:

function foods() {
   
   }
foods.prototype = {
   
   
  price: "¥15",
  say: function () {
   
   
    console.log("My price is " + this.price);
  },
};

var apple = new foods();
apple.say(); // My price is ¥15
var orange = new foods();
orange.say(); // My price is ¥15

也就是说上述例子调用 say() 方法,最后打印的结果都是同样的,可是若是咱们想打印橘子的价钱是 10 元呢?又不想从新定义 say() 方法。JavaScript 为咱们专门提供了一些函数方法用来帮咱们更优雅的处理函数内部 this 指向问题。这就是接下来咱们要学习的 call()、apply()、bind() 三个函数方法。

call

call() 方法调用一个函数, 其具备一个指定的 this 值和分别地提供的参数(参数的列表)。语法为:

fun.call(thisArg, arg1, arg2, ...)

注:

  • thisArg 指的是在 fun 函数中指定的 this 的值。若是指定了 null 或者 undefined 则内部 this 指向 window,同时值为原始值(数字,字符串,布尔值)的 this 会指向该原始值的自动包装对象。是一个可选项。
  • arg1, arg2, …指定的参数列表。也是可选项。
  • 使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值,则返回 undefined。
  • call() 容许为不一样的对象分配和调用属于一个对象的函数/方法。
  • call() 提供新的 this 值给当前调用的函数/方法。你可使用 call() 来实现继承:写一个方法,而后让另一个新的对象来继承它(而不是在新对象中再写一次这个方法)。
  1. 使用 call() 方法调用函数而且指定上下文的 this。前面的例子能够改写成:
function foods() {
   
   }
foods.prototype = {
   
   
  price: "¥15",
  say: function () {
   
   
    console.log("My price is " + this.price);
  },
};

var apple = new foods();
orange = {
   
   
  price: "¥10",
};
apple.say.call(orange); // My price is ¥10
  1. 在一个子构造函数中,你能够经过调用父构造函数的 call() 方法来实现继承。在控制台输入以下代码:
function Father(name, age) {
   
   
  this.name = name;
  this.age = age;
}

function Son(name, age) {
   
   
  Father.call(this, name, age);
  this.hobby = "study";
}

var S1 = new Son("zhangsan", 18);
S1; // Son {
   
   name: "zhangsan", age: 18, hobby: "study"}

apply
apply() 方法与 call() 方法相似,惟一的区别是 call() 方法接受的是参数,apply() 方法接受的是数组。语法为:

fun.apply(thisArg, [argsArray]);
  1. 使用 apply() 方法将数组添加到另外一个数组。
    例子:
var array = ["a", "b", "c"];
var nums = [1, 2, 3];
array.push.apply(array, nums);
array; // ["a", "b", "c", 1, 2, 3]

注:concat() 方法链接数组,不会改变原数组,而是建立一个新数组。而使用 push() 是接受可变数量的参数的方式来添加元素。使用 apply() 则能够链接两个数组。

  1. 使用 apply() 方法和内置函数。
    例子:
var numbers = [7, 10, 2, 1, 11, 9];
var max = Math.max.apply(null, numbers);
max; // 11

注:直接使用 max() 方法的写法为:Math.max(7, 10, 2, 1, 11, 9);

bind
bind() 方法建立一个新的函数(称为绑定函数),在调用时设置 this 关键字为提供的值。并在调用新函数时,将给定参数列表做为原函数的参数序列的前若干项。语法为:

fun.bind(thisArg[, arg1[, arg2[, ...]]])

注:参数 thisArg:当绑定函数被调用时,该参数会做为原函数运行时的 this 指向。当使用 new 操做符调用绑定函数时,该参数无效。参数:arg1,arg2,…表示当目标函数被调用时,预先添加到绑定函数的参数列表中的参数。

咱们建立一个简单的绑定函数例子:

var bin = function () {
   
   
  console.log(this.x);
};
var foo = {
   
   
  x: 10,
};

bin(); // undefined
var func = bin.bind(foo); // 建立一个新函数把 'this' 绑定到 foo 对象
func(); // 10

咱们再来看一个例子:

this.num = 6;
var test = {
   
   
  num: 66,
  getNum: function () {
   
   
    return this.num;
  },
};

test.getNum(); // 返回 66

var newTest = test.getNum;
newTest(); // 返回 6, 在这种状况下,"this"指向全局做用域

// 建立一个新函数,将"this"绑定到 test 对象
var bindgetNum = newTest.bind(test);
bindgetNum(); // 返回 66
var newTest = test.getNum;
newTest();

// 上面这两行代码其实至关于:
var newTest(){
   
   
    return this.num;
}
// 因此 this 指向的是全局做用域,返回 6。

2.递归

在程序中,递归就是函数本身直接或者间接的调用本身。

例子:计算 1 到 10 之间的整数相加的和:

function foo(n) {
   
   
  if (n == 0) {
   
   
    return 0;
  } // 临界条件
  else {
   
   
    return n + foo(n - 1);
  }
}
var a = foo(10);
a; // 55

注:必定要写临界条件,否则程序没法结束而且会报错。

3.做用域

做用域就是变量与函数的可访问范围,即做用域控制着变量与函数的可见性和生命周期。简单来讲,做用域的值就是做用范围,也就是说一个变量或函数在什么地方可使用,在什么地方不能使用。

块级做用域

在 JavaScript 中是没有块级做用域的。好比:

{
   
   
  var num = 123;
  {
   
   
    console.log(num);
  }
}
console.log(num);

上面的例子并不会报错,而是打印两次 123,可是在其余编程语言中(C#、C、JAVA)会报错,这是由于在 JavaScript 中是没有块级做用域。也就是说,使用 {} 标记出来的代码块中声明的变量 num,是能够被 {} 外面访问到的。

函数做用域

JavaScript 的函数做用域是指在函数内声明的全部变量在函数体内始终是可见的,不涉及赋值。来看个例子:

function test() {
   
   
  var num = 123;
  console.log(num);
  if (2 == 3) {
   
   
    var k = 5;
    for (var i = 0; i < 10; i++) {
   
   }
    console.log(i);
  }
  console.log(k); // 不会报错,而是显示 undefined
}
test();

在这里插入图片描述
咱们把上面的代码 if 语句中的条件改成 2 == 2 来看看效果:
在这里插入图片描述
咱们再来对比一下若是没有在函数体内会是什么效果:
在这里插入图片描述
全局做用域

全局做用域也就是说什么地方都可以访问到。好比咱们不用 var 关键字,直接声明变量的话,那这个变量就是全局变量,它的做用域就是全局做用域。使用 window 全局对象来声明,全局对象的属性也是全局变量。另外在全部的函数外部用 var 声明的变量也是全局变量,这是由于内层做用域能够访问外层做用域。

注:

  • 内层做用域能够访问外层做用域,反之不行。
  • 整个代码结构中只有函数能够限定做用域。
  • 若是当前做用规则中有名字了,就不考虑外面的同名变量。
  • 做用域规则首先使用提高规则分析。

变量名提高

JavaScript 是解释型的语言,可是它并非真的在运行的时候完彻底全的逐句的往下解析执行。
例子:

func();

function func() {
   
   
  console.log("Hello Xnm");
}

在控制台中运行效果为:
请添加图片描述
这说明了它并非彻底的逐句往下解析的,不然是会报错的。显然,在执行 func() 以前,引擎就已经解析到了 function func(){},发生了变量名提高。那么变量名提高是在何时发生的呢?JavaScript 引擎在对 JavaScript 代码进行解释执行以前,会对 JavaScript 代码进行预解析,在预解析阶段,会将以关键字 var 和 function 开头的语句块提早进行处理。当变量和函数的声明处在做用域比较靠后的位置的时候,变量和函数的声明会被提高到做用域的开头。也就是说上面的代码,咱们能够理解为:

function func() {
   
   
  console.log("Hello Xnm");
}
func();

再来看看变量声明的例子:

console.log(num);
var num = 10;

在这里插入图片描述
这里说的提示,是声明的提高,也就是说上面的代码,咱们能够理解为:

var num; // 这里是声明
console.log(num); // 变量声明以后并未有初始化和赋值操做,因此这里是 undefined
num = 10; // 最终打印结果为 10

下面再来看几个复杂一点的例子。

函数同名的时候:

func();
function func() {
   
   
  console.log("Hello xnm");
}

func();
function func() {
   
   
  console.log("hi xnm");
} // 最终结果打印了两次 hi xnm

上面代码至关于:

function func() {
   
   
  console.log("Hello xnm");
}
function func() {
   
   
  console.log("hi xnm");
}
func();
func();

函数变量同名的时候:

console.log(foo);
function foo() {
   
   }
var foo = 6;

当出现变量声明和函数同名的时候,只会对函数声明进行提高,变量会被忽略。因此上面的代码至关于:

function foo() {
   
   }
console.log(foo);
foo = 6;

再来看一种:

var num = 1;
function num() {
   
   
  alert(num);
}
num();

在这里插入图片描述
上面的代码至关于:

function num() {
   
   
  alert(num);
}

num = 1;
num();

4.闭包

闭包是指函数可使用函数以外定义的变量。

简单的闭包

在 JavaScript 中,使用全局变量是一个简单的闭包实例。好比:

var num = 3;
function foo() {
   
   
  console.log(num);
}
foo(); //打印 3

复杂的闭包

function f1() {
   
   
  var num1 = 6;
  function f2() {
   
   
    var num2 = 7;
  }
  console.log(num1 + num2);
}
f1();

在这里插入图片描述
在上述代码中函数 f2 可以访问到它外层的变量 num1,可是 f1 是不能访问 f2 中的变量num2,所以咱们能够把 num2 做为 f2 的返回值,而后经过 f2 的返回值就能够访问到 sum2 了。

function f1() {
   
   
  var num1 = 6;
  function f2() {
   
   
    var num2 = 7;
    return num2;
  }
  console.log(num1 + f2());
}
f1();

在这里插入图片描述

6. arguments 对象

在函数代码中,使用特殊对象 arguments,无需明确指出参数名,咱们就能访问它们。第一个参数是 arguments[0],第二个参数是 arguments[1],以此类推。好比:

function foo() {
   
   
  console.log(arguments[0]);
  console.log(arguments[1]);
}
foo(2, 3); // 打印 2 3

还能够用 arguments 对象检测函数的参数个数,引用属性 arguments.length 便可。来看一个遍历参数求和的例子:

function add() {
   
   
  var sum = 0;
  for (var i = 0; i < arguments.length; i++) {
   
   
    sum += arguments[i];
  }
  return sum;
}
add(); // 0
add(1); // 1
add(1, 2); // 3
add(1, 2, 3); // 6

7.Function 对象

用 Function() 对象建立函数的语法以下:

var function_name = new Function(arg1, arg2, ..., argN, function_body)

注:每一个参数都必须是字符串,function_body 是函数主体,也就是要执行的代码。

例子:

var add = new Function("a", "b", "console.log(a+b);");
add(2, 5); // 打印 7

再看一个例子:

var add = new Function("a", "b", "console.log(a+b);");
var doAdd = add;
doAdd(2, 5); // 打印 7
add(2, 5); // 打印 7

在上述例子中,变量 add 被定义为函数,而后 doAdd 被声明为指向同一个函数的指针。用这两个变量均可以执行该函数的代码,并输出相同的结果。所以,函数名只是指向函数的变量,那么咱们能够把函数做为参数传递给另外一个函数,好比下面的例子

function addF(foo, b, c) {
   
   
  foo(b, c);
}
var add = new Function("a", "b", "console.log(a+b);");
addF(add, 2, 5); // 打印 7

Function 对象的 length 属性

函数属于引用类型,因此它们也有属性和方法。length 属性声明了函数指望的参数个数。

例子:

var add = new Function("a", "b", "console.log(a+b);");
console.log(add.length); // 打印 2

Function 对象的方法

Function() 对象也有与全部对象共享的 valueOf() 方法和 toString() 方法。这两个方法返回的都是函数的源代码。

例子:

var add = new Function("a", "b", "console.log(a+b);");
add.valueOf();
add.toString();

在这里插入图片描述
在这里插入图片描述


8、总结

emmm,暂时就这么多,本人对JS也还有不少须要学习的地方,因此不少地方可能描述的不是很好,后头会再上传点栗子用来巩固学习。