一、關(guān)于變量

ES6新增：塊級(jí)作用域變量

1、let定義塊級(jí)作用域變量

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

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

2、const 定義只讀變量

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

{const CONSTANT = 100console.log(CONSTANT) // 100 只能在括號(hào)里使用 } console.log(CONSTANT) // CONSTANT is not defined 報(bào)錯(cuò) 也是作用域問(wèn)題

二、關(guān)于函數(shù)

1、ES6可以給形參函數(shù)設(shè)置默認(rèn)值

就是說(shuō)，當(dāng)我們調(diào)用函數(shù)時(shí)，如果設(shè)置了默認(rèn)形參，即使沒(méi)給函數(shù)傳入實(shí)參，那么函數(shù)的實(shí)參就是默認(rèn)形參。

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

在構(gòu)造函數(shù)中也可是使用的

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、箭頭函數(shù)

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

復(fù)習(xí)一下this的認(rèn)識(shí)

1.在函數(shù)體外，this指的就是window對(duì)象
2.在函數(shù)替內(nèi)，誰(shuí)調(diào)用函數(shù)this就指向誰(shuí)
3.在構(gòu)造函數(shù)中，this指的是新創(chuàng)建的對(duì)象
4.在html標(biāo)簽中，this指的是當(dāng)前的這個(gè)標(biāo)簽元素
5.在ES6中，對(duì)于箭頭函數(shù)，它本身沒(méi)有this，要看它在哪里創(chuàng)建的，和當(dāng)前函數(shù)的作用域, 通俗說(shuō)由執(zhí)行上下文確定。

三、... 擴(kuò)展運(yùn)算符? ?可以將對(duì)象或者數(shù)組里面的值展開

1、對(duì)象用法

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、在數(shù)組之前加上三個(gè)點(diǎn)（...）

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

3、可以根據(jù)數(shù)組的展開運(yùn)算用數(shù)組給函數(shù)批量的傳參 （用的比較多）

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

四、關(guān)于apply和call

apply和call，都是對(duì)象本身沒(méi)有某個(gè)屬性或者方法，去引用其他對(duì)象的屬性或方法，也就是說(shuō)兩者都可以改變this的屬性

不同之處

apply(this的指向，數(shù)組/arguments)
call(this的指向，參數(shù)1，參數(shù)2，參數(shù)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括號(hào)里的是誰(shuí)，調(diào)用的前面的函數(shù)里面的this就是誰(shuí) 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

五、關(guān)于解構(gòu)賦值

1、數(shù)組的解構(gòu)賦值

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、對(duì)象的解構(gòu)賦值

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

3、解構(gòu)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

六、創(chuàng)建對(duì)象

ES6中創(chuàng)建對(duì)象? class

class className{
// 肯定存在一個(gè)構(gòu)造函數(shù) constructor 如果不寫構(gòu)造函數(shù)，有一個(gè)默認(rèn)的構(gòu)造函數(shù),內(nèi)容為空constructor(){} // 注意：這里不需要逗號(hào)// 下面是函數(shù)屬性 比如屬性有run dark 函數(shù)和對(duì)象都可以 run(){}dark(){} }

舉個(gè)例子

class Person{// 肯定存在一個(gè)構(gòu)造函數(shù) construtor constructor(name,age,sex,nativePlace){this.name=name; // 注意：這里是分號(hào)this.age=age;this.sex=sex;this.nativePlace=nativePlace;}// 下面是函數(shù)屬性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?對(duì)象是一個(gè)構(gòu)造函數(shù)，用來(lái)生成Promise實(shí)例。

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

八、Set（）和Map（）

set（）有序列表集合（沒(méi)有重復(fù)） 數(shù)組去重利器

Set()是指有序列表集合 (set中的元素是沒(méi)有重復(fù)的)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);//一共三個(gè)元素 console.log(s.size)//數(shù)組的長(zhǎng)度是3 delete（value） 刪除指定元素//結(jié)合上栗 s.delete(window); console.log(s) //1 true console.log(s.size) //2 has( value )用來(lái)判斷指定的值是否在set集合中 存在返回true 不存在返回false//結(jié)合上栗 console.log( s.has(1) )//true clear（） 同來(lái)清空set集合的//結(jié)合上栗 s.clear() console.log(s)//此時(shí)為空 舉個(gè)例子：生成10個(gè)1-20的隨機(jī)數(shù)，要求不可以重復(fù) var arr3 = new Set();while(arr3.size<10){var yuan = parseInt(Math.random() * (20 - 1 + 1) + 1);arr3.add(yuan); }console.log(arr3)

Map() 用來(lái)存放鍵值對(duì)的集合

var map = new Map(); map.set("name","張三"); map.set("age",20); console.log(map) // Map {"name" => "張三", "age" => 20} get(key)根據(jù)key值取得valueconsole.log( map.get("name")) // 張三 has() 判斷是否存在某個(gè)鍵值對(duì) 存在返回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可以監(jiān)聽對(duì)象身上發(fā)生了什么事情，并在這些事情發(fā)生后執(zhí)行一些相應(yīng)的操作。一下子讓我們對(duì)一個(gè)對(duì)象有了很強(qiáng)的追蹤能力，同時(shí)在數(shù)據(jù)綁定方面也很有用處

// 定義被偵聽的目標(biāo)對(duì)象 var engineer = { name: 'Joe Sixpack', salary: 50 }; // 定義處理程序 var interceptor = {set: function (receiver, property, value) {console.log(property, 'is changed to', value);receiver[property] = value;} }; // 創(chuàng)建代理以進(jìn)行偵聽 engineer = Proxy(engineer, interceptor); // 做一些改動(dòng)來(lái)觸發(fā)代理 engineer.salary = 60; // 控制臺(tái)輸出：salary is changed to 60

十二、 簡(jiǎn)述Es7?

一、異步函數(shù)（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 等待的是一個(gè)promise對(duì)象 var asyncReadFile = async function (){// 當(dāng) f1 執(zhí)行完畢后 f2 才會(huì)執(zhí)行var f1 = await readFile('/etc/fstab');var f2 = await readFile('/etc/shells');console.log(f1.toString());console.log(f2.toString()); }

二 、string中加入include方法

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

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

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

三、求冪運(yùn)算

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

四、Object.values/Object.entries

Object.values和 Object.entries是在ES2017規(guī)格中，它和Object.keys類似，返回?cái)?shù)組類型，其序號(hào)和Object.keys序號(hào)對(duì)應(yīng)。 Object.values,Object.entries和Object.keys各自項(xiàng)返回是數(shù)組，相對(duì)應(yīng)包括key,value或者可枚舉特定對(duì)象property/attribute

五、字符填充函數(shù)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

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

轉(zhuǎn)載于:https://www.cnblogs.com/ljx20180807/p/9872238.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。