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.收集剩余参数， 形式：三个点，一个任意名字 ...argsfunction show(a,b,...args){ alert(a); alert(b); alert(args); } show(1,2,3,4,5,6) //1 //2 //3,4,5,6注意 ...args 必须放在最后一个
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
原文地址：https://www.cnblogs.com/sun927/p/9429909.html
时间： 2024-11-06 07:15:39