ES6 學習體會

第一部分：

1.初始化項目 npm init -y
2.安裝ES6 環境
.babelrc 文件
babel-cli -g
babel-ecmascript2015 babel-cli --save-dev

#######################################################################################################

第二部分：
變量的三種聲明方式:
var -- 全局聲明(容易產生污染)
let -- 局部聲明(只存在於當前做用域)
const -- 變量聲明以後，不容許隨意更改(也可理解爲常量)

#######################################################################################################

第三部分：
1.變量的解構賦值
<< ES6容許按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構。解構賦值在實際開發中能夠大量減小咱們的代碼量，而且讓咱們的程序結構更清晰。

<< 1.
let a = 0;
let b = 1; =>
let c = 2;
let [a,b,c] = [1,2,3] => var a = 1,b = 2, c = 3;
let [a,[b,c],d] = [1,[2,3],4] => var a = 1,b = 2,c =3 ,d = 4
注：若是等號兩邊形式不同，極可能得到undefined或者直接報錯。

<< 2.數組的解構：
1>
let [foo=true] = [];
console.log(foo) // true
2>
let [a,b="zcc"] = ['hello']
console.log(a+b) // hellozcc
3>undefined至關於什麼都沒有，b解構成了null。
let [a,b="zcc"] = ['hello'，undefined]
console.log(foo) // hellozcc
4>null 有值，但值爲null,b取null。
let [a,b="zcc"] = ['hello', null]
console.log(foo) // hello null

<< 3.對象的解構
注意：對象的解構與數組有一個重要的不一樣。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

1.解構不只能夠用於數組，還能夠用於對象。
let foo;
({foo,bar} = {foo : 'zcc',bar : '000'});
console.log(foo+bar) // zcc000
<< 4.字符串的解構
字符串也能夠解構，這是由於，此時字符串被轉換成了一個相似數組的對象。
const [a,b,c,d]="JFAS";
console.log(a);
console.log(b);
console.log(c);
console.log(d);

#######################################################################################################

第三部分：擴展運算符和rest運算符
<< 1.對象擴展運算符(...):
(主要用於：當咱們聲明一個變量方法，但不肯定參數個數的時候)
function argument(...arg){
console.log(arr[0])
console.log(arr[1])
console.log(arr[2])
console.log(arr[3])
}
argument(1,2,3)

1.eg: 這裏的arr2 是對arr1 的映射
let arr1=['www','xiaoming','com'];
let arr2=arr1;
console.log(arr2); // www,xiaoming,com
arr2.push('shengHongYu');
console.log(arr1); // www,xiaoming,com,shengHongYu
2.eg: 這裏的arr2 是對arr1 的擴展
let arr1=['www','xiaoming','com'];
let arr2=[...arr1];
console.log(arr2); // www,xiaoming,com
arr2.push('shengHongYu');
console.log(arr2); // www,xiaoming,com,shengHongYu
console.log(arr1); // www,xiaoming,com
<< 2.rest(剩餘) 運算符

function argument(first,...arg){
console.log(arg.length)
for(let i = 0;i < arg.length; i++){
console.log(arg[i]) // 1,2,3,4,5,6
}

for(let val of arg){ // ES6 循環更高效率
console.log(val) // 1,2,3,4,5,6
}

}
argument(0,1,2,3,4,5,6) // 6

#######################################################################################################

第五部分：字符串模版
ES6對字符串新增的操做，最重要的就是字符串模版，字符串模版的出現讓咱們不再用拼接變量了，並且支持在模板裏有簡單計算操做。
<< 1. 字符串拼接
let str1 = 'zcc2333';
let str2 = '字符串2'; // let str2 = `${str1}我是一個字符串`;

<< 2.查找字符串
let str = "zcc2333";
let str2 = "zcc2333我是一個字符串";

console.log(str2.indexOf(str1)); //返回索引，沒有返回-1;
console.log(str2.includes(str1)); //返回 true 不存在返回false
console.log(str2.startsWith(str1)) //返回 查看開頭是否有 true/false
console.log(str2.endsWith(str1)) //返回 查看結尾是否有 true/false

<< 3.字符串複製
document.write('zcc2333|'.repeat(10)) // 第一個參數是要複製的字符串，repeat(num) 要複製的個數

#######################################################################################################

第六部分：ES6數字操做

