10.json对象扩展
1.JSON.stringify(obj/arr)
js对象(数组)转换为json对象(数组)
2.JSON.parse(obj/arr)
json对象(数组)转换为js对象(数组)
var obj = {username:'bar'};
obj=JSON.stringify(obj);
console.log(typeof obj);
obj=JSON.parse(obj);
console.log(typeof obj);
11.Promise
异步:操作之间没啥关系,提升进行多个操作(代码更复杂)
同步:同时只能做一件事(代码简单)
异步操作的常见语法
1.事件监听
document.getElementById('#start').addEventListener('click', start, false);
function start() {
// 响应事件,进行相应的操作
}
// jquery on 监听
$('#start').on('click', start)
2.回调
// 比较常见的有ajax
$.ajax('http://www.wyunfei.com/', {
success (res) {
// 这里可以监听res返回的数据做回调逻辑的处理
}
})
// 或者在页面加载完毕后回调
$(function() {
// 页面结构加载完成,做回调逻辑处理
})
Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。
(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
new Promise(
function (resolve, reject) {
// 一段耗时的异步操作
resolve('成功') // 数据处理完成
// reject('失败') // 数据处理出错
}
).then(
(res) => {console.log(res)}, // 成功
(err) => {console.log(err)} // 失败
)
12.Symbol
Symbol是JavaScript一样的第七种数据类型,是一种类似于字符串的数据类型
1.值是唯一的,用来解决命名冲突的问题
2.值不能与其他数据进行运算
3.定义对象不能使用for…in循环遍历,但是可以使用Reflect.ownkeys来获取对象的所有键命
let s=Symbol();
//console.log(s,typeof s);
let s2=Symbol('七七');
let s3=Symbol('七七');
//Symbol.for创建
let s4=Symbol.for('七七');
let s5=Symbol.for('七七');
console.log(s2==s3);//false
console.log(s4==s5);//true
let result=s+100;(X)
数据类型:undefined,string,symbol,object,null,number,boolean
向对象中添加方法 up down
// 向对象中添加up、down
let game = {
name: '一款游戏',
up() {
console.log('我是原来的up')
},
down() {
console.log('我是原来的down')
}
}
// 声明一个对象
let methods = {
up: Symbol(),
down: Symbol()
}
game[methods.up] = function () {
console.log('upupup')
}
game[methods.down] = function () {
console.log('downdowndown')
}
// 调用
game[methods.down]()
// 第二种用Symbol作为属性名的方法
let game2 = {
name: '狼人杀',
[Symbol('say')]: function () {
console.log('请发言')
},
[Symbol('zibao')]: function () {
console.log('狼人已自爆')
}
}
for (const key in game2) {
console.log(key)
} // name
console.log(Reflect.ownKeys(game2)) // ["name", Symbol(say), Symbol(zibao)]
game2[Reflect.ownKeys(game2)[1]]() // 请发言
13.遍历器(Iterator)
遍历Map结构
任何部署了Iterator接口的对象,都可以用for…of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。
var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world
14.generator
generator和函数不同的是,generator由function定义(注意多出的号),并且,除了return语句,还可以用yield返回多次。
斐波那契数列的函数,函数只能返回一次,所以必须返回一个Array。
function fib(max) {
var
t,
a = 0,
b = 1,
arr = [0, 1];
while (arr.length < max) {
[a, b] = [b, a + b];
arr.push(b);
}
return arr;
}
// 测试:
fib(5); // [0, 1, 1, 2, 3]
fib(10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
用generator
function* fib(max) {
var
t,
a = 0,
b = 1,
n = 0;
while (n < max) {
yield a;
[a, b] = [b, a + b];
n ++;
}
return;
}
fib(5);
//用for ... of
for (var x of fib(10)) {
console.log(x); // 依次输出0, 1, 1, 2, 3, ...
}
简化ajax代码
try {
r1 = yield ajax('http://url-1', data1);
r2 = yield ajax('http://url-2', data2);
r3 = yield ajax('http://url-3', data3);
success(r3);
}
catch (err) {
handle(err);
}
//异步,后续学习需要深入理解