es6基礎(chǔ)知識(shí)總結(jié)

一、let 與const
let：

• 所聲明的變量只在當(dāng)前的代碼塊中有效
• 使用let命令聲明的變量在域解析的時(shí)候，不會(huì)被提升
• let不允許在同一個(gè)作用域下聲明已經(jīng)存在的變量
• for循環(huán)體現(xiàn)let父子作用域
  cosnt：擁有上面let的各項(xiàng)規(guī)則，同時(shí)擁有以下的規(guī)則
  聲明必須賦值
  聲明的常量儲(chǔ)存簡單的數(shù)據(jù)類型時(shí)不可改變其值，如果存儲(chǔ)的是對(duì)象，那么引用不可以被改變；至于對(duì)象里面的數(shù)據(jù)如何變化，是沒有關(guān)系的。
  二、模板字符串

  var obj = {
      name:'李明',
      age:34
  }
  //es5字符串拼接
  console.log('名字'+obj.name+'年齡'+obj.age);
  //`模板字符串 名字：${obj.name} 年齡：${obj.age}`
  console.log(`名字：${obj.name} 年齡：${obj.age}`);

  三、簡化對(duì)象的書寫

  var a=1;
  var b=2;
  var obj1={
      a,   //省略同名關(guān)鍵字   即 a:a，直接寫成a
      b,
      setA(x){
              console.log('aaaa');  //省略function關(guān)鍵字
      }
  }
  console.log(obj1);

  四、箭頭函數(shù)

//一般形式：
let fn1=(x,y)=>{
    console.log(this);
}
fn1();

//注意this指向的問題：箭頭函數(shù)的this指向不是在調(diào)用時(shí)決定的，而是在定義的時(shí)候決定的
//即：this指向定義時(shí)環(huán)境所在的對(duì)象，而不是使用時(shí)環(huán)境所在的對(duì)象
//如果外部有函數(shù)，那么this指向外部函數(shù)的this
//如果外部沒有函數(shù)，指向window
//箭頭函數(shù)體內(nèi)沒有arguments對(duì)象，如果使用，使用rest參數(shù)代替

let obj={};
let fn1=(x,y)=>{
    console.log(this);  //window
    let fn3=()=>{
        console.log(this);   //window
        function f4() {
            console.log(this);    //obj
        }
        f4.call(obj);  //這里調(diào)用
    }
    fn3.call(obj);  //call不會(huì)改變箭頭函數(shù)的this指向
}
fn1.call(obj);

//call會(huì)改變普通函數(shù)的this指向
function foo2() {
    let fn1=(x,y)=>{  //箭頭函數(shù)，指向外部函數(shù)的this
        console.log(this);  //obj
    }
    fn1();
}
foo2.call(obj);  //call會(huì)改變this指向

五、擴(kuò)展運(yùn)算符
把一個(gè)對(duì)象或者數(shù)組打散成參數(shù)，即獲取到對(duì)象或者數(shù)組里面的每一項(xiàng)
var arr = [1,2,3,4];
console.log( arr ); //(4)?[1, 2, 3, 4]
console.log( ...arr ); //1 2 3 4

六、形參默認(rèn)值

function foo(x=1,y=2){
        this.x=x;
        this.y=y
}
var f=new foo();  //沒有實(shí)參，執(zhí)行形參默認(rèn)值
console.log(f);
var p=new foo(4,5);  //有實(shí)參，執(zhí)行實(shí)參中的值
console.log(p);

七、set數(shù)據(jù)集合
set對(duì)象允許存儲(chǔ)任何類型的唯一值,無論是原始值或者是對(duì)象引用
set：是一個(gè)集合，類似于數(shù)組，與數(shù)組的主要區(qū)別是沒有重復(fù)的元素
主要的作用可以進(jìn)行去重。NaN也不會(huì)重復(fù)添加
不存儲(chǔ)value。由于key不能重復(fù)，所以，在Set中沒有重復(fù)的key
重復(fù)元素在Set中自動(dòng)被過濾
要?jiǎng)?chuàng)建一個(gè)Set，需要提供一個(gè)Array作為輸入，或者直接創(chuàng)建一個(gè)空Set：

var set = new Set();//空set
var set = new Set([1,2,3]);

重點(diǎn)：一個(gè)屬性，四個(gè)方法
1、size屬性：返回set數(shù)組的長度，類似于length
2、四個(gè)方法：add,delete,clear,has

let set =new Set([1,2,3,4,1]);
console.log(set.size); //4
//添加元素
set.add(7);  
console.log(set); // {1, 2, 3, 4, 7}
//刪除數(shù)組中的某個(gè)元素
set.delete(3);
console.log(set); // {1, 2, 4, 7}
//檢測數(shù)組中是否含有某個(gè)元素，返回值為布爾
console.log(set.has(2)); //true
//清空數(shù)組
set.clear();
console.log(set) //{}

var str = 'siiva';
new Set(str) //{'s','i','v','a'}

