1.let/const
let
- 声明变量只在块级作用域
- 不允许重复声明变量
- 不存在变量提升“暂时性死区”
const
- 常量，不可以改变的变量，命名时都是大写
- 必须要赋初始值(存储一个数值，表示存储的一个值，如果存储的是一个对象实际上存储的是一个地址，只要地址不变内容是可以变化的)
2.解构赋值
数组解构(如果解构不成功默认undefined，左边一种结构，右边一种结构，左右一一对应)
- [a,b] = [x,x,x] //a=x,b=[x,x] (a取第一个值，b取剩下所有值)
function fn(){ return [1,2,3,4,5,6]; }; let [,,a,,...b] = fn; //a=3,b=[5,6]
对象结构(数组是按照顺序解构的，对象是根据属性名结构的）
let obj = {a:123,b:12312}; let {c:b,d:a} = obj //c=123,d=12312解构常用用途1：两数交换，2函数返回值
3.对象的拓展
属性和方法的简介表达方式
let react = { sss }等同于let react = { sss:sss }
表达式方式的属性名和方法
let obj = {['my'+'name']:'sb'}
合并对象
-
`object.assign({},{})`
is()
- object.is()(严格相等)
4.iterator
Symbol.iterator迭代器 ，有next()方法
- 会返回一个 拥有value,done个属性的对象
5.generator
是iterator的生成器，function*(){}
yield（关键字、跟暂停差不多）
6.async（函数负责返回一个 Promise 对象）
- 是generator的语法糖
await 关键字
- 等待一个async函数,如果等待的是一个promise,会阻塞后面的代码等待promise执行完成，返回一个promise的值或者返回值，虽然await阻塞了，但是await 在 async中，async不会阻塞，他内部所有的阻塞都封装在一个promise对象中异步执行
- 如果等待的是一个直接值
- 最好把 await 命令放在 try...catch 代码块中
复习之前所有API
- 查看是否有哪些知识点有所遗漏，这篇文章稍微有些杂，等我总结差不多会整体的梳理一遍
- 下面是数组和字符串的记忆脑图便于记忆，有时候有些api会极易混淆
数组方法
字符串方法
对象的方法
- Object.assign(target, ...sources):将目标对象拷贝到源对象中，如有相同键值，目标对象覆盖源对象属性。属于浅拷贝。
- Object.create(proto, [propertiesObject]):create经典用法：类式继承。能达到(class My extends Person)一样的效果。
- Object.getPrototypeOf(object):该方法返回对象的原型对象，如果没有的话，则返回null。需要指出的是，对于函数对象，其返回的并不是显式原型（prototype），而是隐式原型（proto），该方法兼容IE9及以上的浏览器。
- Object.defineProperty(obj,prop,descriptor) 方法在obj对象上对prop属性进行定义或修改，其中descriptor为被定义或修改的属性符。其中对于descriptor属性符可以设置的值如下显示：
- 【value】表示属性的值，默认为undefined
- 【writable】该属性是否为可写，如果直接在对象上定义属性，则默认为true。如果设置为false，则属性仅为可读。
- 【configurable】 如果为false的话，则不能修改（writabel,configurable,enumerable），如果直接在对象上定义属性，则默认为true
- 【enumerable】是否能够被枚举，如果直接在对象上定义属性，则默认为true。
- 【get】当对象访问prop属性的实话，会调用这个方法，并返回结果。默认为undefined
- 【set】当对象设置该属性的时候，会调用这个方法，默认为undefined。
- Object.getOwnPropertyDescriptor(obj, prop):该方法返回obj上所有自身可枚举和不可枚举的属性(不包括原型链上的属性)，如果传入的obj不是数组，则会报错。该方法的兼容IE9及以上的浏览器。
- Object.is(val1,val2): 功能与‘===’相同，但修复了‘===’运算符0与-0相等，NaN与NaN不等的bug。
- Object.keys(obj): 返回遍历对象可枚举属性的键值数组，（原型链中属性无法遍历）
- Object.entries(obj):返回遍历对象可枚举属性的键值对数组，（原型链中属性无法遍历）
- Object.preventExtensions():该方法可以让一个对象永远不能添加新的属性，在严格模式下，如果强行为对象添加属性，会报错.
- Object.seal(obj):其对一个对象进行密封，并返回被密封的对象，这些对象都是不能够添加属性，不能删除已有属性，以及不能够修改已有属性的可枚举型、可配置型、可写性。
- Object.freeze(obj):该方法将obj对象冻结，其任何属性都是不可以被修改的。现在我们演示下这个用法。
DOM事件
DOM事件级别
- DOM0：element.onclick = function(){}
- DOM2：element.addEventListener('click', function(){}, false)
- DOM3：element.addEventListener('keyup', function(){}, false)
DOM2中布尔值，指定事件是否 在捕获或冒泡阶段执行。 可能值：true - 事件句柄在捕获阶段执行，false- 默认。事件句柄在冒泡阶段执行
DOM3中相比DOM2新增了一些事件类型
事件捕获与事件冒泡
- 事件捕获：window->document->html -> body -> ... -> 目标元素。（从外往内触发）
- 事件冒泡：目标元素 -> ... -> body -> html -> document -> window。（从内往外触发）
Event 对象常见应用
-
event.preventDefault() ->取消事件的默认动作。
-
event.stopPropagation()->止事件冒泡。
-
event.stopImmediatePropagation()->阻止剩下的事件处理程序被执行。如果一个元素上绑定了三个事件，在其中一个事件上调用了这个方法，那其他 的两个事件将不会被执行。
防抖和节流
- 防抖：并不是触发事件而是合并事件，触发事件后在一定时间没有继续触发，会执行函数，分为立即执行和非立即执行
/**
* @desc 函数防抖
* @param fn 函数
* @param delay 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
var debounce = (fn, delay = 500, immediate = false, ...arg)=>{
var timeOut
return ()=>{
var ctx = this
if(timeOut) clearTimeOut(timeout)
var callOn = !timeOut
if(immediate){
timeOut=setTimeOut(()=>{
timeOu=null
},dalay)
if(callOn)fn.apply(ctx,arg)
}else{
timeOut = setTimeOut(()=>{
fn.apply(ctx,arg)
},delay)
}
}
}
- Hook
- 节流：会合并一定时间内的事件，并在该时间结束时真正去触发一次事件。如果一直触发会在规定时间有规律的执行。
var throttle = (fn, wait = 500, type = 1, ...arg){
if(type == 1){
var preTime = 0
}else{
var timeoOut
}
return ()=>{
var ctx = this
if(type == 1){
var nowTime = Date.now()
if(nowTime-preTime > wait){
fn.apply(ctx,arg)
}
}else{
timeOut = setTimeOut(()=>{
timeOut = null
fn.apply(ctx,arg)
},wait)
}
}
}
原型、构造函数、实例、原型链
- 创建对象的4种方法
- var obj1 = new Object()
- var obj2 = {}
- var obj3 = object.create()
- function Obj4(){}; var obj4 = new obj4()
- 原型链
new obj4() === obj4
obj4.proto === Obj4.prototype
Obj4.prototype.constructor === Obj4
