ES6 新特性
Posted sun927
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6 新特性相关的知识，希望对你有一定的参考价值。
ES6新特性
1.变量
(1).var 的问题：可以重复声明; 无法限制修改; 没有块级作用域;
(2).新加let： 不能重复声明; 变量—可以重新进行赋值; 块级作用域;
(3).新加const：不能重复声明; 常量—不可以重新进行赋值; 块级作用域;
//var a=1; //var a=2; //alert(a); //可以重复声明 //let a=1; //let a=2; //alert(a);//不可以重复声明 const a=1; const a=2; alert(a);//和let一样
块级作用域有什么用？
<script> window.onload=function(){ var aBtn=document.getElementsByTagName("input"); for (var i=0;i<aBtn.length;i++) { aBtn[i].onclick=function() { alert(i); } } } </script> <input type="button" value="按钮1"> <input type="button" value="按钮2"> <input type="button" value="按钮3"> //都会弹出3
以前解决的办法：用密封空间
<script> window.onload=function(){ var aBtn=document.getElementsByTagName("input"); for (var i=0;i<aBtn.length;i++) { (function(i){ //封密空间 aBtn[i].onclick=function() { alert(i); }; })(i); } } </script>
// 用一个封密空间，利用函数加了一级作用域。var 只认函数这一层。
现在：直接改成let即可
<script> window.onload=function(){ var aBtn=document.getElementsByTagName("input"); for (let i=0;i<aBtn.length;i++) //本身就是一层作用域 { aBtn[i].onclick=function() { alert(i); }; } } </script> <input type="button" value="按钮1"> <input type="button" value="按钮2"> <input type="button" value="按钮3"> //把var 改成 let 即可，for循环就是一个语法块。
总结：let 完全可以取代const
2.函数
（1）箭头函数
window.onload=function() { alert("abc") } window.onload=()=>{ alert("abc") }
箭头函数还有有两个特性：
- 如果只有一个参数，“（）”小括号可以省;
- 如果只有一个return, “ { } ”花括号可以省;
/*let show=function(a){ return a*2; }*/ //可以简写成 let show=a=> a*2; alert(show(12))
（2）函数的参数
- 参数扩展/展开;
1.收集剩余参数， 形式：三个点，一个任意名字 ...args
注意 ...args 必须放在最后一个function show(a,b,...args){ alert(a); alert(b); alert(args); } show(1,2,3,4,5,6) //1 //2 //3,4,5,6
2.展开数组：展开后的效果，相当于直接数组的内容写在这儿。
let arr1=[1,2,3]; let arr2=[5,6,8]; let arr=[...arr1,...arr2]; // let arr=[1,2,3,5,6,8]; 相当于这么写 alert(arr); //1,2,3,4,5,6,7,8
- 默认参数; ——传了听你的，不传听我的
function show(a,b=88,c=99){ console.log(a,b,c) } show(1,2) // 1,2,99
3.变量解构赋值
- 左右两边结构必须一样;
- 右边必须是个内容;
- 声明和赋值不能分开;
//数组： /*let arr=[1,2,3]; let a=arr[0]; let b=arr[1]; let c=arr[2];*/ //可以写成这样 let [a,b,c] = [1,2,3] console.log(a,b,c); //1,2,3 -------------------------------------------------------------------------------------- //json let {a,b,c} = {a:1,b:2,c:4} console.log(a,b,c); //1,2,3
4.数组
添加了四个方法：map reduce filter forEach
map — 映射 — 一个对一个
let arr=[10,2,3]; let result=arr.map(function(item){ //alert(item) return (item*2) }) alert(result) // 20，4，6 //可以写成箭头函数 let arr=[10,2,3]; let result=arr.map(item=>item*2); alert(result) // 20，4，6
--------------------------------------------------------------------------------------
//在写一个应用
let score=[90,40,58,60];
let result=score.map(item=>item>=60?"及格":"不及格");
alert(result) //及格，不及格，不及格，及格
reduce — 汇总 — 一堆出来一个
// 总和 var arr=[88,12,20]; let result=arr.reduce(function(tmp,item,index){ //alert(tmp+‘,‘+item+","+index) 三个参数分别代表：中间结果、每次的数、下标 return tmp+item; }) alert(result) // 120 //求平均数 let result =arr.reduce(function(tmp,item,index){ if(index!=arr.length-1) //不是最后一次 { return tmp+item; //先求和 } else { return (tmp+item)/arr.length; //去求平均数 } }) alert(result) // 40
filter — 过滤器
//求能被三整除的 let arr=[88,12,20,11]; let result=arr.filter(item=>item%3==0) alert(result) //12
forEach — 循环（迭代）
let arr=[12,10,44]; arr.forEach((item,index)=> { alert(index+":"+item) });
// 0：12
// 1：10
// 2：44
5.字符串
- 添加了两个新方法 ：startsWith 起始，endsWith 结尾
//startsWith
let str="http://www.baidu.com"; if(str.startsWith("http://")){ alert("普通网址") } else if(str.startsWith("https://")) { alert("保密网址") } else { alert("其他网址") } //普通网址//endsWith
let str="xxx.png"; if(str.endsWith("txt")) { alert("文本文件"); } else if(str.endsWith("png")) { alert("图片文件"); } else { alert("其他"); } //图片文件 - 字符串模板：字符串连接
1.可以把东西塞到字符串里 ${ }
2.可以换行let title="标题"; let content="内容"; let str=`<div> <h1>${title}</h1> <p>${content}</p> </div>`; alert(str); //结果: <div> <h1>标题</h1> <p>内容</p> </div>
6.面向对象
之前的缺点：构造函数和类不区分
主要变化：1.class关键字，构造器（constructor） 和类分开了；
2.class 里直接加方法。
//之前的 function User(name,pass) { this.name=name; this.pass=pass; }; User.prototype.showName=function(){ alert(this.name); }; User.prototype.showPass=function(){ alert(this.pass); }; var Obj=new User("wy","123"); Obj.showName(); Obj.showPass(); // 结果 wy 123 //ES6 class User{ constructor(name,pass){ //constructor 构造器 this.name=name; this.pass=pass; } showName(){ alert(this.name) } showPass(){ alert(this.pass) } } var Obj=new User("wy","123"); Obj.showName(); Obj.showPass(); // 结果 wy 123
继承：
extends:扩展，延展
super：超类，父类
// 之前的继承写法 function User(name,pass) { this.name=name; this.pass=pass; } User.prototype.ShowName=function(){ alert(this.name); } User.prototype.ShowPass=function(){ alert(this.pass); } function VipUser(name,pass,level) { User.call(this,name,pass); this.level=level; } VipUser.prototype=new User(); VipUser.prototype.constructor=VipUser; /*for(var i in User.prototype) { VipUser.prototype[i]=User.prototype[i]; }*/ VipUser.prototype.ShowLevel=function(){ alert(this.level) } var obj=new VipUser("wy","123","3"); obj.ShowName(); obj.ShowPass(); obj.ShowLevel(); // wy // 123 // 3 --------------------------------------------------------------------------------------------------------------- //ES6 class User{ constructor(name,pass){ this.name=name; this.pass=pass; } showName(){ alert(this.name) } showPass(){ alert(this.pass) } } class VipUser extends User{ //用extends constructor(name,pass,level){ super(name,pass); //用 super 从父类上继承属性 this.level=level; } showlevel(){ alert(this.level); } } var Obj=new VipUser("wy","123","3"); Obj.showName(); Obj.showPass(); Obj.showlevel(); // wy // 123 //3
7.json
8.promise
9.generator
以上是关于ES6 新特性的主要内容，如果未能解决你的问题，请参考以下文章