ES6是ECMAScript6的简称,是ECMAScript的第六个版本,与2015年6月正式发布的JavaS语言的标准,正式名位 ECMAScript2015(ES2015)。但是目前浏览器的JavaS是ES5的版本,大多数的高版本的浏览器也支持ES6,不过只实现了ES6的部分特性和功能。但ES6会成为未来的趋势。
新增作用域
块级作用域
在ES6中,使用ES6的声明关键词可以创建块级作用域。使用{…}语法,就可以标注出一个块级作用域,并且{}是可以直接存在的,它并不是函数。块级作用域的每个使用区域都是独立的,包括if,for。
新增的声明关键字
一、声明变量
ES6新增了两个重要的JavaScript关键字,let和const。
1.let:
(1).首先let不同于var,它没有提升(不存在预解析)。
console.log(a); // ReferenceError: a is not defined
let a = "abc";
console.log(b); // undefined
var b = "def";
(2).let不同于var,不能重复声明。
let a = "abc";
let a = 5; // Identifier 'a' has already been declared
(3).let存在块级作用域。
{
let a = "abc";
var b = "def";
}
console.log(a); // ReferenceError: a is not defined
console.log(b); //def
在for循环中的let:
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
var ali = document.getElementsByTagName("li");
// let生成了块级作用域,在此处,块级作用域触发了闭包
for(let i=0;i<ali.length;i++){
ali[i].onclick = function(){
console.log(i);
}
} //根据点击的li从上到下的结果是0,1,2,3
for(var j=0;j<ali.length;j++){
ali[j].onclick = function(){
console.log(j);
}
} //不论点击那个,结果都会是4
2.const:
const在使用上与let没有区别,但const声明的是常量,不是变量(常量不允许被修改,声明的是什么就是什么,声明之后不允许修改),所有const在声明时,必须立即给初始值。
const a = “abc”;
console.log(a); //abc
const b; // Missing initializer in const declaration
3.let与const的区别
在写法上没什么不同。const要立刻赋值,另一个不用。let可以随意修改,另一个不允许修改地址,可以修改值。
二、声明类(面向对象)
在ES6中,class(类)作为了对象的模板被引入,可以使用class关键字来声明类。但class的本质是function,它只是让写法更加清晰,更像面向对象的编程语法。
ES5:
function Fn(){
this.x = 0;
this.y = 0;
}
Fn.prototype.addEvent = function(){
this.setA;
this.setB;
}
Fn.prototype.setA = function(){}
Fn.prototype.setB = function(){}
Var t = new Fn();
t.addEvent();
ES6class:
class Fn{
constructor(){
this.x = 0;
this.y = 0;
}
addEvent(){
this.setA();
this.setB();
}
setA(){}
setB(){}
}
三、声明接口和引入接口(模块化开发)
ES6引入了模块化,分为导出(export)与导入(import)。以后有机会再补充。
新增的箭头函数
ES6新增了一种更加简洁函数书写方式,书写方式是()=>{}
。箭头函数就是简化了的无名函数,不允许直接存在,必须作为值存在。
当只有一个参数的时候,小括号可以省略:
let fn = a => {console.log(a);}
可以省略花括号的场景(如果想将函数的内容,返回,可以省略花括号的同时,可以省略return,仅限简单语句)。
let fn = a=>{"0"+a;}
let fn = a=>"0"+a;
注!:在箭头函数内部,没有自己的this,使用的是外层函数的this。同时,在箭头函数内部没有arguments。
一般来说,箭头函数用在回调函数上,会比较方便(如果是事件监听式绑定事件的方法,不要使用箭头函数)。
ES6新增的处理默认参数的方式
ES6新增了一种对默认参数处理的方式:
function fn(a,b="默认值"){console.log(a,b);}
function fn(a,b="abc"){console.log(a,b);}
fn("xyz","def"); //xyz,def
fn("xyz",""); //xyz,
fn("xyz"); //xyz,abc
ES6解构赋值
1.数组的解构赋值[]:从左向右(按照书写顺序)依次解构
let arr = ["hello","world","aaa",777]
let [a,b,c,d] = arr;
console.log(a,b,c,d); //hello world aaa 777
2.对象的解构赋值{}:按照对象的键名去解析
let obj = {name:"Admin", age:18, sex:"man", like:"ball", show: ()=> {console.log("a");}}
let {name,age,like} = obj;
console.log(name,age,like); //Admin 18 ball
3.字符的解构赋值:等同于数组的解构赋值
let str = "hello html";
let [a,b,c,d,e,f] = str;
console.log(a,b,c,d,e,f); // h e l l o
4.两个变量的值的交换
var a=10;
var b=20;
var [a,b] = [b,a]
//注:不能用let
5.函数的参数的快速解析
function fn([q,z]){console.log(q,z)}
let arr = ["hello","world"]
fn(arr) // hello world
ES6新增的字符串拼接
在老版本中,字符串的使用有双引号或这单引号,但它们不是很方便,不能进行换行等操作。而在ES6中新增了一种字符串的使用方法反引号``,这种字符串支持换行,而在反括号中拼接变量直接使用${}
就可以,不像老版本需要使用双引号以及单引号交替拼接。
<div id="box"></div>
老版本:
var a = 5;
var str = '<div><p>'+5+'</p></div>';
var box = document.getElementById("box");
box.innerHTML = str;
新版本:
Var a = 5;
Var str = `<div>
<p>${a}</p>
</div>`
var box = document.getElementById("box");
box.innerHTML = str;
ES6新增的展开运算符
在ES6之中,新增了一种展开运算符,用…表示。可以把数组或对象之中的值展开,打散。
数组:
let arr1 = [4,5,6];
let arr2 = ["hello", ...arr1, "world"];
console.log(arr2); // ["hello", 4, 5, 6, "world"]
对象:
let obj1 = {
name:"admin",
age:18
}
let obj2 = {
...obj1,
like:"ball",
sex:"男"
}
console.log(obj2);// {name: "admin", age: 18, like: "ball", sex: "男"}
这次整理就到这里,有机会再完善。在疫情之中逆战必胜。