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.jsexport default {}class State { list: []}export default new State()// 引入方法import $$State from "./state"import {list} from "./state"// 一个一个导出// eg. math.jsexport 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.assignconst 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>