ES6新語法(二)

1.解構

        在ES6中,能夠使用解構從數組和對象提取值並賦值給獨特的變量，即將數組或對象中的值，拆成一個一個變量。

        解構：自動解析數組或對象中的值，並賦值給指定的變量。、

1.1數組解構

var arr = [3,4,5];
    var [a, b, c] = arr;
    console.log(a, b, c);
    
    //還能夠忽略值 須要使用,佔位
    var arr = [3,4,5];
    var [a,, c] = arr;
    console.log(a, c);

    //函數返回值爲數組，進行解構
    function f5(){
        return [1,2,3];
    }
    var [a, b, c] = f5();
    console.log(a, b, c);

1.2對象解構

        將對象中的成員值，取出並賦值給多個變量(變量名與對象成員名一致)

 

var person = {
    "nickname": "老三",
    "age": 30,
    "sex": "男"
};
//解構時 {}中的變量名，不能加引號
var {nickname, age, sex} = person;
console.log(nickname, age, sex);
//能夠忽略值  直接忽略 不須要佔位
var {nickname, sex} = person;
console.log(nickname, sex);

 

1.3函數參數與解構

 

        函數參數使用解構數組或解構對象形式

 

//1.函數形參，使用解構數組形式，調用函數時須要傳遞數組實參
function f1([x,y,z]){
      console.log(x,y,z);
}
var arr = [1,2,3];
f1(arr);

//至關於
/*
function f1(a){
      var [x,y,z] = a;
      console.log(x,y,z);
}
var arr = [1,2,3];
f1(arr);
*/

//2.函數形參，使用解構對象形式，調用函數時須要傳遞對象實參
function f2({nickname,age,sex}){
      //變量名與對象成員名一致
      console.log(nickname,age,sex);
}
var obj = {"nickname":"zhangsan", "age":40, "sex":"男"};
f2(obj);

//至關於
/*
function f1(a){
      var {nickname, age, sex} = a;
      console.log(nickname,age,sex);
}
var obj = {"nickname":"zhangsan", "age":40, "sex":"男"};
f2(obj);
*/

 

1.4默認值與解構數組

         函數參數使用解構數組 並設置默認值

<script>
//1.函數參數使用解構數組，調用函數不傳參數會報錯
function fn([x, y, z]){
      console.log(x, y, z);
}
fn(); //會報錯
</script>

<script>
//2.函數參數使用解構數組，對整個數組設置默認值爲空數組
function f1([x, y, z] = []){
      console.log(x, y, z);
}
f1(); //不報錯  x y z 都是 undefined

//3.函數參數使用解構數組，對整個數組設置默認值,數組中每一個變量對應一個默認值
function f2([x, y, z] = [1,2,3]){
      console.log(x, y, z);
}
f2(); //不報錯  x=1 y=2 z=3
f2([4,5,6]); // x=4 y=5 z=6


//4.函數參數使用解構數組，對整個數組設置默認值爲空數組, 在解構數組中對每一個變量設置一個默認值
function f3([x=1, y=2, z=3]=[]){
      console.log(x, y, z);
}
f3(); //不報錯  x=1 y=2 z=3
f3([4,5,6]); // x=4 y=5 z=6
</script>

1.5默認值與解構對象

         函數參數使用解構對象 並設置默認值

<script>
//1.函數參數使用解構對象，調用函數不傳參數會報錯
function fn({x, y, z}){
      console.log(x, y, z);
}
fn(); //會報錯
</script>

<script>
//2.函數參數使用解構對象，對整個對象設置默認值爲空對象
function f1({x, y, z} = {}){
      console.log(x, y, z);
}
f1(); //不報錯  x y z 都是 undefined

//3.函數參數使用解構對象，對整個對象設置默認值,對象中每一個變量對應一個默認值
function f2({x, y, z} = {"x":1,"y":2,"z":3}){
      console.log(x, y, z);
}
f2(); //不報錯  x=1 y=2 z=3
f2({"x":4,"y":5,"z":6}); // x=4 y=5 z=6


