箭頭函式及擴充套件運算子
阿新 • • 發佈:2018-11-17
//箭頭函式 不能作為建構函式 不能使用new var f = () =>{} var f1 = new f(); //f is not a constructor //原型 沒有原型屬性 function f(){} f.prototype; var f2 = () =>{} f2.prototype; //error // this 箭頭函式中this指向是定義是的this ,而不是執行時的this //箭頭函式中this 是外層呼叫者 //setTimeout this window function Fun(){ this.i = 0; setTimeout(function(){ console.log(this); //window },2000); }; var f3 = new Fun(); //es6 function Fun(){ this.i = 0; setTimeout(()=>{ console.log(this); //Fun() },2000); }; var f3 = new Fun(); // 物件中箭頭函式的方法表示window物件 var obj = { age:18, getAgeA:function(){ console.log(this.age) //Obj }, getAgeB:()=>{ console.log(this.age) //window } }; obj.getAgeA(); obj.getAgeB(); //物件中箭頭函式如何外層呼叫者的方式 var obj = { age:18, getAgeA:function(){ var fn =()=> this.age; ////Obj return fn(); } }; obj.getAgeA(); //apply() call() function Cat(name,color){ this.name = name; this.color = color; }; //var cat = new Cat(); var o ={}; Cat.apply(o,['1111','2222']); //Cat函式在o中執行 o.name; //雙冒號運算子 :: 左邊是一個物件,右邊是一個函式 自動將左邊的物件繫結到右邊的函式上面 //o::Cat(['1111','2222']); //===Cat.apply(o,['1111','2222']); //Cat函式在o中執行 //作用域 作用域中如果設定了引數的預設值 獨立作用域 var x = 1; function fn(x,a = x){ console.log(a); }; fn(10); //10 // var x = 1; //a = x形成了一個單獨的作用域,變數X本身沒有定義,所以指向了全域性的變數X, //呼叫時,區域性變數影響不到預設值的變數 function fn(a = x){ let x = 10; console.log(a); }; fn(); //1 //嚴格模式 'use strict' //es5 OK function fn2(){ 'use strict'; }; //es6 函式的引數使用預設值,解構,擴充套件運算子。。。。 function fn2(x,a = x){ 'use strict'; //error }; 'use strict'; //OK function fn2(){ 'use strict'; //OK return function(x,a = x){ } }; //...擴充套件運算子 用於函式呼叫 // fun(陣列,引數); var arr1 = [1,2,3]; var arr2 = [4,5,6]; function fun(arr1,...arr2) { arr1.push(...arr2); }; //arr1=[1,2,3,4,5,6],相當於...arr2將變為引數序列,意思就是將arr2裡的資料變成引數。 fun(a,[1,2,3,4]); var arr1 = [1,2,3]; var arr2 = [4,5,6]; arr1.push(arr2); //[1, 2, 3, Array(3)] //concat var arr1 = [1,2,3]; var arr2 = [4,5,6]; arr1 = arr1.concat(arr2); //[1, 2, 3, 4, 5, 6] //ES6 var arr1 = [1,2,3]; var arr2 = [4,5,6,7,9,10]; arr1.push(...arr2); //[1, 2, 3, 4, 5, 6] //函式中的引數 function add (a,b){ return a+b }; var num = [3,9]; add(...num); // function f(...items) { console.log(...items) }; var num = [1,2,3]; var num2 = [4,5,6]; f(1,...num,2,...num2); //1 1 2 3 2 4 5 6 //深拷貝 var a1 = [1,2,3,4]; var a2 = a1; a2[1] = 100; console.log(a1); //1,100,3,4 //es5解決方法 concat(); slice(); var a1 = [1,2,3,4]; var a2 = a1.concat(); a2[1] = 100; console.log(a1); //1,2,3,4 //ES6 深拷貝 var a1 = [1,2,3,4,5]; var a2 = [...a1]; //var [...a2] = a1; a2[1] = 100; console.log(a1); //陣列的合併 var arr1 = [1,2,3]; var arr2 = [4,5,6]; var arr3 = [12,3,4,5,2]; arr1 = arr1.concat(arr2,arr3); [...arr1,...arr2,...arr3]; //解構 var [a,b,c,d] = [1,2,3,4]; var [a,...b] = [1,2,3,4]; //ok a //1 b //[2,3,4]; var [...a,b] = [1,2,3,4]; //error 擴充套件運算子只能放在引數的最後一位,否則報錯 var [a,...b,c] = [1,2,3,4]; //error //字串轉陣列 var str = 'hello'; console.log(str.split('')); //["h", "e", "l", "l", "o"] //es6 var str = 'hello'; [...str]; ////["h", "e", "l", "l", "o"]