es6 my api

 极客codder了解下

es6模块构建

• ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系
• amd/commonjs 只能在运行时确定

export str
export log
import { str, log } from 'a.js'; //解构赋值

 

export default{
    str,
    log,
}
import commonModel from 'commonModel.js'; //解构赋值  commonModel.str  commonModel.log

 

---

ES6 async 异步 await 同步

• async 函数执行后，总是返回了一个 promise 对象。
• await 所在的那一行语句是同步的。
• async 关键字声明了一个 异步函数，这个 异步函数 体内有一行 await 语句，它告示了该行为同步执行。

 

外  async +method(){} 内 await +Promise

async auditHgJsJyData(status){
	let data =Object.assign(this.operForm,{status:status});
	const result= await Model.auditHgJsJyData(data);
	if(result > 0){
		this.$message({ type: 'success',message:"审核成功",});
	}else {
		this.$message({type: 'warning',message:"审核失败",});
	}
	this.close();
},


//审核
async auditHgJsJyData(data){
	return  await request({
		data:data,
		url: '/education/AuditHgJsJyData',
		method:'post'
	})
},


// 封装 axios 返回Promise对象
const request = (options) => {

  // 根据options.commit参数开启状态，防止重复提交
  if (lock) return
  if (options.commit) lock = true

  // 定义加载动画实例
  let loadingInstance
  options.method = options.method || 'post'
  options.loader = typeof options.loader !== 'undefined' ? options.loader : true
  
  options.cancelToken = createCancelToken(options.url)
  options.data = options.data || {}
  options.headers = options.headers || {
    // 'content-type': 'application/x-www-form-urlencoded'
    'content-type': 'application/json;charset=utf-8',
  }

  if (options.url === 'httpPostLogin') {
    axios.defaults.withCredentials = false
  } else {
    axios.defaults.withCredentials = true
  }
  if (window.sessionStorage.sessionId) {
    options.headers.Token = window.sessionStorage.sessionId
    // options.data.sessionId = window.sessionStorage.sessionId
  }

  const httpInstance = axios.create({
    baseURL: config.host + config.api,
    timeout: 30000
  })
  
  // 响应拦截  
  httpInstance.interceptors.response.use((response)=> {
	  loadingInstance && loadingInstance.close()
      if(response.data.status === '-99'){//未登录
          errorHandle(null, '登录信息失效，请您重新登录！')
          redirectSign();
      }else if(response.data.status === '-98'){//没有调用接口权限
        errorHandle(null, response.data.msg)
      }else if(response.data && response.data.code === "0"){//打印抛出自定义异常信息
        errorHandle(null, response.data.msg)
      }else if(response.data && response.data.code === "-1"){//系统异常
        errorHandle(null, '系统异常')
        redirectSign();
      }else {
        unlock()
        return response.data.result || response.data;
    }
  },(error)=>{
	loadingInstance && loadingInstance.close()
    errorHandle(error, '网络故障或用户已通过其他方式登录！')
  });
  
 return httpInstance(options);
      
	//end
	
}

---

ES6 原生构造函数

type 可以是下列原生构造函数中的一个 1/8
String()  -- string
Number() -- number
Boolean() -- boolean
Symbol()
Array()
Object()
Date()
Function()

---

ES6 Promise

Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法
resolve 分别表示异步操作执行成功后的回调函数
reject 异步操作执行失败后的回调函数。

function runAsync(){
   return  new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            resolve('随便什么数据'); // 调用接口
        }, 2000);
    });
}
runAsync().then(function(data){
    //console.log(data);
}).catch(function(e){
    //console.log(e);
});

Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
all方法的效果实际上是「谁跑的慢，以谁为准执行回调」

Promise.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

race「谁跑的快，以谁为准执行回调」

// 超时场景

//请求某个图片资源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = 'xxxxxx';
    });
    return p;
}

//延时函数，用于给请求计时
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}

Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

---

ES6 Map

• Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。
• “键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
• NaN不严格相等于自身，但Map将其视为同一个键。
• 实例属性和方法： size 、set、get、has、delete、clear
• 遍历方法：keys（）、values（）、entries（）、forEach（）

var m = new Map();
var o = {p: "Hello World"};
m.set(o, "content") // add update
m.size
m.get(o) // "content" // sel
m.has(o) // true // boolean
m.delete(o) // true // del
m.has(o) // false
for(let item of m.keys()){console.log(item);} // o 
for(let item of m.values()){console.log(item);} // content
for(let itemArr of m.entries()){console.log(itemArr[1]);} // [{p: "Hello World"},'content']
m.forEach(function(val,key){console.log(val);console.log(key)}); // content  {p: "Hello World"}

ES6 Set

 

