ES6系列之專案中常用的新特性

小明同學喲發表於2020-04-02

ES6常用特性

平時專案開發中靈活運用ES6+語法可以讓開發者減少很多開發時間，提高工作效率。ES6版本提供了很多新的特性，接下來我列舉專案中常用的ES6+的特性：

let / const
箭頭函式
解構賦值
預設引數
擴充套件運算子
類
字串
陣列
Promise

ES6的發展史

1996, ES1.0 Netscape 將 JS 提交給 ECMA 組織，ES 正式出現
1999, ES3.0 被廣泛支援
2011, ES5.1 成為 ISO 國際標準
2015, ES6.0 正式釋出

var、let、const

var的應用

可以重複宣告

var a=12
var a=6
alert(a); //可以出來結果，不報錯，出來的結果為6
複製程式碼

不能定義常量

//var
var a = 5;
a = 6;
複製程式碼

沒有塊級作用域

if(true){
	var a=12
}
alert(a);//出來的結果是12
複製程式碼

會變數提升預解釋

console.log(a); //undefined相當於 var a
var a = 52
複製程式碼

塊級作用域之var的案例

<script>
	window.onload=function(){
		var aBtn=document.getElementsByTagName('input')
		for(var i=0;i<aBtn.length;i++){
			aBtn[i].onclick=function(){
				alert(i);
			}
		}
	}
</script>
</head>
<body>
	<input type="button" value="星期一">
	<input type="button" value="星期二">
	<input type="button" value="星期三">
</body>
複製程式碼

列印出來的結果就是點選3個按鈕，都彈出3，這說明了var沒有塊級作用域

所以這下邊這段程式碼就進行了修改，列印出來三個按鈕就是0、1、2

<script>
	window.onload=function(){
		var aBtn=document.getElementsByTagName('input')
		for(let i=0;i<aBtn.length;i++){
			(function(i){
				aBtn[i].onclick=function(){
				alert(i);
			};
			})(i)
		}
	}
</script>
</head>
<body>
	<input type="button" value="星期一">
	<input type="button" value="星期二">
	<input type="button" value="星期三">
</body>
複製程式碼

let的應用

不能重複宣告

let a=5
let a=10
alert(a);//這時候就會出現報錯，因為相同的變數不能宣告兩次
複製程式碼

可以修改

//let是定義變數，可以修改
let a=12
a=20
alert(a)//列印出來的結果a=20
複製程式碼

有塊級作用域

if(true){
	let a=12;
}
alert(a);//這個時候就會出現報錯，說a沒有定義
複製程式碼

不會預解釋變數

console.log(a)//Uncaught ReferenceError: a is not defined 語法錯誤，沒有預解釋
let a = 52
複製程式碼

塊級作用域之let的案例

直接使用let就可以解決上邊的問題，使三個按鈕彈出的結果為0、1、2

<script>
	window.onload=function(){
		var aBtn=document.getElementsByTagName('input')
		for(let i=0;i<aBtn.length;i++){
			aBtn[i].onclick=function(){
				alert(i);
			}
		}
	}
</script>
</head>
<body>
	<input type="button" value="星期一">
	<input type="button" value="星期二">
	<input type="button" value="星期三">
</body>
複製程式碼

const的應用

不能重複宣告

const a=5
const a=10
alert(a);//這時候就會出現報錯，因為相同的變數不能宣告兩次
複製程式碼

不能修改

//const是定義的常量，不能修改
const a=12;
a=5;
alert(a);//這時候就會出現報錯，不能修改
複製程式碼

有塊級作用域

if(true){
	const a=12;
}
alert(a);//這個時候就會出現報錯，說a沒有定義
複製程式碼

不會預解釋變數

console.log(a)//Uncaught ReferenceError: a is not defined 語法錯誤，沒有預解釋
let a = 52
複製程式碼

箭頭函式

在使用箭頭函式時要注意以下幾點：

如果只有一個引數，（）可以省
如果只有一個return，{ }可以省略

注意：箭頭函式與包圍它的程式碼共享同一個this,能幫你很好的解決this的指向問題

普通函式和箭頭函式寫法區別

//普通函式1
function show(){
	
}
//箭頭函式1
let show=()=>{
	
}
//普通函式2
function(){
	
}
//箭頭函式2
()=>{	
}
複製程式碼

解構賦值

從陣列和物件中提取值，對變數進行賦值，這被稱為解構，解構賦值可以直接使用物件的某個屬性，而不需要通過屬性訪問的形式使用。

普通賦值

	//普通賦值
	let arr=[1,2,3]
	let a=arr[0]
	let b=arr[1]
	let c=arr[2]
	console.log(a,b,c)//1,2,3
複製程式碼

獲取陣列中的值

	//獲取陣列中的值
    let[a,b,c]=[1,2,3]
    console.log(a,b,c)//1,2,3
    
    //獲取陣列中的值
    let [a,b]=[123,23]
    console.log(a,b)//123 23
