基础运算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 
a = 1;a = "1";

四种变量声明

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

变量吊起Hoisting

不支持的

一般情况下，变量 在赋值/声明前使用会出错

1!2 
console.log(a);a = 1;

支持的

使用 var 声明的，可以在声明前使用，此时会拿到 undefined

1 2  <
console.log(a);var a = 1;undefined  

作用域限制

被文件限制

不带关键字的变量声明，从第一次赋值之后，就可以在同文件下任何地方使用

1 2 3 4 5  <
function f() {    a = 1;}f();console.log(a);  1

被函数限制

var 声明的变量，可以活过各种语句，但是不能超出函数

1 2 3 4 5 6 7 8!
function f() {    if (true) {        var a = 1;    }    console.log(a);}f();console.log(a);

被大括号限制

let/const 声明的变量，不能活过包含着它最近的大括号

1 2 3 4 5 6!7 8 9!
function f() {    if (true) {        let a = 1;        console.log(a);    }    console.log(a);}f();console.log(a);

重复定义

使用 const，let 声明的变量，在声明后，有效作用域内，不能重复定义这个变量

1 2! <
let a = 1;let a = 3;SyntaxError: Identifier 'a' has already been declared

使用 var 或 不使用关键字声明的变量，在声明后，可以在有效作用域内，重复声明这个变量

1 2 3 
var a = 1;var a = 3;console.log(a);

常量Constants

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

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

对比

区别对比表

推荐

推荐首选 const

然后选择 let

环境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);Infinity

数值解析

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

误差

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

Math

一些常用的函数都在这里

最大值

1 2  <
const a = Math.max(1, 2, 3);console.log(a);3

次方

1 2  <
const a = Math.pow(2, 3);console.log(a);8

随机数

1 2  <
const a = Math.random();console.log(a);0.785768915867632

字符串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

换行

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

字符串合成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

String API

参考网址

逻辑运算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);

对象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]}`)}

对象属性简写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);

函数Functions

样本

1 2 3 4 5 
function add(v1, v2) {    return v1 + v2;} add(1, 2)

分析

无参数类型校验，

无返回值类型声明，

文件里直接写，写了就能调

上下均可调用

1 2 3 4 5  < <
f1();function f1() {    console.log('1');}f1();22

重复声明

函数可以重复声明，声明后，在下方的函数生效，上方的失效

1 2 3 4 5 6 7  <
function f1() {    console.log('1');}function f1(value) {    console.log('2');}f1();2

相当于 js 中的函数 同名的只能出现一个

二次扫描

js 在执行代码时，会产生两次扫描

第一次，预扫描

扫描 所有的 var 和 function 声明

扫后，function 的 名字指向最后一次出现的函数执行代码

var 的 名字 存储 undefined

第二次，执行

再开始逐一执行代码

案例

1 2 3 4 5 6 
console.log('start');function f1() {    console.log('1');}var a = 1;f1();

1 2 3 4 5 6 
console.log('start');function f1() {    console.log('1');}var a = 1;f1();

1 2 3 4 5 6 
console.log('start');function f1() {    console.log('1');}var a = 1;f1();

1 2 3 4 5 6 
console.log('start');function f1() {    console.log('1');}var a = 1;f1();

超出传递

参数可以超出传递，不会报错

1 2 3 4 5  < <
function f(a, b) {    console.log(a);    console.log(b);}f(1, 2, 3);12

arguments

使用 arguments 依然可以找到超出传递的参数

1 2 3 4+5 6  < < <
function f(a, b) {    console.log(a);    console.log(b);    console.log(arguments[2]);}f(1, 2, 3);123

传递不足

参数可以传递不足，不会报错

函数里会得到 undefined

1 2 3 4 5  < <
function f(a, b) {    console.log(a);    console.log(b);}f(1);1undefined

默认参数值Default Parameter Values

ECMAScript 6

当传递不足时，使用默认值

1 2 3 4 5  < <
function f(a = 3, b = 4) {    console.log(a);    console.log(b);}f(1);14

剩余参数Rest Parameters

ECMAScript 6

... 开头的参数，可以接收传参时，剩余的参数，做为一个数组

1 2 3 4 5  < <
function f(a, ...rests) {    console.log(a);    console.log(rests);}f(1, 2, 3);1[2, 3]

数组展开在参数上

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*4 
const numbers = [6, 7, 3, 8, 4]const capsule = [];capsule.push(0, ...numbers, 0);console.log(capsule);

接收但没有返回

如果接收的函数，在调用时没有返回值

会接收到 undefined

1 2 3 4 5 6  =7  =
function f(a) {    if (a === 1) {        return 'returned';    }}var result1 = f(1);'returned'var result2 = f(2);undefined

多返回值

JS 很多函数中 都使用了 object 达到多返回值的效果

1 2 3 4 5 6 7 8 
function pointZero() {    return {        x: 0,        y: 0    }}console p1 = pointZero();console.log(p1);

API 补充

命令行输入

node js 原生态的输入，需要一些之后的知识点

 >
npm init 

 >
npm install readline-sync

1 2 
const input = require('readline-sync');const line = input.prompt();