ES6新增内容

es6兼容低版本方法:

1在线转换

2提前编译

主要内容

1变量

var	let	const
可以重复声明	不可以重复声明	不可以重复声明
无法限制修改	变量可以修改	不可以修改
没有块级作用域	块级作用域	块级作用域

2函数

参数扩展/展开

​ 收集剩余参数,必须是最后一个形参 ,使用…形参名,来接收;

​ 展开数组,相当将数组的内容拿出来 例子:arr=[1,2,3] 就相当于 arr=1,2,3 也可以当做实参传入函数;

默认参数

​ function(a=5,b=7){} 5和7就相当于给了一个默认参数 ,但传入是参数时,使用传入的值,如果不传,使用默认

​ 的参数;

3数组

​ map 映射 一个对一个 (让数组通过某种计算产生一个新数组)

let arr = [1,2,3,4,5];
let newArray = arr.map((item,index)=> {
    return item * 2
});
newArray  // [2, 4, 6, 8, 10]
arr // [1,2,3,4,5]

​ reduce 汇总 (让数组中的前项和后项做某种计算，并累计最终值)

<script>
    //使用reduce计算平均数
    let  arr=[2,4,6,8];
    let  d=arr.reduce(function (a,b,c) {
        //a：第一项的值或者上一次叠加的结果值
        //b: 当前会参与叠加的项
       // c: 当前索引
        if(c!=arr.length-1){
            return a+b;
        }else {
            return  (a+b)/arr.length;
        }
    });
    console.log(d);

</script>

​ filter 过滤器

​ foreach 循环(迭代)

4字符串

多了两个新的方法:

​ startsWith 以什么开头

​ endsWith 以什么结尾

​

 let str='hello es6';
    console.log(str.startsWith('hello'));//当字符串以hello开头   返回true
     console.log(str.endsWith('es6')); //返回true   以es6结尾

字符串模板

let  a=2;
    let b=`
   <span><a href="#">${a}</a></span>
    `;//返回 <span><a href="#">2</a></span>
    //在字符串模板中(``),写入什么样的内容就可以输出什么内容,包括格式
    console.log(b);

5面向对象

​ class关键字,构造器和类分开了;

​ class里面直接加方法

class User{
        constructor(name,age){  //constructor构造器
            this.name=name;
            this.age=age;
        }
        run(){
            alert('这是一个跑的方法');
        }
        flay(){
            alert('这是一个飞的方法');
        }
    }
    let user1=new User('zhangsan',23);
    alert(user1.name);
    alert(user1.age);

继承

    class User{
        constructor(name,age){  //constructor构造器
            this.name=name;
            this.age=age;
        }
        run(){
            alert('这是一个跑的方法');
        }
        flay(){
            alert('这是一个飞的方法');
        }
    }
    class Vipuser extends User{  //extends必须要有   User要继承的对象
        constructor(name,age){
            super(name,age);//继承user的那几个属性
            this.run();   //继承父类的方法
        }
    }
    let c=new Vipuser('zhangsan',25);
    console.log(c);

6promise

主要解决异步多层嵌套问题(回调地狱) ,在jquery中也有相似的函数封装

解构赋值

左右两边的结构必须一样,右边的写法必须规范(比如对象,json),声明和赋值不能分开(必须在一句话完成);

字符串填充方法

使用ES6中的字符串新方法

String.prototype.padStart(maxLength, fillString=’’) 或 String.prototype.padEnd(maxLength, fillString=’’)来填充字符串；

示例:

new Date().getDay().toString().padStart(2,'0')
//注意:要使用这个方法,调用者必须是字符串类型
//padStart(填充后的长度number,要填充的内容string)