ES6+常用语法
- 类 (class)
class Man {
constructor(name){
this.name = "小刘"
}
console(){
console.log(this.name)
}
}
const man = new Man("小王")
man.console() // 小王
- 模块化
// a.js
export const sub = (a,b) = > a+b;
//b.js
import {sub} from "./a.js"
console.log(sub(1,2)); //3
- 箭头函数
let fun = (a,b) =>a+b
fun(1,2);//3
let fun1 = a => {a++}
fun1(1)
- 函数参数默认值
let fun = (id = 2)=>{//...代码片}
- 模板字符串
let name = "小刘"
const str = `My name is ${name}`
- 解构赋值
let obj = {name:123,arr:[12,12,3,4,5,6,]}
let {name,arr} = obj //name : 123 ; arr : [12,12,3,4,5,6,]
- 拓展操作符
let a = [1,23,2,4,5,6,7,8]
console.log(...a)
- 对象属性简写
let name= '小刘'
let age = 24
let obj= {
name,
age:age
}
- promise
//基础的promise
let pr = new Promise(function(resolve,reject){
// resolve('请求成功');
reject('请求失败');
});
pr.then(function(data){
console.log(data);
},function(err){
console.log(err);
})
// 使用catch
pr.then(function(data){
console.log(data);
}).catch((err)=>{
console.log(err)
})
- async … await 及 to方法的分装
function getJson(url,type){
return new Promise(function(resolve,reject){
$.ajax({
url,
type,
dataType:'json',
success(res){
resolve(res);
},
error(err){
reject(err);
}
})
})
}
function to(p){
return p.then(data=>{
return [null,data];
}).catch(err=>{
return [err];
})
}
async function asy(){
let [err,json] = await to(getJson('http://api.shenzhou888.com.cn/v2/ecapi.region.list','post'));
if(err){
console.log(err);
}else{
console.log(json);
}
};
asy();
- Array.prototype.includes() ;查询数组中的值是否存在;返回Boolean
[1].includes(1);//true
- 指数操作符
2**10; // 1024
- object.values()
let obj = {name : "小刘", age:21}
Object.values(obj);//["小刘",21]
- object.entries()
let obj = {name : "小刘", age:21}
Object.entries(obj);//[["name", "小刘"], ["age","21"]]
- string.padStart()和string.padEnd();
// padStart
'hello'.padStart(10); // " hello"
// padEnd
'hello'.padEnd(10) "hello "
- Array.flat()和Array.flatMap
let arr = [1,2,[3,4]]
arr.flat(Infinity);// [1,2,3,4]
let arr1 = [1,2,3,4]
arr.flatMap(a =>{a**2}); //[1,4,9,16]
- string.trimStart() 和 string.rimEnd() 去除首尾空白字符
- Nullish coalescing Operator(空值处理)
表达式在 ?? 的左侧 运算符求值为undefined或null,返回其右侧。
let user = {
u1: 0,
u2: false,
u3: null,
u4: undefined
u5: '',
}
let u2 = user.u2 ?? '用户2' // false
let u3 = user.u3 ?? '用户3' // 用户3
let u4 = user.u4 ?? '用户4' // 用户4
let u5 = user.u5 ?? '用户5' // ''
- replaceAll()
返回一个全新的字符串,所有符合的字符都被替换掉
let str ='hello world'
str.replaceAll('o','l')://"helll wlrld"
- Proxy
基础用法
- target 参数表示所要拦截的目标对象
- handler 参数也是一个对象,用来定制拦截行为
配合Reflect使用
let target = {}
let handler = {
get(target,key,receiver){
console.log("get"+ value)
return Reflect.get(target, key)
},
set(target,key,newVal,receiver){
console.log("set newVal is" + newVal)
return Reflect.set(target, key, newVal, receiver)
},
has(target,key){
console.log("has方法")
return Reflect.has(target, key)
// ……
//其余参考更细节的文档
}
let proxy = new Proxy(target,handler)
具体请参考
下面是 Proxy 支持的拦截操作一览,一共 13 种。
- get(target, propKey, receiver):拦截对象属性的读取,比如proxy.foo和proxy[‘foo’]。
参数: 目标对象、属性名和 proxy 实例本身(严格地说,是操作行为所针对的对象) - set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = v或proxy[‘foo’] = v,返回一个布尔值。
参数: 目标对象、属性名、修改后的属性值和 Proxy 实例本身 - has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。
参数: 目标对象、需查询的属性名。 - deleteProperty(target, propKey):拦截delete proxy[propKey]的操作,返回一个布尔值。
- ownKeys(target):拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
- getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
- defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey,propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。
- preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值。
- getPrototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象。
- isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值。
- setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。
- apply(target, object, args):拦截 Proxy 实例作为函数调用的操作,比如proxy(…args)、 proxy.call(object, …args)、proxy.apply(…)。
- construct(target, args):拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(…args)。