複製程式碼

獲取物件中的值

	//獲取物件中的值
    let {a,c,d}={a:12,c:5,d:6}
    console.log(a,c,d)
複製程式碼

複雜解構

//複雜解構
let [{a,b},[n1,n2,n3],num,str]=[{a:12,b:4},[2,3,6],787,'abcdes']
console.log(a,b,n1,n2,n3,num,str)

//複雜解構
let [json,arr,num,str]=[{a:12,b:4},[2,3,6],787,'abcdes']
console.log(json,arr,num,str)
複製程式碼

預設引數

$('#div1').animate({width:'200px'});
$('#div1').animate({width:'200px'},1000);
複製程式碼

function show(a,b=5,c=12){
console.log(a,b,c)
}
show(99)//99 5 12(預設引數就是直接把值替換成沒有定義值的)
複製程式碼

擴充套件運算子

收集剩餘的引數

function show(a,b,...args){
	alert(args)
}
show(12,12,34,3,2,4,28)//列印出來的結果是34,3,2,4,28   (...args必須放在最後面)
複製程式碼

展開陣列

//普通函式
	function show(a,b,c){
		alert(a);
		alert(b);
		alert(c)
	}
	show(1,2,3)//列印出來的結果彈出1,再彈出2，再彈出3
	
    //陣列展開
    let arr1=[1,2,3]
    let arr2=[5,6,7]
    let arr=[...arr1,...arr2];
    alert(arr)
複製程式碼

function show(...args){
		fn(...args);
	}
	function fn(a,b){
		alert(a+b)
	}
	show(12,5)//彈出17
複製程式碼

陣列

map例子

//例子1
[45,78,278,890]
[
    {name:'one',level:0,role:9},
    {name:'two',level:0,role:8},
    {name:'three',level:0,role:7},
    {name:'four',level:0,role:6},
]

//例子2
let arr=[12,5,8];
    let result = arr.map((item)=>{
    return item*2;
    })
alert(result)//24,10,16

//例子3
let arr=[12,5,8];
let result = arr.map(item=>item*2);
alert(result)//24,10,16
複製程式碼

reduce例子

//例子1,算平均數
let score=[89,12,34,23,45,55];
let result = score.reduce(function(tmp,item,index){
return tmp+item;
})
alert(result/score.length)//43(把這幾個數求平均數)

//例子2
let arr=[12,67,67,889,97];
let result=arr.reduce(function(tmp,item,index){
	if(index!=this.length-1){//不是最後一次
		return tmp+item;
	}else{//最後一次
		return(tmp+item)
	}
})
alert(result);//1132
複製程式碼

filter例子

//例子1
let arr=[12,5,8,99,67,87];
let result=arr.filter(item=>{
	if(item%3==0){
		return true;
	}else{
		return false;
	}
});
alert(result);//12,99,87

//例子2
let arr=[12,5,8,99,67,87];
let result=arr.filter(item=>{
	alert(item%3==0);
});//彈出布林值
複製程式碼

forEach例子

let arr=[12,3,45,6,566];
arr.forEach((item,index)=>{
	alert(index+':'+item)//0:12  1:3  2:45  3:6  4:566
})
複製程式碼

字串

模板字串

需要拼接字串的時候儘量改成使用模板字串，模板字串可以使字串的拼接更加的簡潔和直觀

不使用模板字串

var name = 'The weather today is ' + sun + ' ' + rain + '.'
複製程式碼

使用模板字串

var name = `The weather today is ${sun} ${rain}.`
複製程式碼

startsWith例子

let str='git://www.baidu.com/23448';
if(str.startsWith('http://')){
	alert('普通地址');
}else if(str.startsWith('https://')){
	alert('加密地址');
}else if(str.startsWith('git://')){
	alert('git地址');
}else{
	alert('其它');
}//git地址
複製程式碼

endsWith例子

let str='1.jpg';
if(str.endsWith('.txt')){
	alert('檔案文字');
}else if(str.endsWith('.jpg')){
	alert('JPG圖片');
}else{
	alert('其它')
}//JPG圖片
複製程式碼

promise

什麼是非同步程式設計？

從伺服器獲取資料，這個過程就叫做非同步程式設計
在node.js中去讀取檔案，這個過程也是非同步的

promise的理解

Promise本意是承諾，在程式中的意思就是承諾我過一段時間後會給你一個結果：

什麼時候會用到過一段時間？

是非同步操作

非同步是指可能比較長時間才有結果的才做，例如網路請求、讀取本地檔案等

最基本的Promise長什麼樣？

程式碼如下：

index.js

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1)
    })
}).then(value => {
    console.log('value',value)
},reason => {
    console.log('reason',reason)
})
複製程式碼

執行結果：

value 1
複製程式碼

原生promise它的引數不是函式時，會發生？

程式碼如下：

index.js

new Promise(1)
複製程式碼

promise.js

