前端指南
Seognil LC
2021-08-11
目录

JavaScript 语言基础 （2021）

JavaScript 语言基础 （2021）

# 写在前面

# 新语法 TLDR

如果你已经比较熟悉 JavaScript 了，这里有一些最近新标准中新增的语法，以防你看到类似的语法不知道该怎么搜它们…

# 很少用到或建议别用

历史遗毒、糟粕，或有其他实现方式，看到尽量绕行。

# 教材

# 概况

# JavaScript 生态

# 术语表

# Node.js 安装和运行 （Mac）

brew install node
npm -g i pnpm

node -v
npm -v
pnpm -v

node
> 1+1
> .exit

node script.js
1
2
3
4
5
6
7
8
9
10
11
12
brew install n

n ls
sudo n 14
sudo n 16
1
2
3
4
5
npm install -g nrm

nrm ls
nrm use taobao
1
2
3
4
npm init

# npm
npm i -g @vue/cli # 全局安装
npm init # 新建一个项目
npm i lodash # 在项目中安装一个包
npm un lodash # 在项目中卸载一个包
1
2
3
4
5
6
7

# JavaScript 语言基础知识体系

# 语言特性

  • 语言特性
    • 动态类型，弱类型
    • 基于原型的类继承
    • 函数是一等公民
      • 函数也是 Object
      • 高阶函数
      • 函数没有重载
    • 单线程，非阻塞（EventLoop 队列）
    • 高级语言，JIT（Just-In-Time）编译

# 基本语法

# Runtime

# 原始数据类型

# 引用类型 对象 数组

# 函数

# Class

# 部分其他内置对象

# 异步 事件循环

# 模块化

# JavaScript 代码片段

# ES5 基本语法

// 单行注释

/* 注释 */

/*
  多行注释
  多行注释
*/

// * ---------------- 变量

var a = '1';
var empty; // => undefiend 表示未赋值

// * ---------------- 字符串、运算、显式类型转换、方法调用

var str = 'hello' + ' ' + 'world!'; // => 'hello world!'
String(233); // => '233'
str.split(' '); // => ["hello", "world!"]

// * ---------------- 数字、运算优先级（括号）、特殊值、位运算

var num = 1 - ((3 + 1.5) * 4) / 2; // => 8
Number('2'); // => 2
(2).toFixed(3); // => "2.000"

var na = 'oh' / 'no'; // => NaN (not a number)
Infinity; // => 无穷大

((1 & 2) | 3) << 2; // => 12 (0b1100)

// * ---------------- 布尔值、逻辑运算、相等性、隐式类型转换

var bo = (true && false) || !'str'; // => false
Boolean(42); // => true

+0 <= -0; // => true
0 == '0'; // => true
0 === '0'; // => false
null === undefined; // => false

// * ---------------- 数组、字面量声明

var arr = [1, 'hello'];
var arr2 = new Array(3); // => [empty * 3]
arr.length; // => 2

var falsy = [0, [], '', false, null, undefined];

// * ---------------- 对象、嵌套对象、成员调用

var obj = {
  num: 1024,
  str: 'emmm',
  f: function (a, b) {
    console.log(a, b);
  },
  mix: { key: 'value', arr: [1, { k: 'v' }] },
};

var another = obj.num; // => 1024
obj.f(1, obj.str); // => 1 "emmm"

// * ---------------- 函数、参数、运行、返回值、上下文绑定

function run(a, b) {
  console.log('ahh', a, b); // => arr hello world
  return 'complete';
}
var result = run('hello', 'world'); // => 'complete'

run.call(obj, 'hello', 'world');
run.apply(obj, ['hello', 'world']);

var boundRun = run.bind(obj);
boundRun('hello', 'world');

// * ---------------- 逻辑流

if (true) console.log('inline');

if (false) {
  console.log('case 1');
} else if (2 > 3) {
  console.log('case 2');
} else {
  console.log('case 3');
}

// * switch
var score = 'A';
switch (score) {
  case 'A':
    console.log('Good');
    break;
  case 'B':
    console.log('Nice');
    break;
  default:
    console.log('Nope');
    break;
}

