JavaScript 备忘清单

包含最重要概念、函数、方法等的 JavaScript 备忘单。初学者的完整快速参考。

入门

介绍

JavaScript 是一种轻量级的解释型编程语言。

打印调试

// => Hello world!console.log('Hello world!');// => Hello QuickReferenceconsole.warn('hello %s','QuickReference');// 将错误消息打印到 stderrconsole.error(newError('Oops!'));

断点调试

functionpotentiallyBuggyCode(){debugger;// 做可能有问题的东西来检查，逐步通过等。}

debugger 语句调用任何可用的调试功能。

数字

letamount=6;letprice=4.99;lethome=1e2;letnum=1_000_000;// 位数过多可以用 _ 分割letm=0644;// 八进制数字 420

let 关键字

letcount;console.log(count);// => undefinedcount=10;console.log(count);// => 10

const 关键字

constnumberOfColumns=4;// TypeError: Assignment to constant...numberOfColumns=8;

变量

letx=null;letname="Tammy";constfound=false;// => Tammy, false, nullconsole.log(name,found,x);vara;console.log(a);// => undefined

字符串

letsingle='Wheres my bandit hat?';letdouble="Wheres my bandit hat?";// => 21console.log(single.length);

算术运算符

5+5=10// 加法 Addition10-5=5// 减法 Subtraction5*10=50// 乘法 Multiplication10/5=2// 除法 Division10%5=0// 取模 Modulo

注释

// 此行将表示注释/* 多行配置部署前必须更改以下配置。*/

赋值运算符

letnumber=100;// 两个语句都会加 10number=number+10;number+=10;console.log(number);// => 120

字符串插值

letage=7;// 字符串拼接'Tommy is '+age+' years old.';// 字符串插值`Tommy is ${age} years old.`;

字符串

varabc="abcdefghijklmnopqrstuvwxyz";varesc='I don\'t \n know';// \n 换行varlen=abc.length;// 字符串长度abc.indexOf("lmno");// 查找子字符串，如果不包含则 -1abc.lastIndexOf("lmno");// 最后一次出现abc.slice(3,6);// 去掉“def”，负值从后面计算abc.replace("abc","123");// 查找和替换，接受正则表达式abc.toUpperCase();// 转换为大写abc.toLowerCase();// 转换为小写abc.concat(" ",str2);// abc + " " + str2abc.charAt(2);// 索引处的字符：“c”abc[2];// 不安全，abc[2] = "C" 不起作用// 索引处的字符代码：“c”-> 99abc.charCodeAt(2);// 用逗号分割字符串给出一个数组abc.split(",");// 分割字符abc.split("");// 匹配开头字符串,如果忽略第二个参数，则从索引 0 开始匹配abc.startsWith("bc",1);// 匹配结尾的字符串,如果忽略第二个参数，则默认是原字符串长度abc.endsWith("wxy",abc.length-1);// padEnd 和 padStart 都用于填充长度，默认填充对象是空格"200".padEnd(5);// "200 ""200".padEnd(5,".");// "200.."// 重复字符"abc".repeat(2);// "abcabc"// trim、trimEnd 和 trimStart 用于去除首尾空格" ab c ".trim();// "ab c"// 数字转为十六进制 (16)、八进制 (8) 或二进制 (2)(128).toString(16);

数字

varpi=3.141;pi.toFixed(0);// 返回 3 pi.toFixed(2);// 返回 3.14 - 使用金钱pi.toPrecision(2)// 返回 3.1pi.valueOf();// 返回号码Number(true);// 转换为数字// 自 1970 年以来的毫秒数Number(newDate())// 返回第一个数字：3parseInt("3 months");// 返回 3.5parseFloat("3.5 days");// 最大可能的 JS 数Number.MAX_VALUE// 最小可能的 JS 编号Number.MIN_VALUE// -无穷Number.NEGATIVE_INFINITY// 无穷Number.POSITIVE_INFINITY

Math

constpi=Math.PI;// 3.141592653589793Math.round(4.4);// = 4 - 数字四舍五入Math.round(4.5);// = 5Math.pow(2,8);// = 256 - 2 的 8 次方 Math.sqrt(49);// = 7 - 平方根Math.abs(-3.14);// = 3.14 - 绝对，正值Math.ceil(3.14);// = 4 - 返回 >= 最小整数// = 3 - 返回 <= 最大整数Math.floor(3.99);// = 0 - 正弦Math.sin(0);// OTHERS: tan,atan,asin,acos,余弦值Math.cos(Math.PI);// = -2 - 最低值Math.min(0,3,-2,2);// = 3 - 最高值Math.max(0,3,-2,2);// = 0 自然对数Math.log(1);// = 2.7182pow(E,x) 自然对数的底数Math.exp(1);// 0 到 1 之间的随机数Math.random();// 随机整数，从 1Math.floor(Math.random()*5)+1;

全局函数

// 像脚本代码一样执行字符串eval();// 从数字返回字符串String(23);// 从数字返回字符串(23).toString();// 从字符串返回数字Number("23");// 解码 URI。 结果：“my page.asp”decodeURI(enc);// 编码 URI。 结果：“my%20page.asp”encodeURI(uri);// 解码 URI 组件decodeURIComponent(enc);// 对 URI 组件进行编码encodeURIComponent(uri);// 是一个有限的合法数isFinite();// 是一个非法数字isNaN();// 返回字符串的浮点数parseFloat();// 解析一个字符串并返回一个整数parseInt();

JavaScript 条件

操作符

true||false;// true10>5||10>20;// truefalse||false;// false10>100||10>20;// false

逻辑运算符 &&

true&&true;// true1>2&&2>1;// falsetrue&&false;// false4===4&&3>1;// true

比较运算符

1>3// false3>1// true250>=250// true1===1// true1===2// false1==='1'// false

逻辑运算符

letlateToWork=true;letoppositeValue=!lateToWork;// => falseconsole.log(oppositeValue);

空值合并运算符 ??

null??'I win';// 'I win'undefined??'Me too';// 'Me too'false??'I lose'// false0??'I lose again'// 0''??'Damn it'// ''

if Statement (if 语句)

constisMailSent=true;if(isMailSent){console.log('Mail sent to recipient');}

Ternary Operator (三元运算符)

varage=1;// => falsevarstatus=(age>=18) ? true : false;

else if

constsize=10;if(size>20){console.log('Medium');}elseif(size>4){console.log('Small');}else{console.log('Tiny');}// Print: Small

== vs ===

0==false// true0===false// false, 不同类型1=="1"// true, 自动类型转换1==="1"// false, 不同类型null==undefined// truenull===undefined// false'0'==false// true'0'===false// false

== 只检查值，=== 检查值和类型。

switch 语句

constfood='salad';switch(food){case'oyster': console.log('海的味道');break;case'pizza': console.log('美味的馅饼');break;default:
console.log('请您用餐');}

switch 多 case - 单一操作

constfood='salad';switch(food){case'oyster':
case'pizza':
console.log('美味的馅饼');break;default:
console.log('请您用餐');}

JavaScript Functions 函数

函数

// 定义函数：functionsum(num1,num2){returnnum1+num2;}// 调用函数：sum(3,6);// 9

匿名函数

// 命名函数functionrocketToMars(){return'BOOM!';}// 匿名函数constrocketToMars=function(){return'BOOM!';}

箭头函数 (ES6)

有两个参数

constsum=(param1,param2)=>{returnparam1+param2;};console.log(sum(2,5));// => 7

没有参数

constprintHello=()=>{console.log('hello');};printHello();// => hello

只有一个参数

constcheckWeight=weight=>{console.log(`Weight : ${weight}`);};checkWeight(25);// => Weight : 25

简洁箭头函数

constmultiply=(a,b)=>a*b;// => 60 console.log(multiply(2,30));

从 ES2015 开始提供箭头函数

返回关键字

// 有 returnfunctionsum(num1,num2){returnnum1+num2;}// 该函数不输出总和functionsum(num1,num2){num1+num2;}

调用函数

// 定义函数functionsum(num1,num2){returnnum1+num2;}// 调用函数sum(2,4);// 6

立即执行函数

//命名函数并立即执行一次(functionsum(num1,num2){returnnum1+num2;})(2,4)//6

函数表达式

constdog=function(){return'Woof!';}

函数参数

// 参数是 namefunctionsayHello(name){return`Hello, ${name}!`;}

函数声明

functionadd(num1,num2){returnnum1+num2;}

JavaScript 范围

范围

functionmyFunction(){varpizzaName="Margarita";// 这里的代码可以使用 PizzaName}// ❌ PizzaName 不能在这里使用

{ } 块内声明的变量

{letx=2;}// ❌ x 不能在这里使用{varx=2;}// ✅ x 能在这里使用

varx=2;// Global scopeletx=2;// Global scopeconstx=2;// Global scope

ES6 引入了两个重要的新 JavaScript 关键字：let 和 const。这两个关键字在 JavaScript 中提供了块作用域。

块作用域变量

constisLoggedIn=true;if(isLoggedIn==true){conststatusMessage='Logged in.';}// Uncaught ReferenceError...// 未捕获的引用错误...console.log(statusMessage);

全局变量

// 全局声明的变量constcolor='blue';functionprintColor(){console.log(color);}printColor();// => blue

`let` vs `var`

for(leti=0;i<3;i++){// 这是“let”的最大范围// i 可以访问 ✔️}// i 不能访问 ❌

for(vari=0;i<3;i++){// i 可以访问 ✔️}// i 可以访问 ✔️

var 的范围是最近的函数块，而 let 的范围是最近的封闭块。

带闭包的循环

// 打印三次，不是我们的意思。for(vari=0;i<3;i++){setTimeout(_=>console.log(i),10);}

// 按预期打印 0、1 和 2。for(letj=0;j<3;j++){setTimeout(_=>console.log(j),10);}

变量使用 let 有自己的副本，变量有使用 var 的共享副本。

JavaScript Arrays

方法

:-	:-
`Array.from()`	类似数组对象创建一个新的 #
`Array.isArray()`	值是否是一个 Array #
`Array.of()`	创建一个新数组示例 #
`.at()`	返回值索引对应的元素 #
`.concat()`	合并两个或多个数组 #
`.copyWithin()`	浅复制替换某个位置 #
`.entries()`	新的 Array Iterator 对象 #
`.every()`	是否能通过回调函数的测试 #
`.fill()`	固定值填充一个数组中 #
`.filter()`	返回过滤后的数组 #
`.find()`	第一个元素的值 #
`.findIndex()`	第一个元素的索引 #
`.findLast()`	最后一个元素的值 #
`.findLastIndex()`	最后一个元素的索引 #
`.flat()`	扁平化嵌套数组 #
`.flatMap()`	与 flat 相同 #
`.forEach()`	升序循环执行 #
`.includes()`	是否包含一个指定的值 #
`.indexOf()`	找到给定元素的第一个索引 #
`.join()`	数组链接成一个字符串 #
`.keys()`	每个索引键 #
`.lastIndexOf()`	给定元素的最后一个索引 #
`.map()`	循环返回一个新数组 #
`.pop()`	`删除`最后一个元素 #
`.push()`	元素`添加`到数组的末尾 #
`.reduce()`	循环函数传递当前和上一个值 #
`.reduceRight()`	类似 `reduce` 从右往左循环 #
`.reverse()`	数组元素的位置颠倒 #
`.shift()`	`删除`第一个元素 #
`.slice()`	`提取`元素 #
`.some()`	至少有一个通过测试函数 #
`.sort()`	元素进行排序 #
`.splice()`	`删除`或`替换`或`添加`元素 #
`.toLocaleString()`	字符串表示数组中的元素 #
`.toString()`	返回字符串 #
`.unshift()`	元素`添加`到数组的`开头`#
`.values()`	返回新的 ArrayIterator 对象 #

数组

constfruits=["apple","dew","banana"];// 不同的数据类型constdata=[1,'chicken',false];

属性 .length

constnumbers=[1,2,3,4];numbers.length// 4

索引

// 访问数组元素constmyArray=[100,200,300];console.log(myArray[0]);// 100console.log(myArray[1]);// 200

可变图表

	添加	删除	开始	结束
`push`	✅			✅
`pop`		✅		✅
`unshift`	✅		✅
`shift`		✅	✅

方法 .push()

// 添加单个元素：constcart=['apple','orange'];cart.push('pear');// 添加多个元素：constnumbers=[1,2];numbers.push(3,4,5);

将项目添加到末尾并返回新的数组长度。

方法 .pop()

constfruits=["apple","dew","banana"];constfruit=fruits.pop();// 'banana'console.log(fruits);// ["apple", "dew"]

从末尾删除一个项目并返回已删除的项目。

方法 .shift()

constarray1=[1,2,3];constfirstElement=array1.shift();console.log(array1);// 输出: Array [2, 3]console.log(firstElement);// 输出: 1

从头删除一个项目并返回已删除的项目。

方法 .some()

constarray=[1,2,3,4,5];// 检查元素是否为偶数consteven=(element)=>element%2===0;console.log(array.some(even));// 预期输出: true

方法 .concat()

constnumbers=[3,2,1]constnewFirstNumber=4// => [ 4, 3, 2, 1 ][newFirstNumber].concat(numbers)// => [ 3, 2, 1, 4 ]numbers.concat(newFirstNumber)

如果你想避免改变你的原始数组，你可以使用 concat。

方法 .splice()

constmonths=['Jan','March'];months.splice(1,0,'Feb');// 在索引 1 处插入console.log(months);// 预期输出: Array ["Jan", "Feb", "March"]months.splice(2,1,'May');// 替换索引 2 处的 1 个元素console.log(months);// 预期输出: Array ["Jan", "Feb", "May"]

方法 .unshift()

letcats=['Bob'];// => ['Willy', 'Bob']cats.unshift('Willy');// => ['Puff', 'George', 'Willy', 'Bob']cats.unshift('Puff','George');

将项目添加到开头并返回新的数组长度。

方法 .filter()

constwords=['js','java','golang'];constresult=words.filter(word=>{returnword.length>3});console.log(result);// 预期输出: Array ["java", "golang"]

JavaScript 循环

While 循环

while(condition){// 要执行的代码块}leti=0;while(i<5){console.log(i);i++;}

反向循环

constfruits=["apple","dew","berry"];for(leti=fruits.length-1;i>=0;i--){console.log(`${i}. ${fruits[i]}`);}// => 2. berry// => 1. dew// => 0. apple

Do...While 语句

x=0i=0do{x=x+i;console.log(x)i++;}while(i<5);// => 0 1 3 6 10

For 循环

for(leti=0;i<4;i+=1){console.log(i);};// => 0, 1, 2, 3

遍历数组

for(leti=0;i<array.length;i++){console.log(array[i]);}// => 数组中的每一项

Break

for(leti=0;i<99;i+=1){if(i>5)break;console.log(i)}// => 0 1 2 3 4 5

Continue

for(i=0;i<10;i++){if(i===3){continue;}text+="The number is "+i+"<br>";}

嵌套循环

for(leti=0;i<2;i+=1){for(letj=0;j<3;j+=1){console.log(`${i}-${j}`);}}

for...in 循环

constfruits=["apple","orange","banana"];for(letindexinfruits){console.log(index);}// => 0// => 1// => 2

label 语句

varnum=0;
outPoint:
for(vari=0;i<10;i++){for(varj=0;j<10;j++){if(i==5&&j==5){continue outPoint;}num++;}}alert(num);// 95

从 alert(num) 的值可以看出，continue outPoint; 语句的作用是跳出当前循环，并跳转到 outPoint（标签）下的 for 循环继续执行。

for...of 循环

constfruits=["apple","orange","banana"];for(letfruitoffruits){console.log(fruit);}// => apple// => orange// => bananafor(let[index,value]offruits.entries()){console.log(index,value);}// => 0 apple// => 1 orange// => 2 banana

for await...of

asyncfunction*asyncGenerator(){vari=0;while(i<3){yieldi++;}}(asyncfunction(){forawait(numofasyncGenerator()){console.log(num);}})();// 0// 1// 2

可选的 for 表达式

vari=0;for(;;){if(i>3)break;console.log(i);i++;}

JavaScript 迭代器(Iterators)

分配给变量的函数

letplusFive=(number)=>{returnnumber+5;};// f 被赋值为 plusFiveletf=plusFive;plusFive(3);// 8// 由于 f 具有函数值，因此可以调用它。f(9);// 14

回调函数

constisEven=(n)=>{returnn%2==0;}letprintMsg=(evenFunc,num)=>{constisNumEven=evenFunc(num);console.log(`${num} is an even number: ${isNumEven}.`)}// Pass in isEven as the callback functionprintMsg(isEven,4);// => The number 4 is an even number: True.

数组方法 .reduce()

constnumbers=[1,2,3,4];constsum=numbers.reduce((accumulator,curVal)=>{returnaccumulator+curVal;});console.log(sum);// 10

数组方法 .map()

constmembers=["Taylor","Donald","Don","Natasha","Bobby"];constannouncements=members.map((member)=>{returnmember+" joined the contest.";});console.log(announcements);

数组方法 .forEach()

constnumbers=[28,77,45,99,27];numbers.forEach(number=>{console.log(number);});

数组方法 .filter()

constrandomNumbers=[4,11,42,14,39];constfilteredArray=randomNumbers.filter(n=>{returnn>5;});

JavaScript 对象(Objects)

访问属性

constapple={color: 'Green',price: {bulk: '$3/kg',smallQty: '$4/kg'}};console.log(apple.color);// => Greenconsole.log(apple.price.bulk);// => $3/kg

命名属性

// 无效键名示例consttrainSchedule={// 由于单词之间的空格而无效。platformnum: 10,// 表达式不能是键。40-10+2: 30,// 除非用引号括起来，否则 + 号无效。+compartment: 'C'}

不存在的属性

constclassElection={date: 'January 12'};console.log(classElection.place);// undefined

可变的

conststudent={name: 'Sheldon',score: 100,grade: 'A',}console.log(student)// { name: 'Sheldon', score: 100, grade: 'A' }deletestudent.scorestudent.grade='F'console.log(student)// { name: 'Sheldon', grade: 'F' }student={}// TypeError: TypeError：分配给常量变量。

赋值简写语法

constperson={name: 'Tom',age: '22',};const{name, age}=person;console.log(name);// 'Tom'console.log(age);// '22'

删除运算符

constperson={firstName: "Matilda",hobby: "knitting",goal: "learning JavaScript"};deleteperson.hobby;// 或 delete person['hobby'];console.log(person);/*{ firstName: "Matilda" goal: "learning JavaScript"} */

对象作为参数

constorigNum=8;constorigObj={color: 'blue'};constchangeItUp=(num,obj)=>{num=7;obj.color='red';};changeItUp(origNum,origObj);// 将输出 8，因为整数是按值传递的。console.log(origNum);// 由于传递了对象，将输出“red”// 通过引用，因此是可变的。console.log(origObj.color);

工厂函数

// 一个接受 'name'，'age' 和 'breed' 的工厂函数，// 参数返回一个自定义的 dog 对象。constdogFactory=(name,age,breed)=>{return{name: name,age: age,breed: breed,bark(){console.log('Woof!');}};};

速记对象创建

constactivity='Surfing';constbeach={ activity };console.log(beach);// { activity: 'Surfing' }

this 关键字

constcat={name: 'Pipey',age: 8,whatName(){returnthis.name}};console.log(cat.whatName());// => Pipey

方法

constengine={// 方法简写，有一个参数start(adverb){console.log(`The engine starts up ${adverb}...`);},// 不带参数的匿名箭头函数表达式sputter: ()=>{console.log('The engine sputters...');},};engine.start('noisily');engine.sputter();

Getters 和 setters

constmyCat={_name: 'Dottie',getname(){returnthis._name;},setname(newName){this._name=newName;}};// 引用调用 getterconsole.log(myCat.name);// 赋值调用 settermyCat.name='Yankee';

Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

// 用于拦截对象的读取属性操作。consthandler={get: function(obj,prop){returnpropinobj ? obj[prop] : 37;}};constp=newProxy({},handler);p.a=1;p.b=undefined;console.log(p.a,p.b);// 1, undefinedconsole.log('c'inp,p.c);// false, 37

语法

constp=newProxy(target,handler)

target 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

方法

:-	:-
`Proxy.revocable()`	创建一个可撤销的Proxy对象 #

handler 对象的方法

:-	:-
`handler.getPrototypeOf()`	Object.getPrototypeOf 方法的捕捉器 #
`handler.setPrototypeOf()`	Object.setPrototypeOf 方法的捕捉器 #
`handler.isExtensible()`	Object.isExtensible 方法的捕捉器 #
`handler.preventExtensions()`	Object.preventExtensions 方法的捕捉器 #
`handler.getOwnPropertyDescriptor()`	Object.getOwnPropertyDescriptor 方法的捕捉器 #
`handler.defineProperty()`	Object.defineProperty 方法的捕捉器 #
`handler.has()`	in 操作符的捕捉器 #
`handler.get()`	属性读取操作的捕捉器 #
`handler.set()`	属性设置操作的捕捉器 #
`handler.deleteProperty()`	delete 操作符的捕捉器 #
`handler.ownKeys()`	Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器 #
`handler.apply()`	函数调用操作的捕捉器 #
`handler.construct()`	new 操作符的捕捉器 #

Reflect

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers (en-US)的方法相同。Reflect不是一个函数对象，因此它是不可构造的。

// 检测一个对象是否存在特定属性constduck={name: 'Maurice',color: 'white',greeting: function(){console.log(`Quaaaack! My name is ${this.name}`);}}Reflect.has(duck,'color');// trueReflect.has(duck,'haircut');// false

静态方法

:-	:-
`Reflect.apply(target, thisArgument, argumentsList)`	对一个函数进行调用操作，同时可以传入一个数组作为调用参数。和 Function.prototype.apply() 功能类似 #
`Reflect.construct(target, argumentsList[, newTarget])`	对构造函数进行 new 操作，相当于执行 new target(...args) #
`Reflect.defineProperty(target, propertyKey, attributes)`	和 Object.defineProperty() 类似。如果设置成功就会返回 true #
`Reflect.deleteProperty(target, propertyKey)`	作为函数的delete操作符，相当于执行 delete target[name] #
`Reflect.get(target, propertyKey[, receiver])`	获取对象身上某个属性的值，类似于 target[name] #
`Reflect.getOwnPropertyDescriptor(target, propertyKey)`	类似于 Object.getOwnPropertyDescriptor()。如果对象中存在该属性，则返回对应的属性描述符，否则返回 undefined #
`Reflect.getPrototypeOf(target)`	类似于 Object.getPrototypeOf() #
`Reflect.has(target, propertyKey)`	判断一个对象是否存在某个属性，和 in 运算符的功能完全相同 #
`Reflect.isExtensible(target)`	类似于 Object.isExtensible() #
`Reflect.ownKeys(target)`	返回一个包含所有自身属性（不包含继承属性）的数组。(类似于 Object.keys(), 但不会受enumerable 影响) #
`Reflect.preventExtensions(target)`	类似于 Object.preventExtensions()。返回一个Boolean #
`Reflect.set(target, propertyKey, value[, receiver])`	将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true #
`Reflect.setPrototypeOf(target, prototype)`	设置对象原型的函数。返回一个 Boolean，如果更新成功，则返回 true #

JavaScript this 绑定

隐式绑定

functionfoo(){console.log(this)}letobj1={name: "obj1",foo: foo}letobj2={name: "obj2",obj1: obj1}obj2.obj1.foo()// [Object obj1]

隐式丢失

leta=obj2.obj1.foo()a()// Window

指定隐式绑定：必须在调用的对象内部有一个对函数的引用（比如一个属性）
将以上调用赋值给一个变量，结果最终会是 Window
在 a 被调用的位置没有进行过任何显示绑定，最终全局对象 window 会调用它（Window.a）

显示绑定

functiongetName(a1,a2){console.log("此人"+this.name,"岁数"+(a1+a2))}letperson={name: "zhangsan"}

call

call 第一个参数接受 this 作用域，剩余参数传递给其调用的函数

getName.call(person,18,12)

apply

apply 第一个参数与 call 相同，第二个参数是其调用函数的参数数组

getName.apply(person,[18,12])

bind

bind 函数会返回一个新函数

getName.bind(person,18,12)()//或者可以这样getName.bind(person)(18,12)//或者这样getName.bind(person).bind(null,18)(12)

内置函数中的 this

数组中的一些方法，类似于 map、forEach 等，可以自己设置绑定 this

constobj={name: "zhangsan"}constarray=[1,2,3];array.map(function(value){console.log(this.name)},obj)// zhangsan x3

其中一些全局对象，如 setTimeout 等，它们和未显示绑定 this 的部分数组方法一样，都会指向全局对象（Window）

setTimeout(function(){console.log(this)},1000)// Window

JavaScript Classes

静态方法/字段

classDog{constructor(name){this._name=name;}introduce(){console.log('This is '+this._name+' !');}// 静态方法staticbark(){console.log('Woof!');}static{console.log('类静态初始化块调用');}}constmyDog=newDog('Buster');myDog.introduce();// 调用静态方法Dog.bark();

公有静态字段

classClassStaticField{staticstaticField='static field'}console.log(ClassStaticField.staticField)// 预期输出值："static field"

Class

classSong{constructor(){this.title;this.author;}play(){console.log('Song playing!');}}constmySong=newSong();mySong.play();

extends

// Parent classclassMedia{constructor(info){this.publishDate=info.publishDate;this.name=info.name;}}// Child classclassSongextendsMedia{constructor(songData){super(songData);this.artist=songData.artist;}}constmySong=newSong({artist: 'Queen',name: 'Bohemian Rhapsody',publishDate: 1975});

Class Constructor

classSong{constructor(title,artist){this.title=title;this.artist=artist;}}constmySong=newSong('Bohemian Rhapsody','Queen');console.log(mySong.title);

Class Methods

classSong{play(){console.log('Playing!');}stop(){console.log('Stopping!');}}

JavaScript Modules

Export / Import

// myMath.js// 默认导出 Default exportexportdefaultfunctionadd(x,y){returnx+y}// 正常导出 Normal exportexportfunctionsubtract(x,y){returnx-y}// 多重导出 Multiple exportsfunctionmultiply(x,y){returnx*y}functionduplicate(x){returnx*2}export{multiply,duplicate}

import 加载模块

// main.jsimportadd,{subtract,multiply,duplicate}from'./myMath.js';console.log(add(6,2));// 8 console.log(subtract(6,2))// 4console.log(multiply(6,2));// 12console.log(duplicate(5))// 10// index.html<scripttype="module"src="main.js"></script>

Export Module

// myMath.jsfunctionadd(x,y){returnx+y}functionsubtract(x,y){returnx-y}functionmultiply(x,y){returnx*y}functionduplicate(x){returnx*2}// node.js 中的多个导出module.exports={
add,
subtract,
multiply,
duplicate
}

require 加载模块

// main.jsconstmyMath=require('./myMath.js')console.log(myMath.add(6,2));// 8 console.log(myMath.subtract(6,2))// 4console.log(myMath.multiply(6,2));// 12console.log(myMath.duplicate(5))// 10

JavaScript Promises

Promise

创建 promises

newPromise((resolve,reject)=>{if(ok){resolve(result)}else{reject(error)}})

使用 promises

promise.then((result)=>{···}).catch((error)=>{···})

Promise 方法

Promise.all(···)Promise.race(···)Promise.reject(···)Promise.resolve(···)

执行器函数

constexecutorFn=(resolve,reject)=>{resolve('Resolved!');};constpromise=newPromise(executorFn);

setTimeout()

constloginAlert=()=>{console.log('Login');};setTimeout(loginAlert,6000);

Promise 状态

constpromise=newPromise((resolve,reject)=>{constres=true;// 一个异步操作。if(res){resolve('Resolved!');}else{reject(Error('Error'));}});promise.then((res)=>console.log(res),(err)=>console.error(err));

.then() 方法

constpromise=newPromise((resolve,reject)=>{setTimeout(()=>{resolve('Result');},200);});promise.then((res)=>{console.log(res);},(err)=>{console.error(err);});

.catch() 方法

constpromise=newPromise((resolve,reject)=>{setTimeout(()=>{reject(Error('Promise 无条件拒绝。'));},1000);});promise.then((res)=>{console.log(value);});promise.catch((err)=>{console.error(err);});

Promise.all()

constpromise1=newPromise((resolve,reject)=>{setTimeout(()=>{resolve(3);},300);});constpromise2=newPromise((resolve,reject)=>{setTimeout(()=>{resolve(2);},200);});Promise.all([promise1,promise2]).then((res)=>{console.log(res[0]);console.log(res[1]);});

链接多个 .then()

constpromise=newPromise(resolve=>setTimeout(()=>resolve('dAlan'),100));promise.then(res=>{returnres==='Alan' ? Promise.resolve('Hey Alan!')
: Promise.reject('Who are you?')}).then((res)=>{console.log(res)},(err)=>{console.error(err)});

避免嵌套的 Promise 和 .then()

constpromise=newPromise((resolve,reject)=>{setTimeout(()=>{resolve('*');},1000);});consttwoStars=(star)=>{return(star+star);};constoneDot=(star)=>{return(star+'.');};constprint=(val)=>{console.log(val);};// 将它们链接在一起promise.then(twoStars).then(oneDot).then(print);

JavaScript Async-Await

异步

functionhelloWorld(){returnnewPromise(resolve=>{setTimeout(()=>{resolve('Hello World!');},2000);});}// 异步函数表达式constmsg=asyncfunction(){constmsg=awaithelloWorld();console.log('Message:',msg);}// 异步箭头函数constmsg1=async()=>{constmsg=awaithelloWorld();console.log('Message:',msg);}msg();// Message: Hello World! <-- 2 秒后msg1();// Message: Hello World! <-- 2 秒后

解决 Promises

letpro1=Promise.resolve(5);letpro2=44;letpro3=newPromise(function(resolve,reject){setTimeout(resolve,100,'foo');});Promise.all([pro1,pro2,pro3]).then(function(values){console.log(values);});// expected => Array [5, 44, "foo"]

异步等待 Promises

functionhelloWorld(){returnnewPromise(resolve=>{setTimeout(()=>{resolve('Hello World!');},2000);});}asyncfunctionmsg(){constmsg=awaithelloWorld();console.log('Message:',msg);}msg();// Message: Hello World! <-- 2 秒后

错误处理

// 数据不完整letjson='{ "age": 30 }';try{letuser=JSON.parse(json);// <-- 没有错误console.log(user.name);// no name!}catch(e){console.error("Invalid JSON data!");}

异步等待运算符

functionhelloWorld(){returnnewPromise(resolve=>{setTimeout(()=>{resolve('Hello World!');},2000);});}asyncfunctionmsg(){constmsg=awaithelloWorld();console.log('Message:',msg);}msg();// Message: Hello World! <-- 2 秒后

JavaScript 请求

JSON

constjsonObj={"name": "Rick","id": "11A","level": 4};

另见：JSON 备忘单

XMLHttpRequest

constxhr=newXMLHttpRequest();xhr.open('GET','mysite.com/getjson');

XMLHttpRequest 是一个浏览器级别的 API，它使客户端能够通过 JavaScript 编写数据传输脚本，而不是 JavaScript 语言的一部分。

GET

constreq=newXMLHttpRequest();req.responseType='json';req.open('GET','/getdata?id=65');req.onload=()=>{console.log(xhr.response);};req.send();

POST

constdata={weight: '1.5 KG'};constxhr=newXMLHttpRequest();// 初始化一个请求。xhr.open('POST','/inventory/add');// 一个用于定义响应类型的枚举值xhr.responseType='json';// 发送请求以及数据。xhr.send(JSON.stringify(data));// 请求成功完成时触发。xhr.onload=()=>{console.log(xhr.response);}// 当 request 遭遇错误时触发。xhr.onerror=()=>{console.log(xhr.response);}

fetch api

fetch(url,{method: 'POST',headers: {'Content-type': 'application/json','apikey': apiKey},body: data}).then(response=>{if(response.ok){returnresponse.json();}thrownewError('Request failed!');},networkError=>{console.log(networkError.message)})

JSON 格式

fetch('url-that-returns-JSON').then(response=>response.json()).then(jsonResponse=>{console.log(jsonResponse);});

promise url 参数获取 API

fetch('url').then(response=>{console.log(response);},rejection=>{console.error(rejection.message);});

Fetch API 函数

fetch('https://api-xxx.com/endpoint',{method: 'POST',body: JSON.stringify({id: "200"})}).then(response=>{if(response.ok){returnresponse.json();}thrownewError('Request failed!');},networkError=>{console.log(networkError.message);}).then(jsonResponse=>{console.log(jsonResponse);})

async await 语法

constgetSuggestions=async()=>{constwordQuery=inputField.value;constendpoint=`${url}${queryParams}${wordQuery}`;try{constresponse=awaitfetch(endpoint,{cache: 'no-cache'});if(response.ok){constjsonResponse=awaitresponse.json()}}catch(error){console.log(error)}}

FilesExpand file tree

javascript.md

Latest commit

History