ES6

什么是ECMAScript?
ECMAScript就是JavaScript中的語法規范!

關鍵字 let 的用法
let關鍵字是用了聲明變量的,類似于var。let聲明的變量僅僅在自己的塊級作用域起作用,出了這個塊級作用域就不起作用。需要先聲明定義再使用,同一個塊級作用域內,不允許重復聲明同一個變量,函數內不能用let重新聲明函數的參數。

關鍵字 const 的用法
const和 let一樣,也是用來聲明變量的,但是const是專門用于聲明一個常量的,顧名思義,常量的值是不可改變的。只在塊級作用域起作用,不存在變量提升,必須先聲明后使用,不可重復聲明同一個變量,聲明后必須要賦值。

快速讓瀏覽器兼容ES6特性
比較通用的工具方案有babel,jsx,traceur,es6-shim等。
各大轉換工具、javascript解析引擎對ES6的支持程度情況,可以參查看這個地址:'http://kangax.github.io/compat-table/es6/'

解構賦值
ES6允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱為解構。
var arr = [1,2,3];//把數組的值分別賦給下面的變量;(傳統)
var a = arr[0];
var b = arr[1];
var [a,b,c] = [1,2,3]; //把數組的值分別賦給下面的變量;(解構)
console.log(a);//a的值為1
console.log(b);//b的值為2
console.log(c);//c的值為3
var { a,b,c} = {"a":1,"b":2,"c":3};(對象解構)
console.log(a);//結果:a的值為1
console.log(b);//結果:b的值為2
console.log(c);//結果:c的值為3
var [a,b,c,d,e,f] = "我就是前端君";(字符串解構)
console.log(a);//我
console.log(b);//就
console.log(c);//是
交換變量的值
var x = 1;
var y = 2;
[x,y] = [y,x];
提取函數返回的多個值
function demo(){
return {"name":"張三","age":21}
}
var {name,age} = demo();
console.log(name);//結果:張三
console.log(age);//結果:21

ES6為字符串String帶來哪些好玩的特性?
字符串實現拼接
let name = "Jacky";
let occupation = "doctor";
//傳統字符串拼接
let str = "He is "+ name +",he is a "+ occupation;
//模板字符串拼接
let str = He is ${name},he is a ${occupation};
${ }中可以是運算表達式
var str = the result is ${a+b};
${ }中可以是對象的屬性
var str = the result is ${obj.a+obj.b};
${ }中可以是函數的調用
var str = the result is ${ fn() };
repeat( )函數:將目標字符串重復N次,返回一個新的字符串,不影響目標字符串。
includes( )函數:判斷字符串中是否含有指定的子字符串,返回true表示含有和false表示未含有。第二個參數選填,表示開始搜索的位置。
startsWith( )函數:判斷指定的子字符串是否出現在目標字符串的開頭位置,第二個參數選填,表示開始搜索的位置。
endsWith( )函數:判斷子字符串是否出現在目標字符串的尾部位置,第二個參數選填,表示針對前N個字符。
ES6給我們提供的codePointAt( )函數,就可以處理這種4個字節的字符
var str = "??";
str.codePointAt(); //結果:134071
String.fromCodePoint( )函數:函數的參數是一個字符對應的碼點,返回的結果就是對應的字符,哪怕這個字符是一個4字節的字符,也能正確實現
String.fromCodePoint(134071); //結果:"??"
String.raw( );返回字符串最原始的樣貌,即使字符串中含有轉義符,它都視而不見,直接輸出。

ES6為數值做了哪些擴展?
在ES5中,我們存在幾個全局函數 isNaN函數,isFinite函數,parseInt函數,parseFloat函數等,屬于window對象下的一個方法。
但是在ES6的標準中,isNaN方法被移植到了Number對象上,也就是原本屬于全局對象window下的函數,現在屬于Number對象上了,同樣被處理的函數還有isFinite函數,parseInt函數,parseFloat函數。
Number.isNaN函數:用于判斷傳入的是否是非數值
Number下面的isNaN都懶得給字符串’abc’做類型轉換,直接返回false。而ES5中的isNaN函數會對字符串’abc’進行類型轉換后,發現它是一個NaN(非數值),才返回true。
Number.isFinite函數:用來檢查一個數值是否非無窮。同樣要注意,當Number.isFinite函數返回false的時候,參數不一定就是一個有窮的數值類型,也有可能是一個非數值類型的參數。如:字符串’abc’。
Number.isInteger函數:用來判斷是否是整數。
Number.EPSILON常量:定義一個極小的數值。
Math.trunc函數:用于去除一個數的小數部分,返回整數部分。
Math.sign函數:用來判斷一個數到底是正數、負數、還是零。
Math.cbrt函數:用于計算一個數的立方根。

