es6

一、import和export語法

第一種引入和導出方式

文件a.js
導出一個對象: 在一個模塊中 export default 只能使用一次
export default{
	name: '這是a模塊中的name屬性'
}

文件b.js
這裏導入模塊, 名稱可以隨意
import a from './js/a'
console.log(a)

第二種引入和導出方式

文件a.js
export const num = 666
export function fn() {
	console.log('導出了函數fn')
}

文件b.js
這個名稱一定要和導出的時候的名字一毛一樣
import { num, fn } from './js/a'
console.log(num)
fn()

第二種的升級版

文件c.js
可以最後一起導出, 而不用每個都寫export
const num = 666;
const num1 = 777;
const num2 = 888;
function fn() {
	console.log('交警不知道的是, 逮到一個逗比')
}
export {num, num1, num2, fn}

文件b.js
import { num, fn } from './js/a'
// 和其他模塊重名的, 用as取個別名, 直接用別名就好了
import { num as hh, fn as dd } from './js/c'
console.log(hh)
dd()

二、聲明變量

塊級作用域
在代碼塊中形成的作用域, 就是塊級作用域, 代碼就是{}括起來的代碼片段!
let 聲明的變量是有塊級作用域的
const 聲明常量(常量是不能被賦值的, 只能在聲明的時候給個初始值)

let a;
let a;
會報錯, 不能重複聲明
相同的變量不能重複聲明

三、ES6中對象成員的簡寫形式

let name = '王八';
let age = 18;
let obj = {
	name: name,
	age: age,
	sayHello: function () {
		console.log('nice to meet you!');
	}
}
屬性和方法簡寫如下 如果屬性名和要賦值給屬性的變量的名字相同, 那麼只需要寫屬性名即可
let obj2 = {
	name,
	age,
	sayHello() {
		console.log('nice to meet you!');
	}
}
console.log(obj);
console.log(obj2);
obj.sayHello();
obj2.sayHello();
打印出一樣的效果

四、解構賦值

對象的解構賦值

// 需求: 給變量賦值對象中的屬性值
let obj = {
	name: '喵喵',
	car: '手手'
}
var name = obj.name;
var car = obj.car;

es6大法
let obj = {
	name: '喵喵',
	car: '手手'
}
// 聲明兩個變量, 分別用對象中同名的屬性爲其賦值
let { name, car } = obj;
// 完整的寫法
let { name: name, car: car } = obj;
// let {對象中的屬性名: 要聲明的變量名} = 對象
console.log(name, car);

// 如果變量的名字和對象的屬性不一樣
let { name: name1, car: car1 } = obj;
console.log(name1, car1)

數組的解構賦值

需求: 把數組中的值賦值給變量
let arr = [1, 2, 3, 4, 5];
let num1 = arr[0];
let num2 = arr[1];
let num3 = arr[2];
let num4 = arr[3];
let num5 = arr[4];

es6大法
let arr = [1, 2, 3, 4, 5];
let [num1, num2, num3, num4, num5] = arr;
console.log(num1, num5);
let [num1,,,,num5] = arr; // 如果沒有, 需要佔位
console.log(num1, num5);

特例1:
let arr = [1, 2, [3, 4]];
let [num1, num2, [num3, num4]] = arr;
console.log(num1, num2, num3, num4);

特例2: 剩餘的元素(rest element)
// ... 指的是剩餘元素, 剩餘元素只能有一個, 並且只能是最後一個
let arr = [1, 2, 3, 4, 5];
let [num1, ...num2] = arr;
console.log(num1); // 1
console.log(num2); // [2, 3, 4, 5]

五、對象的擴展語法

let zs = {
	age: 19,
	car: 'Ferrari 458'
}
// 將zs中所有的屬性全部加給zd, 之前我們用for-in循環來做
let zd = {}
for (let k in zs) {
	zd[k] = zs[k];
}
console.log(zd);

es6大法
通過對象的擴展語法, 很容易就能實現上面for循環做的事
let zd = { ...zs, name: 'miaomiao', gender: 'male'};
console.log(zd);

六、class的用法

在es6之前, js是沒有類的概念的
es6之後, js出現了class, 也就是類, 爲了迎合其他編程語言的程序員轉到js來編程,

在es6之前, 我們new關鍵字配合的是構造函數來創建對象
function Person(name, age) {
	  this.name = name;
	  this.age = age;
}
Person.prototype.sayHello = function () {
	console.log('hey budy!');
}
let p = new Person('周鬆', 19);
p.sayHello()

在es6之後, 我們可以使用new關鍵字配合class來創建對象
class Person{
	// 在類中默認的有一個空的
	// constructor就是構造函數
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	// 這裏這麼寫方法, 會自動的添加到構造函數的原型中去!
	sayHello() {
		console.log('敬個禮呀握握手, 我們都是好朋友')
	}
}
let p = new Person('周鬆', 19);
console.log(p);
p.sayHello();