一 .Symbol
1.基本数据类型
ES5: number string boolean undefined null
ES6:symbol
引用数据类型
数组 对象
2.// symbol 是独一无二的
let aaa = Symbol();
console.log(aaa);//Symbol
let bbb = Symbol();//Symbol
console.log(bbb);
console.log(aaa === bbb); // false
console.log(Object.is(aaa,bbb)); //false
3. let xxx = Symbol();
let obj = {
name: 'zs',
age: 18,
weight: '80kg',
[xxx]: '183cm',
[Symbol('x1')]: '18级'
}
获取对象中属性的方法:
console.log(obj.name)
console.log(obj[xxx])//注意[xxx] 在obj是表达式引入 获取直接 xxx obj[key]
再设置一个Symbol
obj[Symbol('x2')] = 'abc'
4. 在循环中symbol类型的属性无法拿到
二. set
1.
let a1 = [2,1,3,2,4,5,1,4];
let s1 = new Set(a1); // 类数组 2 1 3 4 5
let a2 = [...s1]; // 类数组 -> 数组 2 1 3 4 5
2. set类型数据 用add方法添加数据
console.log(s1.add(9)); // 2 1 3 4 5 9
s1.size //可以拿到sat类型数据长度
3 . delete() 删除数据 => boolean
console.log(s1.delete(4)) // true
console.log(s1.delete(0)) // false
console.log(s1) // 2 1 3 5 9
4. has() 判断是否含有某个数据 => boolean
console.log(s1.has(8)) // false
5 . s1.clear()清空数据
三.map
let tmp = new Map();
// set() 设置数据
tmp.set('name', 'xm');
tmp.set('age', 20)
// size 长度
console.log(tmp.size)
console.log(tmp)
// get() 获取数据
console.log(tmp.get('name'))
// has() => boolean
console.log(tmp.has('height'))
tmp.set('height','183')
tmp.set('weight', 70)
tmp.set('weight', 80)
console.log(tmp)
// delete() 删除数据 => boolean
// console.log(tmp.delete('age'))
// console.log(tmp)
// tmp.clear()
// console.log(tmp)
四.ajax:在不更新整个页面的情况下,更新部分数据,异步加载数据。
ajax原理
1.创建 XMLHttpRequest 对象
var xmlhttp; //(实例化对象)
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
2.向服务器发送请求
/*
open 第一个参数请求类型 GET POST
第二个参数请求地址
第三个参数是否是异步操作
*/
// 规定请求的类型、URL 以及是否异步处理请求。
xmlhttp.open("GET", "Data.json", true);
// 将请求发送到服务器。
xmlhttp.send();
3.响应
// onreadystatechange: 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
xmlhttp.onreadystatechange = function () {
// 当 readyState 等于 4 且状态为 200 时,表示响应已就绪
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// xmlhttp.responseText;
// 返回的信息是json(字符串类型)
console.log(xmlhttp.responseText)
// 转换成对象类型 便于后续使用
let res = JSON.parse(xmlhttp.responseText)
console.log(res)
}
}
/*
readyState:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
*/
https://www.cnblogs.com/smile6542/p/11969936.html
200: ok
304: Not Modified 客户端有缓存的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。
400: Bad Request 请求出现语法错误
404: 找不到资源
500: 服务器错误
505: HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本
query ajax 的应用等
五。Promise
1.Promise异步请求回调函数的定义方法
//方法 一 p1.then(f1).catch(f2)
let p1 = new Promise(function(resolve, reject) {
console.log('开始发送请求1');
setTimeout(() => {
let tag = true
if(tag) {
let obj = {
name: 'zs',
age: 18
}
resolve(obj)
} else {
reject()
}
}, 1500)
}).then(function(obj) {
console.log(obj)
console.log('请求1成功')
}).catch(function() {
console.log('请求1失败')
})
方法二 // p1.then(f1,f2) let p2 = new Promise((resolve, reject) => {
console.log('开始发送请求1')
setTimeout(() => {
let tag = false;
if(tag) {
resolve()
} else {
reject()
}
}, 2000)
}).then(function(){
console.log('请求1成功')
}, function() {
console.log('请求1失败')
})
2.Promise异步请求回调函数的嵌套调用
let p1 = new Promise((resolve, reject) => {
console.log('开始发送请求1')
setTimeout(() => {
let tag = false
if (tag) {
resolve()
} else {
reject()
}
}, 1000)
}).then(() =>{
console.log('请求1成功')
return new Promise((resolve, reject) => {
console.log('开始发送请求2')
setTimeout(() => {
let tmp = false
if (tmp) {
resolve()
} else {
reject()
}
}, 2000)
})
}, () => {
//这里的结构 只能用p1.then(f1,f2)
console.log('请求1失败')
// return Promise.reject()
return new Promise(()=>{})
}).then(() => {
console.log('请求2成功')
}).catch(() => {
console.log('请求2失败')
}) //整个结构就是 p1.then().then().catch()
3.Promise下的两种方法
//所有Promise对象执行完成之后执行
Promise.all([p1, p2, p3]).then(() => {
console.log('okokok')
})
//第一个Promise对象执行后执行
Promise.race([p1,p2,p3]).then(() => {
console.log('1111')
})