ES6、ES7、ES8常用語法筆記

ES6

let 定義變量 ，const定義常量

let num=1;
num=2;
console.log(num);
const pi = 3.1415;

var可以重複定義，但let不行，以下重複定義變量的代碼會報錯

let name = "jack";
let name = "jack";
console.log(name);

塊級作用域,var在{}外也起作用，但let偏向類似java語法的作用域,{}內定義的變量在{}外不起作用

let arr = [1,2,3,4];
for(let i=0,iLen=arr.length;i<iLen;i++){	
}
console.log(i)
//報錯: i is not defined

#######不像var, let不存在變量提升

console.log(foo);
var foo = 1;
//顯示undifiend undifiend,編譯順序是
//var foo;
//console.log(foo);
//foo = 1;

console.log(foo);
let foo = 1;
//報語法錯誤:Cannot access 'foo' before initialization

箭頭函數

let value = 2;
let double = x => 2*x;//表達式
//語句塊的方式
let treble = x => {
	return 3*x;
}
console.log('double=',double(value));
console.log('treble=',treble(value));

箭頭函數沒有獨立作用域

var obj = {
   //普通的函數
	commonFn : function(){
		console.log(this);
    },
    //箭頭函數
    arrowFn : () => {
    	console.log(this);
    }
}
obj.commonFn();//this 指向obj
obj.arrowFn();//this 指向obj所在作用域,window

箭頭函數不能用作構造函數,即箭頭函數沒有構造方法

//普通函數可以當作構造方法用於實例話對象
let Animal = function(){
}
let animal = new Animal();

//箭頭函數不能用作構造函數進行實例話對象
let Animal = ()=>{}
let animal = new Animal();
//報語法錯誤:Uncaught TypeError: Animal is not a constructor

箭頭函數沒有prototype

let commonFn = function(){};
let arrowFn = () => { };
console.log(commonFn.prototype);//顯示是有prototype的指向了constructor
console.log(arrowFn.prototype);//顯示undifined，說明沒有prototype,所以也不能在prototype上添加方法

模版字符串,反引號``,支持多行字符串，支持嵌套變量和表達式

let showme = 'hello world';//變量
//函數表達式
let getName = () => {
	return 'jackjackjackjackjackjackjackjackjackjackjackjackjack';
};
//普通模版字符串
let str = `
<div> <h1 class="title">${showme}</h1> ${getName()}</div>
`;
//嵌套字符串
let names = ['jack','tom','marry'];
let str2 = `
	<ul>
		${
			names.map(name=>`<li>Hi,I am ${name}</li>`).join('')
         }
    </ul>
`;
document.querySelector('body').innerHTML = str2;

promise解決異步回調循環嵌套的問題

new Promise((resovle,reject)=>{
   //異步函數
	$.ajax({
		url:'http://areadata.api.juhe.cn/AreaHandler.ashx',
		type:'post',
		success(res){
			resolve(res);
		},
		error(err){
			reject(err);
		}
	});   
}).then((res)=>{
	console.log('success',res);
},(err)=>{
	console.log('error:',err);
});

var loginPromise =  new Promise((resovle,reject)=>{
   //異步函數
	$.ajax({
		url:'http://xxx.com/login',
		type:'post',
		success(res){
			resolve(res);
		},
		error(err){
			reject(err);
		}
	});   
});

var homePromise =  new Promise((resovle,reject)=>{
   //異步函數
	$.ajax({
		url:'http://xxx.com/home',
		type:'post',
		success(res){
			resolve(res);
		},
		error(err){
			reject(err);
		}
	});   
});

//登錄成功就顯示主頁數據
loginPromise.then(() => {
	console.log('login sccess');
	return homePromise;
}).then(()=>{
	console.log('home sccess');
});

面向對象-類

• 關鍵字:class

• 底層是用function實現

• 構造函數constructor

• 繼承使用關鍵字extends

• 子類調用父類的構造函數使用super

  class Animal{
  	constructor(name){
  		this.name = name;
  	}
  	getName(){
  		return this.name;
  	}
  }
  let animal = new Animal('animal1');
  console.log(animal.getName());
  
  

class Cat extends Animal{
constructor(name){
super();//調用父類的構造方法,子類才能通過this使用父類的方法或屬性
this.name = name;
}
}

let cat = new Cat(‘波斯喵’);
console.log(cat.getName());
```

面向對象-對象的用法

新的特性

let name = 'jack',age=20;
let obj = {
		//變量名可以直接用作對象的屬性名稱
		name,
		age,
		//對象裏的方法可以簡寫
		getName(){
			return this.name;
		},
		//表達式可以作爲屬性名或方法名
		[ 'get'  + 'Age' ] () {
			return this.age;	
  	 }
};

VS
舊的用法

	var name =  'jack',
		age = 20;
	var obj = {
		name:name,
		age:age,
		getName : function(){
			return this.name;
	    },
	    getAge : function(){
	    	return this.age;
	    }
	} 

Object.keys(對象名)獲取對象的屬性名列表

Object.keys(obj);

Object.assign(對象1,對象2)合併對象返回新對象，後面的對象屬性值覆蓋前面的

Object.assign({a:1,b:2},{a:2,b:3,c:4});

模塊化export、import的使用

1.index.html文件以模塊化方式引用一個統一的js文件index.js,該js文件組織所有js代碼

 <script type="module" src="./index/js"></script>

2.index.js文件引入其他module模塊js的變量

import {str as string,obj,fn} from './module.js';
import foo from './module.js';
console.log('name',obj.name);
console.log('string',string);
console.log('fn:',fn);
console.log(foo);

3.module.js文件定義一些東東

let str = 'String';
let obj = {
	name : 'Jack'
};
let fn = () => {
	console.log('module tes');
};
export {
	str,
	obj,
	fn
};
export default {a:1};

ES7

ES8