Js Ts Base

Total Views:

[toc]

应用场景

网页应用：像 Notion、Trello 这种漂亮的 Web 工具。
浏览器插件：比如给自己做一个“去广告”或者“网页翻译”的小插件，这非常有成就感。
跨平台 App：用一套代码（如 React Native）同时做出 iOS 和安卓应用。

执行环境

 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
+---------------------------------------+
|            JavaScript 代码            |
+------------------+--------------------+
                   ↓
+---------------------------------------+
|                V8 引擎                |
| - 解析器 Parse                         |
| - 字节码 Ignition                     |
| - JIT 编译 TurboFan                   |
| - 调用栈 Call Stack                    |
| - 垃圾回收 GC                          |
+------------------+--------------------+
                   ↓（触发异步）       
+---------------------------------------+
|    浏览器 Web APIs / Node.js libuv    |
| - setTimeout                           |
| - fetch                                 |
| - 文件 IO                               |
| - 网络 IO                               |
+------------------+--------------------+
                   ↓（事件循环调度）
+---------------------------------------+
|             Event Loop                 |
|   - Microtasks（Promise…）            |
|   - Macrotasks（Timeout…）            |
+---------------------------------------+

js

书写:

在html中用"“写js代码
script 一般写在 body里面的最后
- 这样做的好处是 javaScript 代码可以在整个页面加载完成之后读取
单独写入js文件

规范:

小驼峰
常量, 全大写

js是弱类型的语言，运算时，自动转换类型

基础

调试

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
console.log(`a:${a}, b:${b}`)
console.dir()
console.table()

debugger

//查看类型
instanceof
typeof a // 不准确, array和null 都认为是 object; 

Object.prototype.toString.call(a);


this //面向对象语言中 this 表示当前对象的一个引用

基础

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// 定义
// 块级作用域：用一对花括号创建的作用域（块）。
const a = "haha";  // 作用域在{}块内, 只读常量
let a = 13;  // 作用域在{}块内
var a = "haha";  // 作用域在函数内

typeof 43;
typeof '43';
typeof ture;

// 三元运算
const canVote = age >= 18 ? "Yes" : "No";

// 赋值表达式的返回值为右边
y = (x=90+5)
y

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
/* 值和类型都判断, 优先使用, 能不用 == 就不用, 它会转换类型判断, 遗留的功能

=== 到底做了什么？（底层规则）
对原始类型
值 === 值

对引用类型
内存地址 === 内存地址

*/

jsdoc
/**
 * 
 */


// void
<a href="javascript:void(document.form.submit())">Click here to submit</a>

常用的内置数据类型

类型	用途	常用方法
Array	数组	push, pop, shift, unshift, slice, splice, map, filter, reduce
Map	键值对集合	set, get, has, delete, clear
Set	去重集合	add, has, delete, clear
Object	对象	keys, values, entries, assign
String	字符串	split, substring, slice, indexOf, replace, toUpperCase
Number	数字	parseInt, parseFloat, toFixed, isNaN
Math	数学运算	Math.max, Math.min, Math.sqrt, Math.floor, Math.ceil
Date	日期时间	now, getTime, getFullYear, getMonth
RegExp	正则表达式	test, exec, match, replace
JSON	JSON 处理	stringify, parse

Symbol

Undefine
Null

TODO: 原型链

概念创建属性方法的东西定义构造函数后结构 prototype constructor 定义的构造函数使用 Object.prototype.func1 = function(){} 为所有对象创建属性，方法函数名.prototype 为这个构造函数创建属性，方法使用方法 Object.create({})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
> let demo = [1,2,3,4,5]
undefined
> demo
[ 1, 2, 3, 4, 5 ]
> demo.splice(2,1)
[ 3 ]
> demo
[ 1, 2, 4, 5 ]
> demo.splice(1,2)
[ 2, 4 ]
> demo
[ 1, 5 ]

  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
// Array
// 只有 Array 和 Object 不用 new, 其他都需要 new
let arr = [1, 2, 3];

arr.push(4);          // [1, 2, 3, 4]
arr.pop();            // [1, 2, 3]

arr.unshift(0)  // [0, 1, 2, 3]
arr.shift()     // [1, 2, 3]

arr.slice(0, 2);     // [1, 2]
arr.splice(1, 1);    // [1, 3]
arr.map(x => x * 2); // [2, 4, 6]
arr.filter(x => x > 1); // [2, 3]
arr.reduce((a, b) => a + b, 0); // 6
//循环
fruits.forEach((item, index, array) => {console.log(item, index);});
//深拷贝
const fruitsCopy = [...fruits];
//解构
var [one, two, three] = [1,2,3];
//扩展
const nums = [1, 2, 3];
const more = [...nums, 4, 5];  // [1,2,3,4,5]
flat() //转为1维度的
//绑定属性
[].a1 = 'qq'


