技術標籤：es6

文章目錄

• • • 一，解構賦值：
    • 二，箭頭函式與普通函式的區別：

一，解構賦值：

定義：意思就是從目標物件或陣列中提取出自己想要的變數（資料），
常用場景：element-ui，vant的按需引入，請求介面，返回資料時，提取自己想要的資料
語法：
陣列結構：前邊跟後邊的值一一對應
物件結構：無需對應，只需找到對應的屬性名即可
…rest：擴充套件運算子，需要寫在最後面，它裡面包含的是剩餘的屬性
（結構陣列/物件：將剩餘陣列賦值給一個變數）

預設值：如果傳參時傳了引數就使用傳的引數，如果沒有傳送引數就使用預設值

var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
 

交換變數：

	var a=1; var b =3;
	[a,b]=[b,a];  
	console.log(a); // 3
	console.log(b); // 1

忽略你不感興趣的返回值：

function f() {
  		return [1, 2, 3];	}
	var [a, , b] = f();
	console.log(a); // 1
	console.log(b); // 3

給新的變數名賦值：可以從一個物件中提取變數並賦值給和物件屬性名不同的新的變數名。

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42 
console.log(bar); // true 

For of 迭代和解構：
var people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];
for (var {name: n, family: {father: f}} of people) {
  console.log('Name: ' + n + ', Father: ' + f);
}
// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

 

二，箭頭函式與普通函式的區別：

• 1，箭頭函式是匿名函式，不能作為建構函式，不能使用new

//  錯的
      let a = () => {
          console.log('我是箭頭函式u');
      }
      let fun = new a()
      
      // 對的
      let a =()=>{
          console.log('我是箭頭函式');
      }
      a()
      
      function aa() {
          console.log('我是普通函式');
      }
      var as = new aa()
 

• 2，箭頭函式內沒有arguments，可以用展開運算子 … 解決

  function a(a) {
          console.log(arguments);
      }
      a(1, 2, 3, 4, 5)
      // log: Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
      
      let B = (b) => {
          console.log(arguments);
      }
      B(1, 2, 3, 4, 5, 6, 7)
      // log: arguments is not defined
      
      let c = (...c) => {
          console.log(c);
      }
      c(1, 2, 3, 4, 5)
      // log: index.js:14 (5) [1, 2, 3, 4, 5]

• 3，箭頭函式的this，始終指向父級的上下文（箭頭函式的this取決於定義位置父級的上下文，跟使用位置沒有關係，普通函式this指向呼叫的那個物件）

   var a = 200;
      let obj = {
          a: 100,
          fn: function () {   //es5 誰呼叫，this指向誰
              console.log(this.a);
          },
          foo: () => {   //  es6箭頭函式的this指向父級(obj)上下文。
              console.log(this.a)
          }
      }
      obj.fn();// 100;  
      obj.foo();//200;
  

• 4，箭頭函式不能通過call()，apply()，bind()，方法直接修改他的this（call，apply，bind會預設忽略第一個引數，但可以正常傳參）

  let obj2 = {
          a: 10,
          b: function (n) {
              let f = (n) => n + this.a
              return f(n)
          },
          b2: function (b) {
              let fn = (b) => b + this.a
              let m = {
                  a: 20
              }
              return fn.call(m, b)
          }
      
      }
      
      console.log(obj2.b(2));//12
      console.log(obj2.b2(2));//12
      
  

• 5，箭頭函式沒有原型屬性

   var a = () => {
          return 1
      }
      
      function aa() {
          return 1
      }
      
      console.log(a.prototype);//undedined
      console.log(aa.prototype);