<< 1.二進制和八進制
1>. 二進制
二進制聲明： 二進制的英文單詞是Binary,二進制的開始是0（零），而後第二個位置是b（注意這裏大小寫均可以實現），而後跟上二進制的值就能夠了。
let binary = 0B100110;
console.log(binary) // 21
2>. 八進制
八進制聲明：八進制的英文單詞是Octal，也是以0（零）開始的，而後第二個位置是O（歐），而後跟上八進制的值就能夠了。
let octonary = 0O666;
console.log(octonary) // 438
<< 2.數字判斷和轉換
1>. 數字驗證Number.isFinite( xx )
注意：可使用Number.isFinite( )來進行數字驗證，只要是數字，不管是浮點型仍是整形都會返回true，其餘時候會返回false。
let a = 11/4;
console.log(Number.isFinite(a));//true
console.log(Number.isFinite('xiaoming'));//false
console.log(Number.isFinite(NaN));//false
console.log(Number.isFinite(undefined));//false
3>. NaN驗證
NaN是特殊的非數字，可使用Number.isNaN()來進行驗證。下邊的代碼控制檯返回了true。
console.log(Number.isNaN(NaN)); // true
4>. 判斷是否爲整數Number.isInteger(xx)
let a=123.1;
console.log(Number.isInteger(a)); //false
5>. 整數轉換Number.parseInt(xxx)和浮點型轉換Number.parseFloat(xxx)
let a='9.18';
console.log(Number.parseInt(a)); // 9
console.log(Number.parseFloat(a)); // 9.18
<< 3.整數取值範圍操做
注意：整數的操做是有一個取值範圍的，它的取值範圍就是2的53次方。咱們先用程序來看一下這個數字是什麼。
let a = Math.pow(2,53)-1;
console.log(a); //9007199254740991

1>. 最大安全整數
console.log(Aumber.MAX_SAFE_INTEGER(a))
2>. 最小安全整數
console.log(Number.MIN_SAFE_INTEGER(a))
3>. 安全整數判斷
let a = Math.pow(2,53) - 1;
console.log(Nuber.isSafeInteger(a)) // fasle

#######################################################################################################

第七部分：ES6中新增的數組知識（1）

<< 1. json 轉換數組方法 Array.from()
let json1 = {
"0": "小明",
"1": 18,
'2': "china",
length: 3
}
這就是一個標準的JSON數組格式，跟普通的JSON對比是在最後多了一個length屬性。只要是這種特殊的json格式均可以輕鬆使用ES6的語法轉變成數組。在ES6中絕大部分的Array操做都存在於Array對象裏。咱們就用Array.from(xxx)來進行轉換。而後再控制檯輸出一下：
let arr = Array.from(json)
console.log(arr) // arr = ["小明",18,"china"]

<< 2.Array.of()
它負責把一堆文本或者變量轉換成數組。在開發中咱們常常拿到了一個相似數組的字符串，須要使用eval來進行轉換，咱們知道 eval 轉換的效率是很低的，它會拖慢咱們的程序。這時候咱們就可使用Array.of方法。咱們看下邊的代碼把一堆數字轉換成數組並打印在控制檯上：
數字轉數組：
let arr =Array.of(3,4,5,6);
console.log(arr); // [3,4,5,6]

字符串轉數組：
let arr =Array.of('小明','18','china');
console.log(arr); // ['小明','18','china']

<< 3.find( )實例方法:
所謂的實例方法就是並非以Array對象開始的，而是必須有一個已經存在的數組，而後使用的方法，這就是實例方法。
這裏的find方法是從數組中查找。在find方法中咱們須要傳入一個匿名函數，函數須要傳入三個參數：
1> value: 表示當前查找的值。
2> index: 表示當前查找的數組索引。
3> arr: 表示當前數組。

#####################################################################################

第八部分：ES6中新增的數組知識（2）

<< 1.fill( )實例方法:
fill()也是一個實例方法，它的做用是把數組進行填充，它接收三個參數，第一個參數是填充的變量，第二個是開始填充的位置，第三個是填充到的位置。
let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('xiaoming',2,5);
console.log(arr);

<< 2.for...of循環：
這種形式比ES5的for循環要簡單並且高效。先來看一個最簡單的for…of循環。
let arr = ['小明','18','china.'];

1>. 循環數組中的元素
for(let item of arr){
console.log(item)
}
// '小明' '18' 'china.'
2>. 循環數組中的下標 arr.keys() -> es6 中的實例方法
for(let item of arr.keys()){
console.log(item)
}
// 0 1 2
2>. 同時輸出數組的內容和索引
for( let [index,val] of arr.entries){
console.log(index+':'+val)
}
// 0 : 小明 1 : 18 2 : china
<< 3.entries( )實例方法：
entries()實例方式生成的是Iterator形式的數組，那這種形式的好處就是可讓咱們在須要時用next()手動跳轉到下一個值。咱們來看下面的代碼：
let arr=['小明','18','china']
let list=arr.entries(); // 將數組生成條目行的形式
console.log(list.next().value); // [0, "小明"]
console.log(list.next().value); // [1, "18"]
console.log(list.next().value); // [2, "china"]

#####################################################################################

第九部分：ES6中的箭頭函數和擴展
回顧一下ES5中的函數寫法。寫一個函數，進行一個加法計算:
function add(a,b){
return a+b
}
add(2); // undefined
add(2,3); // 2+3 =5

