Java程序员学习【Javascript】这一篇就够了

Javascript是一种脚本语言，可以用来更改页面内容，控制多媒体，制作图像、动画等等

js 代码位置

<script>
	// js 代码
</script>

引入 js 脚本

<script src="js脚本路径"></script>

1. 变量与数据类型

1-1. 声明变量

let ★

 let 变量名 = 值;

let 声明的变量可以被多次赋值，例如

let a = 100;  // 初始值是 100
a = 200;	  // ok, 被重新赋值为 200

const ★

const 修饰的叫常量，只能赋值一次

const b = 300; // 初始值是 300
b = 400;	   // error, 不能再次赋值

注意：const 并不意味着它引用的内容不可修改，例如

const c = [1,2,3];
c[2] = 4; 	        // ok, 数组内容被修改成 [1,2,4]
c = [5,6];			// error, 不能再次赋值

var

var 声明的变量可以被多次赋值，例如

var f = 100;
f = 200;

1-2. 基本类型

undefined 和 null

1. 执行表达式或函数，没有返回结果，出现 undefined
2. 访问数组不存在的元素，访问对象不存在的属性，出现 undefined
3. 定义变量，没有初始化，出现 undefined

例如：

console.log(1);  	// 函数没有返回值, 结果是  undefined
let a = 10;		 	// 表达式没有返回值, 结果是 undefined
let b = [1,2,3];
console.log(b[10]); // 数组未定义元素是 undefined
let c = {"name":"张三"};
console.log(c.age); // 对象未定义属性是 undefined
let d;
console.log(d);		// 变量未初始化是 undefined

二者共同点

• 都没有属性、方法
• 二者合称 Nullish

二者区别

• undefined 由 js 产生
• null 由程序员提供

string ★

js 字符串三种写法

let a = "hello";  // 双引号
let b = "world";  // 单引号
let c = `hello`;  // 反引号

模板字符串（Template strings）

需求：拼接 URI 的请求参数，如

/test?name=zhang&age=18
/test?name=li&age=20

传统方法拼接

let name = ; // zhang li ...
let age = ; // 18 20 ...

let uri = "/test?name=" + name + "&age=" + age;

模板字符串方式

let name = ; // zhang li ...
let age = ; // 18 20 ...

let uri = `/test?name=${name}&age=${age}`;

number 和 bigint ★

number 类型标识的是双精度浮动小数，例如

10 / 3;   // 结果 3.3333333333333335

既然是浮点小数，那么可以除零

10 / 0;	  // 结果 Infinity 正无穷大
-10 / 0;  // 结果 -Infinity 负无穷大

浮点小数都有运算精度问题，例如

2.0 - 1.1; // 结果 0.8999999999999999

字符串转数字

parseInt("10"); 	// 结果是数字 10 
parseInt("10.5");	// 结果是数字 10, 去除了小数部分
parseInt("10") / 3; // 结果仍视为 number 浮点数, 因此结果为 3.3333333333333335

parseInt("abc");	// 转换失败，结果是特殊值 NaN (Not a Number)

要表示真正的整数，需要用 bigint，数字的结尾用 n 表示它是一个 bigint 类型

10n / 3n;			// 结果 3n, 按整数除法处理

boolean ★

• Truthy
• Falsy

在 js 中，并不是 boolean 才能用于条件判断，你可以在 if 语句中使用【数字】、【字符串】… 作为判断条件

let b = 1;

if(b) { // true
    console.log("进入了");
}

这时就有一个规则，当需要条件判断时，这个值被当作 true 还是 false，当作 true 的值归类为 truthy，当作 false 的值归类为 falsy

下面值都是 falsy

• false
• Nullish (null, undefined)
• 0, 0n, NaN
• "" '' `` 即长度为零的字符串

剩余的值绝大部分都是 truthy

有几个容易被当作 falsy 实际是 truthy 的

• "false", "0" 即字符串的 false 和 字符串的零
• [] 空数组
• {} 空对象

1-3. 对象类型

Function ★

定义函数

function 函数名(参数) {
    // 函数体
    return 结果;
}

例

function add(a, b) {
    return a + b;
}

调用函数

函数名(实参);
add(1, 2);     // 返回 3

js 中的函数调用特点：对参数的类型和个数都没有限制，例如

add('a', 'b');  // 返回 ab
add(4, 5, 6);   // 返回 9, 第三个参数没有被用到, 不会报错
add(1);			// 返回 NaN, 这时 b 没有定义是 undefined, undefined 做数学运算结果就是 NaN

默认参数

function pagination(page = 1, size = 10) {
    console.log(page, size);
}

匿名函数

(function (参数) {
    // 函数体
    return 结果;
})

例
(function(a,b){
    return a + b;
})

第一种场景：定义完毕后立刻调用

(function(a,b){
    return a + b;
})(1,2)

第二种场景：作为其它对象的方法，例如

html

<p id="p1">点我啊</p>

此元素有一个 onclick 方法，会在鼠标单击这个元素后被执行，onclick 方法刚开始是 null，需要赋值后才能使用。
js

document.getElementById("p1").onclick = (function(){
    console.log("鼠标单击了...");
});

1-4. 动态类型

2. 运算符与表达式

3. 控制语句

4. API