about ES6

标签：ext   art   setting   out   实例   mod   xtend   $$   min   

about es6

• es6 就是es2015 es7 是 es2016
• babel-preset-stage-0
• 语言的进程就是 stage-0 (skectch)、stage-1 (Proposal)、stage-2 (Implementations)、stage-3(Standard)
  
• link

let & const

建议，多用const，变量用let，不用var

  // let 没有变量提升
  // console.log(a)
  // let a = 1;

  // b 声明常量，基本类型不可修改
  // const b = 1;
  // b = 2;

  // 可以修改复杂类型
  const c = [1]
  c[0] = 10;
  console.log(c) // ?

deconstruct 解构赋值

 
  const list = [11,22,33];

  let [a,b] = list;
  let [a1, ...b1] = list;
  console.log(a, b )
  console.log(a1, b1)


  const obj = {
    name: "david",
    age: 21,
    sex: 'male'
  }

  //const {name, age} = obj;
  //   console.log(name, age)

  // 剩余参数
  // const {
  //   name, ...attrs
  // } = obj;
  // console.log(name)
  // console.log(attrs)

  // 默认值
  const{name = 'admin'} = obj;

  console.log(name)

  // 扩展
  // 怎么求一个数组最大值
  const list1 = [11,2,444,5]
  // 原生
  console.log(Math.max.apply(window,list1))
  // es6
  console.log(
    Math.max(...list1)
  )

  // 扩展 react中的展开符

  // 1. 给组件增加参数
  // const attrs = {
  //   name: '111',
  //   age: 555
  // }
  // <Component ...attrs />

module 模块

// 整个模块导出

// eg state.js
export default {

}
class State {
  list: []
}
export default new State()


// 引入方法
import $$State from "./state"
import {list}  from "./state"

// 一个一个导出

// eg. math.js
export function add() {

}

export function minus() {

}

import {add, minus} from "./math"

String

  let string = "apple,banana,orange";
  string.includes("banana");     // true
  string.startsWith("apple");    // true
  string.endsWith("apple");      // false
  const str = 'david'
  const str1 = `${str} is a boy!`
  console.log(str1)

Object

const name = 'david' ,age = 11;

// 变量创建对象
const person = {name, age}

// 对象里的方法
const obj = {
  say(){
    console.log("hello")
  }
}

// ES6允许用表达式作为属性名，但是一定要将表达式放在方括号内
const fnName = 'list1'
const obj2 ={
  [`${fnName}_get`](){
    console.log("hello world")
  }
}

obj2.list1_get()

// 合并对象

const obj1 = {
  a: 1
}
const obj11 = {
  ab: 1
}

const obj111 = {...obj1, ...obj11}
console.log(obj111)


const obj = {
    name: 'david',
    age: 11
}

console.log(
    Object.keys(obj)
)

console.log(
    Object.values(obj)
)

console.log(Object.entries(obj))
    

// 重要 Object.assign

const aa = Object.assign({}, obj1)

aa.a = 111;
console.log(aa)
console.log(obj1)

Array

  // Array.from() 类数组变成数组 
  const obj = {}
  obj[0] = 0;
  obj[1] = 1;
  obj.length = 2;
  console.log(obj)
  const arr = Array.from(obj)
  console.log(arr)



  // 合并数组
  const arr1 = [111]
  const arr2 = [333]
  const arr3 = [...arr1, arr2]

  // 包含元素 
  console.log(
    arr3.includes(111)
  )

function

• 箭头函数this，指向上层
• 箭头函数没有arguments

const did = () => {
    console.log("dis something")
  }
  did()
  const doing = name => {
    console.log("I am doing " + name)
  }
  doing("cooking")

  const introduce = (name, age = 18) => {
    console.log(
      `I am ${name} and I am ${age}`
    )
  }
  introduce("Tom")


  const talks = (market, ...others) => {
    console.log(market)
    console.log(others)
  }
  talks("家乐福", '河马生鲜', 'KFC')


  // 箭头函数this指向问题 
  name = "window"
  const obj = {
    name:'obj',
    say: () => {
      console.log(this)
      console.log(this.name)
      console.log("\n")
    },
    tell(){
      console.log(this)
      console.log(this.name)
      console.log("\n")
    }
  }

  obj.tell()
  obj.say()

class

  class Animal{
   constructor(){
     this.name = "animal"
   }
   
   // 静态方法
   static tell(){
     console.log("Animal tell")
   }
    // 实例方法 
   gogo(){
     console.log("gogogo")
   }
  }

  class Dog extends Animal {
    constructor(){
      super()
      this.name = "Dog"
    }
  }

  const hsq1 = new Animal()
  const hsq2 = new Dog()

  console.log(hsq1.name)
  console.log(hsq2.name)
  hsq1.gogo()
  Animal.tell()
  Dog.tell()

proxy

可用来实现数据双向绑定

  let target = {
    name: 'Tom',
    age: 24
  }

  let handler = {
    get: function(target, key) {
      console.log('getting '+key);
      return target[key]; // 不是target.key
    },
    set: function(target, key, value) {
      console.log('setting '+key);
      target[key] = value;
    }
  }
  let proxy = new Proxy(target, handler)

  console.log(proxy.name)

// 实现数据双向绑定的两种实现 


<input type="text" id="a">
<script>

  const model = {

  }


  // view - model
  $("#a").on("keyup" ,function () {
    model.name = $(this).val()
    console.log(model)
  })


  // let value = ''
  // // model - view
  // Object.defineProperty(model, 'name', {
  //   set: function (v) {
  //     value = v;
  //   },
  //   get: function () {
  //     return value
  //   }
  // })

  
  let handler = {
    get: function(target, key) {
      console.log('getting '+key);
      return target[key]; // 不是target.key
    },
    set: function(target, key, value) {
      target[key] = value;
      $("#a").val(value)
    }
  }


  let proxy = new Proxy(model, handler)


  setTimeout(function () {
      proxy.name = 'hhhhhhhh'
  }, 3000)
  

</script>

about ES6

标签：ext   art   setting   out   实例   mod   xtend   $$   min   

原文地址：https://www.cnblogs.com/huahuadavids/p/12040375.html