包含最重要概念、函数、方法等的 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;// 八进制数字 420letcount;console.log(count);// => undefinedcount=10;console.log(count);// => 10constnumberOfColumns=4;// TypeError: Assignment to constant...numberOfColumns=8;letx=null;letname="Tammy";constfound=false;// => Tammy, false, nullconsole.log(name,found,x);vara;console.log(a);// => undefinedletsingle='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);// => 120letage=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_INFINITYconstpi=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();true||false;// true10>5||10>20;// truefalse||false;// false10>100||10>20;// falsetrue&&true;// true1>2&&2>1;// falsetrue&&false;// false4===4&&3>1;// true1>3// false3>1// true250>=250// true1===1// true1===2// false1==='1'// falseletlateToWork=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'// ''constisMailSent=true;if(isMailSent){console.log('Mail sent to recipient');}varage=1;// => truevarstatus=(age>=18) ? true : false;constsize=10;if(size>20){console.log('Medium');}elseif(size>4){console.log('Small');}else{console.log('Tiny');}// Print: Small0==false// true0===false// false, 不同类型1=="1"// true, 自动类型转换1==="1"// false, 不同类型null==undefined// truenull===undefined// false'0'==false// true'0'===false// false== 只检查值，=== 检查值和类型。
constfood='salad';switch(food){case'oyster': console.log('海的味道');break;case'pizza': console.log('美味的馅饼');break;default:
console.log('请您用餐');}constfood='salad';switch(food){case'oyster':
case'pizza':
console.log('美味的馅饼');break;default:
console.log('请您用餐');}// 定义函数：functionsum(num1,num2){returnnum1+num2;}// 调用函数：sum(3,6);// 9// 命名函数functionrocketToMars(){return'BOOM!';}// 匿名函数constrocketToMars=function(){return'BOOM!';}constsum=(param1,param2)=>{returnparam1+param2;};console.log(sum(2,5));// => 7 constprintHello=()=>{console.log('hello');};printHello();// => helloconstcheckWeight=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)//6constdog=function(){return'Woof!';}// 参数是 namefunctionsayHello(name){return`Hello, ${name}!`;}functionadd(num1,num2){returnnum1+num2;}functionmyFunction(){varpizzaName="Margarita";// 这里的代码可以使用 PizzaName}// ❌ PizzaName 不能在这里使用{ } 块内声明的变量
{letx=2;}// ❌ x 不能在这里使用{varx=2;}// ✅ x 能在这里使用varx=2;// Global scopeletx=2;// Global scopeconstx=2;// Global scopeES6 引入了两个重要的新 JavaScript 关键字：let 和 const。这两个关键字在 JavaScript 中提供了块作用域。
constisLoggedIn=true;if(isLoggedIn==true){conststatusMessage='Logged in.';}// Uncaught ReferenceError...// 未捕获的引用错误...console.log(statusMessage);// 全局声明的变量constcolor='blue';functionprintColor(){console.log(color);}printColor();// => bluefor(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 的共享副本。
| :- | :- |
|---|---|
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];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 | ✅ | ✅ |
// 添加单个元素：constcart=['apple','orange'];cart.push('pear');// 添加多个元素：constnumbers=[1,2];numbers.push(3,4,5);将项目添加到末尾并返回新的数组长度。
constfruits=["apple","dew","banana"];constfruit=fruits.pop();// 'banana'console.log(fruits);// ["apple", "dew"]从末尾删除一个项目并返回已删除的项目。
constarray1=[1,2,3];constfirstElement=array1.shift();console.log(array1);// 输出: Array [2, 3]console.log(firstElement);// 输出: 1从头删除一个项目并返回已删除的项目。
constarray=[1,2,3,4,5];// 检查元素是否为偶数consteven=(element)=>element%2===0;console.log(array.some(even));// 预期输出: trueconstnumbers=[3,2,1]constnewFirstNumber=4// => [ 4, 3, 2, 1 ][newFirstNumber].concat(numbers)// => [ 3, 2, 1, 4 ]numbers.concat(newFirstNumber)如果你想避免改变你的原始数组，你可以使用 concat。
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"]letcats=['Bob'];// => ['Willy', 'Bob']cats.unshift('Willy');// => ['Puff', 'George', 'Willy', 'Bob']cats.unshift('Puff','George');将项目添加到开头并返回新的数组长度。
constwords=['js','java','golang'];constresult=words.filter(word=>{returnword.length>3});console.log(result);// 预期输出: Array ["java", "golang"]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. applex=0i=0do{x=x+i;console.log(x)i++;}while(i<5);// => 0 1 3 6 10for(leti=0;i<4;i+=1){console.log(i);};// => 0, 1, 2, 3for(leti=0;i<array.length;i++){console.log(array[i]);}// => 数组中的每一项for(leti=0;i<99;i+=1){if(i>5)break;console.log(i)}// => 0 1 2 3 4 5for(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}`);}}constfruits=["apple","orange","banana"];for(letindexinfruits){console.log(index);}// => 0// => 1// => 2varnum=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 循环继续执行。
constfruits=["apple","orange","banana"];for(letfruitoffruits){console.log(fruit);}// => apple// => orange// => bananaasyncfunction*asyncGenerator(){vari=0;while(i<3){yieldi++;}}(asyncfunction(){forawait(numofasyncGenerator()){console.log(num);}})();// 0// 1// 2vari=0;for(;;){if(i>3)break;console.log(i);i++;}letplusFive=(number)=>{returnnumber+5;};// f 被赋值为 plusFiveletf=plusFive;plusFive(3);// 8// 由于 f 具有函数值，因此可以调用它。f(9);// 14constisEven=(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.constnumbers=[1,2,3,4];constsum=numbers.reduce((accumulator,curVal)=>{returnaccumulator+curVal;});console.log(sum);// 10constmembers=["Taylor","Donald","Don","Natasha","Bobby"];constannouncements=members.map((member)=>{returnmember+" joined the contest.";});console.log(announcements);constnumbers=[28,77,45,99,27];numbers.forEach(number=>{console.log(number);});constrandomNumbers=[4,11,42,14,39];constfilteredArray=randomNumbers.filter(n=>{returnn>5;});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);// undefinedconststudent={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' }constcat={name: 'Pipey',age: 8,whatName(){returnthis.name}};console.log(cat.whatName());// => Pipeyconstengine={// 方法简写，有一个参数start(adverb){console.log(`The engine starts up ${adverb}...`);},// 不带参数的匿名箭头函数表达式sputter: ()=>{console.log('The engine sputters...');},};engine.start('noisily');engine.sputter();constmyCat={_name: 'Dottie',getname(){returnthis._name;},setname(newName){this._name=newName;}};// 引用调用 getterconsole.log(myCat.name);// 赋值调用 settermyCat.name='Yankee';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, 37constp=newProxy(target,handler)- target 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
- handler 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。
| :- | :- |
|---|---|
Proxy.revocable() | 创建一个可撤销的Proxy对象 # |
| :- | :- |
|---|---|
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 是一个内置的对象，它提供拦截 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 # |
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 第一个参数接受 this 作用域，剩余参数传递给其调用的函数
getName.call(person,18,12)apply 第一个参数与 call 相同，第二个参数是其调用函数的参数数组
getName.apply(person,[18,12])bind 函数会返回一个新函数
getName.bind(person,18,12)()//或者可以这样getName.bind(person)(18,12)//或者这样getName.bind(person).bind(null,18)(12)数组中的一些方法，类似于 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)// WindowclassDog{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" classSong{constructor(){this.title;this.author;}play(){console.log('Song playing!');}}constmySong=newSong();mySong.play();// 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});classSong{constructor(title,artist){this.title=title;this.artist=artist;}}constmySong=newSong('Bohemian Rhapsody','Queen');console.log(mySong.title);classSong{play(){console.log('Playing!');}stop(){console.log('Stopping!');}}// 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}// 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>// 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
}// 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创建 promises
newPromise((resolve,reject)=>{if(ok){resolve(result)}else{reject(error)}})promise.then((result)=>{···}).catch((error)=>{···})Promise.all(···)Promise.race(···)Promise.reject(···)Promise.resolve(···)constexecutorFn=(resolve,reject)=>{resolve('Resolved!');};constpromise=newPromise(executorFn);constloginAlert=()=>{console.log('Login');};setTimeout(loginAlert,6000);constpromise=newPromise((resolve,reject)=>{constres=true;// 一个异步操作。if(res){resolve('Resolved!');}else{reject(Error('Error'));}});promise.then((res)=>console.log(res),(err)=>console.error(err));constpromise=newPromise((resolve,reject)=>{setTimeout(()=>{resolve('Result');},200);});promise.then((res)=>{console.log(res);},(err)=>{console.error(err);});constpromise=newPromise((resolve,reject)=>{setTimeout(()=>{reject(Error('Promise 无条件拒绝。'));},1000);});promise.then((res)=>{console.log(value);});promise.catch((err)=>{console.error(err);});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]);});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)});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);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 秒后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"]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 秒后constjsonObj={"name": "Rick","id": "11A","level": 4};另见：JSON 备忘单
constxhr=newXMLHttpRequest();xhr.open('GET','mysite.com/getjson');XMLHttpRequest 是一个浏览器级别的 API，它使客户端能够通过 JavaScript 编写数据传输脚本，而不是 JavaScript 语言的一部分。
constreq=newXMLHttpRequest();req.responseType='json';req.open('GET','/getdata?id=65');req.onload=()=>{console.log(xhr.response);};req.send();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(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)})fetch('url-that-returns-JSON').then(response=>response.json()).then(jsonResponse=>{console.log(jsonResponse);});fetch('url').then(response=>{console.log(response);},rejection=>{console.error(rejection.message);});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);})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)}}