当前位置： 首页 > news >正文

ES6基础内容

news 2025/9/18 12:45:24

ES 全称 EcmaScript ,是脚本语言的规范，而平时经常编写的 JavaScript 是 EcmaScript 的一种实现，所以 ES 新特性其实指的就是 JavaScript 的新特性。

一、 let变量声明和声明特性

1.1 变量声明

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let a;let b,c,d;let e=521;let f=100,g='iloveyou',h=[];</script>
</body>
</html>

1.2 声明特性

1.2.1 变量不能重复声明

当用let声明两个变量名一样时，会报错。

1.2.2 块级作用域

es5作用域分为：

  • 全局
  • 函数
  • eval

es6引入新的作用域：块级作用域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>{let name='小羊苏西';}console.log(name);</script>
</body>
</html>

在块之外读取不到该变量，如下：

将let改为var后，可读取到变量：

主要用于：if else for while 后的{}中。

1.2.3 不存在变量提升

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>console.log(age);var age=18;console.log(addr);let addr='山东省'</script>
</body>
</html>

var 声明的变量存在变量提升，可在声明变量之前使用该变量而不会报错，而

let 声明的变量不存在变量提升，在声明变量之前使用该变量会报错。

var 声明的变量相当于在一开始就声明了该变量，只是没有赋值，故输出undefined。

1.2.4 不影响作用域链

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>{let phone=12345;function fun(){console.log(phone);}fun();}</script>
</body>
</html>

在块级作用域中，可正常按照作用域来执行。

1.3 案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h3>点击切换颜色</h3><div class="box"><div class="item"></div><div class="item"></div><div class="item"></div></div><script>//获取div元素let items=document.getElementsByClassName('item');//遍历并绑定事件for(var i=0;i<items.length;i++){items[i].onclick = function(){//修改当前元素的背景颜色items[i].style.background='pink';}}</script><style>.box{width: 350px;display: flex;justify-self: start;}.item{width: 100px;height: 70px;margin-left: 5px;border: 1px solid blue;}</style>
</body>
</html>

当使用 var 来定义 i 时，当执行点击函数内部的 items[i] 时，会向外读取 i 的值，而读取到的 i 为3，会报错，可使用 this.style.background='pink' 来实现该效果。

改为 let 来声明，由于具有块级作用域，读取到的 i 可为 0，1，2，不会报错。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h3>点击切换颜色</h3><div class="box"><div class="item"></div><div class="item"></div><div class="item"></div></div><script>//获取div元素let items=document.getElementsByClassName('item');//遍历并绑定事件for(let i=0;i<items.length;i++){items[i].onclick = function(){//修改当前元素的背景颜色items[i].style.background='pink';}}</script><style>.box{width: 350px;display: flex;justify-self: start;}.item{width: 100px;height: 70px;margin-left: 5px;border: 1px solid blue;}</style>
</body>
</html>

效果图如下：

二、const声明常量和特点

2.1 声明格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const NAME='小羊苏西';</script>
</body>
</html>

2.2 特点

  1.  一定要赋初始值；

  2. 一般常量使用大写；

  3. 常量的值不能修改；

  4. 块级作用域；

  5. 对于数组和对象的元素修改，不算对常量的修改，不会报错。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const NAME=['张三','李四'];NAME.push('赵五');</script>
</body>
</html>

对数组和对象的元素修改，并不影响常量指向的地址，不会报错。

三、变量的解构赋值

ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值。

3.1 数组的解构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const TF=['王俊凯','王源','易烊千玺'];let [no1,no2,no3]=TF;console.log(no1);console.log(no2);console.log(no3);</script>
</body>
</html>

3.2 对象的解构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const WJK={name:'王俊凯',age:25,talent:function(){console.log('擅长唱歌跳舞');}}let {name,age,talent}=WJK;console.log(name);console.log(age);talent();</script>
</body>
</html>

四、模板字符串

es5声明字符串方式：' '，" ";

es6新增：` `

4.1 声明格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let str=`我是一个字符串`;console.log(str,typeof(str));</script>
</body>
</html>