ES6為數組做了哪些擴展?
Array.of(1,2,3,4,5); 函數作用:將一組值,轉換成數組。
Array.from(ele) instanceof Array; //結果:true,是數組
Array.from函數其中一個用處就是將字符串轉換成數組,還有個是克隆數組。看下面的案例:let str = 'hello';
Array.from(str); //結果:["h", "e", "l", "l", "o"]
find( );函數作用:找出數組中符合條件的第一個元素。倘若所有元素都不符合匿名函數的條件,find( )函數就會返回undefind。
let arr = [1,2,3,4,5,6];
arr.find(function(value){
return value > 2;
}); //結果:value=3
findIndex( ) 函數作用:返回符合條件的第一個數組成員的位置。
fill( )函數作用:用指定的值,填充到數組。
let arr = [1,2,3];
arr.fill(4); //結果:[4,4,4]
arr.fill(4,1,3); //結果:[1,4,4]
entries( )函數作用:對數組的鍵值對進行遍歷,返回一個遍歷器,可以用for..of對其進行遍歷。
for(let [i,v] of ['a', 'b'].entries())
{
console.log(i,v);
}
//0 "a"
//1 "b"
keys( )函數作用:對數組的索引鍵進行遍歷,返回一個遍歷器。
for(let index of ['a', 'b'].keys())
{
console.log(index);
}
//0
//1
values( )作用:對數組的元素進行遍歷,返回一個遍歷器。
for(let value of ['a', 'b'].values())
{
console.log(value);
}
//a
//b
數組推導:用簡潔的寫法,直接通過現有的數組生成新數組
假如我們有一個數組,我在這個數組的基礎上,每個元素乘以2,得到一個新數組。
var arr1 = [1, 2, 3, 4];
var arr2 = [for(i of arr1) i * 2];
console.log(arr2);
//結果: [ 2, 4, 6, 8 ]
在數組推導中,for..of后面還可以加上if語句
var array1 = [1, 2, 3, 4];
var array2 = [for(i of array1) if(i>3) i];
console.log(array2);
//結果: [4]

ES6為對象做了哪些擴展?
ES6給我們帶來了更簡便的表示法,我們一起來對比一下:
var name = "Zhangsan";
var age = 12;
//傳統的屬性寫法
var person = {
"name":name,
"age":age
};
console.log(person);
//結果:{name: "Zhangsan", age: 12}
//ES6的屬性寫法
var person = {name,age};
console.log(person);
//結果:{name: "Zhangsan", age: 12}

//傳統的表示法
var person = {
say:function(){
alert('這是傳統的表示法');
}
};
//ES6的表示法
var person = {
say(){
alert('這是ES6的表示法');
}
};
在表示法上除了這點改進以外,還有另外一個新特點:用字面量定義一個對象的時候,可以用表達式作為對象的屬性名或者方法名。
var f = "first";
var n = "Name";
var s = "say";
var h = "Hello";
var person = {
[ f+n ] : "Zhang",
s+h {
return "你好嗎?";
}
};
console.log(person.firstName);
//結果:Zhang
console.log(person.sayHello());
//結果:你好嗎?
Object.is()函數,它的作用也跟嚴格相等一樣,
var str = '12';
var num = 12;
var num2 = 12;
Object.is(str,num);
//結果:false
Object.is(num2,num);
//結果:true
Object.assign()函數作用:將源對象的屬性賦值到目標對象上。
//這個充當目標對象
let target = {"a":1};
//這個充當源對象
let origin = {"b":2,"c":3};
Object.assign(target,origin);
//打印target對象出來看一下
console.log(target);
//結果 {a: 1, b: 2, c: 3}
巧妙利用Object.assign( )函數的功能,我們可以完成很多效果,比如:給對象添加屬性和方法,克隆對象,合并多個對象,為對象的屬性指定默認值。

