ES6

2024年03月04日约326字预计需要1分钟

importmap

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

for await of

function TimeOut(time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(time)
        }, time)
    })
}
async function test() {
    let arr = [TimeOut(2000), TimeOut(1000), TimeOut(3000)]
    for await (let item of arr) {
        console.log(Date.now(), item)
    }
}
test() // 1560092345730 2000// 1560092345730 1000// 1560092346336 3000复制代码

class

getter/setter

在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

//ES5
Object.defineProperty(obj,"name",{
	get:function(){
		console.log("正在访问name");
		return this._name;
	},
	set:function(val){
		console.log("正在修改name");
		this._name = val;
	}
});

obj.name  = 10;
// console.log(obj);
// console.log(obj.name);


//es6中get & set
class Person{
	constructor(){
		this._name = '';
	}
	get name(){
		console.log("正在访问name");
		return `我的名字是${this._name}`;
	}
	set name(val){
		console.log("正在修改name");
		this._name = val;
	}
}

const person = new Person();
person.name = "歌王";
console.log(person.name); //先访问set 再访问get