es6 知识小点

ES6 总结（一）

内容大纲：

1、ES6 概念 2、let、const和var的区别 3、解构赋值 4、模板字符串、字符串拓展方法

1、ES6 概念？

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念。

2、let、const和var的区别

var name = "yiyi";
var name="qiqi"

ES6新增了let和const来声明变量，主要是解决var声明变量所造成的困扰和问题：

var不能用于定义常量
var可以重复声明变量
var存在变量提升
var不支持块级作用域

for(var index=1;index<10;index++){
	
}
console.log(index)

let和const解决了以上问题如下：

不可以重复声明变量

    let site = 'itLike';
    let site = 'itLike';
    console.log(site);

不存在变量提升

    console.log(site);
    
    let site = 'itLike';

可以定义常量

    const E = 2.718;
    
    E = 2.71;
    
    console.log(E);
    
    //  引用类型
    const LK = {
    
       name:'itLike',
    
       intro: '喜欢IT, 就上撩课(itLike.com)'
    
    };
    
    LK.name = '撩课';
    console.log(LK);

块级作用域

如果用var定义变量，变量是通过函数或者闭包拥有作用域；但，现在用let定义变量，不仅仅可以通过函数/闭包隔离，还可以通过块级作用域隔离。块级作用域用一组大括号定义一个块，使用 let 定义的变量在大括号的外部是访问不到的，此外，let声明的变量不会污染全局作用域。

    {let site = 'itLike';}    
    console.log(site);    
    if(1){  let str = '04'; }    
    console.log(str);

3、解构赋值

解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

构的源，解构赋值表达式的右边部分。
解构的目标，解构赋值表达式的左边部分。

3.1、变量解构赋值（数组解构）

    let nameArr = ['yiyi', 'qiqi', 'mimi'];
    
    let name1 = nameArr[0];
    
    let name2 = nameArr[1];
    
    let name3 = nameArr[2];
    
    //  解构写法
    
    let [name1, name2, name3] = nameArr;
    
    console.log(name1, name2, name3);

3.2、变量解构赋值（对象解构）

    //  写法1
    
    let {name, age, sex}
    
     = {name: 'yiyi', age: 10, sex: '女'};
    
    // 结果: yiyi   10   女
    
    console.log(name, age, sex);
    
    //  写法2： 解构重命名
    
    let {name: lkName, age: lkAge, sex: lkSex}
    
    = {name: 'yiyi', age: 11, sex: '女'};
    
    // 结果: yiyi 11 女
    
    console.log(lkName, lkAge, lkSex);  
    
    //  写法3： 可以设置默认值
    
    let {name, age, sex = '女'}
    
    = {name: 'yiyi', age: 12};
    
    console.log(sex);  // 女
    
    
    //  写法4：省略解构
    
    let [, , sex] = ['yiyi', 13, '女'];
    
    console.log(sex);

4、模板字符串、字符串拓展方法

4.1、模板字符串

模板字符串用反引号 `` 包含，变量用${}括起来; 在开发中使用是非常灵活的。

 let name = 'yiyi';
 let sex = '女';
 let result = `姓名 ${name} , 性别 ${sex} `;
 console.log(result);

4.2、字符串方法

startsWith() 判断字符串是否以 XX 开头

    let url = 'http://www.itlike.com';
    
    console.log(url.startsWith('http'));  // true

endsWith() 判断字符串是否以 XX 结尾

    let file = 'index.html';
    
    console.log(file.endsWith('html'));  // true

includes 判断字符串中是否包含 XX

    let str = 'liaoke';
    
    console.log(str.includes('ao')); // true

repeat() 拷贝n份

    let title = '撩课在线';
    
    console.log(title.repeat(100));

padStart() / padEnd()

padStart()用于头部补全，padEnd()用于尾部补全; 第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

    //  "2030111111"
    
    let y1 = '2030'.padEnd(10, '1');
    
    //   "2030-11-22"
    
    let y2 = '11-22'.padStart(10, '2030-MM-DD');  
    
    console.log(y1, y2);

4.3、延展操作符(拓展运算符)

延展数组

    let arr1 = [ 'a', 'b', 'c'];
    let arr2 = [1, 2, 3];
    let result = [...arr1, ...arr2];
    console.log(result);
     //  [ "a", "b", "c", 1, 2, 3 ]

延展对象

    let smallDog = {name:'yiyi', age: 1};
    let bigDog = {name: 'Python', age: 2};
    let dog = {...smallDog, ...bigDog};
    console.log(dog);  
    // {name: "Python", age: 2}

注意: 如果对象中的属性一致, 会被覆盖

开发应用场景

    function getMinValue() {
         console.log(Math.min(...arguments));
    }
    getMinValue(1, -99, 22, 10, 9); // -99