八、map數(shù)據(jù)集合：類似于對(duì)象，一組鍵值對(duì)的結(jié)構(gòu)
Javascript對(duì)象Object只能使用字符串當(dāng)做key值，這給它的使用帶來了很大的限制，為了解決這個(gè)問題，ES6提供了map數(shù)據(jù)結(jié)構(gòu)。它類似于對(duì)象。是鍵值對(duì)的集合，但是鍵的返回不限制于字符串，各種類型的值都可以作為鍵

var m = new Map();  //Map(0) {}  空map

let obj={a:1};
const map = new Map([
        ['name','java'],
        ['feel','今天天氣賊好'],
        ['jieguo','適合看帥哥'],
        [obj,'是!']
]);
console.log(map);  
//{"name" => "java", "feel" => "今天天氣賊好", "jieguo" => "適合看帥哥", {…} => "是!"}

由于一個(gè)key只能對(duì)應(yīng)一個(gè)value，所以，多次對(duì)一個(gè)key放入value，后面的值會(huì)把前面的值沖掉：

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

Map與Object的區(qū)別

• Map的size屬性可以直接獲取鍵值對(duì)個(gè)數(shù)
• 兩者都是對(duì)應(yīng)的keys-value鍵值對(duì)，
• 但是Object的keys只能是字符串或者 Symbols，
• Map的key可以是任意值，比如數(shù)組、對(duì)象等

map方法：

• size：返回鍵值對(duì)長度
• set:設(shè)置鍵值對(duì)
• get:獲取對(duì)應(yīng)的value值
• delete:刪除對(duì)應(yīng)的鍵值對(duì)
• clear:清空map
• has:查看是否有對(duì)應(yīng)的鍵值對(duì)，返回值為布爾

對(duì)應(yīng)代碼：

console.log(map.size);   //4    
map.set('shia','怎么了');   //設(shè)置鍵值對(duì)
console.log(map.get('shia')); //返回對(duì)應(yīng)的value值
console.log(map.delete('shia'));
console.log(map.has('shia'));
console.log(map.has(obj));
map.clear()
console.log(map);

九、Symbol()方法
1、Symbol()相當(dāng)于第七種數(shù)據(jù)類型，ES6中為了防止沖突，引入了Symbol()。
凡是用Symbol()引用的屬性名都是獨(dú)一無二的
總結(jié)：獨(dú)一無二，防止沖突

let s1 = Symbol();
let s2 = Symbol();
console.log(s1); //Symbol()
console.log(s2); //Symbol()
console.log(s1===s2);  //false,驗(yàn)證獨(dú)一無二

let s3 = Symbol('name');
let s4 = Symbol('name');
console.log(s1===s2);  //false,驗(yàn)證獨(dú)一無二
//數(shù)據(jù)類型
console.log(typeof s)  //symbol

2、可以用來添加對(duì)象的屬性值，但是是唯一的，驗(yàn)證獨(dú)一無二
一般的對(duì)象添加的屬性名對(duì)應(yīng)的屬性值只能是一個(gè)，重復(fù)添加會(huì)覆蓋

let obj1={};
obj1.name='ni';
obj1.name='wo';
console.log(obj1);  //{name: "wo"}

利用Symbol()添加的會(huì)全部顯示出來，因?yàn)槊恳粋€(gè)name屬性都是獨(dú)一無二的，解決了命名沖突的問題

let obj2={};
obj2[Symbol('name')]='ni';
obj2[Symbol('name')]='wo';
console.log(obj2);   //{Symbol(name): "ni", Symbol(name): "wo"}

3、不能使用new關(guān)鍵字，否則會(huì)報(bào)錯(cuò)。這是因?yàn)镾ymbol()是一個(gè)原始類型的值，不是對(duì)象不能添加任何屬性

let snew = new Symbol();
console.log(snew);  //報(bào)錯(cuò) Symbol is not a constructor

4、Symbol()可以將字符串作為參數(shù)，

• 表示對(duì)實(shí)例對(duì)象的描述，主要作用可以針對(duì)不同變量進(jìn)行區(qū)分
• 注意：由于其參數(shù)的值是對(duì)其的描述，所以可能每次返回的值是不同的

  let a = Symbol('a');
  console.log(a.toString()); //Symbol(a)
  let b = Symbol('B');
  console.log(b);  //Symbol(B) 
  console.log(a===b); //false

  5、Symbol()不能與其他類型的值進(jìn)行運(yùn)算，但是可以返回一個(gè)Boolean值

  let c = Symbol();
  console.log(s+'nihao'); //Cannot convert a Symbol value to a string
  console.log(s+'2');  //Cannot convert a Symbol value to a string
  console.log(Boolean(c));  //true

  6、不能被for in循環(huán)遍歷

  var obj3 = {};
  var str1 = Symbol('str1');
  var str2 = Symbol('str1');
  obj3[a] = '我是劉昊然的女朋友';
  obj3[b] = '我承認(rèn)了';
  obj3.c  = '媽的，瞞不住了';
  obj3.d  = '我愛劉昊然';
  for( let key in obj3 ){
   console.log(key)         // c d
  }

  7、可以通過Object.getOwnPropertySymbols()方法，獲取Symbol()屬性名
  console.log(Object.getOwnPropertySymbols(obj3)); //[Symbol(a), Symbol(B)]
  8、使用場景