es6新特性

symbol

es6新引入的基本数据类型,用于表示一个独一无二的值,不能和其它数据类型运算

模板字符串

用${}来界定；
反引号(``)直接搞定；

<script>
      url="xxxxxx"
       // es6之前
       let html="<div>"+
                  " <a>"+url+"</a>"+
               "</div>";
        //es6
       let eshtml=`<div>
                   <a>${url}</a>
               </div>`
</script>

字符串新方法

includes()是否包含参数字符串,返回boolean

startsWith()和endsWith()判断字符串是否已参数字符串开头或结尾,返回boolean;startsWith()可接受两个参数,第一个为要查找的字符串,第二个为开始查找的位置;endsWith()可接受两个参数第一个为要查找的字符串,第二个为要查找字符串的长度

let str = 'blue,red,orange,white';

str.includes('blue');//true
str.startsWith('blue');//true
str.endsWith('blue');//false

repeat()方法按指定次数返回一个新字符串

console.log('hello'.repeat(2));   //'hellohello'

padStart()和padEnd()按给定长度从前面或后面补全字符串,返回新字符串

let arr = 'hell';
console.log(arr.padEnd(5,'o'));  //'hello'
console.log(arr.padEnd(6,'o'));  //'helloo'
console.log(arr.padEnd(6));  //'hell  ',如果没有指定将用空格代替

console.log(arr.padStart(5,'o'));  //'ohell'

解构表达式

解构赋值是对赋值运算符的扩展。它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
字符串、以及ES6新增的Map和Set 都可以使用解构表达式

数组解构

let [a,b,c] = [1,2,3];
console.log(a,b,c);    //1,2,3
 
let [a,b,c] = [1,,3];
console.log(a,b,c);    //1,undefined,3
 
let [a,,b] = [1,2,3];
console.log(a,b);//1,3
 
let [a,..b] = [1,2,3];  //...是剩余运算符，表示赋值运算符右边除第一个值外剩余的都赋值给b
console.log(a,b);//1,[2,3]

对象解构

对象的解构赋值和数组类似，不过左边的变量名需要使用对象的属性名，并且用大括号{}而非中括号[]

let obj = { 
    name: "ren", 
    age: 12, 
    sex: "male" 
};

let { name, age, sex } = obj;
console.log(name, age, sex); //'ren' 12 'male'

let { name: myName, age: myAge, sex: mySex } = obj; //自定义变量名
console.log(myName, myAge, mySex); //'ren' 12 'male'

对象方面

Map对象用于保存键值对，任何值JavaScript支持的值都可以作为一个键（key）或者一个值（value）。
与对象不同的是

object的键只能是字符串或ES6的symbol值，而Map可以是任何值。
Map对象有一个size属性，存储了键值对的个数，而object对象没有类似属性。

let myMap = new Map([['name','ren'],['age',12]]);
console.log(myMap);  //{'name'=>'ren','age'=>12}

myMap.set('sex','male');
console.log(myMap);  //{'name'=>'ren','age'=>12,'sex'=>'male'}
console.log(myMap.size);  //3

myMap.get('name');  //'ren'
myMap.has('age');  //true
myMap.delete('age');  //true
myMap.has('age');  //false
myMap.get('age');  //undefined

Set

可以理解为后端的Set集合对象

Set对象和Map对象类似，但它存储不是键值对。类似数组，但它的每个元素都是唯一的。

let mySet = new Set([1,2,3]);//里面要传一个数组，否则会报错
console.log(mySet);  //{1,2,3}

mySet.add(4);
console.log(mySet);  //{1,2,3,4}

mySet.delete(1);  //true
mySet.has(1);  //false
console.log(mySet);  //{2,3,4}

利用set的唯一性,可以实现数组的去重

let arr = [1,1,2,3,4,4];

let mySet = new Set(arr);

let newArr = Array.from(mySet);
console.log(newArr);  //[1,2,3,4]

函数方面

参数默认值

<script>

    // es6之前
    // function add(a, b) {
    //     if(!a) a=0
    //     if(!b) b=0
    //     return a + b;
    // }
    
    //es6
    function add(a = 0, b = 0) {
        return a + b;
    }
    let x=add(); 
    let y=add(2); 
    let z=add(3, 4); 
          console.log(x,y,z); //x=0, y=2, z=7
</script>

箭头函数

箭头函数实现了一种更加简洁的书写方式。箭头函数内部没有arguments，也没有prototype属性，所以不能用new关键字调用箭头函数。

let add = (a,b) => {
    return a+b;
}
let print = () => {
    console.log('hi');
}
let fn = a => a * a;
//当只有一个参数时，括号可以省略，函数体只有单行return语句时，大括号也可以省略。