ES6新增的方法有哪些
(1)let
区别1:
let定义的变量只能在代码块{}里面使用,形成一个{}块级作用域
var作用于函数作用域
区别2:
let不允许重复声明,它是一个封闭空间,解决了i问题
var a=5
var a=12 //-->a=5
let a=5
let a=12 //-->error
区别3:
const
const用来定义常量,一旦定义了,后面就不能修改了
(2)箭头函数=>
*function()中this是指向调用这个函数的对象
箭头函数中,this指向了window
arguments,不能使用
由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略
(3)解构赋值
左右两边结构一样
右边必须是合法结构(错误例子:{12,5,8})
声明和赋值写在一句话中(错误例子:let [a,b]; [a,b]=[12,5];)
//数组
let [a,b,c]=[12,5,101] // a=12,b=5,c=101
//JSON
let {a,b,c}={b:5,a:12,c:101} // json跟顺序无关,a=12,b=5,c=101
//混合型,左右结构、顺序一致
let [{a,b},[n1,n2,n3],num,str] = [{a:12,b:5},[12,5,8],8,'EcmaScript']
//a=3,b=8,c is not defined 对数组的解构
var [a,b]=[3,5,8];
//x=V,y=u,z=e 对字符串的结构
var [x,y,z]=Vue;
//m=10,n=20 对象的解构,对key进行拆分
var {n,m}={m:10,n:20};
(4)复制数组
var arr1=[1,2,3,4]
for(var i=0;i<arr1.length;i++){
arr2[i]=arr1[i]
}
arr2=Array.from(arr1)
(5)JSON
//简写,当key,value一样时,可以只写一个
{m:m,n:n}--->{m,n}
//其中也可以有key、value不相同的
let a=12;
let b=5;
let json={a,b,c:8}; //{a:a,b:b,c:8}
console.log(json); //{a:12,b:5,c:8}
//JSON里的方法简写,`:function`可以省略
let json={
a:12,
show(){ //show:function(){
alert(this.a)
}
}
(6)字符串模板 ``(反单引号)
用于字符串连接,可以换行
`string text ${expression} string text`
(7)rest参数...(3个点)
var [x,...y]=[4,8,10,30] //x=4,y=[8,10,30] y成了动态参数
let xy=[...'es6']; //['e','s','6'] 拆解
//数组拆分
console.log(...[4,8]) //4,8
//数组拆分的进阶
let arr1 =[1,3];let arr2=[4,8];
[...arr1,...arr2] //[1,3,4,8]
(8)默认参数
function show(a,b=5,c=12){
console.log(a,b,c);
}
show(99,19) //99,19,12
show(99) //99,5,12
(9)for of循环
//for in
var arr=['apple','banana','orange','pear']
for(var i in arr){
console.log(i); // for in 出来的是 索引0 1 2 3
}
//for of
var arr=['apple','banana','orange','pear']
for(var i of arr){
console.log.(i); // for of 出来的是 实际apple,banana等
}
for of可以循环数组,但是不能循环json,因为它是为了与map配合使用
(10)Map(数据结构)
与for of配合使用,是一个key、value
var map = new Map();
map.set(name,value); // 可以设置name,value
map.get(name); // 可以单独获取name
map.delete(name); // 可以单独删除name
//与for of 的配合
for(var name of map){
console.log(name); // a,apple b,banana
}
for(var [key,value] of map){
console.log(key,value); // key,value
}
for(var key of map.keys) // 可以只循环map中的key值
(11)map(数组)
映射–原数组映射成新数组,一个对应一个
//例一
let arr=[12,5,8];
let result=arr.map(item=>item*2);
alert(result);
//例二
let score=[19, 85, 99, 25, 90];
let result=score.map(item=>item>=60?'及格':'不及格');
alert(score);
alert(result);
(12)reduce(数组)
汇总–求和–多个变成一个
//求和
let arr=[12,69,180,8763];
let result=arr.reduce(function (tmp, item, index){
//alert(tmp+','+item+','+index);
return tmp+item;
});
alert(result);
//求平均数
let arr=[12,69,180,8763];
let result=arr.reduce(function (tmp, item, index){
if(index!=arr.length-1){ //不是最后一次
return tmp+item;
}else{ //最后一次
return (tmp+item)/arr.length;
}
});
alert(result);
(13)filter(数组)
过滤器
let arr=[12,5,8,99,27,36,75,11];
//选择能够被3整除的数
let result=arr.filter(item=>item%3==0);
alert(result);
(14)forEach(数组)
循环–迭代
let arr=[12,5,8,9];
arr.forEach((item,index)=>{
alert(index+': '+item);
});
(15)面向对象class
使用了class关键字,现在构造函数和类分开了
class里面直接加方法
//old
function User(name, pass){
this.name=name;
this.pass=pass;
}
User.prototype.showName=function (){
alert(this.name);
};
User.prototype.showPass=function (){
alert(this.pass);
};
//ES6
class User{
constructor(name, pass){
this.name=name;
this.pass=pass;
}
showName(){
alert(this.name);
}
showPass(){
alert(this.pass);
}
}
(16)继承extends
old: 子类.prototype = new 父类
ES6: class 子类 extends 父类{}
supper关键字:超类、父类
//old
function VipUser(name, pass, level){
User.call(this, name, pass);
this.level=level;
}
VipUser.prototype=new User();
VipUser.prototype.constructor=VipUser;
VipUser.prototype.showLevel=function (){
alert(this.level);
};
//ES6
class VipUser extends User{
constructor(name, pass, level){
super(name, pass);
this.level=level;
}
showLevel(){
alert(this.level);
}
}
(17)模块化
exprot default // 导出
import modA from './a.js' // 引入模块
原文链接:https://blog.csdn.net/wsymcxy/article/details/82913756 这个大佬写的太全了。