promise对象
因为回调地狱
一种是各种回调函数互相依赖，关系错综复杂，容易在造成错误
另一种是各种回调里嵌套各种回调，关系错综复杂，麻烦的很
为了解决这种问题promise就来了
三种状态：pending 初始状态 fullfilled 成功状态 rejected 失败状态 再恰当时机就会改变成成功或失败
*****promise是同步的，遇到了直接等待执行就可以，不需要像异步一样跳过然后再回来的时候回调。
let pormise = new Promise((res,rej)=>{
//初始化promise状态：pending
console.log(‘111’)
***
//一般这个时候都要执行异步操作，通常是发送ajax请求，开启定时器（因为这个地方下写的异步就res，rej两种结果所以使回调变得简单）
setTimeout(()=>{
console.log(‘333’)
//根据异步任务的返回结果来修改promise的状态
//异步任务执行成功
res(‘this is success’); //修改promise状态为fullfilled
//异步执行失败
rej(‘this is defeat’) //修改promise状态为rejected失败 注意两者只能执行一个
},2000)
})
console.log(‘222’)
promise.then((data)=>{console.log(data,‘succes’)},(err)=>{console.log(err,‘defeat’)}) //promise的回调会产生两个函数前者是成功的回调如果状态为fullfilled则执行第一个箭头函数
状态为rejected则执行第二个回调函数
.then可以链式操作，前提是前面的then返回一个promise对象供其接收
*****前面res和rej里面可以传递参数给后面promise的回调接收。
–111-222-333
***ajax里的success和error也是这个思想
promise练习
function getNews(url){
let promise = new Promise((res,rej)=>{
//发送ajax请求（这个地方用原生的）
let xmlHttp = new XmlHttpRequest()
xmlHttp.onreadystatechange = function(){ //原生的话这个方法是监听ajax的状态改变一共有0-4 5种状态
if(xmlHttp.responseText=4){
if(xmlHttp.status200){
res(xmlHttp.responseText) //获取到的数据
}else{
rej(’ wrong’)
}
}
}
xmlHttp.open('Get',url) //这个地方是原生ajax的第一步通过get方法，接收url传过来的数据
xmlHttp.send() //发送请求
})
return promise
}
getNews(‘http://localhost:3000/news?id=2’).then((data)=>{console.log（data
let url = JSON.parse(data).commentsUrl
let comment = ‘http://localhost:3000/’+url
getNews(comment)
）},(err)=>{}).then(
(data)=>{console.log(data)},()=>{} //上面getNews又重新带新的url运行了一遍走的是res这边重新接收data
)
node后端
router.get(’/news’,function(req,res,next){
res.set(‘Access-Control-Allow-Origin’,’’); //解决跨域问题的
let id = req.query.id;
let news = {
id:id,
title:‘123’,
commentsUrl：’/comments?newsId=’+id
};
res.json(news);
})
router.get(’/comments’,function(req,res,next){
res.set(‘Access-Control-Allow-Origin’,’’); //解决跨域问题的
let newId = req.query.newId
let comments = [{id:1,newId},{id:2,newId}]
res.json(comments)
})
symbol
es6新添加的一种数据类型（已有的：String，Number，boolean，null，undefined，对象）
symbol的属性值对应的值是唯一的–解决命名冲突问题
symbol值不能与其他数据进行计算，字符串拼串也不行
for in ,of 遍历时不会遍历symbol属性
let symbol = Symbol() //不用new
1、let obj = {} obj[symbol]=‘hello’ /作为对象里的symbol值
2、let symbol = Symbol(‘one’) //传参标识
3、es6提供了11个内置的symbol值
interator（迭代器）遍历器是一种接口机制，为不同的数据接口结构提供统一的访问机制
就是有个next，一个next之后指针指向下一个，然后再next，每一个指针指向都有一个值
直到最后next的指向没有值的时候值是undefined，结束
//模拟指针对象
function myInterator(){
let index = 0
return {
next:function(){ //为什么这边要用两个return啊，还有再一个函数呢（这里就用到了闭包可以让index变量延迟存在）
return index<arr.length? {value:arr[index++],done:false}:{value:undefined,done:true}
}
}
let arr = [2,4,6,‘aqw’]
let interator = myInterator(arr)
console.log(interator.next()) 2 false
console.log(interator.next()) 4 false
console.log(interator.next()) 6 false
console.log(interator.next()) undefined true
console.log(interator.next()) undefined true
}
。。。底层原理在这
//这一套原理es6已经将iterator接口部署到指定的数据类型上，可以使用for of去循环遍历
**数组，字符串，arguments，set容器，map容器（对象不可以哦 就是对象是不能用for of 的）
（其实对象也可以但是很麻烦要用到Symbol.interator。obj[Symbol.iterator]=function mytest(){} 把对象转换成指针对象那种的 ）
let str = ‘ascece’
for(let i of str){
console.log(i)
}
–>a s c e c e
function fun(){
for(let i of arguments){
console.log(i)
}
}
fun(1,4,5,‘qwe’)
*****arguments是用来收集函数实参的，上面这个函数()里没有参数但是arguments帮忙接收了
*****arguments其实是一个伪数组，是不能调用数组的方法的比如foreach。
for-in是ES5标准，遍历的是key（可遍历对象、数组或字符串的key）；
for-of是ES6标准，遍历的是value（可遍历对象、数组或字符串的value）。
***for-in总是得到对象的key或数组、字符串的下标。
***for-of总是得到对象的value或数组、字符串的值，另外还可以用于遍历Map和Set
Generator函数（es6提供解决异步编程的方案之一 promise还是脱离不了回调）
是一个状态机封装了不同的状态数据，用来生成遍历器对象，可暂停函数
function与函数名之间有一个星号**，内部用yield语句描述当前状态
function* myGenerator(){
yield ‘hello’;
yield ‘olleh’
}
let my = myGenerator() 返回的是指针对象
my.next() //不下一个next的话不会到olleh的
接上面那个后端news的
这次用jQuery写前端
function getNews(url){
$.get(url,function(data){
let url = ‘http://localhost:3000’+data.commentsUrl;
SX.next() //通过这个next把这个地方的url传给下一个Generator函数
***这就是为什么node时候必须写next的原因了，就是指针对象啊不next是出不来下一个变量的
在这里面就是generator函数是返回指针对象的
})
}
function sendxml(){
let url = yield getNews(‘http://localhost:3000/news?id=3’)
yield getNews(url)
}
let SX = sendXml()
SX.next()
async函数（真正意义上解决异步回调问题，同步流程表达异步）
本质是Generator语法糖
把里面的yield换成 await（异步操作）
之前的话有异步是直接跳过等到执行完同步再回来执行异步的回调
但是await的话直接就要等待完这个异步执行完结束后才继续执行同步（强行先执行异步的回调）
**而且返回的是promise对象可以.then执行下一步，不需要next()，promise虽然也是同步的，但是里面有异步还是异步
一般都是async和promise一起用
async function getNews(){
return new Promise((res,rej)=>{
$.ajax({
method:‘Get’,
url,
success:data =>{res(data)},
error:err =>{rej()}
})
})
}
async function sendXml(){
let result = await getNews(‘http…’)
console.log(result)
result = await getNews(‘http…’+result.commenturl)
}
sendXml()
class类使用详解
之前是通过原型加构造函数实现继承
//定义一个类
class Person {
constructor(name,age){} //类的构造方法 （与原型里的一样）
showName(){} //类的一般方法
//将方法定义在原型里
}
let person = new Person(‘a’,12)
person.showName()
//子类
class Sperson extends Person {
constructor(){super() //调用父类的构造方法}
}
这个一看就会要很多个原型以及_proto_里的constructor构造函数
其他实用的方法
字符串的
1、includes(str) :判断是否包含指定的字符串
let str = 'sadec2 ’
console.log(str.includes(‘t’)) false
2、starsWith（str）：判读是否以指定的字符串开头
let str = 'sadec2 ’
console.log(str.includes(‘t’)) false
3、endsWith(str): 判断是否以制定字符串结尾
let str = 'sadec2 ’
console.log(str.includes(‘t’)) false
4、repeat(count): 判断指定次数
let str = ‘12’
console.log(str.repeat(3)) 121212
小数的
用0b可以把二进制转换为十进制
console.log(0b1010) //10
用0o可以把八进制转换为十进制
console.log(0o56) //46
判断这个数是不是有限大的数
Number.isFinite(12) //false
判断这个数是不是 不是数字
Number.isNaN(12) //false
Number.parseInt(‘123abc123’) //123
Number.parseInt(‘a123abc123’) //NaN
删除小数点后的数字
Math.trunc(123.89) //123
数组方法的扩展
Array.form(v) //将伪数组或可遍历的对象转换为数组（可以用数组的方法）
let btn = document.getElementByTagName(‘button’)
Array.form(btn).ForEach()
2、Array.of(v1,v2,v3) :将一系列值转换为数组****
let arr = Array.of(1,5,‘abc’,true) //[1,5,‘abc’,true]
3、find(function(value,index,arr){return true}) 找出第一个满足条件并返回true元素
4、findIndex(function(value,index,arr){return true}) 找出第一个满足条件并返回true元素的下标
对象方法扩展
Object.is(v1,v2)
判断两个值是否完全相等
console.log(0==-0) //true
console.log(NaN==NaN) //false NAN不代表任何一个数字
Object.is(0,-0) //false 这里的都相反是因为这个方法是把值都当做字符串形式的
Object.is(NaN,NaN) //true
Object.assign(target,source1,source2)
将原对象的属性复制到目标对象
let obj = {}
obj.ptoto = obj2
直接操作__proto__属性
set、map容器
Set容器：无序的不可重复的多个value的集合体（方法有add、delete、has、clear）
***去重的话可以用这个，直接把重复的干掉
let arr = [1,2,2,4]
let arr1 = []
let set = new Set(arr)
for(let i in set){
arr1.push(i)
}
console.log(arr1)
let set = new Set([1,2,4,6,2,8]) ->[1,2,4,6,8] 不重复 ******
set.add(7) ->[1,2,4,6,8,7]
set.size ->长度
set.has(8) ->true是否有
set.clear() ->清空到空状态
Map容器：无序的key不重复的key-value的集合体（方法有get、set、delete、has、clear）
let map = new Map([[21,‘qwe’],[‘fr’,‘qwe’]]) //{21=>qwe,fr=>qwe}
for of 都可以循环这两个容器
深拷贝与浅拷贝
let a = ‘abcd’
let a2 = a
a2 = ‘’
console.log(a) //abcd
基本数据类型拷贝后会生成一份新的数据，修改不会影响原数据
let obj = {username:‘kobe’,age:’’}
let obj2 =obj
obj2.username = ‘wade’
console.log(obj.usename) //wade
obj2堆里指向的原来的obj
所以我们在拷贝数组/对象时，没有生成新的数据而是复制了一份引用,修改拷贝后的数据会影响原来的数据
****数据拷贝的方法：
1、直接赋值给一个变量 (浅拷贝)
2、Object.assign() 将所有枚举属性的值从一个或多个源对象分配到目标对象，并返回目标对象（浅拷贝）
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
3、Array.prototype.concat() （浅拷贝） 就直接。concat()后面不跟参数就是一个拷贝
4、Array.prototype.slice() 浅拷贝
5、JSON.parse(JSON.stringify()) 深拷贝（深度克隆）**拷贝数据里不能有函数它处理不了
stringify里只能放obj/array
判断的是否深浅的依据就是转换数据的时候是转成什么样的形式
所以说深浅拷贝只是针对于数组和对象对于其他数据来说是没有深浅拷贝这一说的
**浅拷贝就是最常见的普通复制数组对象
就是简单地拷贝引用，修改了拷贝以后的数据会影响原数据（只要修改会影响原数据就是浅拷贝）
而深拷贝就类似于其他的基本数据了，拷贝的时候生成新数据，修改拷贝以后的数据不会影响原数据*
知识点（回顾）
如何判断数据类型 arr–Array 注typeof判断不了array
用Object.prototype.toString.call(传进来的参数).slice(8,-1) 用这个可判断
****枚举对象枚举出来的是key值，枚举数组出来的是下标
let obj = {name:“l”,age:“21”}
for(let i in obj){
console.log(i)
}
// name age
let arr = [3,4,5]
for(let i in arr){
console.log(i)
}
// 1,2,3
判断实现一个深度克隆
function clone(target){
let result,targetp = Object.prototype.toString.call(target).slice(8,-1)
if(targetp===‘object’){
result = {}
}else if (targetp===‘Array’){
result = []
}else{
return target
}
for (let i in target){
let value = target[i]
if(Object.prototype.toString.call(value).slice(8,-1)=== ‘Object’||‘Array’){
result[i]=clone(value)
}
}
}
深拷贝使得数据更为安全
数组，对象的拷贝一般都是会改变原数据值的，深拷贝了就不会了，就tm这么简单
严格模式
1、变量必须声明2、禁止自定义的函数this指向window
3、创建eval作用域4、对象不能重名属性
es5的 object拓展&&&&
1、Object.create(prototype,[descriptors]) 以指定对象为原型创建新的对象
obj = {}
obj2 = Object.create(obj,{sex:{
value:‘12’,
writable:true //可改变值的
configurable:true //可删的
enumerable:true //是否能用for in 枚举
}})
2、Object.defineProperties(object,descriptors) 为指定的多个对象扩展属性
let obj2 = {f:‘kobe’,l:‘bryant’}
Object.defineProperties(obj2,{
fullname:{
get:function(){ //获取扩展属性
return this.f+’’+this.l}
set：function(data){
console.log(‘set()’,data) //监听扩展属性，发生变化时自动回调
}
}
})
***let不存在变量提升，可声明变量 const定义一个常量并且不能修改，也不存在变量提升
console.log(a)
var a = 3
这种的不会是undefined了，而是报错，这也非常有好处
post与get
最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数
正是因为get直接把参数写在url上，所以get比post更不安全，而且get传送参数是有长度限制的post没有
也正是因为在url中只能进行url编码，参数会被保留在浏览历史记录里，数据类型只接受ASCII字符
而post都不限制
获取请求数据的话
‘comment?id=’+id
get: let id = req.query.id //这个query是url里的请求 ,id是问号后面的
post: let id = req.request.body.id //request是接收的请求，从这个地方就看出不同
另一点很重要的是
get用于信息获取，并不会影响资源内容
而post表示可能修改服务器上的资源请求，用post必须要到表单
变量的解构赋值
对象的解构赋值最常用export那个原理就这个
let obj = {username:‘q’,age:“12”}
let {username,age} = obj key值一定要一样
console.log(usename,age)
这里的username就是obj.username,age同理
数组结构赋值
let arr = [1,2,4,5]
let [a,b,c] = arr //这边这个是下标
console.log(a,b,c) //1,2,4
4353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
