js的那些事儿

前言

作为一名后端开发，这些前端的事儿也要了解呀

1、promise—异步编程的解决方案

异步性提高了程序的执行效率，但同时也减少了程序的可读性。如果我们有几个异步操作，并且后一个操作需要前一个操作返回的数据才能执行，那么只能通过一层一层嵌套下去。
举个栗子：

$.ajax({
...,
success:funtion(){
	$.ajax({
	....,
	success:funtion(){
		$.ajax({
		....,
		success:function(){
		...
		}
		});
	}
});
}
});

这么一层一层嵌套下去，整个人想死有没有？？？
为了解决这个问题，ES6提出了Promise的实现。

1.1、Promise的作用

Promise 对象用于一个异步操作的最终完成（或失败）及其结果值的表示。简单点说，它就是用于处理异步操作的，异步处理成功了就执行成功的操作，异步处理失败了就捕获错误或者停止后续操作。

1.2、Promise的使用

Promise一般的使用方式为：

new Promise(
    /* executor */
    function(resolve, reject) {
        if (/* success */) {
            // ...执行代码
            resolve(data);
        } else { /* fail */
            // ...执行代码
            reject();
        }
    }
);

其中，Promise中的参数executor是一个执行器函数，它有两个参数resolve和reject。它内部通常有一些异步操作，如果异步操作成功，则可以调用resolve()来将该实例的状态置为fulfilled，即已完成的，如果一旦失败，可以调用reject()来将该实例的状态置为rejected，即失败的。

我们可以把Promise对象看成是一条工厂的流水线，对于流水线来说，从它的工作职能上看，它只有三种状态，一个是初始状态（刚开机的时候），一个是加工产品成功，一个是加工产品失败（出现了某些故障）。同样对于Promise对象来说，它也有三种状态：

• pending
  初始状态,也称为未定状态，就是初始化Promise时，调用executor执行器函数后的状态。
• fulfilled
  完成状态，意味着异步操作成功。
• rejected
  失败状态，意味着异步操作失败。

它只有两种状态可以转化，即

• 操作成功
  pending -> fulfilled
• 操作失败
  pending -> rejected

并且这个状态转化是单向的，不可逆转，已经确定的状态（fulfilled/rejected）无法转回初始状态（pending）。

使用Promise改写上面的嵌套调用

var a =function(){
Promise promise = new Promise(function(resolve,reject){
	ajax({
	...,
	success:function(res){
		resolve(res)
	}
	})
});

return promise;
}

var b =function(){
Promise promise = new Promise(function(resolve,reject){
	ajax({
	...,
	success:function(res){
		resolve(res)
	}
	})
});

return promise;
}

var c =function(){
Promise promise = new Promise(function(resolve,reject){
	ajax({
	...,
	success:function(res){
		resolve(res)
	}
	})
});

return promise;
}

a().then(res=>{
	retruen b();
}),then(res=>{
	return c();
}).then(res=>{
	console.log("链式调用结束");
});

1.3、Promise的then()方法

Promise对象含有then方法，then()调用后返回一个Promise对象，意味着实例化后的Promise对象可以进行链式调用，而且这个then()方法可以接收两个函数，一个是处理成功后的函数，一个是处理错误结果的函数。
then()方法会返回一个新的Promise对象。

• 如果then()方法中返回了一个参数值，那么返回的Promise将会变成接收状态。
• 如果then()方法中抛出了一个异常，那么返回的Promise将会变成拒绝状态。
• 如果then()方法调用resolve()方法，那么返回的Promise将会变成接收状态。
• 如果then()方法调用reject()方法，那么返回的Promise将会变成拒绝状态。
• 如果then()方法返回了一个未知状态(pending)的Promise新实例，那么返回的新Promise就是未知状态。
• 如果then()方法没有明确指定的resolve(data)/reject(data)/return data时，那么返回的新Promise就是接收状态，可以一层一层地往下传递。

1.4、Promise的catch()方法

catch()方法和then()方法一样，都会返回一个新的Promise对象(这就意味着，如果使用了catch捕获了reject状态后，返回的promise是resolve状态的话，并不会影响整个个调用链的执行)，它主要用于捕获异步操作时出现的异常。因此，我们通常省略then()方法的第二个参数，把错误处理控制权转交给其后面的catch()函数，如下：

var promise3 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    reject('reject');
  }, 2000);
});

promise3.then(function(data) {
  console.log('这里是fulfilled状态'); // 这里不会触发
  // ...
}).catch(function(err) {
  // 最后的catch()方法可以捕获在这一条Promise链上的异常
  console.log('出错：' + err); // 出错：reject
});

2、js的一些常用语法（包含es6）

2.1、解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
数组：

let [a, b, c] = [1, 2, 3];
//等同于
let a = 1;
let b = 2;
let c = 3;

对象：

let {
  StyleSheet,
  Text,
  View
} = React;

相当于
let StyleSheet = React.StyleSheet;
...

函数中使用解构

//函数的解构,赋初值
let f = ({name,age=55})=>{
    console.log("name and age is",name,age);
}

f({name:'lige'});

相当于
let f =function(person){
console.log("name and age is",person.name  ,person.age ? person.age:55);
}

2.2、箭头函数

ES6中新增箭头操作符用于简化函数的写法，操作符左边为参数，右边为具体操作和返回值。
箭头函数的引入有两个方面的作用：

• 一是更简短的函数书写
• 二是对this的词法解析。

使用注意点
箭头函数有几个使用注意点。

• 箭头函数本身是没有this和arguments的，在箭头函数中引用this实际上是调用的是定义时的上一层作用域的this。
• 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

上面几点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。

2.3、遍历

2.3.1、for of 遍历

可以直接使用遍历数组

let params=[{name:'lige'},{name:'zhangsan'}];
for(let p of params){
    console.log(p);
}

2.3.2、for in遍历

可以使用for in遍历，遍历数组和对象

//遍历数组
let nums = [2,3,1,90,33];
for(let index in nums){
    console.log(nums[index]+",");
}
//遍历对象 or Map
let person = {name:'lige',age:55};
for(let k in person){
    console.log('属性',k);
    console.log('属性值',person[k]);
}

2.4、json的两种结构

JSON基于两种结构：
json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构
1、对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,…}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。
2、数组：数组在js中是中括号“[]”括起来的内容，数据结构为 [“java”,“javascript”,“vb”,…]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。

2.5、&&和||的妙用（短路原理）

let a = param || 0;//当param为null/undefined/空字符串的时候，a为0，否则为param
let b = param && 1;//当param不为null/undefined/空字符串的时候，a为1，否则为param

2.6、扩展运算符 …

扩展运算符可以将一个数组转为用逗号分隔的参数序列。可以将数组中的元素直接作为参数使用

let f = (a,b)=>{
    console.log(a+b) ;
};
let p = [2,3];
f(...p);