// * for
for (var i = 0; i < 3; i++) {
  console.log(i); // 打印 3 次
}

// * while
while (Math.random() < 0.7) {
  console.log('runned'); // 当条件为 true 时执行
}

// * ---------------- 类、this、prototype

function Legacy(arg) {
  this.value = arg;
}
Legacy.prototype = {
  log: function () {
    console.log('value is:', this.value);
  },
};

var inst = new Legacy(2); // => Legacy {value: 2}
inst.value; // => 2
inst.log(); // => value is: 2

// * ---------------- getter、setter

var obj2 = {
  get myValue() {
    return this._val;
  },
  set myValue(v) {
    this._val = 'hello ' + v;
  },
};

console.log(obj2.myValue); // => undefined
obj2.myValue = 'world';
console.log(obj2.myValue); // => hello world

// * ---------------- 基本包装类型、原型链、类型

'hello'.split(); // => ["hello"]
'hello'.split === String.prototype.split; // true
typeof 2; // => 'number'
typeof 'str'; // => 'string'
typeof [1, 2]; // => 'object'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

# ES6+ 新增语法

// * ---------------- 显式的块级作用域
{
  // console.log(num);
  // let 和 const 会有暂时性死区现象
  // 提升了声明，但是没有赋值，取值会报错
  // => ReferenceError: Cannot access 'num' before initialization

  // * ---------------- 声明
  let num = 2;
  const str = `hello ${num}`; // => 'hello 2' （模板字符串）

  let obj = {
    k: 1,
    num, // => 2 （对象属性简写，将自动使用上下文中的同名变量）

    fn1: function () {},
    fn2: () => {},
    fn3() {},
  };

  // * ---------------- 箭头函数、默认值
  const fn = (a, b = 666) => console.log(a, b);
  fn(233); // => 233 666

  // * ---------------- 类
  class MyClass extends Object {
    constructor(val) {
      super(val);
      this.val = val;
    }
    log() {
      console.log('really', this.val);
    }
  }

  const inst = new MyClass(666);
  inst.log(); // => really 666

  // * ---------------- 解构赋值（可嵌套）、剩余参数
  const [a, b, ...c] = [1, 2, 3, 4, 5]; // => a=1, b=2, c=[3, 4, 5]
  const { toString, valueOf } = Object;

  const arr = [...c]; // => [3, 4, 5] （新的数组）

  const fn2 = (a, ...rest) => console.log(rest);
  fn2(1, 2, 3); // => [2, 3]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# Beyond ES6

// * ---------------- 空值合并 nullish coalescing
{
  const val = 0;
  const a = val || 1; // => 1
  const a = val ?? 1; // => 0
}
{
  const val = null;
  const a = val || 1; // => 1
  const a = val ?? 1; // => 1
}

// * ---------------- 可选链 optional chaining
{
  const a = null;
  const b = a?.key; // => null
}
{
  const a = { key: 1 };
  const b = a?.key; // => 1
}

// * ---------------- 赋值运算
{
  let a = true;
  let b = false;
  b &&= a; // => false
}
{
  let a = null;
  let b = 1;
  b ??= a; // => 1
}

// * ---------------- BigInt
{
  123456789012345678901234567890n;
  1n + 2n; // => 3n
}

// * ---------------- Generator
{
  function* generateSequence() {
    yield 1;
    yield 2;
    return 3;
  }

  let generator = generateSequence();

  generator.next(); // => { value: 1, done: false };
  generator.next(); // => { value: 2, done: false };
  generator.next(); // => { value: 3, done: true };
  generator.next(); // => { value: undefined, done: true };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
#编程语言#JavaScript#基础
上次更新: Jan 29, 2022 6:24 PM
最近更新
01
Linux Shell 快速入门笔记
11-18
02
我的 Web 前端开发知识体系 （2022）
01-29
03
游戏环境研究笔记（2022-01）
01-16
更多文章>
Theme by Vdoing | Copyright © 2019-2022 Seognil LC | MIT License