一、函数的Rest参数和扩展
1、Rest参数
rest参数和一个变量名搭配使用，生成一个数组，用于获取函数多余的参数，例如：
function sum2(...m){
let total = 0;
for(var i of m){
total +=i;
}
console.log(`total:${total}`);
}
sum2(2,4,5,6); //total:17
以往我们的做法是去判断传参的长度，然后进行循环相加，and now，我们可以使用rest参数。
rest参数作用：将多余的逗号分隔的参数序列转换为数组参数。
注意： rest参数必须是最后一个参数，否则报错
ps:简书竟然不支持文字变色，这简直了要逼我弃书啊，我只能使用链接啊，怒摔！
2、函数的扩展
· 单数组扩展
...[]这种三个点+数组的使用方式为数组的扩展，如：
var [x,y] = [4,8];
console.log(...[4,8]); // 4 8
将数组进行拆解，然后输出；
· 多数组扩展
old method:
let arr1=[1,3];
let arr2 = [2,4];
console.log('concat:'+arr1.concat(arr2)); //concat:1,3,2,4
new method:
console.log(...arr1,...arr2); // 1,3,2,4
· 拆解字符串
let xy = "es6";
console.log(...xy); // e s 6
二、Promise使用
Promise我也不是很明白，只能做个笔记以便后续理解使用。
let checkLogin = function(){
return new Promise(function(resolve,reject){
let flag = document.cookie.indexOf('userId') > -1 ? true : false;
if(flag){
resolve({
status:0,
result:true
})
}else{
reject('error');
}
});
}
checkLogin().then((res) => {
if(res.status == 0){
console.log('login in success'); //如果flag为true，则输出login in success
}).catch((error) => {
console.log(`error:$(error) `); //如果flag为false，则输出error;error
});
可以将所有的登录逻辑封装到Promise中，将登录成功的结果放到resolve中，登录失败的结果放到reject中，最终调用的时候通过.then().catch()方式输出调用
以上代码可以增加链式调用，可增加一个方法，如下：
let getUserInfo = () => {
return new Promise((resolve,reject) => {
let userInfo = {
userId:"101"
};
resolve(userInfo)
})}
在checkLogin()调用成功后，再次调用getUserInfo()方法，完整代码如下：
let checkLogin = function(){
return new Promise(function(resolve,reject){
//resolve用于接口调用成功请求的回调
//reject用于接口报错后使用的回调
let flag = document.cookie.indexOf("userId") > -1 ? true : false;
if(true){
resolve({
status:0,
result:true
})
}else{
reject("error");
}
});
}
let getUserInfo = () => {
return new Promise((resolve,reject) => {
let userInfo = {
userId:"101"
};
resolve(userInfo)
})
}
checkLogin().then((res) => {
if(res.status == 0){
console.log("login in");
return getUserInfo();
}
}).catch((error) => {
console.log("errors:"+error);
}).then((res) => {
// 此处的then().catch()对应getUserInfo()方法
console.log(res)
}).catch((error) => {
console.log(1);
});
此为链式调用。
Promise还有一个方法为Promise.all()，这个可以同时调用多个接口和请求，代码如下：
Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2]) => {
//all里面必须是pormise对象，并且then方法中的res应该与all中的方法一一对应
console.log('=======Promise.all()=======');
console.log(res1);
console.log(res2);
});
三、module.exports和ES6 import / export的使用
1、import/export导出/引入的几种方式
此处拿vue-cli下载下来的模板举例来说。
./router/index.js 默认写法为：
export default new Router({})
然后./main.js文件引入路由文件的方法为：
import router from './router'
如果./router/index.js写法为：
export let router = new Router({});
则./main.js的引入方法为：
import { router } from '/router'
再或者举例，在根目录下新建文件./util.js，代码为：
export let sum = (x,y) => {
return x+y;
}
export let minus = (x,y) => {
return x-y;
}
则./main.js的导入方法为：
import {sum,minus} form './util'
console.log(`sum:${sum(1,2)}`); //输出：sum:3
或者引入方式为：
import * as util from './util'
console.log(`sum:$(uril.sum(1,2))`); //输出内容同上
2、import异步加载
还是拿vue-cli下载下来的模板来举例
新增一个页面./views/counter.vue，其中增加一个点击事件，当点击是引入js文件，引入代码就写在点击事件中：
import('./../util')
当然这种方法我没有实现成功。
四、AMD、CMD、CommonJS和ES6对比
这个主要是将模块化开发进行区别
1、AMD
AMD是RequireJS在推广过程中对模块化定义的规范化产出，为异步模块定义。例如：
define(['package/lib'],function(lib){
function foo(){
lib.log('hello world');
}
return {
foo:foo
}
})
通过define来定义需要依赖哪些包，通过回调函数来接收需要哪些方法，再通过return输出。requireJS依赖前置
2、CMD
CMD是SeaJS在推广过程中对模块化定义的规范化产出，为同步模块定义。例如：
define(function(require,exports,module){ //所有模块通过defiine来定义
// 通过require引入依赖
var $ = require('jquery');
var Spinning = require('./spinning');
})
哪些地方需要，哪些地方引入这个模块
3、CommonJS
CommonJS规范 - module.exports
前端并不支持module,exports，但是node,js支持这个规范，服务端常用。例如：
exports.area = function(r){
return Math.PI*r*r;
}
exports.circumference = function(r){
return 2*Math.PI*r
}
4、ES6
ES6特性：export/import，不再赘述，第三条已经讲过
网友评论