<< 1.默認值
在ES6中給咱們增長了默認值的操做，咱們修改上邊的代碼，能夠看到如今只須要傳遞一個參數也是能夠正常運行的。
function add(a,b=1){ // b 的默認值爲 1
return a+b
}
add(2); // 2+1 = 3
add(2,3); // 2+3 =5

<< 2.主動拋出錯誤
在使用Vue的框架中，能夠常常看到框架主動拋出一些錯誤，好比v-for必須有:key值。那尤大神是如何作到的那？
其實很簡單，ES6中咱們直接用throw new Error( xxxx ),就能夠拋出錯誤。
function add(a,b=1){
if(a == 0){
throw new Error('This is error')
}
return a+b;
}
console.log(add(0));
<< 3.函數中的嚴謹模式
在ES5中就常用嚴謹模式來進行編程，可是必須寫在代碼最上邊，至關於全局使用。在ES6中咱們能夠寫在函數體中，至關於針對函數來使用。
function add(a,b=1){
'use strict'
if(a == 0){
throw new Error('This is error');
}
return a+b;
}
console.log(add(1)); // 瀏覽器報錯，嚴謹模式不容許使用默認值
<< 3.得到須要傳遞的參數個數
使用別人的框架時，不知作別人的函數須要傳遞幾個參數怎麼辦？ES6爲咱們提供了獲得參數的方法(xxx.length).咱們用上邊的代碼看一下須要傳遞的參數個數。
function add(a,b){
'use strict'
if(a == 0){
throw new Error('This is error');
}
return a+b;
}
console.log(add.length); // 2
當其中的a 或 b 含有默認值時 這時候 add.length 爲1.
當其中的a 和 b 都有默認值時 這時候 add.length 爲0.
function add(a,b=1){
'use strict'
if(a == 0){
throw new Error('This is error');
}
return a+b;
}
console.log(add.length); // 2

<< 5.箭頭函數
注：箭頭函數不容許使用 new 構造函數！
add(a,b=1) => a+b;
console.log(add(1,3)) // 4
add(a,b=1) => {
return a+b
}
console.log(add(3)) // 4
注：箭頭函數不容許使用 new 構造函數!!!

第十部分：ES6中的函數和數組補漏

<< 1.對象的函數解構
咱們在先後端分離時，後端常常返回來JSON格式的數據，前端的美好願望是直接把這個JSON格式數據看成參數，傳遞到函數內部進行處理。ES6就爲咱們提供了這樣的解構賦值。
let json = {
a:'小明',
b:'china'
}
function fn({a,b='xiaoming'}){

console.log(a,b);
}
fn(json); // 小明 china

let arr = ['小明','18','china'];
function fun(a,b,c){
console.log(a,b,c);
}
fun(...arr); // '小明' '18' 'china'

<< 2.in的用法
in是用來判斷對象或者數組中是否存在某個值的。

1>. 對象判斷
let obj={
a:'xiaoming',
b:'小明'
}
console.log('a' in obj); //true
2>. 數組判斷 (數組空位的判斷)
先來看一下ES5判斷的弊端，之前會使用length屬性進行判斷，爲0表示沒有數組元素。可是這並不許確，或者說真實開發中有弊端。

let arr=[,,,,,];
console.log(arr.length); // 5

上邊的代碼輸出了5，可是數組中其實全是空值，這就是一個坑啊。那用ES6的in就能夠解決這個問題。

let arr=[,,,,,];
console.log(0 in arr); //false

let arr1=['xiaoming','小明'];
console.log(0 in arr1); // true

注意：這裏的0指的是數組下標位置是否爲空。

<< 3.數組的遍歷方法
1>. forEach

let arr=['小明','18','china'];
arr.forEach((val,index)=>console.log(index,val));

forEach循環的特色是會自動省略爲空的數組元素，至關於直接給咱們篩空了。可是有時候咱們須要這樣的空數組，那就會很是尷尬了。

2>. filter
let arr=['小明','18','china'];
arr.filter(x=>console.log(x));
// 小明
// 18
// china
// []
3>. some
let arr=['小明','18','china'];
arr.some(x=>console.log(x));
// 小明
// 18
// china
// false
4>. map
let arr=['小明','18','china'];
console.log(arr.map(x=>'web'));
// ["web", "web", "web"]
// undefined

<< 4.數組轉換字符串
1>. join()方法
join()方法就是在數組元素中間，加了一些間隔，開發中頗有用處。

let arr=['小明','18','china'];
console.log(arr.join('|'));
// '小明|18|china'

2>. toString()方法
// 轉換時是用逗號隔開了。

let arr=['小明','22','china']; console.log(arr.toString());第十一部分：ES6中對象 << 1.