极客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
- ES6提供了新的数据结构Set。它类似于数组。成员的值都是唯一的,没有重复的值。
- 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"
})