es6常用语法你都知道哪些？

es6语法

// 变量let var

// 常量const

//数组、对象、字符串的解构赋值

//数组的解构赋值

let [a, [b, c], d] = [1, [2, 3], 4];

let [foo = true] = [];

let [aa, bb = "hello"] = [null, "123"]

// 对象的解构赋值

let {foos,bar} = {foos: '1',bar: '2'}

let _a; 
({_a} = {_a: '123'})

//字符串的解构

const [_aa, _bb, _cc, _dd, _ee, _ff] = 'abcdef'

//对象扩展运算符和rest运算符

function _fun(...arg) {

console.log(arg)

}

_fun(123)

 

//深拷贝

let arr = ['a', 'b', 'c'];

let arr1 = [...arr];

arr1.push('d')

 

//rest运算符

function _func(first, ...arg) {

console.log(arg.length, 'arg.length') //7

//old

for (let i = 0; i < arg.length; i++) {

console.log(i, 'old') //0,1,2,3,4,5,6

    }

//new

for (let val of arg) {

console.log(val, 'new') //1,2,3,4,5,6,7

     }

}

_func(0, 1, 2, 3, 4, 5, 6, 7)

 

//字符串模版

let  _str = 'hello world';

let _str1 = `<div>${_str}</div>`

console.log(_str1)

document.body.innerHTML = _str1

 

//includes startWidth endWidth 匹配是否包含 返回布尔类型的值

document.write(_str1.includes('d') + '</br>'); //true

document.write(_str1.startsWith('d') + '</br>') //false

document.write(_str1.endsWith('d') + '</br>') //false

 

//二进制声明 Binary

let binary = '0' + 10101;

console.log(binary)

// 八进制

let octal = '0' + 73;

//判断是否是一个数字

Number.isFinite(6) //true

Number.isFinite(undefined) //true

Number.isFinite(NaN) //false

//判断是否是一个整数

Number.isInteger(98) //true

Number.isInteger(98.1) //false

//最大安全整数

Number.MAX_SAFE_INTEGER //9007199254740991

//最小安全整数

Number.MIN_SAFE_INTEGER //-9007199254740991

//判断是否是安全整数

Number.isSafeInteger(23) //true

Number.isSafeInteger(23.1) //false

 

//json数组格式

let json = {

"0": "fyf",

"1": "fyf_hello",

"2": "fyf_world",

length: 3

}

let ar = Array.from(json)

 

//Array.of()方法

let _strNew1 = '[1,2,3,4,5,6,7]';

let _arr = Array.of('hha', 1, 'hello', undefined) //["hha", 1, "hello", undefined]

let _arr1 = JSON.parse(_strNew1) //[1,2,3,4,5,6,7]

//find() 实例方法

// Element.find(Array,function(value,index,Array){return value > 0})

// find方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

let _strNew2 = [1, 2, 3, 4, 5, 6, 7];

let result = _strNew2.find((ele) => {

return ele > 10

})

console.log(result) //undefined


 

//箭头函数

let add = (a, b) => {

console.log(a + b)

};

// js中箭头函数和普通函数的区别

// 箭头函数是匿名函数，不能作为构造函数，不能使用new方法

// 箭头函数不绑定arguments，取而代之用rest参数...解决

// 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

// 箭头函数通过call()或apply()方法调用一个函数时，只传入了一个参数，对 this 并没有影响。

// 箭头函数没有原型属性

// 箭头函数不能当做Generator函数,不能使用yield关键字

 

//函数参数的传递

let _json = {

a: "zhansan",

b: 23

}

 

function type(a, b = 12) {

console.log(a, b, "type") //{a: "zhansan", b: 23} 12 "type"

}

type(_json)


 

let _arrt = [1, 2, 3]

 

function _type(a, b, c) {

console.log(a, b, c, "_type") //1 2 3 "_type"

}

_type(..._arrt)

 

//in 的用法

let s1 = ['', 1, ''];

s1.map(ele => {

console.log(ele in s1) //false true false

})

 

//数组遍历

//map forEach filters some every map reduce flat

//key值的构建

//is方法 ===同值相等 严格相等

let _obj = {

name: "zhansan"

}

let _obj1 = {

name: "zhansan"

}

console.log(Object.is(_obj.name, _obj1.name)) //true

 

console.log(+0 === -0) //true

console.log(NaN === NaN) //false

console.log(Object.is(+0, -0), "is +0") //false

console.log(Object.is(NaN, NaN), "nan") //true

 

//Symbol

// 数据类型 “symbol” 是一种原始数据类型 该数据类型通常被用作一个对象属性的键值——当你想让它是私有的时候

let a1 = new String;

let a2 = new Boolean;

let a3 = new Array;

let a4 = new Object;

let a5 = new Number;

let a6 = Symbol();

 

let b1 = {

name: "zhansan",

age: 23

}

let love = Symbol();

b1[love] = "dance"

for (i in b1) {

console.log(b1[i]) //zhansan 23

}

console.log(b1[love]) //dance

 

//Set

//Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

//值是唯一的 一般用来去重

//方法 add() has() keys() values() delete() clear() entries()

let _wts = [1, 2, 3, 4, 5, 6, 2, 3, 4, 5];

let new_wts = new Set(_wts)

