基础运算Basics

案例

1 2 3 4 5 6 7 8 9 10 11 12 13 
const limit = 100;for (let num = 2; num < 100; num++) {    let isPrime = true;    for (let factor = 2; factor < num; factor++) {        if (num % factor == 0) {            isPrime = false;            break;        }    }    if (isPrime) {        console.log(num)    }}

变量Variables

变量名

采用 驼峰式命名

无数据类型限制

1 2 
const v1 = 1;const v2 = "1";

四种变量声明

1 2 3 4 
v1 = 9917;var v2 = 9917;let v3 = 9917;const v4 = 9917;

常量Constants

使用 const 声明的变量，在赋值后不可被修改

1 2!
const a = 1;a = 2;

环境Environments

运行 js 代码的运行机，会在文件级别绑定一些变量。

这些并不是关键字

1 2 3!
console.log("zzax");console = 1;console.log("zzax");

数据类型Data Types

总览

Boolean

Null

Undefined

Number

BigInt

String

Symbol

Object

前 7 种为 primitive types

字面量Literals

常用的

1 2 3 4 5 
const v1 = 1;       // number const v2 = 1.2;     // number const v3 = true;    // boolean const v4 = 'hello'; // string const v5 = "zzax";  // string

表达空的

1 2 
const v1 = null;        // null const v2 = undefined;   // undefined 

其它

bigint / symbol / object

类型检查

1 2 
const v = 1;console.log(typeof v);

常用转型

string 转 number

1 2 
const v = parseInt("1");console.log(typeof v);

number 转 string

1 2 3 
const v = 1;const str = v + ""; console.log(typeof str);

算数运算Arithmetic

运算符

      
+   -   *   /   %+=  -=  *=  /=  %=++  --

除法

1 2  <
const a = 7 / 2;console.log(a);3.5

整除

1*2  <
const a = Math.floor(7 / 2);console.log(a);3

无穷

除法

1 2  <
const a = 1 / 0;console.log(a);Infinity

特别大

1 2  <
const a = Math.pow(2, 1024);console.log(a);Infinity

Not a Number

在一些计算中，会返回 NaN 代表不是数

除法

1 2  <
const a = 0 / 0;console.log(a);NaN

数值解析

1 2  <
const a = parseInt("abc");console.log(a);NaN

误差

1 2  <
const a = 0.1 + 0.2;console.log(a);0.30000000000000004

安全范围

1  <
console.log(Number.MAX_SAFE_INTEGER);9007199254740991

超过安全边界值的计算，会很迷幻

1 2  <3  <
const danger = Number.MAX_SAFE_INTEGER + 1;console.log(danger + 1);9007199254740992console.log(danger == danger + 1);true

字符串Strings

字符串字面量String Literals

单引号 双引号 都是字符串

1 2 
const str1 = "zzax";const str2 = 'zzax';

转义Escaping

转义

支持使用 \ 做转义

1 2  <
const a = 'single quote \' and double quote \" ';console.log(a);single quote ' and double quote " 

恢复

两个 \ 表达 一个 \

1 2  <
const a = '\\user';console.log(a);\user

字符串合成String Concatenation

基本款

使用 + 可以拼接字符串

1 2  <
const a = 'hi, ' + 'zzax';console.log(a);hi, zzax

融合款

也可以拼接其它类型

1 2  <
const a = 'port: ' + 9917;console.log(a);port: 9917

字符串插值String Interpolation

ECMAScript 6

使用 `` 包围字符串时，中央可以使用 ${} 包裹变量

达到 字符串拼接、或者模板字符串填值的效果

1 2 3  <
const number = 9917;const message = `port: ${number}`;console.log(message);port: 9917

也可以插入表达式

1 2 3  <
const number = 9917;const message = `port: ${number + 1}`;console.log(message);port: 9918

逻辑运算Logics

布尔值字面量

1 2 
const yes = true;const no = false;

大小比较

有哪些

<   >
<=  >=

案例

1  =
const result = 1 < 2;true

等值比较

有哪些

==  Abstract/Loose Equality Comparison
=== Strict Equality Comparison

案例

1  =
1 == 1true

1  =
1 == '1'true

1  =
1 === '1'false 

1  =
1 === 1true

等值比较图表

结论

尽量用三等比较

布尔值化

1 
new Boolean(x).valueOf()

可以将，非 boolean 数据类型的数据，转换为 boolean

案例

1  =
new Boolean(9917).valueOf()true 

规则

只有 以下 6 个 会变为 false，其它全会变为 true

1 2 3 4 5 6 
NaN undefinednull0""false

逻辑运算

有哪些

&& || !

&&

返回 第一个 布尔值化后 是 false 的，或者 最后一个

1  =
true && falsefalse

1  =
1 && 0 && 'a'0

1  =
1 && 2 && 33

||

返回 第一个 布尔值化后 是 true 的，或者 最后一个

1  =
true || falsetrue

1  =
1 || 0 || 'a'1

1  =
0 || undefined || nullnull

条件 与 循环 语句

if 语句

结构

1 2 3 4 5 6 7 8 9 
if (condition) {    statements...} else if (condition) {    statements...} else if (condition) {    statements...} else {    statements...}

condition

condition 的地方可以不是 布尔值类型

如果不是，会被布尔值化，作为参考标准

1 2 3 4  <
const value = 3if (value) {    console.log(value);}3

switch 语句

结构

