ES6+常用部分语法

ES6+常用语法

  1. 类 (class)
	class Man {
		constructor(name){
			this.name = "小刘"
		}
		console(){
			console.log(this.name)
		}
	}
	const man = new Man("小王")
	man.console() // 小王
  1. 模块化
// a.js
	export const sub = (a,b) = > a+b;
//b.js
	import {sub} from "./a.js"
	console.log(sub(1,2)); //3
  1. 箭头函数
let fun = (a,b) =>a+b
fun(1,2);//3
let fun1 = a => {a++}
fun1(1)
  1. 函数参数默认值
let fun = (id = 2)=>{//...代码片}
  1. 模板字符串
let name = "小刘"
const str = `My name is ${name}`
  1. 解构赋值
let obj = {name:123,arr:[12,12,3,4,5,6,]}
let {name,arr} = obj //name : 123 ; arr : [12,12,3,4,5,6,]
  1. 拓展操作符
let a = [1,23,2,4,5,6,7,8]
console.log(...a)
  1. 对象属性简写
let name= '小刘'
let age = 24
let obj= {
	name,
	age:age
}
  1. 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)
    })
  1. 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();
  1. Array.prototype.includes() ;查询数组中的值是否存在;返回Boolean
	[1].includes(1);//true
  1. 指数操作符
	2**10; // 1024
  1. object.values()
	let obj = {name : "小刘", age:21}
	Object.values(obj);//["小刘",21]
  1. object.entries()
	let obj = {name : "小刘", age:21}
	Object.entries(obj);//[["name", "小刘"], ["age","21"]]
  1. string.padStart()和string.padEnd();
	// padStart
'hello'.padStart(10); // "     hello"
// padEnd
'hello'.padEnd(10) "hello     "
  1. 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]
  1. string.trimStart() 和 string.rimEnd() 去除首尾空白字符
  2. 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'  // ''
  1. replaceAll()
    返回一个全新的字符串,所有符合的字符都被替换掉
let str ='hello world'
str.replaceAll('o','l')://"helll wlrld"
  1. 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)。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值