网站建设技术服务费怎么写分录,高端大气上档次的网站模板,免费播放电视剧的app有哪些,品牌商标注册查询官网ES 全称 EcmaScript ,是脚本语言的规范#xff0c;而平时经常编写的 JavaScript 是 EcmaScript 的一种实现#xff0c;所以 ES 新特性其实指的就是 JavaScript 的新特性。
一、 let变量声明和声明特性
1.1 变量声明
!DOCTYPE html
html langen而平时经常编写的 JavaScript 是 EcmaScript 的一种实现所以 ES 新特性其实指的就是 JavaScript 的新特性。
一、 let变量声明和声明特性
1.1 变量声明
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptlet a;let b,c,d;let e521;let f100,giloveyou,h[];/script
/body
/html
1.2 声明特性
1.2.1 变量不能重复声明 当用let声明两个变量名一样时会报错。
1.2.2 块级作用域 es5作用域分为 全局函数eval es6引入新的作用域块级作用域 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript{let name小羊苏西;}console.log(name);/script
/body
/html
在块之外读取不到该变量如下 将let改为var后可读取到变量 主要用于if else for while 后的{}中。
1.2.3 不存在变量提升
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconsole.log(age);var age18;console.log(addr);let addr山东省/script
/body
/html
var 声明的变量存在变量提升可在声明变量之前使用该变量而不会报错而
let 声明的变量不存在变量提升在声明变量之前使用该变量会报错。 var 声明的变量相当于在一开始就声明了该变量只是没有赋值故输出undefined。
1.2.4 不影响作用域链
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript{let phone12345;function fun(){console.log(phone);}fun();}/script
/body
/html
在块级作用域中可正常按照作用域来执行。 1.3 案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh3点击切换颜色/h3div classboxdiv classitem/divdiv classitem/divdiv classitem/div/divscript//获取div元素let itemsdocument.getElementsByClassName(item);//遍历并绑定事件for(var i0;iitems.length;i){items[i].onclick function(){//修改当前元素的背景颜色items[i].style.backgroundpink;}}/scriptstyle.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.backgroundpink 来实现该效果。
改为 let 来声明由于具有块级作用域读取到的 i 可为 012不会报错。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh3点击切换颜色/h3div classboxdiv classitem/divdiv classitem/divdiv classitem/div/divscript//获取div元素let itemsdocument.getElementsByClassName(item);//遍历并绑定事件for(let i0;iitems.length;i){items[i].onclick function(){//修改当前元素的背景颜色items[i].style.backgroundpink;}}/scriptstyle.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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconst NAME小羊苏西;/script
/body
/html
2.2 特点 一定要赋初始值 一般常量使用大写 常量的值不能修改 块级作用域 对于数组和对象的元素修改不算对常量的修改不会报错。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconst NAME[张三,李四];NAME.push(赵五);/script
/body
/html
对数组和对象的元素修改并不影响常量指向的地址不会报错。
三、变量的解构赋值
ES6 允许按照一定模式从数组和对象中提取值对变量进行赋值。
3.1 数组的解构
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconst TF[王俊凯,王源,易烊千玺];let [no1,no2,no3]TF;console.log(no1);console.log(no2);console.log(no3);/script
/body
/html 3.2 对象的解构
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconst 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptlet str我是一个字符串;console.log(str,typeof(str));/script
/body
/html 4.2 特点
4.2.1 内容中可以直接出现换行符
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptlet strulli王俊凯/lili王源/lili易烊千玺/li/ul;/script
/body
/html 使用换行符时并不会出现错误 和 会报错。
4.2.2 字符拼接
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptlet name王俊凯;let res${name}擅长唱歌跳舞;console.log(res);/script
/body
/html 五、对象简化写法
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptlet name小田;let changefunction(){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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptlet fun(a,b){return ab;}let resfun(1,2);console.log(res);/script
/body
/html 6.2 特点
6.2.1 this是静态的
始终指向函数声明时所在作用域下的this值
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptfunction 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript//省略小括号当形参有且只有一个的时候let add n {return nn;}console.log(add(9));//省略花括号当代码体只有一条语句的时候此时return必须省略//语句执行结果就是函数返回值let pow(n)n*n;console.log(pow(9));/script
/body
/html 七、函数参数默认值 ES6允许给参数参数赋值初始值
7.1 形参初始值
具有默认的参数一般位置要靠后
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptfunction add(a,b,c){return abc;}let resadd(1,2,3);console.log(res);//当c没有传值时,为undefined,相加为NaNlet res1add(1,2);console.log(res1);function add1(a,b,c10){return abc;}//当c有传值时用所传的值覆盖初始值let res2add1(1,2,3);console.log(res2);//当c没有传值时用初始值let res3add1(1,2);console.log(res3);/script
/body
/html 7.2 与解构赋值结合
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptfunction connect({host127.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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptfunction data(){console.log(arguments);}data(王俊凯,王源,易烊千玺);/script
/body
/html ES6引入 rest 参数用于获取参数的实参来替代 arguments。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptfunction 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconst tfboys[王俊凯,王源,易烊千玺];// 王俊凯,王源,易烊千玺function fn(){console.log(arguments);}fn(tfboys);console.log(----------)fn(...tfboys);// fn(王俊凯,王源,易烊千玺)/script
/body
/html 9.1 应用
9.1.1 数组的合并
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconst heze[曹县,定陶];const taian[岱岳区,泰山区];const shandongheze.concat(taian);console.log(shandong);const shandong1[...heze,...taian];console.log(shandong1);/script
/body
/html 9.1.2 数组的克隆
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconst arr[a,b,c];const arr1[...arr];console.log(arr1);/script
/body
/html 9.1.3 伪数组转换成真正数组
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv/divdiv/divdiv/divscriptconst divsdocument.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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptlet sSymbol();console.log(s,typeof s);//tian相当于一个名称或注释描述字符串let s1Symbol(tian);let s2Symbol(tian);console.log(s1s2);let s3Symbol.for(tian);let s4Symbol.for(tian);console.log(s3s4);//不能与其他数据进行运算let ress100;let res1s100;let res2ss;/script
/body
/html 10.2 symbol使用
给对象添加属性和方法表示独一无二的
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptlet game{name:王者荣耀,up:我上升到王者了,down:我下降到砖石了,};//当想向game对象添加方法 up down// game.upfunction(){},当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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptclass 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconst tfboys[王俊凯,王源,易烊千玺];//for...of 中表 键值for(let v of tfboys){console.log(v);}//for...in 中表 下标for(let v in tfboys){console.log(v);}/script
/body
/html 工作原理
创建一个指针对象指向当前数据结构的起始位置第一次调用对象的next 方法指针自动指向数据结构的第一个成员接下来不断调用 next 方法指针一直往后移动直到向最后一个成员每调用 next方法返回一个包含 value 和 done 属性的对象
需要自定义遍历数据的时候要想到迭代器。 11.1 自定义遍历数据
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconst clazz{name:1班,stus:[张三,李四,王五],[Symbol.iterator](){//索引变量let index0;let _thisthis;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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript//声明function * gen(){console.log(hello tian)}//调用let iteratorgen();iterator.next();/script
/body
/html
生成器函数可用 yield 函数代码的分隔符
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptfunction * gen(){console.log(111);yield 一只没有耳朵;console.log(222);yield 一只没有尾巴;console.log(333);yield 真奇怪;console.log(444);}function * gen1(){yield 一只没有耳朵;yield 一只没有尾巴;yield 真奇怪;}//调用let iteratorgen();//只输出每个模块中的输出内容iterator.next();iterator.next();iterator.next();iterator.next();console.log(---------------);let iterator1gen1();//会输出返回的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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptfunction * gen(arg){console.log(arg);let oneyield 111;console.log(one);let twoyield 222;console.log(two);let threeyield 333;console.log(three);}//arg接受AAAlet iteratorgen(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后控制台输出1112s后输出2223s后输出333。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript//回调地狱此方法不建议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 iteratorgen();iterator.next();/script
/body
/html
模拟获取 用户数据 订单数据 商品数据
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptfunction 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 usersyield getUsers();console.log(users);let odersyield getOders();console.log(oders);let goodsyield getGoods();console.log(goods);}let iteratorgen();iterator.next();/script
/body
/html 十三、Promise
13.1 基本使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript//实例化Promise对象,参数为函数函数的参数resolve表示成功reject表示失败const pnew 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscript//实例化Promise对象,参数为函数函数的参数resolve表示成功reject表示失败const pnew 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 fsrequire(fs);
const { resourceLimits } require(worker_threads);
//1.调用方法读取文件
fs.readFile(./静夜思.md,(err,data){//如果失败则抛出异常if(err) throw err;//如果成功则输出内容console.log(data.toString());
});
//2.使用Promise封装
const pnew 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconst pnew Promise((reslove,reject){//1.创建对象const xhrnew XMLHttpRequest();//2.初始化xhr.open(GET,https://api.apiopen.top/getJoke);//3.发送xhr.send();//4.绑定事件处理响应结果xhr.onreadystatechangefunction(){if(xhr.readyState4){if(xhr.status200 xhr.status300){//表示成功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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconst pnew Promise((resolve,reject){setTimeout((){resolve(用户数据);},1000)});//返回结果为非promise对象不写return默认为undefinedconst resp.then(value{console.log(value);return 123;},reason{console.warn(reason);})console.log(res);/script
/body
/html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconst pnew Promise((resolve,reject){setTimeout((){resolve(用户数据);},1000)});//返回结果为非promise对象不写return默认为undefinedconst resp.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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconst pnew Promise((resolve,reject){setTimeout((){resolve(用户数据);},1000)});//返回结果为非promise对象不写return默认为undefinedconst resp.then(value{console.log(value);throw 出错啦;},reason{console.warn(reason);})console.log(res);/script
/body
/html 可进行链式调用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptconst pnew Promise((resolve,reject){setTimeout((){resolve(用户数据);},1000)});p.then(value{},reason{}).then(value{},reason{});/script
/body
/html