1. ES6提供了新的数据结构Set。它类似于数组。成员的值都是唯一的，没有重复的值。
2. ES6 Set 天生去重

ES6 Set 方法

• add(value)：添加某个值，返回Set结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• has(value)：返回一个布尔值，表示该值是否为Set的成员。
• clear()：清除所有成员，没有返回值
• for ( let item of set){} // for...of...遍历

// set  []  
//[].map(function(){})
//set.add();
var set = new Set();
[2, 3, 5, 4, 5, 2, 2].map(x => set.add(x));
for ( let item of set){
    console.log(item);
}

---

 

es6  class   可批量创建对象，和es6 写公共方法区

es6  成员函数，箭头函数，匿名函数

class Person{
	constructor(name,age){
		this.name = name;//this关键字则代表实例对象
		this.age = age;
	};
	
	toString(){
		return `${this.name}'s age is ${this.age}`;
    };

}
var zcl = new Person('zcl',3);
zcl.toString();//zcl's age is 3"
Object.assign(Person.prototype,{
	getName(){}, // 方法区
	getHeight(){},
});

---

 

typeof 操作符

• 用typeof 操作符，所有的返回值都是字符串；
• 有以下几种：'undefined'、'boolean'、'string'、'number' , 'object'、'function' ,'symbol'

es6中有7中数据类型

• null 、undefined、string、number、boolean、Symbol、object这7种数据类型
• null、undefined没有toString()方法

Symbol 数据类型

• Symbol函数前不能使用new命令，否则会报错
• Symbol值不能与其他类型的值进行运算
• Symbol有点类似于java中的protected属性

 

Symbol 含义和运用 

• 使用for-in也打印不出 类型为Symbol的[name]属性   提高代码运行效率
• 使用 Object.getOwnPropertyNames 同样打印不出 类型为Symbol的[name]属性
• 使用 Object.getOwnPropertySymbols方法，可以获取指定对象的所有Symbol属性名
• 在ES6中在set, map 字符串都实现 Symbol.iterator接口

//demo1
let uid = Symbol.for("uid");
let data = {
    [uid]: "12345"
};
console.log(data[uid]);


// demo2

var s1 = Symbol.for('name');
typeof s1;//"symbol"
console.log(!s1);// false
console.log(!!s1);// true

---

分享，偏见，分工，成长

es6 字符串

• tag 函数的定义应该是 function tag(lliterals, value1, value2)
• ES6 增加了一个...rest 操作符，它会把所有的剩余函数参数都收集到一个数组中

function tag(literals, ...substitutions) {
    let result = '';
    // 数组substitutions的长度永运比literals数组的长度少1个
    substitutions.forEach((item,i)=> (result += literals[i],result += item))
    // 把literals数组最后一个再加到新生成的字符串中.
    result += literals[literals.length -1];
    return result;
}

var str = 'helo';
var [first, ...tail] = str;
console.log(first) // 'h'
console.log(tail)  // ['e','l','o']

• str.codePointAt() 通过码点值，我们可以很容易的判断一个字符是2个字节表示.
• str.includes() 判断包含
• str.startsWith() 判断包含 以什么开始
• str.endsWith() 判断包含  以什么结束
• str.repeat(4) 字符串复制

let msg = "Hello world!";
let name = "es6";
let msg = `${name},Hello world!`; // 模板字符串
msg.startsWith("o", 4) //从开始第四个位置开始计算，第四个位置正好是o
msg.endsWith("o", 8) //从倒数第8个位置开始，o正好是倒数第8个

---

es6 数字判断

let num="1";
num = Number(num);
Number.isNaN(num); // 特殊数值  NaN
Number.isInteger(num); //  用来检查一个数值是否为整数
Number.isFinite(num); // 用来检查一个数值是否为有限的（finite）
Number.isSafeInteger(num); // JavaScript 能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这个范围，无法精确表示这个值。

---

es6  正则

var regex = new RegExp('xyz', 'i');// 等价于
var regex = new RegExp(/xyz/i);// 等价于
var regex = /xyz/i;

字符串方法和正则：match()、replace()、search()和split()。

正则 定位符

• $ 标记以什么结束 。要匹配 $ 字符本身，请使用 \$。
• ^ 标记以什么开始 。要匹配 ^ 字符本身，请使用 \^。

正则 转义

• \标记转义字符。 匹配字符本身请使用 \\。
• |标记N选一。 匹配字符本身请使用 \|。
• .标记匹配除换行符 \n 之外的任何单字符。 匹配字符本身请使用 \.。
• *标记匹配子表达式零次或多次。 匹配字符本身请使用 \*。
• +标记匹配子表达式一次或多次。 匹配字符本身请使用 \+。
• ?标记匹配前面的子表达式零次或一次。 匹配字符本身请使用 \?。

