大前端系列之ES6

ゞ浴缸里的玫瑰 2022-10-06 11:43 106阅读 0赞

## 一、什么是ES6？ ##

简而言之，ES6就是一个语法规范，就像jdk一样，jdk1.6、jdk1.8 。

### 二、let、const、var ###

var是js常用的一个变量接收的类型，而let以及const是es6的语法，二者存在作用域以及变量穿透的问题。

//变量穿透问题，i可以在for循环之外取到
    for(var i=0;i<5;i++){
        console.log(i)
    }
    console.log(i)
    
    
    //用let就不会有这个问题
    for(let j=0;j<5;j++){
        console.log(j)
    }
    //直接报错
    console.log(j)
    
    //const和var的区别：var可以不初始化以及，可以修改，const必须初始化而且不能修改
    var PI=Math.PI;
    //下面可以对PI进行修改，不会报错
    PI=PI+1;
    console.log(PI);
    
    const PI1=Math.PI;
    //下面对const修饰的常量进行改变就会报错
    PI1=PI1+1;
    console.log(PI1)

### 三、String 模板字符串 ###

//模板字符串
    var book={
        bookName:"富爸爸穷爸爸",
        price:"48.8",
    }
    let word=`我最近在${book.bookName},这本书我买了${book.price}元`;
    console.log(word)

### 四、函数默认参数 ###

ES6里面支持我们给函数传入默认的参数，以防止参数传递缺失出现结果异常。

### 五、ES6之箭头语法 ###

1、去掉function  
2、参数括号外面加箭头  
3、如果方法体只有一个return，去掉return以及\{\}  
4、如果参数只有一个、参数括号也可以省略

function one(a,b){
        return a+b;
    }
    
    
    console.log(one(1,2))
    
    var two=(a,b)=>a+b;
    console.log(two(4,5));
    
    
    var three=a=>a+1;
    
    console.log(three(6))

### 六、ES6之对象简写 ###

### 七、对象解构 ###

对象解构 —- es6提供一些获取快捷获取对象属性和行为方式

let obj={
        name:"周三",
        age:79,
        get(){
            return `我是${this.name},今年${this.age}`
        }
    }
    
    //传统获取
    console.log(obj.name)
    console.log(obj.get())
    console.log("--------------")
    //es6对象结构，就是快速获取对象属性和方法的一种方式，但是属性命名必须一致
    let {name,age}=obj
    
    console.log(name)
    console.log(age)

### 八、ES6之对象传播符 ###

//对象传播操作符
    let obj={
        name:"张三",
        age:42,
        address:"啊广州",
        phone:1326,
        level:2
    }
    
    //结构对象
    let {name,age,...ohter}=obj
    
    console.log(name)
    console.log(age)
    console.log(ohter)
    
    let userPage={pages:10,pageNo:2,pageSize:100,total:1000,users:[{name:"湛山",age:15},{name:"lisi",age:12}]}
    let  {users,...userPage2}=userPage;
    console.log(users);
    console.log(userPage2)

### 九、ES6之map ###

map和java8的新特性中的stream中提供的map类似，能对集合中每一个元素进行操作

//需求：数组每个元素进行乘2操作
    let arr=[1,2,3,4]
    //传统
    let newArr=[];
    for(let a=0;a<arr.length;a++){
        newArr.push(arr[a]*2)
    }
    
    console.log(newArr)
    //es6
    let newArr2=arr.map(a=>a*2);
    console.log(newArr2)

### 十、ES6之reduce ###

reduce(function(),初始值（可选）) ：

接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

第一个参数是上一次reduce处理的结果  
第二个参数是数组中要处理的下一个元素  
reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是 第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

let arr=[1,2,3,4,5,6,7,8,9,10]
    
    
    console.log(arr.reduce((a,b)=>a+b))