引言
JavaScript，简称 JS，它是一个脚本语言，通过编写代码，在浏览器上运行。
一、JS 引入方式
1. 内嵌式
内嵌式是指：将 JS 代码写在 script 标签的内部。
<!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>demo8</title>
</head>
<body>
<script>
//alert 的功能是弹出一个对话框
alert("hello world");
</script>
</body>
</html>
展示结果：
2. 行内式
行内式是指：将 JS 代码入到 html 中，但不通过 script 标签。
<!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>demo9</title>
</head>
<body>
<input type="button" value="按钮" onclick="alert('hello! 欢迎来到这个页面')">
</body>
</html>
展示结果：
3. 外部式
(1) 创建一个 js文件，在 js文件中，书写代码。
(2) 在 html 文件中，通过路径引入 css 文件。
js 文件
alert("hello world");
html 文件
<!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>demo10</title>
</head>
<body>
<script src="demo10.js">
alert("welcome to the world");
</script>
</body>
</html>
在通过 src 文件引入 【hello world】之后，同一 script 标签中的其他相同命令不会生效。比方说：上面的 【alert(“welcome to the world”)】就并没有生效。
展示结果：
二、JS 基础语法
1. 注释
和 Java 相同，既可以使用 【//】，也可以使用【/* */】
2. 输入输出
// 弹出一个输入框
prompt("请输入你的名字");
// 弹出一个输出框
alert("hello world");
展示结果：
3. 在控制台上打印
console.log("hello world");
展示结果：
注意
①【console.log()】的用法和 Java 中【System.out.println()】的用法基本相似，都是具有打印并换行的显示效果。
② console 是一个 JS 中的 “对象”。其中. 表示取对象中的某个属性或者方法，我们可以直观地将 . 理解成 “的”。那么，console.log 就可以理解成：使用 “控制台” 对象 “的” “log 方法”。
4. 变量的使用
基本数据类型
创建变量
let num = 10;
//var num = 10;
num = 20;
console.log(num);
let str = 'hello world';
console.log(str);
展示结果：
var / let 是 JS 中的一个关键字，它的作用是声明这是一个变量。var 的使用，年代较为久远，后面建议使用 let，以免不必要的缺陷发生。
在 JS 中，创建变量不需要显示指定类型。变量实际的类型，根据初始化 / 赋值来确定的。而这一特性实际上就是因为 JS 是基于动态类型这一语法的。
在上面的程序中，将变量 num 赋值成数字，那么 num 就表示 number 类型；将变量 str 赋值成字符串，那么 str 就是字符串类型。
理解动态类型
理解动态类型之前，先来看看 Java 的静态类型语言：
在 Java 中，一个变量的类型，在编译阶段就固定了，在运行时不能改变。例如：下面的变量 a 就是一个 int 类型，在后面的编译阶段中，不管怎么修改 a 的值都是可以的，但当前 a 的类型始终是 int 类型，这无法改变。
int a = 10;
而在 JS 中，变量的类型随着程序运行，随时可以改变。这其实就是动态类型的含义。
let a = 10;
console.log(a);
//typeof 可以展示当前变量的类型
console.log(typeof a);
a = 'hello world';
console.log(a);
console.log(typeof a);
展示结果：
5. number 类型的规则
(1) 进制表示
和 Java 类似，不再赘述。
let a = 07; // 八进制整数, 以 0 开头
let b = 0xa; // 十六进制整数, 以 0x 开头
let c = 0b10; // 二进制整数, 以 0b 开头
(2) 特殊的数字值
Infinity: 无穷大, 大于任何数字。表示数字已超过了 JS 能表示的范围。
-Infinity: 负无穷大, 小于任何数字。表示数字也已超过了 JS 能表示的范围。
NaN: 表示当前的结果不是一个数字。
console.log(10/0);
console.log(-10/0);
console.log('hello' - 10);
展示结果：
(3) 小数
console.log(1/3);
展示结果：
6. string 类型的规则
(1) 创建字符串
字符串需要使用引号引起来，单引号双引号都可以。因为在 JS 的语法中，没有字符的概念，只有字符串。
let str1 = 'hello';
let str2 = "hello world";
也可以单引号双引号配合使用：
console.log(" welcome to 'Shanghai' ");
console.log(' welcome to "Shanghai" ');
(2) 求字符串长度
let str = 'hello 杰克';
console.log(str.length);
//输出结果：8
(3) 拼接字符串
let str1 = "hello ";
let str2 = "杰克";
console.log(str1+str2);
let str3 = "hello ";
let str4 = "Jack";
console.log(str3+str4);
let str5 = "My score is "
let str6 = 100;
console.log(str5+str6);
展示结果：
7. boolean 类型的规则
boolean 类型除了用来表示 true 或 false 以外，还能够分别表示 0 或 1.
let a = true;
let b = false;
console.log(a + 1);
console.log(b + 1);
展示结果：
8. undefined 和 null 类型
let a;
console.log(a);
let b = null;
console.log(b + 2);
console.log(b + '2');
展示结果：
两者的区别与联系
共同点：null 和 undefined 都表示取值非法的情况，但是侧重点不同。
不同点：null 表示当前的值为空，相当于一个空的盒子。
undefined 表示当前的变量未定义，相当于连盒子都没有。
9. 运算符与符号
JS 中的算术运算符、赋值运算符、自增自减运算符、比较运算符、逻辑运算符、移位运算、转义字符。这些和 C 语言、 Java 的语法都基本一致，虽有个别地方不相同，但不影响，可以自己在实际编程中发现差异。
比方说：
展示1
JS 中有一个【===】号，它与两个等号的差异：
== :比较相等(会进行隐式类型转换)
=== :比较相等(不会进行隐式类型转换)
let x = 10;
let y = '10';
console.log(x == y);
console.log(x === y);
展示结果：
展示2
a || b
如果 a 为 true， 整个表达式的值就是 a 的值。
如果 a 为 false，整个表达式的值就是 b 的值。
所以在 JS 中，|| 得到的结果，不一定就是 boolean 类型。
10. 语句
JS 中的 if 语句、三元表达式、switch 语句、while循环、for 循环。这些都与 C语言的语法基本一致。
在 if 语句、while 循环中的判断条件中，存在 【0为假，非0为真】的逻辑。
let a = 1;
let b = 0;
if(5) {
console.log(100);
} else {
console.log(200);
}
while ( a <= 10) {
console.log(a);
a++;
}
展示结果：
三、数组
1. 创建数组
方式一：new 一个对象
let arr = new Array();
方式二：字面量创建
let arr = [];
let arr2 = [1, 2, 'hello', true, undefined];
由于 JS 是动态类型的语言，所以不要求数组中的元素一定是相同类型的。
2. 数组的基本使用
let arr = [1, 2, 'hello', true];
console.log(arr);
console.log(arr.length);
let i = 0;
for(i=0; i<arr.length; i++) {
console.log(arr[i]);
}
console.log(arr[100]);
展示结果：
在 JS 中，若代码中涉及到超出数组范围或不在数组范围内，在浏览器显示的时候并不会报错，但会显示 【undefined】.
3. 为数组新增元素
let arr = [1, 2, 'hello', true];
arr[4] = 100;
console.log(arr.length);
arr[-1] = 200;
console.log(arr.length);
arr[10] = 300;
console.log(arr.length);
arr['hello'] = 'world';
console.log(arr.length);
console.log(arr['hello']);
console.log(arr.hello);
console.log(arr);
展示结果：
注意
① 当我们尝试对 arr 进行尾插的时候，结果成功。
② 当我们尝试往 arr[10] 插入元素的时候，结果成功，并且扩容了数组长度。
③ 当我们尝试往 arr[ ‘hello’ ] 插入元素的时候。即非数字下标，结果成功，但不计入长度。但是，这里我们应该将 “下标” 理解成数组的 “属性”，我们同时可以通过 arr.hello 的方式来访问此属性对应的值。
④ 当我们尝试往 arr[-1] 插入元素的时候，结果成功，但不计入长度。这和上面所说的 “属性” 是一个道理，但又不完全一致。
而造成这些与 Java 数组不同语法的关键，其实就是因为 JS 是一个动态类型的语言，所以才会衍生出这些不同的逻辑。
4. 为数组增删元素
为数组增删元素，推荐使用 push 和 splice 方法，方便且清晰。
在 JS 中，我们可以将数组理解为一个对象，那么我们就可以利用对象对应的方法，这就和 Java 中的 ArrayList 差不多，push 就相当于 ArrayList 的 add 方法。
而下面的 splice(2,3)，表示：从数组 2下标开始，删除后三个元素。
let arr = [];
for(let i=0; i<10; i++) {
arr.push(i);
}
console.log(arr.length);
console.log(arr);
arr.splice(2,3);
console.log(arr.length);
console.log(arr);
展示结果：
四、函数
① 函数的定义和调用的先后顺序没有要求。
② 若函数有返回值，函数定义的时候不需要写返回类型。
③ 实参和形参之间的个数可以不匹配，但实际开发中，要求形参和实参个数要匹配。
④ 函数表达式：可以定义一个函数赋给一个变量，再通过变量来调用当前的函数。
展示1
函数的定义和调用的先后顺序没有要求。
f1();
console.log("-----------------");
function f1() {
console.log("hello");
}
f1();
console.log("-----------------");
function f2(x, y) {
return x + y;
}
console.log(f2(1, 2));
console.log(f2("hello ", "world"));;
展示结果：
展示2
实参和形参之间的个数可以不匹配。
function f1(x, y) {
console.log("x:" + x);
console.log("y:" + y);
return x + y;
}
console.log(f1(10));
console.log("----------------------");
console.log(f1(10, 20, 100));
展示结果：
展示3
function add(a, b, c, d) {
//若 a 不为0，那么就将 a 的值赋值给 a ；否则，将 0 赋值给 a
a = a || 0;
b = b || 0;
c = c || 0;
d = d || 0;
return a + b + c + d;
}
console.log(add(10));
console.log(add(10 + 20));
console.log(add(10 + 20 + 30));
console.log(add(10 + 20 + 30 + 40));
展示结果：
展示4
函数表达式：可以定义一个函数赋给一个变量，再通过变量来调用当前的函数。
函数和一个普通变量的地位相同，可以相互赋值。此外，还可以省略函数名，这是常见的匿名函数写法。
let add = function addFun(x, y) {
return x + y;
}
console.log(add(10, 20));
//常见写法：匿名函数
let add2 = function (x, y) {
return x + y;
}
console.log(add2(10, 20));
展示结果：
作用域
var 关键字的范围可以脱离大括号外，let 关键字的范围只能再大括号内。
for(var i=0; i<10; i++) {
}
console.log(i);
for(let i=0; i<10; i++) {
}
console.log(i);
展示结果：
五、对象
在 JS 中，字符串、数值、数组、函数都是对象。
创建对象
1. 使用字面量创建对象 (最常用)
let student = {
name: 'Jack',
age: 20,
height: 175,
f1:function() {
console.log('hello');
}
};
console.log(student.name);
console.log(student['age']);
student.f1();
展示结果：
注意：
① 使用 【. 成员】 来访问运算符来访问属性；. 可以理解成 “的”。
② 使用 [ ] 访问属性，此时属性需要加上引号。
③ 调用方法需要加上 ( )
2. 使用 new Object 创建对象
//和创建数组类似
let student = new Object();
student.name = "Rose";
student.height = 175;
3. 使用构造函数创建对象
function robot(name, type) {
this.name = name;
this.type = type;
this.func = function() {
console.log("超级变换形态");
}
}
let robot1 = new robot("卡布达", "1号机器人");
let robot2 = new robot("金龟次郎", "2号机器人");
let robot3 = new robot("飞翔机器人", "3号机器人");
这种创建对象的方式类似于 Java 中创建实例，但并不完全相似，此外，这种方式用的少。形如这样的函数被称为 “构造函数”，JS 中的构造函数是可以独立存在的，这一点与 Java 不同。
理解 JS 中的对象
① JS 没有 “多态”， JS 本身就是动态类型语言，在使用对象的某个方法时，本身也不需要对对象的类型做出明确区分，因此并不需要在语法层面上支持多态。
② JS 对象不区分 “属性” 和 “方法”。
③ JS 对象没有 private / public 等访问控制机制。
④ JS 对象没有 “继承”，继承本质就是 “让两个对象建立关联”，或者说，是让一个对象能够重用另一个对象的属性 / 方法，JS 中使用 “原型” 机制实现类似的效果。
⑤ 在 ES6 之前，JS 没有 “类” 的概念，对象其实就是 “属性” + “方法”。而类则相当于把一些具有共有的对象的属性和方法单独提取了出来，相当于一个模型一样，那么，通过这个模型就可以实例化对象了。在 JS 中的 “构造函数” 也能起到类似的效果，但并不完全具备类的一些特性。在 ES6 之后，也引入了 class 关键字，就能按照类似于 Java 的方式创建类和对象了，但用 class 的方式还是较少。
953
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
