西安大网站建设公司,各大推广平台,有什么推广网站,网站制作的重要性一、概念 ES6是JavaScript语言的标准。 新特性#xff1a;let和const命令、变量的解构赋值、字符串函数对象数组等扩展。 环境准备#xff1a;需要安装NodeJs。
二、新特性
1、let let命令用来声明变量。他的用法类似var#xff0c;但所声明的变量#xff0c;只在let命令…一、概念 ES6是JavaScript语言的标准。 新特性let和const命令、变量的解构赋值、字符串函数对象数组等扩展。 环境准备需要安装NodeJs。
二、新特性
1、let let命令用来声明变量。他的用法类似var但所声明的变量只在let命令所在的代码块内有效 var特性作用域是函数级的、存在变量提升。 let特性作用域是块级的(花括号级)、不存在变量提升。 例子
script/************************作用域**************************/ {var i1;let j2;}//打印1console.log(i);//打印Uncaught ReferenceError: j is not definedconsole.log(j);/************************变量提升**************************/ //打印undefinedconsole.log(a);//打印Uncaught ReferenceError: b is not definedconsole.log(b);var a1;let b1;/************************特殊作用域**************************/var c[];// for(var d0;d10;d){for(let d0;d10;d){c[d] function(){console.log(d);}}//当d用var定义是打印10当d用let定义时打印6c[6]();
/script
2、const 一旦声明常量的值不可改变。 const一旦声明时就必须赋值。 const为块级作用域。 const声明的常量不能提升。
script/****************声明后值不可变*****************/const a1;//1console.log(a);a2;//报错console.log(a);/****************声明时就必须赋值*****************///报错// const b;// b2;/****************块级作用域*****************/{const c1}//报错console.log(c);/****************常量不能提升*****************///报错console.log(d);const d1;/script 3、对象解构赋值 解构赋值可以用于对象对象的属性没有次序变量名必须与属性同名。 对象的解构赋值可以很方便的将现有对象的方法赋值到某个变量。
script/**************用于对象******************/var uer{name:11,age:22}const {age,name}uer;//22 11console.log(age,name);/**************现有对象的方法******************/let {log} consolelet {max,min,random}Math;//3log(max(1,2,3));
/script 4、字符串扩展 ES6加强了对Unicode的支持允许采用\uxxxx形式表示一个字符其中xxxx表示字符的Unicode码。 /**************unicode******************///aconsole.log(\u0061); 字符串遍历器接口
/**************遍历器接口******************/for(let a of 1bsefewf){console.log(a);} 模板字符串 /**************模板字符串******************/var urlhttp://www.baidu.com;//以前var a1a hrefurl111/a;log(a1)//现在var a2a href${url}111/a;log(a2) 新增方法includes()、startsWith()、endsWith()。 var casdefdwe;//truelog(c.includes(a));log(c.startsWith(a));log(c.endsWith(e));//带参数 truelog(c.includes(f,2));log(c.startsWith(d,2));//第二个参数代表第几个结束log(c.endsWith(s,2)); repeat()返回一个新字符串重复字符串N次 //asdefdweasdefdwelog(c.repeat(2));//log(c.repeat(0)); padStart()、padEnd()自动补全参数一字符补全后所处位置参数二补全用的字符串 //ababaxlog(x.padStart(6,ab));//axlog(x.padStart(2,ab));//xababalog(x.padEnd(6,ab));//xalog(x.padEnd(2,ab)); trimStart()、trimEnd()分别去掉前后空格。都会返回新的字符串。 //aalog( aa .trim())//aa空格log( aa .trimStart())//空格aalog( aa .trimEnd()) at()接受一个整数作为参数返回参数指定位置的字符。正数从下标0开始。负数倒叙从下标-1开始。
//blog(abc.at(1));//blog(abc.at(-2)); 5、数组扩展 扩展运算符是三个点组成(...)。将一个数组转为用逗号分隔的参数序列。 let {log}console;//1 1 2 3 log(1,...[1,2,3]); 替代函数的appply方法。 let {log}console;var a[1,2,43,66];//66log(Math.max.apply(null,a));//66log(Math.max(...a)); 合并数组 let {log}console;var a[1,2,43,66];var b[11,22,432,665];var ca.concat(b);var d[...a,...b];//1, 2, 43, 66, 11, 22, 432, 665log(c);//1, 2, 43, 66, 11, 22, 432, 665log(d); Array.from()用于将类数组转为真正的数组。 常见类数组arguments、元素集合、类似数组的对象。 类数组只能使用数组的读取方式和length属性。
bodyp1/pp2/pp3/p
/body
scriptlet {log}console//argumentfunction acc(){//2log(arguments[1]);//[1, 2, 3]log(Array.from(arguments))}acc(1,2,3)//元素数组let psdocument.getElementsByTagName(p);//HTMLCollection(3) [p, p, p]log(ps);//p1/plog(ps[0])//[p, p, p]log(Array.from(ps));//对象var user{10:1,2:2,name:22}//1log(user[10]);log(Array.from(user));
/script Array.of用于将一组值转换为数组。
6、对象的扩展 ES6允许在大括号里面直接写入变量和函数作为对象的属性和方法。 方法也可简写。 函数返回值也可用。 let {log} console;let namehellvar user{name,age:22,//老的// getName: function(){// log(this.name);// }getName(){log(this.name);}}log(user.name);user.getName();/*************函数返回值**************/function meth(){let x21;let y22;return { x , y}}log(meth().x) 属性名表达式 ES6允许字面量定义对象时用表达式作为对象的属性名即把表达式放在方括号内。 let aabc;var b{[a]:22,name:222}//{abc: 22, name: 222}log(b); 对象的扩展运算符 let d{a:1,b:2}let f{...d}// {a: 1, b: 2}log(f);
7、箭头函数 在ES6中允许“箭头”()定义函数 如果箭头函数不需要参数或需要多个参数就使用一个圆括号代表参数部分。 let {log}console//参数var ax{log(x)};//1a(1);var b(){log(111);}//111b();var c(x,y){log(xy);}//3c(1,2); 如果箭头函数的代码部分多于一条语句就要使用大括号将他们括起来并且使用return语句返回。 var d(x,y){let aa1;log(xyaa);}//4d(1,2); 由于大括号被解释为代码块所以如果箭头函数直接返回一个对象必须在对象外面加上括号否则会报错。 var e()({X:1,y:2})//{X: 1, y: 2}log(e()); 箭头函数的一个用处就是简化回调函数。 var f[1,2,3]//1 2 3f.map((element,index){log(element);}) 对于普通函数来说内部的this指向函数运行时所在的对象但是这一点对箭头函数不成立。它没有自己的this对象内部的this就是定义时上层作用域总的this。 var name222;var user{name:111,getName(){// setTimeout(function(){// //222// log(this.name)// })//111setTimeout((){log(this.name)})}}user.getName();
8、set数据结构 ES6提供了新的数据结构set。他类似数组但是成员的值都是唯一的。没有重复的值。 set数组用法数组去重、字符去重。 add(值)添加值 delete(值)删除值 has(值)判断set里面是否有这个值 clear()清除所有成员 size属性返回长度
scriptlet {log}consolevar setNUmnew Set();var num[1,2,3,4,5,5,6]num.forEach(n{setNUm.add(n);})//去重123456log(setNUm)var setAnew Set([1,2,3,4,4,54,5])//使用扩展预算符展示变为数组 1,2,3,4,54,5log(...setA)//字符串去重var strnew Set(嘤嘤嘤呃呃呃)//转换成字符串嘤呃log([...str].join())//返回长度:2log(str.size)/script
9、Promise promise是异步编程的一种解决方案。他是一个对象从它可以获取异步操作的消息。promise提供统一的API各种异步操作都可以用同样的方法进行处理 有了promise对象就可以将异步操作以同步操作的流程表达出来避免了层层嵌套的回调函数。 用法promise对象是一个构造函数用来生成promise实例。promise构造函数接受一个函数作为参数该函数的两个参数分别是resolve和reject。 const promisenew Promise((resolve,reject){if(成功){resolve(true)}else{reject(false)}})
10、Async async可以将异步操作变为同步操作。 在函数前面添加Async是异步的前面添加await 实际运用在发请求时需要另一个请求获取到数据后在拿着这个数据去发送请求。 /*------------------------异步---------------------*/function print() {//定时器是异步的setTimeout(() {console.log(异步11)}, 10);//先执行console.log(异步222)}// 先222在11print();/*------------------------同步---------------------*/async function setTimess() {//定时器是异步的return new Promise((resolve,reject) {setTimeout(() {console.log(11)//返回一定放着里面resolve(true);}, 10);})}async function prints(){let resawait setTimess();console.log(res);}// 先222在11prints();11、class ES6提供了接近传统语言的class概念作为模板对象 constructor方法是类的默认方法通过new命令生成对象实例自动调用该方法。一个类必须有constructor方法没有定义显式的就会添加一个空的。 生成类的实例使用new 对象(); class User{constructor(name,age){this.namename;this.ageage;}getName(){console.log(this.name);}getAge(){return this.age}}var usernew User(11,22);user.getName(); 属性与方法 1、实例方法 class People{say(){console.log(say something)}}var peoplenew People();people.say();2、实例属性 class People{constructor(name,age){this.namename;this.ageage;}say(){console.log(this.namesay somethingthis.age)}}var peoplenew People(name,22);people.say();console.log(people.agepeople.name) 3、静态方法 类相当于实力的原型所有在类中定义的方法都会被实例继承。如果在一个方法前加上关键字static就表示该方法不会被实例继承。 如果静态方法包含this关键字这this指的是类而不是实例。 class Abc{static abc(){console.log(静态方法)}static getSay(){this.say();}static say(){console.log(static)}say(){console.log(not static)}}Abc.abc();//staticAbc.getSay();var anew Abc();//not statica.say();//不能报错a.abc();
12、Module Js一直没有模块体系无法将一个大型程序拆分成相互依赖的小文件。ES6模块是通过export命令显示指定输出的代码在通过import命令输入。 //导出
export getName(){console.log(name);
}//引用。name.js是上方方法的文件
import {geName} from ./name.js
