JavaScript · Magic_sword2

[TOC] # 简介说明 原文链接： - [JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference) ``` 版本：JavaScript 作用：具有函数优先的轻量级，解释型或即时编译型的编程语言 ``` # 基本语法 # ? : ***** 三元判断符 # ? . ***** 对象有属性则调用没有则忽略，浏览器环境有效 # ?? ***** 空值合并运算符，当左侧返回null或者undefined，执行右侧返回值 # ...args ***** 展开运算符，可以将迭代对象展开 ### 示例内容 1. 使用案例 ``` var a, b, rest; [a, b] = [10, 20]; console.log(a); // expected output: 10 console.log(b); // expected output: 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // expected output: [30,40,50] [..."abc"] // expected output: ["a","b","c"] ``` # ( , ) ***** 逗号表达式，从左往右逐个计算表达式，它的值为最后一个表达式（也即表达式n）的值 # ()=>{}/()=>() ***** 箭头函数，没有this，没有arguments对象，小括号直接返回里面内容 # {}={}/[]=[] ***** 解构赋值 ### 示例内容 1. 使用案例 ``` 数组案例： let a=12,b=13 [a,b]=[b,a] a 对象案例：同理 ``` # \<\< ***** 左移动运算符，往左移动n位相当于乘2的n次方 ### 示例内容 1. 使用案例 ``` 15 << 2 返回值：60 ``` # \>\> ***** 右移动运算符，往右移动n位相当于除2的n次方 ### 示例内容 1. 使用案例 ``` 128 >> 2 返回值：64 ``` # \>\>\> ***** 无符号向右移位 # && ***** 逻辑与 # || ***** 逻辑或 # async ***** 创建一个异步函数 # await ***** 等待一个promise对象 ### 示例内容 1. 使用案例 ``` function say() { return new Promise(function (resolve, reject) { setTimeout(function () { resolve(158); },3000); }); } async function demo() { const v = await say(); console.log(v); const z = await say(); console.log(z); } demo(); ``` # break ***** 跳出当前代码块 ### 示例内容 1. 使用案例 ``` break ``` # class ***** es6中新定义的类的创建方式 ### 示例内容 1. static ``` static 关键字只能修饰静态方法 static get 函数名获取属性 static set 函数名设置属性 ``` # const ***** 定义常量 ### 示例内容 1. 使用案例 ``` const i = 1; ``` 2. 语法特点 ``` - 常量不能重新赋值 - 不能重复声明 - 块级作用域 - const 不会被预解析 ``` # continue ***** 重新开始下一次新循环 ### 示例内容 1. 使用案例 ``` continue ``` # delete ***** 释放变量内存 ### 示例内容 1. 使用案例 ``` 值类型放在栈，引用类型放在堆 let a = [1, 2, 3, 4, 5]; delete a[2]; console.log(a); ``` # export ***** 模块导出 ### 示例内容 1. 使用案例 ``` const a = 1; let b = 2; function show() { console.log(10); } show(); // 10 console.log(a); // 1 console.log(b); // 2 export default a; export { a, b as c, show } ``` 2. 导入案例 ``` import {a, b} from './js/foo.js'; console.log(a); import('./js/bar.js').then(bar => { console.log(bar); }); ``` # for ***** 循环 ### 示例内容 1. 使用案例 ``` 1. 新式写法 for (let i in [1, 2, 3]) { console.log(i); } for (let x of a) { console.log(x); } 2. 传统写法 for (let i = 0; i < [1, 2, 3].length; i++) { console.log(i); } ``` # for in ***** 遍历出来是属性 # for of ***** 遍历出来是值 ### 示例内容 1. 举例说明 ``` // 创建可迭代对象 let obj = { data: [ 'hello', 'world' ], [Symbol.iterator]() { const self = this; let index = 0; return { next() { if (index < self.data.length) { return { value: self.data[index++], done: false }; } else { return { value: undefined, done: true }; } } }; } }; ``` # func\`TemplateStringsArray\` ***** 直接传递模板字符串给函数 ### 示例内容 1. 使用案例 ``` function f(a: TemplateStringsArray) { console.log(a); } f`color:red;background:red`; ``` # if ***** 分支抉择 ### 示例内容 1. 使用案例 ``` let c = 1; if (c === 1) { } else if (c === 2) { } else { } ``` # import ***** 模块导入 ### 示例内容 1. 使用案例 ``` 注意引用标签类型 <script src="main.js" async type="module"></script> <script src="movie.js" type="module" ></script> import {a, c, show} from './trial.js'; show(); // 10 console.log(a); // 1 console.log(c); // 2 <script type="module" src="a.js"></script> ``` # import() ***** 模块导入 ### 返回类型 ``` Promise ``` ### 示例内容 1. 使用案例 ``` 注意引用标签类型 <script src="main.js" async type="module"></script> <script src="movie.js" type="module" ></script> import("a.js").then(res=>{console.log(res)}); ``` # in ***** 如果指定的属性在指定的对象或其原型链中，则in 运算符返回true。 ### 示例内容 1. 举例说明 ``` // 数组 var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); 0 in trees // 返回true 3 in trees // 返回true 6 in trees // 返回false "bay" in trees // 返回false (必须使用索引号,而不是数组元素的值) "length" in trees // 返回true (length是一个数组属性) Symbol.iterator in trees // 返回true (数组可迭代，只在ES2015+上有效) // 内置对象 "PI" in Math // 返回true // 自定义对象 var mycar = {make: "Honda", model: "Accord", year: 1998}; "make" in mycar // 返回true "model" in mycar // 返回true ``` # instanceof ***** 类型判定，并且考虑到继承关系 ### 示例内容 1. 使用案例 ``` console.log([] instanceof Object); 输出：true ``` # let ***** 定义块级作用域变量 ### 示例内容 1. 使用案例 ``` let i = 1; ``` 2. 语法特点 ``` let 允许声明一个在作用域限制在块级中的变量、语句或者表达式 - 块级作用域 - let 不能重复声明 - let 不会被预解析 ``` # return ***** 跳出当前方法 ### 示例内容 1. 使用案例 ``` return ``` # switch ***** 分支抉择 ### 示例内容 1. 使用案例 ``` let c = 1; switch (c) { case 1: console.log("a"); break; case 2: console.log("a"); break; default: console.log("a"); } ``` # label: ***** 带标签的语句，类似goto允许你在语句之间穿梭 ### 示例内容 1. 使用案例 ``` outer:while (true) { inner:while (true) { break outer; } } // 跳出循环到这里 console.log("hello") ``` # throw ***** 抛出一个异常 # try ***** 异常捕获 ### 示例内容 1. 使用案例 ``` try { } catch (e) { } finally { } ``` # typeof ***** 类型判定，输出字符，注意null是Object ### 示例内容 1. 使用案例 ``` console.log(typeof []); 输出：object ``` # var ***** 定义方法级作用域变量 ### 示例内容 1. 使用案例 ``` var i=1; ``` 2. 语法特点 ``` var 允许声明一个在作用域限制在函数中的变量、语句或者表达式 - 函数作用域 - var 声明的变量只能是全局或者整个函数块的 - var 能重复声明 - var 会被预解析 ``` # void ***** 定义函数返回undefined ### 示例内容 1. 使用案例 ``` var foo = 1; void function(){ foo = 1; }() // will assign foo a value of 1 +function(){ foo = 1; }() // same as above 当IIFE括号上一层代码不写分号会造成小括号作为上一层代码函数调用，添加void可以避免这个问题 ``` # while ***** 循环 ### 示例内容 1. 使用案例 ``` 1. 先做一次再循环 do { } while (1 === 1); 2. 循环知道满足条件 while (1 === 1) { } ``` # with ***** 将变量属性映射为当前作用域环境 ### 示例内容 1. 使用案例 ``` var env = {b: 1}; with (env) { console.log(b); } ``` 2. 变量隔离 ``` var b; void function () { var env = {}; b = 2; console.log("function " + b) // 2 with (env) { var b = 9; // 如果不定义var 进行变量提升，函数获取闭包环境中全局b console.log("with " + b) // 9 } }() console.log("global " + b); // undefined ``` # yield ***** 函数断点，生成器对象 ### 示例内容 1. 举例说明 ``` let compute = function* (a, b) { let sum = a + b; yield console.log(sum); let c = a - b; yield console.log(c); let d = a * b; yield console.log(d); let e = a / b; console.log(e); }; // 执行一下这个函数得到 Generator 实例 let generator = compute(4, 2); // 要使得函数中封装的代码逻辑得到执行，还得需要调用一次next方法。 generator.next(); ``` # super ***** 父类的引用 # new ***** 实例化对象 ### 示例内容 1. 使用案例 ``` new URL(); ``` # new.target ***** 构造函数中使用的关键字，用于判断当前实例是否为指定类型，多用于做抽象类 # globalThis ***** 包含全局的 this 值，类似于全局对象 # 特性内容 # 语句图解 ***** 语句图解 ### 示例内容 1. 思维导图 ![JS语句图](https://img.kancloud.cn/98/ce/98ce53be306344c018cddd6c083392d5_555x872.jpeg) # 关系图解 ***** 对象间原型，构造函数，原型链之间的关系 ### 示例内容 1. 使用案例 ![JS原型图解](https://img.kancloud.cn/d4/8e/d48edc69f2309cf55d4bf5dd1ea2e692_1768x992.png) # EventLoop ***** 事件循环 ### 示例内容 1. 举例说明 ![event-loop](https://img.kancloud.cn/23/36/2336375b94d479d13fc72b9e9d80bb8f_2388x2396.png) ![JS事件循环](https://img.kancloud.cn/b5/d6/b5d6cb4581eab5eb85472a4eb3b2b077_1954x1784.jpg) # 创建对象 ***** 创建对象--ES6之前的传统方式 ### 示例内容 1. 使用案例 ![JS原型继承](https://img.kancloud.cn/6a/3e/6a3eee45db2b406a88b7cfa7f564ad5e_890x3673.png) 2. jQuery创建模式 ``` let jquery = (function () { let obj = function () { return new obj.prototype.init(); }; obj.prototype = { constructor: obj, init: function () { }, }; obj.set = function () { }; obj.prototype.init.prototype = obj.prototype; return obj; })(); ``` # 继承对象 ***** 继承对象--ES6之前的传统方式 ### 示例内容 1. 使用案例 ![](https://img.kancloud.cn/4c/23/4c2357d77a06fc145d3cfe9cf0e9ba42_1062x3513.png) # 重载方法 ***** 通过闭包来实现JS方法重载，发挥多态的特性 ### 示例内容 1. 使用案例 ``` function bind_method(obj, name, fn) { let old = obj[name]; obj[name] = function (...args) { if (args.length === fn.length) { fn.apply(obj, args); } else { old.apply(obj, args); } } } let arr = [...Array(5).keys()]; bind_method(arr, "show", function () { console.log(0) }); bind_method(arr, "show", function (a) { console.log(1) }); bind_method(arr, "show", function (a, b) { console.log(2) }); arr.show(); //0 arr.show(1); //1 arr.show(1, 2); //2 ``` # 拆箱与封箱 ***** 自动拆箱与封箱 # 执行上下文 ***** ES2018中规定的执行上下文 ### 示例内容 1. 举例说明 ``` lexical environment: 词法环境，当获取变量或者this值时使用 variable environment: 变量环境，当声明变量时使用 code evaluation state: 用于恢复代码执行位置 Function: 执行的任务是函数时使用，表示正在被执行的函数 ScriptOrModule: 执行的任务是脚本或者模块时使用，表示正在被执行的代码 Realm: 使用的基础库和内置对象实例 Generator: 仅生成器上下文有这个属性，表示当前生成器 ``` # IIFE ***** 立即调用函数表达式 ### 示例内容 1. 举例说明 ``` (function () { var name = "Barry"; })(); // 无法从外部访问变量 name name // 抛出错误："Uncaught ReferenceError: name is not defined" ``` # 自动插入分号 ***** 自动插入分号 ### 示例内容 1. No Line TerminatorHere ![noLineTerminatorHere](https://img.kancloud.cn/c3/ff/c3ffbc89e049ad1901d4108c8ad88aad_1008x598.jpg)