分分鐘帶你欣賞ES6語法糖
阿新 • • 發佈：2019-08-07
let , const關鍵字
var
看習慣了java, 看js真的是忍不住想笑,比如說這個var,它太自由了,自由到{}根本限制不住它的生命週期
js的var關鍵字,無論在何處宣告,都會被視為宣告在函式的最頂部,不在函式裡面的就被視為在全域性的最頂部,這就是所謂的變數提升
function aa(bool) {
if (bool) {
var test = "hello";
} else {
console.log(test);
}
}
aa(false);比如上面的程式碼, 他就不會報錯,而是說undifined, 因為var的變數提升, 相當於下面那樣:
function aa(bool) {
var test;
if (bool) {
test = "hello";
} else {
console.log(test);
}
}
aa(false);let
換成let關鍵字,就會普通變數, 它的生命週期被限制在 { }
function aa(bool) { if (bool) { let test = "hello"; } else { console.log(test); } }
const
const 宣告常量, 值不允許被修改,而且必須初始化
function aa() {
let a = 'abc';
const test = a;
a = "world";
alert('a=='+a);
alert('test=='+test);
}
aa();結果就是 abc world
如果嘗試直接對test賦值, 編譯器會報錯的
模板字串的拼接
這樣取值完全沒問題, 但是js的設計者認為他 + 太多了,low爆了
console.log(name1 + "喜歡" + name2);
於是: ${} , 注意啊, 是esc下面的鍵位
console.log(`${name1}喜歡${name2}`); 方法入參的預設值
如果我們不給入參傳值, 預設就是空, 一用就報錯, 所以引數需要預設值是很有必要的
這時候, 使用者傳遞進來值了,使用的就是使用者傳遞進來的值, 在java中想幹這個事,得在引數位置加老長的註解
function sayName(name = "張三") {
alert(name);
}箭頭函式
es6的箭頭函式和java8的lambda表示式如出一轍, 因為學了java8, 所以es6的箭頭函式也是秒上手了, 包括流式的操作也如出一轍
物件的簡寫和解構
原來,如果方法想返回一個物件,需要這樣寫
function people(name, age) {
return {
name: name,
age: age
}
}在es6中,如果屬性和值相同 ,就變成了這樣
function people(name, age) {
return {
name,
age
}
}動態的新增屬性, 在java想都別想,
let p = {name: '張三', age: 680};
alert(p.name);
alert(p.age);- 新增屬性
p.address = '山東';- 新增函式
p.add = () => {};其實js這麼自由也不一定是好事, 起碼不能亂點了, 它也不給報錯, 一不留神就多了個屬性
組裝物件或陣列SpreadOperator ...
const color = ['red', 'blue'];
const colorful = [...color, 'green']
// 現在 colorful陣列就是 三個顏色的陣列 , 同樣換成{} 也一樣Import 和 export
這個特性vue用的最多, 模組化的感覺很強烈
let fun = function () {
console.log("fun")
}
export {fun}
// 在第二個檔案 匯入
import fun from "./fun";
// 然後使用
fun()
面向物件的程式設計模式-類
class person {
// 建構函式
constructor(name) {
this.name = name; // 不提前定義變數? 不存在的,直接點就行了老鐵
}
// 方法
sayHello() {
console.log("hello");
}
}
// 類的繼承
class Student extends person {
constructor(name) {
super(name);
}
sayHaha() {
console.log("haha");
}
}使用:
它並不能寫 父類引用指向子類物件
//person stu = new Student('zhangsan');
var stu = new Student('zhangsan');
stu.sayHaha();