// 二维 array
const graph = Array.from({ length: numCourses }, () => []);
const arr = Array.from('abc');

// Map
// key 可以是任何值（函数，对象...）转json没有原生支持
let map = new Map();
map.set('a', 1);
map.get('a'); // 1
map.has('a'); // true
map.delete('a');
map.clear();
// Set
let set = new Set();
set.add(1);
set.has(1); // true
set.delete(1);
set.clear();

// Object 和 JSON
/*
Object：key 会被强制转成字符串
key类型 String, Symbol
除了json, 其他用Map

json格式:
只有属性，没有方法
属性或字符串使用双引号
*/
let obj = {a: 1, b: 2};
// 迭代方法
Object.keys(obj);   // ['a', 'b']
Object.values(obj); // [1, 2]
Object.entries(obj); // [['a', 1], ['b', 2]]

Object.assign(obj, {c: 3}); // {a: 1, b: 2, c: 3}


let obj = {"a":1,"b":2};
let jsonStr = JSON.stringify(obj, null, 2); // '{"a":1,"b":2}'
JSON.parse(jsonStr); // {a: 1, b: 2}

let jsonStr = '{"a":1,"b":2}';
let obj = JSON.parse(jsonStr); // {a: 1, b: 2}
JSON.stringify(obj, null, 2); // '{"a":1,"b":2}'


// String
let str = "hello world";
str.split(" ");        // ['hello', 'world']
str.substring(0, 5);  // 'hello'
str.indexOf("world"); // 6
str.replace("world", "JS"); // 'hello JS'
str.toUpperCase();    // 'HELLO WORLD'
// 和array转换
''.split（”“）//字符串转数组
[].join（”“）//数组转字符串
// 模板可以换行
`hi is ${age} years old`


// Number
let num = "42.5";
parseInt(num);    // 42
parseFloat(num);  // 42.5
num.toFixed(1);   // '42.5'
isNaN(num);      // false
// Math
Math.max(1, 5, 3);    // 5
Math.min(1, 5, 3);    // 1
Math.sqrt(16);       // 4
Math.floor(4.7);    // 4
Math.ceil(4.2);     // 5
// Date
let now = new Date();
now.getFullYear();  // 当前年份
now.getMonth();     // 当前月份 (0-11)
now.getDate();      // 当前日期
now.getTime();      // 时间戳
// RegExp
let regex = /hello/i;
regex.test("Hello World"); // true
"hello world".match(regex); // ['hello']
"hello world".replace(regex, "hi"); // 'hi world'

//类型转换
//num->str
String(123.54)

    
//str->num
Number('432')
parseInt('432')
parseFloat('432')

函数

创建

1
2
3
4
5
6
7
8
9
const func1 = (x,y) => {x-y};

let fun2 = function(){
    let m = grid.length, n = grid[0].length
}

function fun1(a, b = 12){
    return a * b;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// if
if (condition) {
} else {
}

// for

let arr = [3, 5, 7];

for (let i of iter) {}

for (const[i, v] of arr.entries()) {
    console.log(i, v)
}

// error
throw new Error("Not Equal");

/*
try... catch... finally...
throw...
*/

IIFE 迭代器需要显式地维护其内部状态，不推荐生成器函数 function* foo() { yield 1; yield 2; yield 3;}

多模块

ES模块

1
2
3
4
5
6
7
8
// math.js
export function add(a, b) {
  return a + b;
}

// app.js
import { add as ad} from './math.js';
console.log(ad(2, 3)); // 输出: 5

异步请求

 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

// async await
async function getUser() {
  try {
    const res = await fetch('/api/user');
    if (!res.ok) throw new Error('Request failed');
    const data = await res.json();
    return data;
  } catch (err) {
    console.error(err);
  }
}

// Promise
fetch('/api/user')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));


/*=======================out了================== */

// jQuery.ajax
$.ajax({
  url: '/api/user',
  success(res) {
    console.log(res);
  }
});

// XMLHttpRequest()
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/user');
xhr.onload = () => {
  console.log(xhr.responseText);
};
xhr.send();

CDN

是包含可分享代码库的服务器网络

类

ES5 引入原型链 ES6 引入 class

类
- class
- 封装
  - #属性
  - #方法
- 继承
  - extends

BOM

browser object model 作用控制浏览器 window. 概念 js的全局对象，表示浏览器窗口全局变量存储内容 document 弹框 alert() 消息弹框 confirm() 确认框 let name = prompt() 输入字符串 location 含义：当前url href 完整地址 protocol origin host hostname+port hostname ip的域名 port pathname 定时器间隔 x = setInterval() clearInterval(x) 倒计时 x = setTimeout() clearTiemout(x) 打开关闭页面 open() close() 移动浏览器 scrollTo(0,0) 滚动到指定位置 history back() forword() go(index) screen avaliWidth avaliHeight navigator

DOM

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

window.document

window.location