class Promise {
    constructor(executor){
        //引數效驗
        if(typeof executor !== 'function'){
            throw new TypeError('Promise resolver ${executor} is not a function')
        }
    }
}
複製程式碼

執行結果：

Promise resolver 1 is not a function
複製程式碼

這是一個最基本的promise

程式碼如下

index.js

new Promise((resolve, reject) => {
    console.log('早上好！')
        resolve(1)
})
複製程式碼

promise.js

class Promise {
    constructor(executor){
        //引數效驗
        if(typeof executor !== 'function'){
            throw new TypeError('Promise resolver ${executor} is not a function')
        }
        const resolve = function (){

        }
        const reject = function (){

        }
        executor(resolve,reject)
    }
}
複製程式碼

執行結果：

早上好！
複製程式碼

具體可以看這篇一步步教你實現Promise/A+ 規範完整版文章

generator

generator生成器函式

迭代器函式名前用“*”

//generator生成器函式
function *show2() {
    console.log('1')
    yield
    console.log('2')
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next() // 最後了，沒有結果
複製程式碼

yield

迭代器遇到yield暫時中止執行，呼叫迭代器next方法繼續執行

yield可以傳參

//yield可以傳參
function *show(){
	alert('a');//a
	let a=yield;
	alert('b');//b
	alert(a)//5
}
let gen=show();
gen.next(12);
gen.next(5);
複製程式碼

yield可以返回

//yield返回
function *show(){
	alert('a');
	yield 12;
	alert('b');
	return 55;
}
let gen=show();
let res1=gen.next();
console.log(res1);//{value:12,done:false}
let res2=gen.next()
console.log(res2);//{value:55,done:true}    最後一步的結果靠return
複製程式碼

總結

以上例子都是公司專案裡常用的一些ES6新特性，靈活運用好這些API可以讓我們減少很多開發時間來做更多的事。

最後

歡迎大家加入，一起學習前端，共同進步！

ES6中常用的10個新特性講解
2018-06-10
ES6 新特性之Symbol
2018-07-13
Symbol
es6新特性之 class 基本用法
2018-05-05
javascript ES6 新特性之解構
2019-05-09
JavaScript
ES6中let 和 const 的新特性
2018-11-18
ES6中的新特性:Iterables和iterators
2021-06-17
ES6新特性
2019-04-28
ES6、7、8常用新特性總結(超實用)
2019-02-16
ES6新特性總結
2018-08-11
玩轉ES6新特性
2018-08-11
前端-JavaScript新特性（ES6）
2021-10-22
前端JavaScript
ES6新特性總結之解構賦值和字串模板
2018-09-28
賦值字串
簡單說說ES6新特性
2022-02-10
ES6 系列之 WeakMap
2018-07-26
Java8常用的新特性總結
2019-05-13
Java
ES6新特性總結之函式和擴充套件運算子...
2018-09-29
函式套件
ESLint + lint-staged 禁用老專案中的es6
2019-02-27
EsLint
es6非同步方法在專案中的實踐
2019-04-12
非同步
ES6 系列之模板字串
2018-05-30
字串
dart系列之:安全看我,dart中的安全特性null safety
2021-12-22
DartNull
NestJs系列之使用Vite搭建專案
2023-12-12
JSVite
分享 Python 3.6 中常用的幾個新特性
2018-04-07
Python
ES6新特性總結之let和const--史上最全最簡潔
2018-09-28
三，ES6中需要注意的特性（重要）
2018-08-11
ES6 新特性（一部分）
2018-12-26
前端系列-HTML5新特性
2024-04-05
前端HTML
Java8新特性系列-Lambda
2022-03-02
Java
Vue專案釋出到springboot中的系列配置
2021-11-16
VueSpring Boot
影像匹配（大圖中找小圖）之新專案findimage
2022-01-22
專案中關於解構的常用用法
2022-06-17
前端日拱一卒D10——ES6筆記之新特性篇
2018-08-06
前端筆記
ES6 系列之 defineProperty 與 proxy
2018-11-09
ES6系列之 let 和 const
2019-04-14
ES6 系列之迭代器與 for of
2018-07-10
2024-05-10 ES6新特性小總結
2024-05-10
es6、7、8、9新語法新特性-總結
2019-02-18
ES6 系列之 Generator 的自動執行
2018-10-18
ES6 系列之私有變數的實現
2018-11-20
變數

ES6系列之專案中常用的新特性

ES6常用特性

ES6的發展史

var、let、const

var的應用

let的應用

const的應用

箭頭函式

普通函式和箭頭函式寫法區別

解構賦值

普通賦值

獲取陣列中的值

獲取物件中的值

複雜解構

預設引數

擴充套件運算子

陣列

map例子

reduce例子

filter例子

forEach例子

字串

模板字串

startsWith例子

endsWith例子

promise

什麼是非同步程式設計？

promise的理解

最基本的Promise長什麼樣？

原生promise它的引數不是函式時，會發生？

這是一個最基本的promise

generator

generator生成器函式

yield

總結

最後

相關文章