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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。