前言：
此时咱们对“jswith函数”大致比较珍视，各位老铁们都需要分析一些“jswith函数”的相关内容。那么小编在网上汇集了一些关于“jswith函数””的相关资讯，希望大家能喜欢，大家快快来学习一下吧！介绍
JavaScript 是一种轻量级的解释型编程语言。
JSON 备忘清单JavaScript 中的正则表达式TypeScript 备忘清单打印调试
// => Hello world!console.log('Hello world!');// => Hello QuickReferenceconsole.warn('hello %s', 'QuickReference');// 将错误消息打印到 stderrconsole.error(new Error('Oops!'));断点调试function potentiallyBuggyCode() { debugger; // 做可能有问题的东西来检查，逐步通过等。}debugger 语句调用任何可用的调试功能。
数字
let amount = 6;let price = 4.99;let home = 1e2;let num = 1_000_000; // 位数过多可以用 _ 分割let m = 0644; // 八进制数字 420let 关键字
let count; console.log(count); // => undefinedcount = 10;console.log(count); // => 10const 关键字
const numberOfColumns = 4;// TypeError: Assignment to constant...numberOfColumns = 8;变量
let x = null;let name = "Tammy";const found = false;// => Tammy, false, nullconsole.log(name, found, x);var a;console.log(a); // => undefined字符串
let single = 'Wheres my bandit hat?';let double = "Wheres my bandit hat?";// => 21console.log(single.length);算术运算符
5 + 5 = 10 // 加法 Addition10 - 5 = 5 // 加法 Subtraction5 * 10 = 50 // 乘法 Multiplication10 / 5 = 2 // 除法 Division10 % 5 = 0 // 取模 Modulo注释
// 此行将表示注释/* 多行配置部署前必须更改以下配置。*/赋值运算符
let number = 100;// 两个语句都会加 10number = number + 10;number += 10;console.log(number); // => 120字符串插值
let age = 7;// 字符串拼接'Tommy is ' + age + ' years old.';// 字符串插值`Tommy is ${age} years old.`;字符串var abc = "abcdefghijklmnopqrstuvwxyz";var esc = 'I don\'t \n know'; // \n 换行var len = 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);数字var pi = 3.141;pi.toFixed(0); // 返回 3 pi.toFixed(2); // 返回 3.14 - 使用金钱pi.toPrecision(2) // 返回 3.1pi.valueOf(); // 返回号码Number(true); // 转换为数字// 自 1970 年以来的毫秒数Number(new Date()) // 返回第一个数字：3parseInt("3 months"); // 返回 3.5parseFloat("3.5 days"); // 最大可能的 JS 数Number.MAX_VALUE // 最小可能的 JS 编号Number.MIN_VALUE // -无穷Number.NEGATIVE_INFINITY // 无穷Number.POSITIVE_INFINITY Mathconst pi = 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逻辑运算符
let lateToWork = true;let oppositeValue = !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 语句)
const isMailSent = true;if (isMailSent) { console.log('Mail sent to recipient');}Ternary Operator (三元运算符)var age = 1;// => truevar status = (age >= 18) ? true : false;else if
const size = 10;if (size > 20) { console.log('Medium');} else if (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 语句
const food = 'salad';switch (food) { case 'oyster': console.log('海的味道'); break; case 'pizza': console.log('美味的馅饼'); break; default: console.log('请您用餐');}switch 多 case - 单一操作const food = 'salad';switch (food) { case 'oyster': case 'pizza': console.log('美味的馅饼'); break; default: console.log('请您用餐');}JavaScript Functions 函数函数// 定义函数：function sum(num1, num2) { return num1 + num2;}// 调用函数：sum(3, 6); // 9匿名函数// 命名函数function rocketToMars() { return 'BOOM!';}// 匿名函数const rocketToMars = function() { return 'BOOM!';}箭头函数 (ES6)有两个参数const sum = (param1, param2) => { return param1 + param2; }; console.log(sum(2,5)); // => 7 没有参数const printHello = () => { console.log('hello'); }; printHello(); // => hello只有一个参数const checkWeight = weight => { console.log(`Weight : ${weight}`); }; checkWeight(25); // => Weight : 25 简洁箭头函数const multiply = (a, b) => a * b; // => 60 console.log(multiply(2, 30));
从 ES2015 开始提供箭头函数
返回关键字
// 有 returnfunction sum(num1, num2) { return num1 + num2;}// 该函数不输出总和function sum(num1, num2) { num1 + num2;}调用函数// 定义函数function sum(num1, num2) { return num1 + num2;}// 调用函数sum(2, 4); // 6函数表达式const dog = function() { return 'Woof!';}函数参数// 参数是 namefunction sayHello(name) { return `Hello, ${name}!`;}函数声明function add(num1, num2) { return num1 + num2;}JavaScript 范围范围function myFunction() { var pizzaName = "Margarita"; // 这里的代码可以使用 PizzaName }// ❌ PizzaName 不能在这里使用{ } 块内声明的变量
{ let x = 2;}// ❌ x 不能在这里使用{ var x = 2;}// ✅ x 能在这里使用var x = 2; // Global scopelet x = 2; // Global scopeconst x = 2; // Global scope
ES6 引入了两个重要的新 JavaScript 关键字：let 和 const。这两个关键字在 JavaScript 中提供了块作用域。
块作用域变量
const isLoggedIn = true;if (isLoggedIn == true) { const statusMessage = 'Logged in.';}// Uncaught ReferenceError...// 未捕获的引用错误...console.log(statusMessage);全局变量// 全局声明的变量const color = 'blue';function printColor() { console.log(color);}printColor(); // => blueletvsvarfor (let i = 0; i < 3; i++) { // 这是“let”的最大范围 // i 可以访问 ✔️}// i 不能访问 ❌for (var i = 0; i < 3; i++) { // i 可以访问 ✔️}// i 可以访问 ✔️var 的范围是最近的函数块，而 let 的范围是最近的封闭块。
带闭包的循环
// 打印三次，不是我们的意思。for (var i = 0; i < 3; i++) { setTimeout(_ => console.log(i), 10);}// 按预期打印 0、1 和 2。for (let j = 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 对象 #
数组
const fruits = ["apple", "dew", "banana"];// 不同的数据类型const data = [1, 'chicken', false];属性 .length
const numbers = [1, 2, 3, 4];numbers.length // 4索引
// 访问数组元素const myArray = [100, 200, 300];console.log(myArray[0]); // 100console.log(myArray[1]); // 200可变图表
添加
删除
开始
结束
push
✅
✅
pop
✅
✅
unshift
✅
✅
shift
✅
✅
方法 .push()
// 添加单个元素：const cart = ['apple', 'orange'];cart.push('pear'); // 添加多个元素：const numbers = [1, 2];numbers.push(3, 4, 5);将项目添加到末尾并返回新的数组长度。
方法 .pop()
const fruits = ["apple", "dew", "banana"];const fruit = fruits.pop(); // 'banana'console.log(fruits); // ["apple", "dew"]
从末尾删除一个项目并返回已删除的项目。
方法 .shift()
const array1 = [1, 2, 3];const firstElement = array1.shift();console.log(array1); // 输出: Array [2, 3]console.log(firstElement); // 输出: 1
从头删除一个项目并返回已删除的项目。
方法 .some()
const array = [1, 2, 3, 4, 5];// 检查元素是否为偶数const even = (element) => element % 2 === 0;console.log(array.some(even));// 预期输出: true方法 .concat()
const numbers = [3, 2, 1]const newFirstNumber = 4 // => [ 4, 3, 2, 1 ][newFirstNumber].concat(numbers) // => [ 3, 2, 1, 4 ]numbers.concat(newFirstNumber)
如果你想避免改变你的原始数组，你可以使用 concat。
方法 .splice()
const months = ['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()
let cats = ['Bob'];// => ['Willy', 'Bob']cats.unshift('Willy');// => ['Puff', 'George', 'Willy', 'Bob']cats.unshift('Puff', 'George');将项目添加到开头并返回新的数组长度。
方法 .filter()
const words = ['js', 'java', 'golang'];const result = words.filter(word => { return word.length > 3});console.log(result);// 预期输出: Array ["java", "golang"]JavaScript 循环While 循环while (condition) { // 要执行的代码块}let i = 0;while (i < 5) { console.log(i); i++;}反向循环const fruits = ["apple", "dew", "berry"];for (let i = fruits.length - 1; i >= 0; i--) { console.log(`${i}. ${fruits[i]}`);}// => 2. berry// => 1. dew// => 0. appleDo...While 语句x = 0i = 0do { x = x + i; console.log(x) i++;} while (i < 5);// => 0 1 3 6 10For 循环for (let i = 0; i < 4; i += 1) { console.log(i);};// => 0, 1, 2, 3遍历数组for (let i = 0; i < array.length; i++){ console.log(array[i]);}// => 数组中的每一项Breakfor (let i = 0; i < 99; i += 1) { if (i > 5) break; console.log(i)}// => 0 1 2 3 4 5Continuefor (i = 0; i < 10; i++) { if (i === 3) { continue; } text += "The number is " + i + "<br>";}嵌套循环for (let i = 0; i < 2; i += 1) { for (let j = 0; j < 3; j += 1) { console.log(`${i}-${j}`); }}for...in 循环const fruits = ["apple", "orange", "banana"];for (let index in fruits) { console.log(index);}// => 0// => 1// => 2label 语句var num = 0;outPoint:for(var i = 0; i < 10; i++) { for(var j = 0; j < 10; j++) { if(i == 5 && j == 5) { continue outPoint; } num++; }}alert(num); // 95从 alert(num) 的值可以看出，continue outPoint; 语句的作用是跳出当前循环，并跳转到 outPoint（标签）下的 for 循环继续执行。
for...of 循环
const fruits = ["apple", "orange", "banana"];for (let fruit of fruits) { console.log(fruit);}// => apple// => orange// => bananafor await...ofasync function* asyncGenerator() { var i = 0; while (i < 3) { yield i++; }}(async function() { for await (num of asyncGenerator()) { console.log(num); }})();// 0// 1// 2可选的 for 表达式var i = 0;for (;;) { if (i > 3) break; console.log(i); i++;}JavaScript 迭代器(Iterators)分配给变量的函数let plusFive = (number) => { return number + 5; };// f 被赋值为 plusFivelet f = plusFive;plusFive(3); // 8// 由于 f 具有函数值，因此可以调用它。f(9); // 14回调函数const isEven = (n) => { return n % 2 == 0;}let printMsg = (evenFunc, num) => { const isNumEven = 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()const numbers = [1, 2, 3, 4];const sum = numbers.reduce((accumulator, curVal) => { return accumulator + curVal;});console.log(sum); // 10数组方法 .map()const members = ["Taylor", "Donald", "Don", "Natasha", "Bobby"];const announcements = members.map((member) => { return member + " joined the contest.";});console.log(announcements);数组方法 .forEach()const numbers = [28, 77, 45, 99, 27];numbers.forEach(number => { console.log(number);}); 数组方法 .filter()const randomNumbers = [4, 11, 42, 14, 39];const filteredArray = randomNumbers.filter(n => { return n > 5;});JavaScript 对象(Objects)访问属性const apple = { color: 'Green', price: { bulk: '$3/kg', smallQty: '$4/kg' }};console.log(apple.color); // => Greenconsole.log(apple.price.bulk); // => $3/kg命名属性// 无效键名示例const trainSchedule = { // 由于单词之间的空格而无效。 platform num: 10, // 表达式不能是键。 40 - 10 + 2: 30, // 除非用引号括起来，否则 + 号无效。 +compartment: 'C'}不存在的属性const classElection = { date: 'January 12'};console.log(classElection.place); // undefined可变的const student = { name: 'Sheldon', score: 100, grade: 'A',}console.log(student)// { name: 'Sheldon', score: 100, grade: 'A' }delete student.scorestudent.grade = 'F'console.log(student)// { name: 'Sheldon', grade: 'F' }student = {}// TypeError: TypeError：分配给常量变量。赋值简写语法const person = { name: 'Tom', age: '22',};const {name, age} = person;console.log(name); // 'Tom'console.log(age); // '22'删除运算符const person = { firstName: "Matilda", hobby: "knitting", goal: "learning JavaScript"};delete person.hobby; // 或 delete person['hobby'];console.log(person);/*{ firstName: "Matilda" goal: "learning JavaScript"} */对象作为参数const origNum = 8;const origObj = {color: 'blue'};const changeItUp = (num, obj) => { num = 7; obj.color = 'red';};changeItUp(origNum, origObj);// 将输出 8，因为整数是按值传递的。console.log(origNum);// 由于传递了对象，将输出“red”// 通过引用，因此是可变的。console.log(origObj.color);工厂函数// 一个接受 'name'，'age' 和 'breed' 的工厂函数，// 参数返回一个自定义的 dog 对象。const dogFactory = (name, age, breed) => { return { name: name, age: age, breed: breed, bark() { console.log('Woof!'); } };};速记对象创建const activity = 'Surfing';const beach = { activity };console.log(beach); // { activity: 'Surfing' }this 关键字const cat = { name: 'Pipey', age: 8, whatName() { return this.name }};console.log(cat.whatName()); // => Pipey方法const engine = { // 方法简写，有一个参数 start(adverb) { console.log(`The engine starts up ${adverb}...`); }, // 不带参数的匿名箭头函数表达式 sputter: () => { console.log('The engine sputters...'); },};engine.start('noisily');engine.sputter();Getters 和 settersconst myCat = { _name: 'Dottie', get name() { return this._name; }, set name(newName) { this._name = newName; }};// 引用调用 getterconsole.log(myCat.name);// 赋值调用 settermyCat.name = 'Yankee';JavaScript this 绑定隐式绑定function foo() { console.log(this)}let obj1 = { name: "obj1", foo: foo}let obj2 = { name: "obj2", obj1: obj1}obj2.obj1.foo() // [Object obj1]隐式丢失let a = obj2.obj1.foo()a() // Window指定隐式绑定：必须在调用的对象内部有一个对函数的引用（比如一个属性）将以上调用赋值给一个变量，结果最终会是 Window在 a 被调用的位置没有进行过任何显示绑定，最终全局对象 window 会调用它（Window.a）显示绑定
function getName(a1, a2) { console.log("此人" + this.name, "岁数" + (a1 + a2))}let person = { name: "zhangsan"}callcall 第一个参数接受 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
const obj = { name: "zhangsan"}const array = [1, 2, 3];array.map(function(value){ console.log(this.name)}, obj)// zhangsan x3 其中一些全局对象，如 setTimeout 等，它们和未显示绑定 this 的部分数组方法一样，都会指向全局对象（Window）
setTimeout(function(){ console.log(this)}, 1000) // WindowJavaScript Classes静态方法/字段class Dog { constructor(name) { this._name = name; } introduce() { console.log('This is ' + this._name + ' !'); } // 静态方法 static bark() { console.log('Woof!'); } static { console.log('类静态初始化块调用'); }}const myDog = new Dog('Buster');myDog.introduce();// 调用静态方法Dog.bark();公有静态字段class ClassStaticField { static staticField = 'static field'}console.log(ClassStaticField.staticField)// 预期输出值："static field" Classclass Song { constructor() { this.title; this.author; } play() { console.log('Song playing!'); }}const mySong = new Song();mySong.play();extends// Parent classclass Media { constructor(info) { this.publishDate = info.publishDate; this.name = info.name; }}// Child classclass Song extends Media { constructor(songData) { super(songData); this.artist = songData.artist; }}const mySong = new Song({ artist: 'Queen', name: 'Bohemian Rhapsody', publishDate: 1975});Class Constructorclass Song { constructor(title, artist) { this.title = title; this.artist = artist; }}const mySong = new Song('Bohemian Rhapsody', 'Queen');console.log(mySong.title);Class Methodsclass Song { play() { console.log('Playing!'); } stop() { console.log('Stopping!'); }}JavaScript ModulesExport / Import// myMath.js// 默认导出 Default exportexport default function add(x,y){ return x + y}// 正常导出 Normal exportexport function subtract(x,y){ return x - y}// 多重导出 Multiple exportsfunction multiply(x,y){ return x * y}function duplicate(x){ return x * 2}export { multiply, duplicate}import 加载模块// main.jsimport add, { 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<script type="module" src="main.js"></script>Export Module// myMath.jsfunction add(x,y){ return x + y}function subtract(x,y){ return x - y}function multiply(x,y){ return x * y}function duplicate(x){ return x * 2}// node.js 中的多个导出module.exports = { add, subtract, multiply, duplicate}require 加载模块// main.jsconst myMath = 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)) // 10JavaScript PromisesPromise创建 promises
new Promise((resolve, reject) => { if (ok) { resolve(result) } else { reject(error) }})使用 promisespromise .then((result) => { ··· }) .catch((error) => { ··· })Promise 方法Promise.all(···)Promise.race(···)Promise.reject(···)Promise.resolve(···)执行器函数
const executorFn = (resolve, reject) => { resolve('Resolved!');};const promise = new Promise(executorFn);setTimeout()const loginAlert = () => { console.log('Login');};setTimeout(loginAlert, 6000);Promise 状态const promise = new Promise((resolve, reject) => { const res = true; // 一个异步操作。 if (res) { resolve('Resolved!'); } else { reject(Error('Error')); }});promise.then( (res) => console.log(res), (err) => console.error(err));.then() 方法const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('Result'); }, 200);});promise.then((res) => { console.log(res);}, (err) => { console.error(err);});.catch() 方法const promise = new Promise( (resolve, reject) => { setTimeout(() => { reject(Error('Promise 无条件拒绝。')); }, 1000);});promise.then((res) => { console.log(value);});promise.catch((err) => { console.error(err);});Promise.all()const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve(3); }, 300);});const promise2 = new Promise((resolve, reject) => { setTimeout(() => { resolve(2); }, 200);});Promise.all([promise1, promise2]).then((res) => { console.log(res[0]); console.log(res[1]);});链接多个 .then()const promise = new Promise( resolve => setTimeout(() => resolve('dAlan'),100));promise.then(res => { return res === 'Alan' ? Promise.resolve('Hey Alan!') : Promise.reject('Who are you?')}).then((res) => { console.log(res)}, (err) => { console.error(err)});避免嵌套的 Promise 和 .then()const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('*'); }, 1000);});const twoStars = (star) => { return (star + star);};const oneDot = (star) => { return (star + '.');};const print = (val) => { console.log(val);};// 将它们链接在一起promise.then(twoStars).then(oneDot).then(print);JavaScript Async-Await异步function helloWorld() { return new Promise(resolve => { setTimeout(() => { resolve('Hello World!'); }, 2000); });}// 异步函数表达式const msg = async function() { const msg = await helloWorld(); console.log('Message:', msg);}// 异步箭头函数const msg1 = async () => { const msg = await helloWorld(); console.log('Message:', msg);}msg(); // Message: Hello World! <-- 2 秒后msg1(); // Message: Hello World! <-- 2 秒后解决 Promiseslet pro1 = Promise.resolve(5);let pro2 = 44;let pro3 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, 'foo');});Promise.all([pro1, pro2, pro3]).then(function(values) { console.log(values);});// expected => Array [5, 44, "foo"]异步等待 Promisesfunction helloWorld() { return new Promise(resolve => { setTimeout(() => { resolve('Hello World!'); }, 2000); });}async function msg() { const msg = await helloWorld(); console.log('Message:', msg);}msg(); // Message: Hello World! <-- 2 秒后错误处理// 数据不完整let json = '{ "age": 30 }';try { let user = JSON.parse(json); // <-- 没有错误 console.log( user.name ); // no name!} catch (e) { console.error( "Invalid JSON data!" );}异步等待运算符function helloWorld() { return new Promise(resolve => { setTimeout(() => { resolve('Hello World!'); }, 2000); });}async function msg() { const msg = await helloWorld(); console.log('Message:', msg);}msg(); // Message: Hello World! <-- 2 秒后JavaScript 请求JSONconst jsonObj = { "name": "Rick", "id": "11A", "level": 4 };另见：JSON 备忘单
XMLHttpRequest
const xhr = new XMLHttpRequest();xhr.open('GET', 'mysite.com/getjson');XMLHttpRequest 是一个浏览器级别的 API，它使客户端能够通过 JavaScript 编写数据传输脚本，而不是 JavaScript 语言的一部分。
GET
const req = new XMLHttpRequest();req.responseType = 'json';req.open('GET', '/getdata?id=65');req.onload = () => { console.log(xhr.response);};req.send();POSTconst data = { weight: '1.5 KG' };const xhr = new XMLHttpRequest();// 初始化一个请求。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 apifetch(url, { method: 'POST', headers: { 'Content-type': 'application/json', 'apikey': apiKey }, body: data}).then(response => { if (response.ok) { return response.json(); } throw new Error('Request failed!');}, networkError => { console.log(networkError.message)})JSON 格式fetch('url-that-returns-JSON') .then(response => response.json()) .then(jsonResponse => { console.log(jsonResponse); });promise url 参数获取 APIfetch('url') .then(response => { console.log(response); }, rejection => { console.error(rejection.message); });Fetch API 函数fetch(';, { method: 'POST', body: JSON.stringify({id: "200"})}).then(response => { if(response.ok){ return response.json(); } throw new Error('Request failed!');}, networkError => { console.log(networkError.message);}).then(jsonResponse => { console.log(jsonResponse);})async await 语法const getSuggestions = async () => { const wordQuery = inputField.value; const endpoint = `${url}${queryParams}${wordQuery}`; try{ const response = await fetch(endpoint, {cache: 'no-cache'}); if(response.ok){ const jsonResponse = await response.json() } } catch(error){ console.log(error) }} 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jswith函数
