一、概念
ES6是JavaScript语言的标准。
新特性:let和const命令、变量的解构赋值、字符串函数对象数组等扩展。
环境准备:需要安装NodeJs。
二、新特性
1、let
let命令用来声明变量。他的用法类似var,但所声明的变量,只在let命令所在的代码块内有效
var特性:作用域是函数级的、存在变量提升。
let特性:作用域是块级的(花括号级)、不存在变量提升。
例子:
<script>
/************************作用域**************************/
{
var i=1;
let j=2;
}
//打印:1
console.log(i);
//打印:Uncaught ReferenceError: j is not defined
console.log(j);
/************************变量提升**************************/
//打印:undefined
console.log(a);
//打印:Uncaught ReferenceError: b is not defined
console.log(b);
var a=1;
let b=1;
/************************特殊作用域**************************/
var c=[];
// for(var d=0;d<10;d++){
for(let d=0;d<10;d++){
c[d]= function(){
console.log(d);
}
}
//当d用var定义是打印:10;当d用let定义时打印:6;
c[6]();
</script>
2、const
一旦声明,常量的值不可改变。
const一旦声明时就必须赋值。
const为块级作用域。
const声明的常量不能提升。
<script>
/****************声明后值不可变*****************/
const a=1;
//1
console.log(a);
a=2;
//报错
console.log(a);
/****************声明时就必须赋值*****************/
//报错
// const b;
// b=2;
/****************块级作用域*****************/
{
const c=1
}
//报错
console.log(c);
/****************常量不能提升*****************/
//报错
console.log(d);
const d=1;
</script>
3、对象解构赋值
解构赋值可以用于对象,对象的属性没有次序,变量名必须与属性同名。
对象的解构赋值,可以很方便的将现有对象的方法,赋值到,某个变量。
<script>
/**************用于对象******************/
var uer={
name:"11",
age:22
}
const {age,name}=uer;
//22 "11"
console.log(age,name);
/**************现有对象的方法******************/
let {log} =console
let {max,min,random}=Math;
//3
log(max(1,2,3));
</script>
4、字符串扩展
ES6加强了对Unicode的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的Unicode码。
/**************unicode******************/
//a
console.log("\u0061");
字符串遍历器接口
/**************遍历器接口******************/
for(let a of "1bsefewf"){
console.log(a);
}
模板字符串
/**************模板字符串******************/
var url="http://www.baidu.com";
//以前
var a1="<a href='"+url+"'>111</a>";
log(a1)
//现在
var a2=`<a href='${url}'>111</a>`;
log(a2)
新增方法:includes()、startsWith()、endsWith()。
var c="asdefdwe";
//true
log(c.includes("a"));
log(c.startsWith("a"));
log(c.endsWith("e"));
//带参数 true
log(c.includes("f",2));
log(c.startsWith("d",2));
//第二个参数代表第几个结束
log(c.endsWith("s",2));
repeat():返回一个新字符串,重复字符串N次
//asdefdweasdefdwe
log(c.repeat(2));
//""
log(c.repeat(0));
padStart()、padEnd():自动补全,参数一:字符补全后所处位置,参数二:补全用的字符串
//ababax
log("x".padStart(6,"ab"));
//ax
log("x".padStart(2,"ab"));
//xababa
log("x".padEnd(6,"ab"));
//xa
log("x".padEnd(2,"ab"));
trimStart()、trimEnd():分别去掉前后空格。都会返回新的字符串。
//aa
log(" aa ".trim())
//aa空格
log(" aa ".trimStart())
//空格aa
log(" aa ".trimEnd())
at():接受一个整数作为参数,返回参数指定位置的字符。正数:从下标0开始。负数:倒叙从下标-1开始。
//b
log("abc".at(1));
//b
log("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];
//66
log(Math.max.apply(null,a));
//66
log(Math.max(...a));
合并数组
let {log}=console;
var a=[1,2,43,66];
var b=[11,22,432,665];
var c=a.concat(b);
var d=[...a,...b];
//1, 2, 43, 66, 11, 22, 432, 665
log(c);
//1, 2, 43, 66, 11, 22, 432, 665
log(d);
Array.from():用于将类数组转为真正的数组。
常见类数组:arguments、元素集合、类似数组的对象。
类数组只能使用数组的读取方式和length属性。
<body>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
<script>
let {log}=console
//argument
function acc(){
//2
log(arguments[1]);
//[1, 2, 3]
log(Array.from(arguments))
}
acc(1,2,3)
//元素数组
let ps=document.getElementsByTagName("p");
//HTMLCollection(3) [p, p, p]
log(ps);
//<p>1</p>
log(ps[0])
//[p, p, p]
log(Array.from(ps));
//对象
var user={
"10":1,
"2":2,
'name':"22"
}
//1
log(user[10]);
log(Array.from(user));
</script>
Array.of:用于将一组值转换为数组。
6、对象的扩展
ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。
方法也可简写。
函数返回值也可用。
let {log} = console;
let name="hell"
var user={
name,
age:22,
//老的
// getName: function(){
// log(this.name);
// }
getName(){
log(this.name);
}
}
log(user.name);
user.getName();
/*************函数返回值**************/
function meth(){
let x=21;
let y=22;
return { x , y}
}
log(meth().x)
属性名表达式
ES6允许字面量定义对象时,用表达式作为对象的属性名,即把表达式放在方括号内。
let a="abc";
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 a=x=>{log(x)};
//1
a(1);
var b=()=>{
log("111");
}
//111
b();
var c=(x,y)=>{
log(x+y);
}
//3
c(1,2);
如果箭头函数的代码部分多于一条语句,就要使用大括号将他们括起来,并且使用return语句返回。
var d=(x,y)=>{
let aa=1;
log(x+y+aa);
}
//4
d(1,2);
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
var e=()=>({X:1,y:2})
//{X: 1, y: 2}
log(e());
箭头函数的一个用处就是简化回调函数。
var f=[1,2,3]
//1 2 3
f.map((element,index)=>{
log(element);
})
对于普通函数来说,内部的this指向函数运行时所在的对象,但是这一点对箭头函数不成立。它没有自己的this对象,内部的this就是定义时上层作用域总的this。
var name="222";
var user={
name:"111",
getName(){
// setTimeout(function(){
// //222
// log(this.name)
// })
//111
setTimeout(()=>{
log(this.name)
})
}
}
user.getName();
8、set数据结构
ES6提供了新的数据结构set。他类似数组,但是成员的值都是唯一的。没有重复的值。
set数组用法:数组去重、字符去重。
add("值"):添加值
delete("值"):删除值
has("值"):判断set里面是否有这个值
clear():清除所有成员
size:属性返回长度
<script>
let {log}=console
var setNUm=new Set();
var num=[1,2,3,4,5,5,6]
num.forEach(n=>{
setNUm.add(n);
})
//去重:1,2,3,4,5,6
log(setNUm)
var setA=new Set([1,2,3,4,4,54,5])
//使用扩展预算符展示,变为数组: 1,2,3,4,54,5
log(...setA)
//字符串去重
var str=new Set('嘤嘤嘤呃呃呃')
//转换成字符串:嘤呃
log([...str].join(''))
//返回长度:2
log(str.size)
</script>
9、Promise
promise是异步编程的一种解决方案。他是一个对象,从它可以获取异步操作的消息。promise提供统一的API,各种异步操作都可以用同样的方法进行处理
有了promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。
用法:promise对象是一个构造函数,用来生成promise实例。promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。
const promise=new 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,在:11
print();
/*------------------------同步---------------------*/
async function setTimess() {
//定时器是异步的,
return new Promise((resolve,reject)=> {
setTimeout(() => {
console.log("11")
//返回一定放着里面!!!!!!!!!!!!!!!
resolve(true);
}, 10);
})
}
async function prints(){
let res=await setTimess();
console.log(res);
}
// 先:222,在:11
prints();
11、class
ES6提供了接近传统语言的class概念,作为模板对象
constructor方法是类的默认方法,通过new命令生成对象实例,自动调用该方法。一个类必须有constructor方法,没有定义显式的,就会添加一个空的。
生成类的实例使用new 对象();
class User{
constructor(name,age){
this.name=name;
this.age=age;
}
getName(){
console.log(this.name);
}
getAge(){
return this.age
}
}
var user=new User("11",22);
user.getName();
属性与方法:
1、实例方法;
class People{
say(){
console.log("say something")
}
}
var people=new People();
people.say();
2、实例属性
class People{
constructor(name,age){
this.name=name;
this.age=age;
}
say(){
console.log(this.name+"say something"+this.age)
}
}
var people=new People("name",22);
people.say();
console.log(people.age+people.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();
//static
Abc.getSay();
var a=new Abc();
//not static
a.say();
//不能,报错
a.abc();
12、Module
Js一直没有模块体系,无法将一个大型程序拆分成相互依赖的小文件。ES6模块是通过export命令显示指定输出的代码,在通过import命令输入。
//导出
export getName(){
console.log("name");
}
//引用。name.js是上方方法的文件
import {geName} from "./name.js"