ES6-基础

ES6概述

ECMAScript 6 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。我们现在学的ES6实际学的是ES4。

let与const关键字

let 允许创建块级作用域，ES6 推荐在函数中使用 let 定义变量，而非 var（在一对大{} 里面起作用）

{
    let a = 15;
    console.log(a);
}

并且let 不能重复声明(下面是错误示范)

{
let a = 10;
let a = 20;
}

 let声明变量不会变量提升,下面这样写会报错，而var 声明变量会出现undefined

{
    console.log(a);
     let a = 15;
}

const声明变量通常为常量与let的特点一样并且const声明变量必须赋值 变量名建议大写 const声明变量后不可重新赋值

const PI = 3.1415926;
console.log(PI);   

const ARR=10;
ARR = 20;
console.log(PI);
//会报错

解构

解构就是把数组或者对象拆分为单个的变量。

交换变量

    var a = 15;
    var b = 88;
    [a, b] = [b, a];
    console.log("a:",a);
    console.log("b:",b);
    //a,b值互换

用，(逗号)分割可以跳过 ... 剩余值给默认值有顺序的

var arr = [1,3,5,7,9];
        // 同a,b,rest 解构数组arr
        // rest 对应的是剩余内容
        var [a,b,...rest]=arr;
        console.log(arr);
        console.log(a,b,rest);

ES6中解构数组可以给默认值

var arr1 = [2, 9];
   [e,f,g=50] = arr1;
   console.log("e:",e)
   console.log("f:",f)
   console.log("g:",g)

es6还可以解构对象

let o = {p:42, q:true};
let {p,q} = o;
console.log(p,q);
//变量名必须和对象键名一致

字符串

字符串模板给字符串拼接带来了极大的方便 
``包裹字符串，${变量} 可以保留换行

var obj = {name:"xxx",age:18};
        var str = `大家好我的名字是:${obj.name}
        今年${obj.age}`;
    console.log(str);

includes (包含)、startsWith(开头包含) 、endWith(结尾包含) 可以检测字符串

let str = "string";
console.log('includes',str.includes("c"));
console.log('start',str.startsWith('str'));
console.log('end',str.endsWith('ng'));

字符串-重复与填充

repeat(n) 重复n遍  padStart(a,b)从前面把字符串用b填充直到有a个  padEnd(a,b)从后面开始把字符串用b填充直到有a个

var a = "我爱你!";
console.log(a.repeat(10));
var str = "5";
console.log(str.padStart(3,"0"));
console.log(str.padEnd(2,"元"));

函数

箭头函数是ES6的重要内容

ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体：=> 前面是函数参数   =>后面是返回值也是执行语句

var getPrice = function() {
  return 4.55;
};
//明显更简便
var getPrice = () => 4.55;

多个参数 或者没有参数 都用( )括号包起来

var arr3 = [1,2,3];
arr3.forEach(
        (item,index,self) => console.log(item,index,self)
    )

执行语句有多个的时候 用{}包括起来

var fun = (a)=>{
            if(a>10){
                return "大了";
            }
            else if(a<10){
                return "小了";
            }
            else{
                return "恭喜中奖了";
            }
        }

箭头函数this 指的是函数上一层的this

var obj = {
            name:"xxx",
            age:18,
            say:function(){
                setInterval(()=>{ //3秒触发一次
                    // 谁调用函数 this指向谁
                    // 箭头函数this指向上一层作用域
                    console.log(`大家好我是${this.name}今年${this.age}`);
                    this.age++;
                },3000)
            }
        }
        obj.say();

函数的参数可以设置默认值 或 不定参 

function add(a=3,b=5){
            return a+b;
        }
console.log(add(10));

function add1(...arg){
       // arg 是一个参数数组是不定义
      return arg.reduce((a,b)=>a+b);
}
console.log(add1(1,2,3))
console.log(add1(1,2,3,4,5));

对象

对象简写和动态属性

        var name = "张三";
        var age = 18;
        // var obj = {
        //     name:name,
        //     age:age,

        // }
        // 当变量名与键名一致时 可以省略
        var obj = {
            name, 
            age,
            say() { alert("我是" + this.name) }
        }

        // 动态属性 
        var a = "my";
        var b = "name";
        var obj2 = {
            age:18,
            // 拼接
            [a+b]:"张三"
        }
        console.log(obj2);

总结

let const 可以声明变量es6可以将数组或对象解析成单独的变量 箭头函数是函数的一种简写形式，使用括号包裹参数，跟随一个 =>：=> 前面是函数参数   =>后面是返回值也是执行语句。(本人小白，文章不具备参考性，勿在意)