1 2 3 4 5 6 7 8 
switch(variable) {    case value1:        ...    case value2:        ...    default:        ...}

for 语句

结构

1 2 3 
for (1; 2; 3) {    statements...}

标准 for 语句

1 2 3 
for (let i = 1; i < 10; i++) {    console.log(i);}

while 语句

结构

1 2 3 
while(condition) {    statements...}

do while 语句

结构

1 2 3 
do {    statements...} while(condition);

数组Array

实质

js 中的 array 是 java中的 list。

可以动态添加元素

案例

1 2 3 4 5 6 7 8 
const numbers = []for (let i = 0; i < 10; i ++) {    numbers.push(i);} for (let i = 0; i < numbers.length; i ++) {    console.log(numbers[i]);}

相关 API

for of 循环

可以使用 for of 循环 快速遍历 数组中的元素

1 2 3 4 
const numbers = [6, 7, 3, 8, 4]for (const item of numbers) {    console.log(item);}

数组拆解Array Destructuring

ECMAScript 6

可以拆开一个数组，并立刻用变量接住

使用前

1 2 3 4 5 
const numbers = [6, 7, 3, 8, 4]const first = numbers[0];const second = numbers[1];console.log(first);console.log(second);

使用后

1 2*3 4 
const numbers = [6, 7, 3, 8, 4]const [first, second] = numbers;console.log(first);console.log(second);

剩余元素 Rest Elements

剩余参数必须出现在最后

1 2*3 4 
const numbers = [6, 7, 3, 8, 4]const [first, ...remains] = numbers;console.log(first);console.log(remains);

数组展开Spread Operator on Array

ECMAScript 6

可以将数组的元素展开，作为其它语法部分的输入

使用前

1 2 3 4 5 6 7 8 
const numbers = [6, 7, 3, 8, 4]const capsule = [];capsule.push(0);for (const item of number) {    capsule.push(item);}capsule.push(0);console.log(capsule);

使用后

1 2 3 
const numbers = [6, 7, 3, 8, 4]const capsule = [0, ...numbers, 0];console.log(capsule);

随堂练习

1 2 3 4 5  <
const numbers = [6, 7, 3, 8, 4]const batchSize = 3; const result = ...console.log(result);[[6, 7, 3] [8, 4]]

对象Object

什么是

JS 中的结构，将多个数据 和 功能 组装在一起

构建对象

一般情况

JS 中构建对象，无需定义类。可以随意组装出对象

1 2 3 4 5 6 
const player = {    atk: 10,    hp: 10}console.log(player);console.log(player.atk);

构建空对象

1 2 
const player = {}console.log(player);

属性操作

增加属性

构建对象后，可以随时增加元素

1 2 3 
const player = {};player.atk = 10;console.log(player);

修改属性

1 2 3 
const player = {atk: 10};player.atk = 20;console.log(player);

访问不存在的属性

访问不存在的属性，会在运行时得到 undefined，而不会报错

1 2  <
const player = {atk: 10};console.log(player.def);undefined

删除属性

可以做，但实际上很少做

1 2 3 
const player = {atk: 10};delete player.atk;console.log(player);

特殊名字的属性

可以对对象增加特殊的名字的属性

构建时

1 2 3 4 
const player = {    "special prop": 10}console.log(player);

或者使用表达式 ECMAScript 6

1 2 3 4 5 
const name = "special prop";const player = {    [name]: 10}console.log(player);

访问时

1 2 3 4 
const player = {    "special prop": 10}console.log(player["special prop"]);

添加时

1 2 3 
const player = {}player["special prop"] = 10;console.log(player);

也可以用于访问一般属性

1 2 
const player = {atk: 10};console.log(player["atk"]);

for in 循环

可以使用 for in 循环 快速遍历 对象中的属性

1 2 3 4 5 6 7 
const player = {    atk: 10,    def: 20}for (const propName in player) {    console.log(`${propName} -> ${player[propName]}`)}

随堂练习

1 2 3 4 5 6 7 8  <
const obj = {    userId: "123456",    password: "123456};const names = ["userId"]; const result = ...console.log(result);{ userId: "123456" }

对象属性简写Object Property Shorthand

ECMAScript 6

使用前

1 2 3 4 5 6 7 
const atk = 10;const def = 20;const player = {    atk: atk,    def: def}console.log(player);

使用后

1 2 3 4*5*6 7 
const atk = 10;const def = 20;const player = {    atk,    def}console.log(player);

对象拆解Object Destructuring

ECMAScript 6

可以拆开一个对象，并立刻用变量接住

使用前

1 2 3 4 5 6 7 8 
const player = {    atk: 10,    def: 100}const atk = player.atk;const def = player.def;console.log(atk);console.log(def);

使用后

1 2 3 4 5*6 7 
const player = {    atk: 10,    def: 100}const {atk, def} = player;console.log(atk);console.log(def);

接住同时改名

1 2 3 4 5*6 7 
const player = {    atk: 10,    def: 100}const {atk: attack, def: defense} = player;console.log(attack);console.log(defense);

对象展开Spread Operator on Object

ECMAScript 6

可以将对象的属性展开，作为其它语法部分的输入

使用前

1 2 3 4 5 6 7 
const data = {id: "67384", name: "zzax"}const message = {    status: "ok",    id: data.id,    name: data.name}console.log(message);

使用后

1 2*3 
const data = {id: "67384", name: "zzax"}const message = { status: "ok", ...data }console.log(message);