const
const a=3; //定義常量
// 如果要用es 5的方式怎麼寫呢？？
Object.defineProperty(window, "a", {
value: 37,
writable: false,
});
console.log(window.a)
複製程式碼作用域
es6的作用域
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i);
// ReferenceError: i is not defined
複製程式碼在es5中,並沒有塊級作用域，先用es5寫一個作用域看看
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
a[5](); // 10
a[4](); // 10
a[3](); // 10
a[2](); // 10
a[1](); // 10
複製程式碼上面程式碼中，變數i是var命令宣告的，在全域性範圍內都有效，所以全域性只有一個變數i。每一次迴圈，變數i的值都會發生改變，而迴圈內被賦給陣列a的函式內部的console.log(i)，裡面的i指向的就是全域性的i。也就是說，所有陣列a的成員裡面的i，指向的都是同一個i，導致執行時輸出的是最後一輪的i的值，也就是 10。
ES6 定義屬性
es5怎麼寫呢
var x = 1, y = 2;
var object = {
  x: x,
  y: y
};
console.log(object.x); //output "1"
複製程式碼在es6中
//給一個屬性賦一個變數值，如果變數名和屬性名相同，ES6 提供了一個簡潔的語法，可以省略變數名
let x = 1, y = 2;
let object = {
  x,
  y
};
console.log(object.x); //output "1"
複製程式碼箭頭函式
// es5中的this
var A = function () {
this.a = 'a';
this.b = 'b';
this.c = {
a: 'a++',
b: function () {
console.log(this.a);
}
}
}
console.log(new A().c.b()) // a++ 因為es5中的this即誰呼叫它，this就指向誰
//es6
var A = function () {
this.a = 'a';
this.b = 'b';
this.c = {
a: 'a++',
b: ()=>{
console.log(this.a);
}
}
}
console.log(new A().c.b()) // a,箭頭函式this的指向是定義時this的指向，b函式在定義的時候this就指向函式體裡面的this
複製程式碼//帶有預設引數的箭頭函式
let hello =(name='world')=>{
console.log(`hello ${name}`) //注意這邊不是單引號
}
hello() //hello world
hello('skl')//hello skl
複製程式碼//多個引數
let cal1 =(num1,num2)=>num1*num2
let arr=[6,7]
console.log(cal1(...arr))//展開
複製程式碼function hello(name1,name2){
console.log(name1,name2)
}
let arr =['skl1','skl2'];
//es5
//hello.apply(null,arr)
//es6
hello(...arr)
複製程式碼預設引數
// es5
function a(x,y ) {
x=x||1;
y=y||2;
}
// es6
function b(x=1,y=2){
return x+y;
}
複製程式碼可變引數
{ //es5
function f() {
var a = Array.prototype.slice.call(arguments);
var sum = 0;
a.forEach(function (item) {
sum += item;
})
return sum;
}
console.log(f(1, 2, 3, 4))
}
{
//es5
function f(...a) {
var sum = 0;
a.forEach(function (item) {
sum += item;
})
return sum;
}
console.log(f(1, 2, 3, 4))
}
// 擴充套件運算子的使用
// 合併陣列 es5
{
var a=[1,2,4];
var b=[11,111,111];
var c=b.concat(a);
console.log(c)
}
// 合併陣列 es6運用擴充套件運算子
{
var a=[1,2,4];
var b=[11,111,111];
var c=[...a,...b];
console.log(c)
}
複製程式碼物件擴充套件
var obj={
name:'skl',
age:18,
}
console.log(Object.keys(obj))//["name","age"]
console.log(Object.values(obj))//["skl",18]
console.log(Object.entries(obj))// key 和value變成一個陣列
複製程式碼const name = 'skl'
const age='nian';
const height='shengao'
const obj = {
[age]:18,
height
}
obj[name] = 'hello skl';
console.log(obj)//{nian: 18, height: "shengao", skl: "hello skl"}
複製程式碼const obj1={name:'skl',age:18}
const obj2={type:'ha',aa:90}
console.log({...obj1,...obj2})//{name: "skl", age: 18, type: "ha", aa: 90}
複製程式碼//結構賦值
const arr =['skl','sk2'];
let [arg1,arg2]=arr;
console.log(arg1,arg2)//skl sk2
const obj={nian: 18, height: "shengao", skl: "hello skl"}
const {nian,height}=obj;
console.log(nian,height)//18 shengao
複製程式碼代理做資料保護
es5中的資料保護
{
// 資料保護（相當於私有變數）es5的寫法,定義一個建構函式
var Person = function () {
var data = {
name: 'es5',
sex: 'male',
age: 20
}
// getter 和setter
this.get = function (key) {
return data[key]
}
this.set = function (key, value) {
if (key !== 'sex') {
data[key] = value;
}
}
}
// 宣告例項
var person = new Person();
// 讀取
console.table({
name: person.get('name'),
sex: person.get('sex'),
aeg: person.get('ageqe3w')
})
// 修改
person.set('name', '啦啦啦');// 這時候console的結果就會變了
person.set('sex', 'male')// console出來發現沒有用因為資料被保護了
}
{
// 另一種寫法
var Person = {
name: 'skl',
age: 10,
}
// sex只可讀不可寫
Object.defineProperties(Person, 'sex', {
writeable: false,
value: 'male',
})
console.table({
name: Person.name,
age: Person.age,
sex: Person.sex,
})
// 若強行給只讀屬性複製會報錯
}
複製程式碼es6中通過代理的方式做資料保護
{
// es的代理
let Person = {
name: '11',
age: 11,
sex: 'male'
}
//person是暴露給使用者的，吧上面的Person保護起來
let person = new Proxy(Person, {
get(target, key) {
return target[key]
},
set(target, key, value) {
if (key !== 'sex') {
target[key] = value;
}
}
})
}
複製程式碼字串拼接
在es5中，憑藉字串要不斷的+,尤其是在html模板的時候，變得特別不方便
const a=3;
console.log(`skl${a}`)//skl3
`Hello ${'World'}`
// "Hello World"
複製程式碼for... of...
var arr = ["a", "b", "c"];
var iterator = arr.entries();
console.log(iterator) //Array Iterator {}
for (let e of iterator) { //返回有下標的陣列
console.log(e)
//[0, "a"]
//[1, "b"]
//[2, "c"]
}
複製程式碼var arr = ["a", "b", "c"];
var iterator = arr;
for (let e of iterator) {
console.log(e);
//a b c
}
複製程式碼var arr = ["a", "b", "c"];
var iterator = arr.entries();
for (let [index,e] of iterator) {
console.log(index,e);
// 0 "a"
// 1 "b"
// 2 "c"
}
複製程式碼var arr = ["a", "b", "c"];
var iterator = arr.entries();
for (let [index,e] of iterator) {
console.log(e);
}
// a
// b
// c
複製程式碼promise
let state = 1;
function step1(resolve, reject) {
console.log('1.開始-做飯');
if (state == 1) {
resolve('做飯--完成');
} else {
reject('做飯--出錯');
}
}
function step2(resolve, reject) {
console.log('2.開始-吃飯');
if (state == 1) {
resolve('吃飯--完成');
} else {
reject('吃飯--出錯');
}
}
function step3(resolve, reject) {
console.log('3.開始-收拾');
if (state == 1) {
resolve('收拾--完成');
} else {
reject('收拾--出錯');
}
}
new Promise(step1)
.then(function (val) {
console.log(val)
return new Promise(step2)
})
.then(function (val) {
console.log(val)
return new Promise(step3)
}).then(function (val) {
console.log(val)
})
複製程式碼async
async function testAsync(){
return 'hello async'
}
const result =testAsync();
console.log(result); // 返回的是一個promise
複製程式碼
function getSomething(){
return 'something'
}
async function testAsync(){
return 'hello async'
}
async function test(){
const v1 = await getSomething();
const v2 = await testAsync();
console.log(v1,v2)
}
test()
複製程式碼模擬非同步請求
function takeLongTime(){
return new Promise(resolve=>{
setTimeout(()=>{
resolve("long_time_value")
},1000)
})
}
async function test(){
const v = await takeLongTime()
console.log(v)
}
test()
複製程式碼