一、關于變量

ES6新增：塊級作用域變量

1、let定義塊級作用域變量

• 沒有變量的提升，必須先聲明后使用
• let聲明的變量，不能與前面的let，var，conset聲明的變量重名

{ { console.log(a) // 報錯 必須先聲明再使用let a = 10; // 只在當前大括號可以使用var b = "abc"; // 全局作用域變量console.log(a); // 10// let a = 10 // 報錯 Uncaught SyntaxError: Identifier 'a' has already been declaredconsole.log(b); // bac }console.log(b); // abc var 存在變量提升所以不會報錯console.log(a); // 報錯 let 不存在變量提升 有作用域問題 只能在大括號中使用 }

2、const 定義只讀變量

• const聲明變量的同時必須初始化賦值，一旦初始化完畢就不允許修改
• const聲明變量也是一個塊級作用域變量
• const聲明的變量沒有“變量的提升”，必須先聲明后使用
• const聲明的變量不能與前面的let， var ， const聲明的變量重名

{const CONSTANT = 100console.log(CONSTANT) // 100 只能在括號里使用 } console.log(CONSTANT) // CONSTANT is not defined 報錯 也是作用域問題

二、關于函數

1、ES6可以給形參函數設置默認值

就是說，當我們調用函數時，如果設置了默認形參，即使沒給函數傳入實參，那么函數的實參就是默認形參。

function fun2(a = 1, b= 2){console.log(a,b) // 1,2 } fun2(10,20); // 10 20 fun2(100); // 100 2 沒有傳參 則取初始默認值

在構造函數中也可是使用的

function Person(name, age, sex = "男"){this.name = name;this.age = age;this.sex = sex; } var p1 = new Person("張三", 20); console.log(p1) // Person {name: "張三", age: 20, sex: "男"} var p2 = new Person("李四", 30); console.log(p2) // Person {name: "李四", age: 30, sex: "男"} var p3 = new Person("王五", 20, "女"); console.log(p3) // Person {name: "王五", age: 20, sex: "女"

2、箭頭函數

// 正常函數 var fun3 = function(a){console.log(a); } // 箭頭函數 區別在于 this 的指向 開發中建議都有箭頭函數 能省去很多代碼 var fun3 = (a)=>{console.log(a);} fun3(999);

復習一下this的認識

1.在函數體外，this指的就是window對象
2.在函數替內，誰調用函數this就指向誰
3.在構造函數中，this指的是新創建的對象
4.在html標簽中，this指的是當前的這個標簽元素
5.在ES6中，對于箭頭函數，它本身沒有this，要看它在哪里創建的，和當前函數的作用域, 通俗說由執行上下文確定。

三、... 擴展運算符? ?可以將對象或者數組里面的值展開

1、對象用法

const a = [1, 2, 3] console.log(a) // 1 2 3 const b = {a: 1, b: 2} console.log({c: 3, ...b}) // {a: 1, b: 2, c: 3}

2、在數組之前加上三個點（...）

var arr = [1,2,3,4,5]; console.log(arr); // [1, 2, 3, 4, 5] console.log(...arr) // 1 2 3 4 5

3、可以根據數組的展開運算用數組給函數批量的傳參 （用的比較多）

function fun5(a,b,c,d,e,f){console.log(a,b,c,d,e,f) }
fun5([1,2,3,4,5]) // [1, 2, 3, 4, 5] undefined undefined undefined undefined undefine

fun5(...[11,22,33,44,55,66]) // 11 22 33 44 55 66

四、關于apply和call

apply和call，都是對象本身沒有某個屬性或者方法，去引用其他對象的屬性或方法，也就是說兩者都可以改變this的屬性

不同之處

apply(this的指向，數組/arguments)
call(this的指向，參數1，參數2，參數3)

var name ="window的name"; var obj = {name:"obj的name",showName:function(v1,v2,v3){console.log(v1,v2,v3)} } obj.showName(); obj.showName.apply(window,[10,20,30]); // 10 20 30 // apply括號里的是誰，調用的前面的函數里面的this就是誰 obj.showName.call(window,10,20,30) // 10 20 30 var color = "yellow"; function showColor(){console.log(this.color) } var obj = {color:"red", } showColor(); // yellow showColor.apply(obj); // red showColor.call(obj); // red showColor.apply(this); // yellow showColor.call(window); // yellow

五、關于解構賦值

1、數組的解構賦值

var [a,b,c] = [11,22,33]console.log(a,b,c) // 11 22 33var [e,[f,g],k] = [1,[2,3],5]console.log(e,f,g,k) // 1 2 3 5

2、對象的解構賦值

var{name,age}={name:"張三", age:"20"}console.log(name, age) // 張三 20
// 以前我們互換兩個變量的值，需要借助第三個變量，利用解構賦值，就方便很多了var f1 = 88;var f2 = 99;[f1,f2] = [f2 ,f1];console.log(f1, f2) // 99 88

3、解構json

var jike = {"name":"tom","age":"23","sex":"男"};var {name,age,sex}=jike;console.log(name,age,sex)//tom 23 男function cal(a,b){var ret1 = a+b;var ret2 = a-b;var ret3 = a*b;var ret4 = a/b;return [ret1,ret2,ret3,ret4]}var [r1,r2,r3,r4] = cal(10,5);console.log(r1,r2,r3,r4) // 15 5 50 2

六、創建對象

ES6中創建對象? class

class className{
// 肯定存在一個構造函數 constructor 如果不寫構造函數，有一個默認的構造函數,內容為空constructor(){} // 注意：這里不需要逗號// 下面是函數屬性 比如屬性有run dark 函數和對象都可以 run(){}dark(){} }

舉個例子

class Person{// 肯定存在一個構造函數 construtor constructor(name,age,sex,nativePlace){this.name=name; // 注意：這里是分號this.age=age;this.sex=sex;this.nativePlace=nativePlace;}// 下面是函數屬性eat(){console.log("紅燒排骨")}study(){console.log("英文")}play(){console.log("敲代碼")} }var sunShine = new Person("fanfan","22","女","黑龍江"); console.log(sunShine) // Person {name: "fanfan", age: "22", sex: "女", nativePlace: "黑龍江"}

七、Promise?對象是一個構造函數，用來生成Promise實例。

const promise = new Promise(function(resolve, reject) {if (/* 異步操作成功 */){resolve(value);} else {reject(error);} }); // 成功 promise.then(data => {console.log(data ); }); // 錯誤 異常 promise.catch(error => {console.log(error ); });

八、Set（）和Map（）

set（）有序列表集合（沒有重復） 數組去重利器

Set()是指有序列表集合 (set中的元素是沒有重復的)set包含的方法 add()、has()、delete()、clear()等add() 添加var s = new Set(); s.add(1); s.add(window); s.add(true); s.add(1); console.log(s);//一共三個元素 console.log(s.size)//數組的長度是3 delete（value） 刪除指定元素//結合上栗 s.delete(window); console.log(s) //1 true console.log(s.size) //2 has( value )用來判斷指定的值是否在set集合中 存在返回true 不存在返回false//結合上栗 console.log( s.has(1) )//true clear（） 同來清空set集合的//結合上栗 s.clear() console.log(s)//此時為空 舉個例子：生成10個1-20的隨機數，要求不可以重復 var arr3 = new Set();while(arr3.size<10){var yuan = parseInt(Math.random() * (20 - 1 + 1) + 1);arr3.add(yuan); }console.log(arr3)

Map() 用來存放鍵值對的集合

var map = new Map(); map.set("name","張三"); map.set("age",20); console.log(map) // Map {"name" => "張三", "age" => 20} get(key)根據key值取得valueconsole.log( map.get("name")) // 張三 has() 判斷是否存在某個鍵值對 存在返回true 不存在返回fasleconsole.log( map.has("age") ) // true console.log( map.has("age1") ) // false clear() 清空集合map.clear(); console.log(map);//Map {}

九、模板字符串

const user = {name: '張三'，age: 18 } console.log(`My name is ${user.name} and age is ${user.age}`) // My name is 張三 and age is 18

十、for of 值遍歷

var someArray = [ "a", "b", "c" ]; for (v of someArray) {console.log(v); // 輸出 a,b,c }

十一、Proxies??Proxy可以監聽對象身上發生了什么事情，并在這些事情發生后執行一些相應的操作。一下子讓我們對一個對象有了很強的追蹤能力，同時在數據綁定方面也很有用處

// 定義被偵聽的目標對象 var engineer = { name: 'Joe Sixpack', salary: 50 }; // 定義處理程序 var interceptor = {set: function (receiver, property, value) {console.log(property, 'is changed to', value);receiver[property] = value;} }; // 創建代理以進行偵聽 engineer = Proxy(engineer, interceptor); // 做一些改動來觸發代理 engineer.salary = 60; // 控制臺輸出：salary is changed to 60

十二、 簡述Es7?

一、異步函數（async/await） 常用利器

var fs = require('fs'); var readFile = function (fileName){
// 需要被await的話 就用promise包裝return new Promise(function (resolve, reject){fs.readFile(fileName, function(error, data){if (error) reject(error);resolve(data);});}); }; // await 等待的是一個promise對象 var asyncReadFile = async function (){// 當 f1 執行完畢后 f2 才會執行var f1 = await readFile('/etc/fstab');var f2 = await readFile('/etc/shells');console.log(f1.toString());console.log(f2.toString()); }

二 、string中加入include方法

includes("字符"); 用于判斷字符串中是否包含某個字符
存在返回true 不存在返回false

includes("字符",startIndex); 用于判斷字符串中下標startIndex是否是某個字符
是返回true 不是返回false

var str = "hello"; console.log( str.includes("e") ) // true console.log( str.includes("e",3) ); // false

三、求冪運算

console.log(3**2) // 9

四、Object.values/Object.entries

Object.values和 Object.entries是在ES2017規格中，它和Object.keys類似，返回數組類型，其序號和Object.keys序號對應。 Object.values,Object.entries和Object.keys各自項返回是數組，相對應包括key,value或者可枚舉特定對象property/attribute

五、字符填充函數padStart 和 padEnd

console.log('0.00'.padStart(20)) // 0.00 console.log('10,000.00'.padStart(20)) // 10,000.00 console.log('250,000.00'.padStart(20)) // 250,000.00

以上只是些個人認為比較常用的歡迎指正不對不足之處，? 詳細的可以看看阮一峰大神的特篇??http://es6.ruanyifeng.com/

轉載于:https://www.cnblogs.com/ljx20180807/p/9872238.html

總結

以上是生活随笔為你收集整理的ES6 开发常用新特性以及简述ES7的全部內容，希望文章能夠幫你解決所遇到的問題。

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