es6-常用语法

jiezi

5 年前

建议，多用 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) // ?


  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 />

// 整个模块导出

// 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"

  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)

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

箭头函数 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 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()

可用来实现数据双向绑定

  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>

es6-常用语法

let & const

deconstruct 解构赋值

module 模块

String

Object

Array

function

class

proxy