console.log(new_wts) //Set(6) {1, 2, 3, 4, 5, …} 返回怒一个类数组

 

//weakSet

//WeakSet 对象允许你将弱保持对象存储在一个集合中。

//WeakSet 对象是一些对象值的集合, 并且其中的每个对象值都只能出现一次.

let weakSets = new WeakSet()

let o1 = {

name: "1",

age: 2

}

weakSets.add(o1)

console.log(weakSets)

 

//map

//Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

//属性 size

//方法： set get has delete clear foreach keys entries values

let mapObj = {

name: "zhansan",

age: 23

}

let map = new Map();

map.set("json", mapObj) //key: "json" value: {name: "zhansan", age: 23

map.set(mapObj, "json") //key:{name: "zhansan", age: 23 value: "json"

map.get("json") //{name: "zhansan", age: 23}

map.get(mapObj) //json

 

//proxy 代理 Es6 增强对象和函数的方法 生命周期 预处理

//Proxy用于修改某些操作的默认行为，也可以理解为在目标对象之前架设一层拦截，外部所有的访问都必须先通过这层拦截，因此提供了一种机制，可以对外部的访问进行过滤和修改。这个词的原理为代理，在这里可以表示由它来“代理”某些操作，译为“代理器”。

// Proxy支持拦截的操作，一共有13种：

 

// get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。

 

// set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。

 

// 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)

 

let target = {

add: function (val) {

return val + 100

},

name: "I am zhansan"

}

 

let handler = {

// get: function (target, key, property) {

// return target[key]

// },

// set: function (target, key, value, receiver) {

// return target[key] = value

// },

apply(target, ctx, args) {

//Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers的方法相同。Reflect不是一个函数对象，因此它是不可构造的。

return Reflect.apply(...arguments) * 2

}

}

 

function sum(a, b) {

return a + b

}

//target是表示所要拦截的对象，handle是用来定制拦截行为的对象

let pro = new Proxy(sum, handler)

pro(1, 2) //6

pro.call(null, 5, 6) //22

pro.apply(null, [7, 8]) //30

Reflect.apply(pro, null, [9, 10]) // 38



 

//promise

//Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、race、reject、resolve这几个方法，原型上有then、catch、finally等方法

 

let prom = function () {

return new Promise((resolve, reject) => {

setTimeout(function () {

resolve("hello world")

}, 0)

})

}

console.log(prom()) //Promise {<pending>}

prom().then(res => {

console.log(res)

}).catch(err => {

console.log(err)

}) //hello world

 

let prom_a = function () {

return new Promise((resolve, reject) => {

setTimeout(function () {

resolve("good night")

}, 100)

})

}

 

let prom_b = function () {

return new Promise((resolve, reject) => {

setTimeout(function () {

resolve("every body")

}, 1000)

})

}

//Promise.all来执行，all接收一个数组参数，这组参数为需要执行异步操作的所有方法，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面，最终返回的是一个数组

Promise.all([prom(), prom_a(), prom_b()]).then(res => {

console.log(res)

}).catch(err => {

console.log(err)

}) //返回res ["hello world", "good night", "every body"]


 

// all是等所有的异步操作都执行完了再执行then方法，那么race方法就是相反的，谁先执行完成就先执行回调。

//race的使用比如可以使用在一个请求在10s内请求成功的话就走then方法，如果10s内没有请求成功的话进入reject回调执行另一个操作。

Promise.race([prom(), prom_a(), prom_b()]).then(res => {

console.log(res)

}).catch(err => {

console.log(err)

}) //hello world

 

//class 定义了一个“类” 类似es5的构造函数

//类的构造函数，不使用new是没法调用的，会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

//constructor内声明的属性都是定义在原型上的，可以称为原型属性

//类不存在变量提升

class Point {

constructor(name, age) {

this.name = name;

this.age = age;

}

eat() {

return this.name + " 饿了"

}

drink() {

return this.drink + "渴了"

}

}

let point = new Point();

point.name = "zln"

point.age = "23"


 

class Son extends Point {

constructor(...args) {

super(...args)

}

}

let son = new Son("fyf", 23);

console.log(son.eat()) //饿了

console.log(point.hasOwnProperty("name"))//true


 

//export 输出 import 引入

// import {test} from './name'

// console.log(test)

 

//Generator

//Generator是一个迭代器生成函数，其返回值是一个迭代器（Iterator），可用于异步调用

// 常用场景

//比如某个事物只有三种状态（状态A，状态B，状态C），而这三种状态的变化是 状态A => 状态B => 状态C => 状态A ，这就是状态机。Generator特别适用于处理这种状态机。

 

// 抽奖处理

let draw = function (count) {

// 此处省略具体的抽奖逻辑

console.log(`剩余${count}次`);

}

 

// 根据剩余次数判断是否执行抽奖处理

let residue = function* (count) {

while (count > 0) {

count--;

yield draw(count);

}

}

// 初始化抽奖次数为5次

let star = residue(5);

// 创建抽奖按钮

let btn = document.createElement('button');

btn.id = 'start';

btn.textContent = '抽奖';

document.body.appendChild(btn);

 

// 绑定抽奖事件

document.getElementById('start').addEventListener('click', () => {

star.next();

}, false)