正则 限定

• *限定匹配子表达式零次或多次。等价于{0,}。
• +限定匹配子表达式一次或多次。等价于{1,}。
• ?限定匹配子表达式零次或一次。等价于{0,1}。
• {n}限定n 是一个非负整数。匹配确定的 n 次。
• {n,}限定n 是一个非负整数。至少匹配n 次。
• {n,m}限定m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。

正则 模式

• 正则表达式后面的全局标记 g。
• 表达式的结尾处的不区分大小写 i。
• 正则表达式增加了一个标志中文u.

let str = String.fromCodePoint(134071);
/^..$/.test(str)
/^.$/.test(str)
/^.$/u.test(str)

 

正则 反向引用

• 反向引用还可以将通用资源指示符 (URI) 分解为其组件。

正则 选择

• 用圆括号会有一个副作用，使相关的匹配会被缓存，此时可用?:放在第一个选项前来消除这种副作用。
• ()标记子表达式开始和结束。匹配本省请使用 \( 和 \)。
• []标记表达式的开始和结束。 匹配字符本身请使用 \字符。
• {}标记表限定符表达式的开始和结束。 匹配字符本身请使用 \{和\}。

 

//验证网站URL正则验证
IsURL (url) {
	//let strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
	let strRegex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/;
	let re=new RegExp(strRegex);
	if (!re.test(url)) {
		//请输入正确链接
		return false;
	} else {
		return true;
	}
},

 

---

正则  输入长数字良好视觉反馈，可根据需求适当调整

//禁止输入框科学计算法
const pattern = new RegExp("/[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？\n]")
'1234567'.replace(pattern,'');


//电话号码
var num1 = '15173568786'
console.log( `${num1.slice(0,3)} ${num1.substr(3,num1.length-3).replace(/(.{4})/g, "$1 ")}`);

//身份证号后4位
var num1 = '230822197201256034'
console.log( `${num1.slice(0,3)} ${num1.substr(2).replace(/(.{4})/g, "$1 ")}`);


//银行卡 4位一空格
var num1 = '6212262201023557228'
console.log( `${num1.replace(/(.{4})/g, "$1 ")}`);

//三证合一

var num1 ="91430527550700618R";
console.log( `${num1.replace(/(.{4})/g, "$1 ")}`);

 

---

es6 函数绑定
函数绑定运算符是并排的两个双冒号（::），双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面。
由于双冒号运算符返回的还是原对象，因此可以采用链式写法

foo::bar;
// 等同于
bar.bind(foo);

foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);

const hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {
  return obj::hasOwnProperty(key);
}

var method = obj::obj.foo;
// 等同于
var method = ::obj.foo;

let log = ::console.log;
// 等同于
var log = console.log.bind(console);

---

es6 箭头函数

es6允许使用“箭头”（=>）定义函数<=>
用箭头替换 function 声明
不需要强制写return
箭头函数可以与变量解构结合使用

ps
函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。(this指向的固定化)
指向外层函数的对应变量：arguments、super、new.target。
用Rest参数代替arguments对象
不可以使用new命令，否则会抛出一个错误
箭头函数不能用作Generator函数。

 export default{
	// 字符长度验证
	fixedStr: (min, max) => (rule, value, callback) => {
	const reg = new RegExp(`^\\d\{${min},${max}\}$`)
	reg.test(value) ? callback() : callback(new Error(`请输入${min}-${max}位内的整数值！`))
	},
}

es6 成员函数语法

export default{
	// 字符长度验证
	fixedStr(min, max){
	  (rule, value, callback) => {
		const reg = new RegExp(`^\\d\{${min},${max}\}$`)
		reg.test(value) ? callback() : callback(new Error(`请输入${min}-${max}位内的整数值！`))
	  }
	},
}

 

---

es6 模块
commonjs主要应用于服务器，实现同步加载。
AMD规范主要应用于浏览器，实现异步加载。
ES6模块主要有两个功能：export和import。
方法区
接口区[export]

// a.js

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo}

//可以使用export default命令，为模块指定默认输出
//export default sex（sex不能加大括号）
//一个文件内最多只能有一个export default

var sex="boy";
export default sex ;//sex不能加大括号

import

//通过import获取a.js文件的内部变量，{}括号内的变量来自于a.js文件export出的变量标识符。
import { log } from "@utils";
import { setTimeout } from "timers";
import Model from "./model.js";
import Validator from "@utils/validator.js";
import config from "@commons/config";

---

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'//css 引入

// 应用element-ui组件库
Vue.use(ElementUI, {
  size:"mini"
})