重拾簡書（學習大前端訓練營）

作者：酸菜牛肉文章內(nèi)容輸出來源：拉勾教育大前端高薪訓練營課程
時隔多年蝶押，又重回簡書了，看著當年的筆記袖肥，感覺那時候還是無比青澀的咪辱，需要重新學習，大前端作為一個新的開始椎组。

ECMAScript新特性（es2015）###

let與const 塊級作用域

let命令聲明變量油狂，類似var，但所聲明的變量只在let代碼塊有效寸癌。
var聲明的變量全局范圍內(nèi)都有效专筷；
const聲明一個只讀的常量。一旦聲明蒸苇，常量的值就不能改變磷蛹。(實際是指向內(nèi)存地址不變，const 修飾之后溪烤，對象里的屬性可以修改)

數(shù)組和對象的解構(gòu)

對象的解構(gòu)

 * 解構(gòu)：快捷味咳，方便
 * 
 * 對象解構(gòu)
 */

{
  var expense = {
    type: "es6",
    amount: "45"
  };

  //1.ES5
  // var type = expense.type;
  // var amount = expense.amount;
  // console.log(type, amount); //output: es6 45

  //2.ES6
  const { type, amount, abc } = expense;
  console.log(type, amount, abc);    //output: es6 45 undefined
}

{

  var saveFiled = {
    extension: "jpg",
    name: "girl",
    size: 14040
  };

  //ES5
  function fileSammary1(file) {
    return `${file.name}.${file.extension}的總大小是${file.size};`
  }

  //ES6
  //名字不能變庇勃，位置可以亂
  function fileSammary2({ name, size, extension }) {
    return `${name}.${extension}的總大小是${size};`
  }

  console.log(fileSammary1(saveFiled)); //output: girl.jpg的總大小是14040;
  console.log(fileSammary2(saveFiled)); //output: girl.jpg的總大小是14040;
}

數(shù)組的解構(gòu)

/**
 * 解構(gòu)：快捷，方便
 * 
 * 數(shù)組解構(gòu)
 */

/**
 * 基礎
 */
{
  const names = ["Henry", "Bucky", "Emily"];
  const [name1, name2, name3] = names;
  console.log(name1, name2, name3);

  //用對象接收槽驶，反數(shù)組個數(shù)
  const { length } = names;
  console.log(length); // 3

  //結(jié)合張開運算符
  const [name, ...rest1] = names;
  console.log(name);  // Henry
  console.log(rest1); //(2) ["Bucky", "Emily"]

  let [foo, [[bar], baz]] = [1, [[2], 3]];
  foo; // 1
  bar; // 2
  baz; // 3
}

/**
 * 數(shù)組中的對象
 */
{
  //對象數(shù)組
  const people = [
    { name: "Henry", age: 20 },
    { name: "Bucky", age: 25 },
    { name: "Emily", age: 30 }
  ];

  // ES5
  //讀取數(shù)據(jù)元素中的對象參數(shù)值
  {
    var age = people[0].age;
    age;      // 20
  }

  // ES6
  {
    //讀取數(shù)組的元素
    {
      const [age1, , age] = people;
      console.log(age1);  // { name: "Henry", age: 20 },
      console.log(age);   // { name: "Emily", age: 30 }
    }

    //讀取數(shù)組元素中的對象參數(shù)值
    {
      const [{ age }] = people;
      console.log(age);   // 20
    }
  }


  //數(shù)組轉(zhuǎn)化為對象
  {
    const points = [
      [4, 5], [10, 20], [0, 100]
    ];

    /**
     * 期望數(shù)據(jù)格式：
     * [
     *  {x:4,y:5},
     *  {x:10,y:20},
     *  {x:0,y:100}
     * ]
     */

     let newPoints = points.map(([x,y])=>{
       //1.傳入解構(gòu) [x,y] = [4,5]
       //2.x = 4, y = 5
       //3.return {x:x,y:y} 簡寫 return {x,y}
       return {x,y};
     })

     console.log(newPoints);
  }
}

模板字符串

在某些時候责嚷，嵌套模板是具有可配置字符串的最簡單也是更可讀的方法。在模板中掂铐，只需在模板內(nèi)的占位符 ${ } 內(nèi)使用它們罕拂，就可以輕松地使用內(nèi)部反引號。
ES5:

var classes = 'header'
classes += (isLargeScreen() ?
   '' : item.isCollapsed ?
     ' icon-expander' : ' icon-collapser');

在ES2015中使用模板文字而沒有嵌套：

const classes = `header ${ isLargeScreen() ? '' :
    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

在ES2015的嵌套模板字面量中：

const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

帶標簽的模板字符串

標簽函數(shù)并不一定需要返回一個字符串

function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A');  // "YAY!" 
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'});  // "Hello World!"

字符串擴展方法

String.startsWith()
String.endsWith()
includes()

參數(shù)默認值

函數(shù)默認值堡纬，必須放在參數(shù)最后

function foo( key, value = "abb"){
  console.log(`${key}${value}`);
}

剩余參數(shù)

剩余參數(shù)聂受，必須放在參數(shù)最后

function foo( ...args ){
  console.log(...args);
}
foo(1, 2, 3, 4)

展開數(shù)組

arr = [1, 2, 3]
console.log(...arr) //1, 2, 3

箭頭函數(shù)

箭頭函數(shù)語法

const a = n => n+1

箭頭函數(shù)this

箭頭函數(shù)的this是函數(shù)定義的時候就綁定的；普通函數(shù)的this指向調(diào)用對象烤镐，箭頭函數(shù)的this調(diào)用對象指向父級；箭頭函數(shù)應該是普通函數(shù)定義基礎上call()一次過后this的指向棍鳖，之后所有call的this都會指向第一個call的this炮叶。

var webName="螞蟻部落";
let func=()=>{
  console.log(this.webName);
}
func();

對面字面量

const bar = '123'
const obj = {
  foo: 123,
  bar:
[Math.random]:123 //計算屬性名
}

Object.assign

將多個源對象中的屬性復制到一個對象中（）用后邊對象的屬性覆蓋第一個對象

Object.is

對象的地址進行比較

Proxy

專門為對象訪問設置代理器

const proson = {
  name: 'adf',
  age: 22
}
const personProxy = new Proxy(person, {
  get( target, property){
    return property in target? target[property] : 'default'
  }
  set( target, property, value){
    if(property === "age"){
      if(!Number.isInteger(value)){
        throw new TypeError(`${value} is new int`)
      }
    }
    target[property] = value
  }
})
console.log(person.name)

Proxy 和defineProxy區(qū)別

image.png

Reflecct

reflect內(nèi)部封裝了一系列對對象的底層操作
Reflect成員方法就是Proxy處理對象的默認實現(xiàn)
統(tǒng)一提供對象的操作api

const obj = {
  name: 'zce',
  age: 18  
}
//console.log('name' in obj)
//console.log(delete obj['age'])
//console.log(Object.keys(obj))

console.log(Reflecct.has(obj, 'name'))
console.log(Reflecct.deleteProperty(obj, age))
console.log(Reflecct.ownKeys(obj))