ES6為函數做了哪些擴展?
設定默認值,有默認值的參數后面不能再跟不需默認值的參數了。
function person(name = 'Zhangsan',age = 25){
console.log(name,age);
}
person();//結果:Zhangsan 25
person('Lisi',18);//結果:Lisi 18
rest參數,這是一個新的概念,rest的中文意思是:剩下的部分。
//求和函數,得到的結果賦值到result
function sum(result,...values){
//打印values看看是什么
console.log(values);
//結果:[1,2,3,4]
//進行求和
values.forEach(function (v,i) {
//求和得到的結果存到result
result += v;
});
//打印出求和的結果看看
console.log(result);
//結果:10
}
//存儲求和結果的變量res
var res = 0;
//調用sum函數
sum(res,1,2,3,4);
箭頭函數,這又是一個新概念,ES6給我們介紹一種全新的定義函數的方式,就是用箭頭符號(=>),故得名為箭頭函數。
var sum = function(a) {
return a ;
};
//箭頭函數寫法
var sum = a => a;
/ /箭頭函數寫法
var sum = (a,b) => {return a+b}
sum(1,2);//結果:3
箭頭函數中的this指向的是定義時的this,而不是執行時的this。

JavaScript有了一種全新的數據類型:Symbol
ES6設計出一個Symbol的初衷:解決對象的屬性名沖突。
let name = Symbol();
let person = {
[name]:"張三"
};
console.log(person[name]);
//結果:張三
console.log(person.name);
//結果:undefined
當symbol值作為對象的屬性名的時候,不能用點運算符獲取對應的值。
當symbol類型的值作為屬性名的時候,該屬性是不會出現在for...in和for...of中的,也不會被Object.keys( )獲取到。

ES:給開發者提供了一個新特性:Proxy,就是代理的意思。
待補充!

for...of 一種用于遍歷數據結構的方法。它可遍歷的對象包括數組,對象,字符串,set和map結構等具有iterator 接口的數據結構。
for(let i = 0;i<arr.length;i++){ }(代碼不夠簡潔)
arr.forEach(function (value,index) { });(無法中斷停止整個循環)
for(let i in arr){}如果用于數組的循環,那么就要注意了,上述代碼中每次循環中得到的i是字符串類型,而不是預料中的數字類型,要想對它進行運算,那得先要進行類型轉換,造成不方便。
for(let value of arr){ }
1.寫法比for循環簡潔很多;
2.可以用break來終止整個循環,或者continute來跳出當前循環,繼續后面的循環;
3.結合keys( )獲取到循環的索引,并且是數字類型,而不是字符串類型。
for(let index of arr.keys()){
console.log(index);
}
for...of 支持字符串的遍歷。
for...of支持類數組的遍歷
for...of支持set和map解構的遍歷,考慮到set和map我們還沒學習

只要一個數據結構擁有一個叫Symbol.iterator方法的數據結構,就可以被for...of遍歷,我們稱之為:可遍歷對象。

ES6新增的 Set 和 WeakSet 是什么東西?
Set是ES6給開發者帶來的一種新的數據結構,它的值不會有重復項。
var s = new Set([1,2,3]);
console.log(s); //打印結果:Set {1, 2, 3}
如果你不想用數組作為參數來傳值初始化變量s,你還可以通過Set 結構提供的add方法來添加方法,也是沒問題的。
var s = new Set();
//使用add方法添加成員
s.add(1);
s.add(2);
s.add(3);
console.log(s);
//打印結果:Set {1, 2, 3}
size屬性:獲取成員的個數。
delete( )方法:用戶刪除Set結構中的指定值,刪除成功返回:true,刪除失敗返回:fasle。
clear( )方法:清除所有成員。
has( )方法:判斷set結構中是否含有指定的值。如果有,返回true;如果沒有,返回fasle。
keys( )方法:返回鍵名的遍歷器。
values( )方法:返回鍵值的遍歷器。
entries( )方法:鍵名+鍵值
WeakSet 是給對象賦值

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • JavaScript ES6 核心功能一覽(ES6 亦作 ECMAScript 6 或 ES2015+) Java...
    蝸牛淋雨閱讀 1,815評論 0 12
  • 《ECMAScript6 入門》阮一峰 讀書筆記 let和constlet聲明的變量僅在塊級作用域內有效,var聲...
    親愛的孟良閱讀 736評論 1 2
  • ES6 箭頭函數、函數擴展 ES5: function add(a,b){return a+b;}console....
    紫由裊閱讀 366評論 0 1
  • 你可能已經聽說過ECMAScript 6(簡稱 ES6)了。ES6 是 Javascript 的下一個版本,它有很...
    奮斗的小廢魚閱讀 771評論 0 16
  • 你可能已經聽說過ECMAScript 6(簡稱 ES6)了。ES6 是 Javascript 的下一個版本,它有很...
    米塔塔閱讀 948評論 0 10