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();

轉載于:https://www.cnblogs.com/ZhuChangwu/p/11314200.html

總結

以上是生活随笔為你收集整理的分分钟带你欣赏ES6语法糖的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。