a = window.setInterval(3)
window.clearInterval(a)

a = window.setTimeout(3)
window.clearTimeout(a)

document object model 概念 html文档可以看成一颗树，DOM树作用获取各个节点的值，进行增删改查元素操作查直接获取元素的方式 document.getElementById() document.getElementByClassName() document.getElementTagName() document.getElementName() 改属性和样式 document.getAttriobute(“value”) document.setAttribute(“value”, “”) 修改值 ele.innerHTML = ‘qwer’; ele.k = v; ele.style.color = “blue”; js的事件页面加载事件操作 onunload 用户离开页面时被触发 onload 用户进入页面时被触发作用全部扫描完body后，才使用js函数。防止js运行失败鼠标事件点击 onclick ondblclick 状态进出控件边界 onmouseenter onmouseleave 在控件上 onmouseover onmousemove 在控件上移动 onmouseout 手指放下抬起 onmousedown onmouseup 键盘事件 onkeydown onkeyup onkeypress form表单事件提交 onsubmit onreset 焦点 onfocus onblur 失去焦点文本 onchange 离开输入框时 oninput 绑定js事件直接1 直接2 ele.onclick = function(){}; 间接 document.addEventListener() document.addEventListener(‘click’, function(event) { console.log(‘Clicked element ID:’, event.target.id);}); ele.addEventListener() document.removeEventListener() ele.removeEventListener() 添加删除创建子控件 document.createElement(”") document.createTextNode(“这是一个新的段落。”); 增删子控件 appendChild() removeChild()

jQuery

使用使用本地放到js文件夹里 src选择路径使用cdn 教程 What is jQuery? (tutorialsteacher.com) jquery编写位置确保 DOM 已完全加载这是在编写任何jQuery代码之前需要编写的第一件事。您始终需要检查文档是否已准备就绪，以便安全地与 DOM 进行交互原理添加jQuery属性

选择器 $("#id") $(“标签名”) $(".class名") jq的DOM 属性添加属性 $(#id).attr(“color”,“red”) 删除属性 $("#id").removeAttr(“color”) 使用 jQuery 操作 HTML 属性 (tutorialsteacher.com) 样式 $("#id").css(“color”, “blue”) class操作添加 $("#id").addClass(“b”) 删除 $("#id").removeClass(“b”) 切换 $("#id").toggleClass(“b”) 文本 $("#id").text() $("#id").html() $("#id").val() 元素母元素内部增加子元素 append() appendTo() 前增加 before() insertBefore() 后增加 after() insertAfter() 删除删除子 empty() 删除母 remove() 与原生DOM的转换原生->jq $(div1) jq->原生 div2[0] div2.get(0) 遍历 for each(fun1(i, e){}) e是原生的DOM i是下标事件直接调用 click() 点击绑定函数 mouseleaves 指定事件名调用 on(’’, function() {}) bind（“”, function（）） unbind（） one（）只执行一次事件汇总 jQuery 事件方法 (w3schools.com) DOM Manipulation Methods Reference - jQuery (tutorialsteacher.com) ajax ajax 示例参数 type get post put delete jQuery.ajax() | jQuery API Documentation get post load 动画默认 $("#div1").show(3000) $("#div1").hide(3000) $("#div1").toggle(3000) 切换隐藏和显示自定义 $("#div1").animate(a, b, c) 折叠收起

ts

所有合法的 JavaScript 代码，直接复制粘贴到 .ts 文件里，就是合法的 TypeScript 代码； TS 只是比 JS 多了「类型注解」，其余写法完全一致

类型注解

常用的类型注解

string
number
boolean
unknown
void

类型注解怎么使用？

优先让 TypeScript 推断：在声明变量并直接赋值时，通常可以省略类型注解，让 TS 自动推断。
明确函数签名
- 函数的参数和返回值类型建议明确标注。
- 空数组初始化

运行

TypeScript 源代码，它不能直接被执行，需要转换为 JavaScript

1
2
3
4
5
6
7
8
9
# 无.js 文件生成，所有编译过程在内存中完成
npm install -g ts-node
ts-node xxxx.ts


# .js 文件生成, node 运行 js
npm install -g typescript
tsc xxxx.ts
node xxxx.js

ts特有语法

接口（Interfaces）：定义对象的结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// 最直接的方式：使用接口 (Interface)，更易于复用
interface User {
  name: string;
  age: number;
  isStudent?: boolean; // 可选属性，用 ? 标记
  readonly id: number; // 只读属性，初始化后不能修改
}

let user: Person = { name: '李四', age: 30, id: 1 };
user.age = 31; // ✅ 可以修改
user.id = 2; // ❌ 错误：id是只读的

泛型（Generics）：创建可复用的组件

1
2
3
function identity<T>(arg: T): T {
  return arg;
}

枚举（Enums）：定义一组命名常量

1
enum Color { Red, Green, Blue }