//4.函數參數使用解構對象，對整個對象設置默認值爲空對象, 在解構對象中對每一個變量設置一個默認值
function f3({x=1, y=2, z=3}={}){
      console.log(x, y, z);
}
f3(); //不報錯  x=1 y=2 z=3
f3({"x":4,"y":5,"z":6}); // x=4 y=5 z=6
</script>

2.Symbol數據類型

            ES5數據類型：6種： string number boolean null undefined object

            ES6新增了一種數據類型：Symbol，表示獨一無二的值，Symbol最大的用途是用來定義對象的惟一屬性名

var symbol1 = Symbol();

var symbol2 = Symbol("Alice");

console.log(symbol1, symbol2) // 輸出：Symbol() Symbol(Alice)

                Symbol類型的值是一個獨一無二的值，Symbol函數的參數只是表示對當前Symbol值的描述，所以相同參數的Symbol函數的返回值是不相等的。

var attr_name = Symbol();
var obj = {
    [attr_name]: "Alice"
};
console.log(obj[attr_name]);

var obj = {
      [Symbol()]:"Alice"
};
console.log(obj);

               注：Symbol值做爲對象屬性名時，不能用點運算符。因爲點運算符後面老是字符串，因此不會讀取attr_name做爲標識名所指代的那個值。

           使用[]方括號，裏面的attr_name不帶引號，表示attr_name是一個變量.

3.箭頭函數

              ES6能夠使用「箭頭」（=>）定義函數，注意是普通函數，不要使用這種方式定義類（構造器）。

3.1語法

           具備一個參數並直接返回的函數

var f1 = a=>a;
//至關於  var f1 = function(a){ return a;};
console.log(f1('hello'));//'hello'

              沒有參數的須要用在箭頭前加上小括號

var f2 = () => '來了老弟';
console.log(f2());

              多個參數須要用到小括號，參數間逗號間隔

var f3 = (a, b) => a+b;
console.log(f3(3,4));//7

              函數體多條語句須要用到大括號

var f4 = (a, b) => {
      console.log('來了老弟');
      return a+b;
}
console.log(f4(5,6));//11

              返回對象時須要用小括號包起來，由於大括號被佔用解釋爲代碼塊

var f5 = () => {
      return ({"name":"老弟", "age":40});
}

//var f5 = () => ({"name":"老弟", "age":40});
console.log(f5());

               直接做爲事件處理函數

<input type="button" value="點擊" id="btn">
<script>
    document.getElementById('btn').onclick = evt=>{
          console.log(evt);//evt 事件對象
    }
</script>

                 賦值爲對象的方法

var obj = {};
obj.say = ()=>{return "hello,我是obj的say方法";}
console.log(obj.say());

                 做爲回調函數

var f6 = (f)=>{
    console.log(f(100));
};
// f6(a=>a);
var f7 = a=>a;
f6(f7);

1.2注意點

             typeof 判斷箭頭函數 結果爲function

var f1 = a=>a;
console.log(typeof f1);//'function'

                 instanceof判斷是否Function的實例，結果爲true

var f1 = a=>a;
console.log(f1 instanceof Function);//true

                 箭頭函數不綁定this, 內外this指向固定不變

var obj = {
      say:function(){
          //非箭頭函數
          var _this = this;
          var f1 = function(){
              console.log(_this);//obj
            console.log(this);//window
        };
          f1();
          //箭頭函數
        var f2 = ()=>{
            console.log(this);
        };
          f2();
      }
};
obj.say();

               箭頭函數不能作構造函數，不能用new實例化，也沒有prototype屬性

var Person = ()=>{};
console.log(Person.prototype);//undefined
var p = new Person();//報錯

                不能使用arguments

var f1 = ()=>{
    console.log(arguments);
};
f1(); //報錯

                 箭頭函數也支持默認參數、剩餘參數、解構 

 

var f1 = (x=1,y)=>{
      console.log(x, y); //3 4
};
f1(3,4);
var f2 = (...x)=>{
      console.log(x); //[3,4]
};
f2(3,4);
var f3 = ([x,y]=[])=>{
      console.log(x, y); //3 4
};
f3([3,4]);