10.json object extension
1. JSON.stringify(obj/arr)
js object (array) is converted to json object (array)
2. JSON.parse(obj/arr)
json object (array) is converted to js object (array)
var obj = {
username:'bar'};
obj=JSON.stringify(obj);
console.log(typeof obj);
obj=JSON.parse(obj);
console.log(typeof obj);
11.Promise
Asynchronous: There is nothing to do between operations, promote multiple operations (the code is more complicated)
Synchronization: only one thing can be done at the same time (the code is simple)
Common syntax for asynchronous operations
1. Event monitoring
document.getElementById('#start').addEventListener('click', start, false);
function start() {
// 响应事件，进行相应的操作
}
// jquery on 监听
$('#start').on('click', start)
2. Callback
// 比较常见的有ajax
$.ajax('http://www.wyunfei.com/', {
success (res) {
// 这里可以监听res返回的数据做回调逻辑的处理
}
})
// 或者在页面加载完毕后回调
$(function() {
// 页面结构加载完成，做回调逻辑处理
})
Promise is a solution for asynchronous programming. In fact, it is a constructor. It has all, reject, and resolve methods. The prototype has methods such as then and catch.
(1) The state of the object is not affected by the outside world. The Promise object represents an asynchronous operation and has three states: pending (in progress), fulfilled (successful) and rejected (failed). Only the result of the asynchronous operation can determine the current state, and no other operation can change this state. This is also the origin of the name Promise, which means "promise" in English, which means that other means cannot be changed.
(2) Once the state changes, it will not change again, and this result can be obtained at any time. There are only two possibilities for the state of the Promise object to change: from pending to fulfilled and from pending to rejected. As long as these two situations occur, the state will be frozen and will not change anymore. This result will always be maintained. At this time, it is called resolved. If the change has occurred, and you add a callback function to the Promise object, you will get this result immediately. This is completely different from an event. The characteristic of an event is that if you miss it, you can listen to it and you will get no results.
new Promise(
function (resolve, reject) {
// 一段耗时的异步操作
resolve('成功') // 数据处理完成
// reject('失败') // 数据处理出错
}
).then(
(res) => {
console.log(res)}, // 成功
(err) => {
console.log(err)} // 失败
)
12.Symbol
Symbol is the seventh data type like JavaScript. It is a data type similar to a string.
1. The value is unique and is used to solve the problem of naming conflicts.
2. The value cannot be calculated with other data.
3. The definition object cannot be used. for...in loops, but you can use Reflect.ownkeys to get all the keys of the object
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)
Data type: undefined,string,symbol,object,null,number,boolean
Add method up down to the object
// 向对象中添加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
Traversing the Map structure
Any object deployed with the Iterator interface can be traversed with a for...of loop. The Map structure natively supports the Iterator interface. With the deconstruction and assignment of variables, it is very convenient to get the key name and key value.
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
The difference between generator and function is that generator is defined by function (note the extra number), and, in addition to the return statement, you can also use yield to return multiple times.
The function of Fibonacci sequence can only return once, so it must return an 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]
Use 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, ...
}
Simplify ajax code
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);
}
//异步，后续学习需要深入理解