重拾简书（学习大前端训练营）

作者：酸菜牛肉 文章内容输出来源：拉勾教育大前端高薪训练营课程
时隔多年，又重回简书了，看着当年的笔记，感觉那时候还是无比青涩的，需要重新学习，大前端作为一个新的开始。

ECMAScript新特性 （es2015）###

let与const 块级作用域

let命令声明变量，类似var，但所声明的变量只在let代码块有效。
var声明的变量全局范围内都有效；
const声明一个只读的常量。一旦声明，常量的值就不能改变。(实际是指向内存地址不变，const 修饰之后，对象里的属性可以修改)

数组和对象的解构

对象的解构

 * 解构：快捷，方便
 * 
 * 对象解构
 */

{
  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;
}

数组的解构

/**
 * 解构：快捷，方便
 * 
 * 数组解构
 */

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

  //用对象接收，反数组个数
  const { length } = names;
  console.log(length); // 3

  //结合张开运算符
  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
}

/**
 * 数组中的对象
 */
{
  //对象数组
  const people = [
    { name: "Henry", age: 20 },
    { name: "Bucky", age: 25 },
    { name: "Emily", age: 30 }
  ];

  // ES5
  //读取数据元素中的对象参数值
  {
    var age = people[0].age;
    age;      // 20
  }

  // ES6
  {
    //读取数组的元素
    {
      const [age1, , age] = people;
      console.log(age1);  // { name: "Henry", age: 20 },
      console.log(age);   // { name: "Emily", age: 30 }
    }

    //读取数组元素中的对象参数值
    {
      const [{ age }] = people;
      console.log(age);   // 20
    }
  }


  //数组转化为对象
  {
    const points = [
      [4, 5], [10, 20], [0, 100]
    ];

    /**
     * 期望数据格式：
     * [
     *  {x:4,y:5},
     *  {x:10,y:20},
     *  {x:0,y:100}
     * ]
     */

     let newPoints = points.map(([x,y])=>{
       //1.传入解构 [x,y] = [4,5]
       //2.x = 4, y = 5
       //3.return {x:x,y:y} 简写 return {x,y}
       return {x,y};
     })

     console.log(newPoints);
  }
}

模板字符串

在某些时候，嵌套模板是具有可配置字符串的最简单也是更可读的方法。 在模板中，只需在模板内的占位符 ${ } 内使用它们，就可以轻松地使用内部反引号。
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'}` }`;

带标签的模板字符串

标签函数并不一定需要返回一个字符串

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()

参数默认值

函数默认值，必须放在参数最后

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

剩余参数

剩余参数，必须放在参数最后

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

展开数组

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

箭头函数

箭头函数语法

const a = n => n+1

箭头函数this

箭头函数的this是函数定义的时候就绑定的； 普通函数的this指向调用对象，箭头函数的this调用对象指向父级；箭头函数应该是普通函数定义基础上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区别

image.png

Reflecct

reflect内部封装了一系列对对象的底层操作
Reflect成员方法就是Proxy处理对象的默认实现
统一提供对象的操作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))

image.png

Promise

之后会 单独理解

Symbol

会创建出唯一的数据类型，可以作为对象的私有属性名，防止对象的属性值北访问

const a = Symbol()
const b = Symbol()
console.log(a === b) //false

console.log( Symbol.for("foo") ===  Symbol.for("foo")) //true    让Symbol 和字符串形成一一对应关系

迭代器

const todos = {
  life: ["吃饭"， "睡觉'， "打豆豆"]，
  learn: ['语文'， '数学'，'外语']，
  work: ['喝茶']
   each: function (callback) {
      const all = [].concat(this.life, this.learn, this.work)
      for (const item of all){
        callback(item)
      }  
  }
    [Symbol.iterator]:function(){
        const all = [...this.life, ...this.learn, this.work]
        let index = 0
         return {
            next function() {
                return{
                    value: all[index],
                    done: index++ >=all.length
                 }
          }
      }
    }
}s

生成器

避免异步编程函数回调嵌套过深

function * foo(){
  console.log('111')
  yeild 100
console.log('222')
  yeild 200
console.log('333')
  yeild 300
}
const result = foo(）
console.log(result.next())
console.log(result.next())
console.log(result.next())

作者：酸菜牛肉 文章内容输出来源：拉勾教育大前端高薪训练营课程