4.2 特点

4.2.1 内容中可以直接出现换行符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let str=`<ul><li>王俊凯</li><li>王源</li><li>易烊千玺</li></ul>`;</script>
</body>
</html>

 ` `使用换行符时并不会出现错误

' '和" "会报错。 

4.2.2 字符拼接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let name='王俊凯';let res=`${name}擅长唱歌跳舞`;console.log(res);</script>
</body>
</html>

五、对象简化写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let name=`小田`;let change=function(){console.log('我们可以改变');}const res={//name:namename,//change:changechange,// fun:function(){//     console.log("我们在学校");// }fun(){console.log("我们在学校");}}console.log(res);</script>
</body>
</html>

六、箭头函数

6.1 声明格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let fun=(a,b)=>{return a+b;}let res=fun(1,2);console.log(res);</script>
</body>
</html>

 6.2 特点

6.2.1 this是静态的

始终指向函数声明时所在作用域下的this值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function getName(){console.log(this.name);}let getName1=()=>{console.log(this.name);}//设置 window 对象的 name 属性window.name='小田';const temp={name:'xiaotian'}//直接调用getName();getName1();console.log("————————")//call方法调用getName.call(temp);getName1.call(temp);</script>
</body>
</html>

call方法可以改变函数内部this值 

6.2.2 不能作为构造实例化对象

6.2.3 不能使用 arguments 变量

 6.2.4 箭头函数简写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//省略小括号，当形参有且只有一个的时候let add= n =>{return n+n;}console.log(add(9));//省略花括号，当代码体只有一条语句的时候，此时return必须省略//语句执行结果就是函数返回值let pow=(n)=>n*n;console.log(pow(9));</script>
</body>
</html>

七、函数参数默认值

 ES6允许给参数参数赋值初始值

7.1  形参初始值

具有默认的参数，一般位置要靠后

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function add(a,b,c){return a+b+c;}let res=add(1,2,3);console.log(res);//当c没有传值时,为undefined,相加为NaNlet res1=add(1,2);console.log(res1);function add1(a,b,c=10){return a+b+c;}//当c有传值时，用所传的值覆盖初始值let res2=add1(1,2,3);console.log(res2);//当c没有传值时，用初始值let res3=add1(1,2);console.log(res3);</script>
</body>
</html>

7.2 与解构赋值结合

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function connect({host="127.0.0.1",username,password,port}){console.log(host);console.log(username);console.log(password);console.log(port);}connect({host:'localhost',username:'root',password:'root',port:3306})//无host值，使用默认值·connect({username:'tian',password:123456,port:8080})</script>
</body>
</html>

八、rest参数

ES5获取实参方式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function data(){console.log(arguments);}data('王俊凯','王源','易烊千玺');</script>
</body>
</html>

 ES6引入 rest 参数，用于获取参数的实参，来替代 arguments。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function data(...args){console.log(args);}data('王俊凯','王源','易烊千玺');//rest参数必须要放到参数最后function fn(a,b,...args){console.log(a);console.log(b);console.log(args);}fn(1,2,3,4,5,6);</script>
</body>
</html>

arguments 获取的是对象，而 rest 参数类型获取的是数组形式。 

九、扩展运算符

 ... 扩展运算符能将数组转换成逗号分隔的参数序列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const tfboys=['王俊凯','王源','易烊千玺'];// =>'王俊凯','王源','易烊千玺'function fn(){console.log(arguments);}fn(tfboys);console.log('----------')fn(...tfboys);// => fn('王俊凯','王源','易烊千玺')</script>
</body>
</html>

9.1 应用

9.1.1 数组的合并

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const heze=['曹县','定陶'];const taian=['岱岳区','泰山区'];const shandong=heze.concat(taian);console.log(shandong);const shandong1=[...heze,...taian];console.log(shandong1);</script>
</body>
</html>

 9.1.2 数组的克隆

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const arr=['a','b','c'];const arr1=[...arr];console.log(arr1);</script>
</body>
</html>

9.1.3 伪数组转换成真正数组

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div></div><div></div><div></div><script>const divs=document.querySelectorAll('div');const divArr=[...divs];console.log(divs);console.log(divArr);</script>
</body>
</html>

十、Symbol

ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。
Symbol 特点

  •  Symbol 的值是唯一的，用来解决命名冲突的问题
  • Symbol值不能与其他数据进行运算
  • Symbol定义的对象属性不能使用 for..in 循环遍历，但是可以使用Reflect.ownKeys 来获取对象的所有键名

JS七种数据类型:

undefined 

string 、symbol

object

null 、number·

boolean

10.1 symbol创建

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let s=Symbol();console.log(s,typeof s);//tian相当于一个名称或注释，描述字符串let s1=Symbol('tian');let s2=Symbol('tian');console.log(s1===s2);let s3=Symbol.for('tian');let s4=Symbol.for('tian');console.log(s3===s4);//不能与其他数据进行运算let res=s+100;let res1=s>100;let res2=s+s;</script>
</body>
</html>

10.2 symbol使用

给对象添加属性和方法，表示独一无二的 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let game={name:'王者荣耀',up:'我上升到王者了',down:'我下降到砖石了',};//当想向game对象添加方法 up down// game.up=function(){},当game对象内部未知，使用可能有冲突let methods={up:Symbol(),down:Symbol()};game[methods.up]=function(){console.log("我上星了");}game[methods.down]=function(){console.log("我掉星了");}console.log(game);let youxi={name:'狼人杀',[Symbol('say')]:function(){console.log("我可以发言");},[Symbol('zibao')]:function(){console.log("我要自爆");}};console.log(youxi);</script>
</body>
</html>

10.3 symbol内置属性 

Symbol.hasInstance当其他对象使用 instanceof 运算符，判断是否为该对象的实例时，会调用这个方法
Symbol.isConcatSpreadable对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值，表示该对象用于 Array:prototype.concat()时，是否可以展开。
Symbol.unscopables该对象指定了使用 with 关键字时，哪些属性会被 with环境排除。
Symbol.match当执行 str.match(myObject)时，如果该属性存在，会调用它，返回该方法的返回值。
Symbol.replace当该对象被 str.replace(myObject)方法调用时，会返回该方法的返回值。
Symbol.search当该对象被 str. search(myObject)方法调用时，会返回该方法的返回值。
Symbol.split当该对象被 str. split (myObject)方法调用时，会返回该方法的返回值。
Symbol.iterator对象进行 for..of循环时，会调用Symbol.iterator 方法,返回该对象的默认遍历器。
Symbol.toPrimitive该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
Symbol. toStringTag在该对象上面调用 toString 方法时，返回该方法的返回值。
Symbol.species创建衍生对象时，会使用该属性。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>class Person{static [Symbol.hasInstance](param){console.log(param);console.log(1111111);}}let o={};console.log(o instanceof Person);console.log('------------');const arr=[1,2,3];const arr1=[4,5,6];console.log(arr.concat(arr1));arr1[Symbol.isConcatSpreadable]=false;console.log(arr.concat(arr1));</script>
</body>
</html>

十一、迭代器

迭代器(Iterator)是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署lterator接口，就可以完成遍历操作。
ES6 创造了一种新的遍历命令 for..of 循环，lterator 接口主要供 for..of 消费

原生具备iterator 接口的数据(可用for of遍历)：
Array、Arguments、Set、Map、String、TypedArray、NodeList 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const tfboys=['王俊凯','王源','易烊千玺'];//for...of 中表 键值for(let v of tfboys){console.log(v);}//for...in 中表 下标for(let v in tfboys){console.log(v);}</script>
</body>
</html>

工作原理

  1. 创建一个指针对象，指向当前数据结构的起始位置
  2. 第一次调用对象的next 方法，指针自动指向数据结构的第一个成员
  3. 接下来不断调用 next 方法，指针一直往后移动，直到向最后一个成员
  4. 每调用 next方法返回一个包含 value 和 done 属性的对象

需要自定义遍历数据的时候，要想到迭代器。 

 11.1 自定义遍历数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const clazz={name:'1班',stus:['张三','李四','王五'],[Symbol.iterator](){//索引变量let index=0;let _this=this;return{next:function(){if(index<_this.stus.length){const res={value:_this.stus[index],done:false};//下标自增index++;//返回结果return res;}else{return {value:undefined,done:true};}}};}}for(let v of clazz){console.log(v);}</script>
</body>
</html>

十二、生成器

生成器函数其实是一种特殊的函数，用于异步编程 

12.1 声明与调用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//声明function * gen(){console.log("hello tian")}//调用let iterator=gen();iterator.next();</script>
</body>
</html>

生成器函数可用 yield 函数代码的分隔符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function * gen(){console.log(111);yield '一只没有耳朵';console.log(222);yield '一只没有尾巴';console.log(333);yield '真奇怪';console.log(444);}function * gen1(){yield '一只没有耳朵';yield '一只没有尾巴';yield '真奇怪';}//调用let iterator=gen();//只输出每个模块中的输出内容iterator.next();iterator.next();iterator.next();iterator.next();console.log("---------------");let iterator1=gen1();//会输出返回的value值console.log(iterator1.next());console.log(iterator1.next());console.log(iterator1.next());console.log(iterator1.next());console.log("---------------");for(let v of gen1()){console.log(v);}</script>
</body>
</html>

12.2 参数传递

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function * gen(arg){console.log(arg);let one=yield 111;console.log(one);let two=yield 222;console.log(two);let three=yield 333;console.log(three);}//arg接受AAAlet iterator=gen('AAA');//输出第一模块间语句，并且输出第一条yieldconsole.log(iterator.next());//next方法可以传入实参，作为上一条yield语句的返回值console.log(iterator.next('BBB'));console.log(iterator.next('CCC'));console.log(iterator.next('DDD'));</script>
</body>
</html>

12.3 案例

1s后控制台输出111，2s后输出222，3s后输出333。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//回调地狱，此方法不建议setTimeout(()=>{console.log(111);setTimeout(()=>{console.log(222);setTimeout(()=>{console.log(333);},3000)},2000)},1000)function one(){setTimeout(()=>{console.log(111);iterator.next();},1000)}function two(){setTimeout(()=>{console.log(222);iterator.next();},2000)}function three(){setTimeout(()=>{console.log(333);iterator.next();},3000)}function * gen(){yield one();yield two();yield three();}let iterator=gen();iterator.next();</script>
</body>
</html>

模拟获取 用户数据 订单数据 商品数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function getUsers(){setTimeout(()=>{let data='用户数据';iterator.next(data);},1000);}function getOders(){setTimeout(()=>{let data='订单数据';iterator.next(data);},1000);}function getGoods(){setTimeout(()=>{let data='商品数据';iterator.next(data);},1000);}function * gen(){let users=yield getUsers();console.log(users);let oders=yield getOders();console.log(oders);let goods=yield getGoods();console.log(goods);}let iterator=gen();iterator.next();</script>
</body>
</html>

十三、Promise

13.1 基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//实例化Promise对象,参数为函数，函数的参数resolve表示成功，reject表示失败const p=new Promise(function(resolve,reject){setTimeout(function(){let data='用户数据';resolve(data);},1000);})//参数为两个函数，第一个函数对应resolve成功执行，第二个函数对应reject失败执行p.then(function(value){console.log(value);},function(reason){console.error(reason);})</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//实例化Promise对象,参数为函数，函数的参数resolve表示成功，reject表示失败const p=new Promise(function(resolve,reject){setTimeout(function(){let err='数据读取失败';reject(err);},1000);})//参数为两个函数，第一个函数对应resolve成功执行，第二个函数对应reject失败执行p.then(function(value){console.log(value);},function(reason){console.error(reason);})</script>
</body>
</html>

 

调用 resolve 后，p 的状态变为成功，并调用 p.then() 参数中第一个函数；

调用 reject 后，p 的状态变为失败， 并调用 p.then() 参数中第二个函数。

13.2 读取文件

const fs=require('fs');
const { resourceLimits } = require('worker_threads');
//1.调用方法读取文件
fs.readFile('./静夜思.md',(err,data)=>{//如果失败，则抛出异常if(err) throw err;//如果成功，则输出内容console.log(data.toString());
});
//2.使用Promise封装
const p=new Promise(function(resolve,reject){fs.readFile("./静夜思.md",(err,data)=>{if(err) reject(err);resolve(data);});
});
p.then(function(value){console.log(value.toString());
},function(reason){console.log("读取失败！！");
})

13.3 封装AJAX请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const p=new Promise((reslove,reject)=>{//1.创建对象const xhr=new XMLHttpRequest();//2.初始化xhr.open("GET","https://api.apiopen.top/getJoke");//3.发送xhr.send();//4.绑定事件，处理响应结果xhr.onreadystatechange=function(){if(xhr.readyState===4){if(xhr.status>=200 && xhr.status<300){//表示成功reslove(xhr.response);}else{//如果失败reject(xhr.status);}}}});//指定回调p.then(function(value){console.log(value);},function(reason){console.error(reason);})</script>
</body>
</html>

13.4 then方法

调用 then 方法， then 方法的返回结果是 Promise 对象，对象状态由回调函数的执行结果决定。

如果回调函数中返回的结果是 非Promise 类型的属性，状态为已完成，返回值为对象的成功的值；

是 Promise 对象，状态为已完成，返回值为 调用 resolve 或 reject 传的值；

抛出异常，状态为失败，返回值为 抛出的异常值；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const p=new Promise((resolve,reject)=>{setTimeout(()=>{resolve("用户数据");},1000)});//返回结果为非promise对象，不写return默认为undefinedconst res=p.then(value=>{console.log(value);return 123;},reason=>{console.warn(reason);})console.log(res);</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const p=new Promise((resolve,reject)=>{setTimeout(()=>{resolve("用户数据");},1000)});//返回结果为非promise对象，不写return默认为undefinedconst res=p.then(value=>{console.log(value);return new Promise((resolve,reject)=>{resolve("ok");})},reason=>{console.warn(reason);})console.log(res);</script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const p=new Promise((resolve,reject)=>{setTimeout(()=>{resolve("用户数据");},1000)});//返回结果为非promise对象，不写return默认为undefinedconst res=p.then(value=>{console.log(value);throw "出错啦！！！";},reason=>{console.warn(reason);})console.log(res);</script>
</body>
</html>

 可进行链式调用！！！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const p=new Promise((resolve,reject)=>{setTimeout(()=>{resolve("用户数据");},1000)});p.then(value=>{},reason=>{}).then(value=>{},reason=>{});</script>
</body>
</html>

相关文章：

ES6基础内容

ES 全称 EcmaScript ,是脚本语言的规范&#xff0c;而平时经常编写的 JavaScript 是 EcmaScript 的一种实现&#xff0c;所以 ES 新特性其实指的就是 JavaScript 的新特性。 一、 let变量声明和声明特性 1.1 变量声明 <!DOCTYPE html> <html lang"en">…...

编程日记 2025/2/5 23:28:42

DeepSeek本地部署的一些使用体会

春节期间我也尝试了一下Deepseek的本地部署&#xff0c;方案选用了Ollama Chatbox或AnythingLLM。Chatbox里有很多有意思的“助手”&#xff0c;而AnythingLLM支持本地知识库。 网上教程很多&#xff0c;总的来说还是很方便的&#xff0c;不需要费太多脑子。甚至可以这么说&a…...

编程日记 2025/2/5 23:25:39

鲸鱼算法 matlab pso

算法原理 鲸鱼优化算法的核心思想是通过模拟座头鲸的捕食过程来进行搜索和优化。座头鲸在捕猎时会围绕猎物游动并产生气泡网&#xff0c;迫使猎物聚集。这一行为被用来设计搜索策略&#xff0c;使算法能够有效地找到全局最优解。 算法步骤 ‌初始化‌&#xff1a;随机生成一…...

编程日记 2025/2/5 23:20:35

013-51单片机红外遥控器模拟控制空调，自动制冷制热定时开关

主要功能是通过红外遥控器模拟控制空调&#xff0c;可以实现根据环境温度制冷和制热&#xff0c;能够通过遥控器设定温度&#xff0c;可以定时开关空调。 1.硬件介绍 硬件是我自己设计的一个通用的51单片机开发平台&#xff0c;可以根据需要自行焊接模块&#xff0c;这是用立创…...

编程日记 2025/2/5 23:10:25

在Vue3 + Vite 项目中使用 Tailwind CSS 4.0

文章目录 首先是我的package.json根据官网步骤VS Code安装插件验证是否引入成功参考资料 首先是我的package.json {"name": "aplumweb","private": true,"version": "0.0.0","type": "module","s…...

编程日记 2025/2/5 23:08:23

Leetcode—922. 按奇偶排序数组 II【简单】

2025每日刷题&#xff08;207&#xff09; Leetcode—922. 按奇偶排序数组 II 实现代码 class Solution { public:vector<int> sortArrayByParityII(vector<int>& nums) {for(int i 0, j 1; i < nums.size() - 1; i 2) {// 前奇后偶if(nums[i] % 2) {w…...

编程日记 2025/2/5 23:06:20

一个开源 GenBI AI 本地代理（确保本地数据安全），使数据驱动型团队能够与其数据进行互动，生成文本到 SQL、图表、电子表格、报告和 BI

一、GenBI AI 代理介绍&#xff08;文末提供下载&#xff09; github地址&#xff1a;https://github.com/Canner/WrenAI 本文信息图片均来源于github作者主页 在 Wren AI&#xff0c;我们的使命是通过生成式商业智能 &#xff08;GenBI&#xff09; 使组织能够无缝访问数据&…...

编程日记 2025/2/5 23:02:13

使用Posix共享内存区实现进程间通信

使用Posix共享内存区实现进程间通信 使用Posix共享内存区通常涉以下步骤: 进程A 调用shm_open 创建共享内存区进程A调用ftruncate修改共享内存区大小进程A 调用mmap将共享内存区映射到进程地址空间ptrA进程A 使用ptrA对共享内存区进程更改进程B 使用shm_open打开已有共享内存…...

编程日记 2025/2/5 22:56:07

家政预约小程序12服务详情

目录 1 修改数据源2 创建页面3 搭建轮播图4 搭建基本信息5 显示服务规格6 搭建服务描述7 设置过滤条件总结 我们已经在首页、分类页面显示了服务的列表信息&#xff0c;当点击服务的内容时候需要显示服务的详情信息&#xff0c;本篇介绍一下详情页功能的搭建。 1 修改数据源 在…...

编程日记 2025/2/5 22:43:49

【C语言】指针详细解读2

1.const 修饰指针 1.1 const修饰变量 变量是可以修改的&#xff0c;如果把变量的地址交给⼀个指针变量&#xff0c;通过指针变量的也可以修改这个变量。 但是如果我们希望⼀个变量加上⼀些限制&#xff0c;不能被修改&#xff0c;怎么做呢&#xff1f;这就是const的作⽤。 #in…...

编程日记 2025/2/5 22:31:30

MongoDB 聚合

MongoDB 中聚合(aggregate)主要用于处理数据(诸如统计平均值&#xff0c;求和等)&#xff0c;并返回计算后的数据结果。 有点类似 SQL 语句中的 count(*)。 aggregate() 方法 MongoDB中聚合的方法使用aggregate()。 语法 aggregate() 方法的基本语法格式如下所示&#xff1…...

编程日记 2025/2/5 22:28:25

LabVIEW涡轮诊断系统

一、项目背景与行业痛点 涡轮机械是发电厂、航空发动机、石油化工等领域的核心动力设备&#xff0c;其运行状态直接关系到生产安全与经济效益。据统计&#xff0c;涡轮故障导致的非计划停机可造成每小时数十万元的经济损失&#xff0c;且突发故障可能引发严重安全事故。传统人…...

编程日记 2025/2/5 22:26:21

机器学习在地震预测中的应用

## 1. 机器学习与地震预测 地震是自然界的一种极端灾害&#xff0c;其发生常常给人们的生命和财产带来极大的威胁。虽然科学家们一直在寻求可靠的方法来预测地震&#xff0c;但由于地震预测本身的复杂性&#xff0c;长期以来难以取得根本性突破。然而&#xff0c;近年来&#x…...

编程日记 2025/2/5 22:25:19

总结11..

#include <stdio.h> #include <string.h> #define MAXN 1001 #define MAXM 1000001 int n, m; char maze[MAXN][MAXN]; int block[MAXN][MAXN]; // 标记每个格子所属的连通块编号 int blockSize[MAXN * MAXN]; // 记录每个连通块的大小 int dx[] {0, 0, 1, -1};…...

编程日记 2025/2/5 22:19:10

c++ 定点 new 及其汇编解释

&#xff08;1&#xff09; 代码距离&#xff1a; #include <new> // 需要包含这个头文件 #include <iostream>int main() {char buffer[sizeof(int)]; // 分配一个足够大的字符数组作为内存池int* p new(&buffer) int(42); // 使用 placement new…...

编程日记 2025/2/5 22:13:56

Linux 传输层协议 UDP 和 TCP

UDP 协议 UDP 协议端格式 16 位 UDP 长度, 表示整个数据报(UDP 首部UDP 数据)的最大长度如果校验和出错, 就会直接丢弃 UDP 的特点 UDP 传输的过程类似于寄信 . 无连接: 知道对端的 IP 和端口号就直接进行传输, 不需要建立连接不可靠: 没有确认机制, 没有重传机制; 如果因…...

编程日记 2025/2/5 22:10:50

springCload快速入门

原作者&#xff1a;3. SpringCloud - 快速通关 前置知识&#xff1a; Java17及以上、MavenSpringBoot、SpringMVC、MyBatisLinux、Docker 1. 分布式基础 1.1. 微服务 微服务架构风格&#xff0c;就像是把一个单独的应用程序开发为一套小服务&#xff0c;每个小服务运行在自…...

编程日记 2025/2/5 22:04:39

从 HTTP/1.1 到 HTTP/3：如何影响网页加载速度与性能

一、前言 在最近使用Apipost时&#xff0c;突然注意到了http/1.1和http/2&#xff0c;如下图&#xff1a; 在我根深蒂固的记忆中&#xff0c;对于http的理解还停留在TCP协议、三次握手。由于我的好奇心&#xff0c;于是触发了我被动“开卷”&#xff0c;所以有了这篇文章&…...

编程日记 2025/2/5 21:56:28

人工智能导论-第3章-知识点与学习笔记

参考教材3.2节的内容&#xff0c;介绍什么是自然演绎推理&#xff1b;解释“肯定后件”与“否定前件”两类错误的演绎推理是什么意义&#xff0c;给出具体例子加以阐述。参考教材3.3节的内容&#xff0c;介绍什么是文字&#xff08;literal&#xff09;&#xff1b;介绍什么是子…...

编程日记 2025/2/5 21:50:22

游戏引擎 Unity - Unity 下载与安装

Unity Unity 首次发布于 2005 年&#xff0c;属于 Unity Technologies Unity 使用的开发技术有&#xff1a;C# Unity 的适用平台&#xff1a;PC、主机、移动设备、VR / AR、Web 等 Unity 的适用领域&#xff1a;开发中等画质中小型项目 Unity 适合初学者或需要快速上手的开…...

编程日记 2025/2/5 21:44:09

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2025/9/17 20:43:41

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/8/10 21:01:28

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/9/11 12:54:58

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/9/8 8:54:14

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/9/12 23:22:00

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/7/26 12:16:34

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2025/9/6 19:16:38

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/8/17 23:35:19

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

编程新知 2025/9/7 8:49:16

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...

编程新知 2025/7/7 19:28:43