es6學習筆記(一)

babel : 一個js編譯器

一、let const 

js作用域：全局作用域  、 函數作用域 、塊級作用域（新增）

　　let/const：

• 無變數提升
• 不能重覆定義
• const的值如果是基本數據類型，則定義後不能改變；如果是引用數據類型，則可以改變其中的項
• 存在暫時性死區（TDZ）

1 var arr=[]
2 for(var i=0;i<5;i++){
3     arr[i]=function(){
4         console.log(i);
5     }  
6 }
7 arr[3](); //6

for(let i=0;i<5;i++){
  arr[i]=function(){
      console.log(i);
  }  
}
arr[3]();  //3

Object.freeze()  凍結對象，凍結後無法改變

1 const arr = Object.freeze(['apple','banana'])
2 
3 arr.push('x'); //報錯
4 
5 const arr1 = [1,2]
6 
7 arr1.push(3); //正確操作

二、解構賦值

let a=12,b=5,c=6;
let arr=[12,5,6]
//解構賦值將以上兩者結合
let [a,b,c] = [12,5,6]
console.log(a); //12
console.log(b); //5
console.log(c); //6
//解構賦值左右兩邊格式要保持一致
let json={
    name:'x',
    age:18,
    job:'y'
}
let {name,age,job} = json;
console.log(name) //x
console.log(age) //18
console.log(job) //y

//別名
let {name,age,job:a}=json //a為job的別名
console.log(a) //y

//預設值
let [a,b,c=0] = [1,2]
console.log(a,b,c); //1,2,0

三、字元串模板 ``

優點：可以隨意換行

1 let x=1,y=2;
2 console.log(`abcd${x}efdh${y}`); //'abcd1efdh2'

四、字元串新增

• str.indexOf(item); 返回item在str的位置，沒有則返回-1
• str.includes(item)  查找str中是否存在item，返回true/false
• str.startWidth(item) str是否以item開頭，返回true/false
• str.endWidth(item)  str是否以item結尾，返回true/false
• str.repeat(count) 將str重覆count次
• str.padStart(len,'xx')，填充字元串，len為填充後字元串的長度，XX為填充元素，在字元串開頭填充
• str.padEnd(len,'xx')，填充字元串，同上，在字元串末尾填充

 1 //字元串查找
 2 let str="apple pear pitch";
 3 
 4 str.indexOf('apple'); //0
 5 
 6 str.includes('apple'); //true
 7 
 8 //判斷瀏覽器是否為Chrome
 9 if(navigator.userAgent.includes('chrome')){
10   //……  
11 }
12 
13 str.startsWith('apple'); //true
14 
15 sre.endWidth('apple'); //false
16 
17 let a='x';
18 a.repeat(3); //'xxx'
19 
20 a='09';
21 a.padStart(5,'0'); //00009
22 a.padEnd(5,'0'); //09000

五、函數

 1 //預設參數
 2 function show(a,b){//es5
 3   a = a || 1
 4   b = b || 2
 5   //....  
 6 }
 7 function show(a=1,b=2){//es6
 8 //...
 9 }
10 function test({x=0,y=0}){
11     console.log(x,y)
12 }
13 test({}) //0 0
14 function test1({x=0,y=0}={}){
15 
16 }

1 //預設參數已定義的情況
2 function show(a=5){
3     let a=10  //報錯
4     console.log(a);
5 }

//擴展運算符 ... 作用：[展開數組，剩餘參數]
let arr = ['x','y','z']
console.log(...arr)  //展開x,y,z

//優化arguments轉數組
function show(...a){
     console.log(a); //[1,2,3,4,5]
}
show(1,2,3,4,5)

//es5偽數組轉數組
Array.prototype.slice.all(null,arguments)

//箭頭函數
()=>{ //...  }
let json = {
    id:1,
    show:function(){
        setTimeout(function(){
            console.log(this.id);//this指向window
        },2000);      
    }
}

let json1 = {
    id:1,
    show:()=>{
        setTimeout(function(){
            console.log(this.id);//this指向定義時對象，window
        })
    }
}

箭頭函數與普通函數的區別：

• this指向調用函數對象
• 無arguments。可用...args作為生於參數代替
• 不能用作構造函數

六、數組

數組的迴圈方式：

• arr.forEach()
• arr.map()
• arr.filter()
• arr.some()
• arr.every()
• arr.reduce()
• arr.reduceRight()
• for

forEach  map  filter some  every的參數(handler,this指向)----handler(item,index,array)

reduce和reduceRight的參數：((prev,cur,index,arr)=>{})

　　prev為上一次的返回值，cur為當前值

新增：

• 冪運算 **
• for...of迴圈
• arr.keys() 索引
• arr.values() 值
• arr.entries()  實體

補充：剩餘參數

//複製數組
let arr = [1,2,3]
let arr1 = [...arr]

//偽數組轉數組
let arr2 = Array.from(fake)
let arr3 = [...fake]

//es5
[].slcie.call(fake)

Array上新增方法：

• Array.from()  定義數組
• Array.of()  將一組值轉為數組
• arr.find()   查找數組中第一個符合條件的成員，找不到返回undefined
• arr.findIndex((val,index,arr)=>{...})  查找數組中第一個符合條件的索引，找不到返回-1
• arr.fill(填充的東西，開始位置，結束位置)  填充數組
• arr.includes(item) 數組書否包含item，返回true/false

let obj = {
  0:8,
  1:9,
  2:10,
  length:3
}
let a1 = Array.from(obj);
console.log(a1) //[8,9,10]

let a2 = Array.of(1,2,3,4,5); //[1,2,3,4,5]

a1.find((val,index,arr)=>{
    return val>8;
});//9

七、對象

 1 //對象的簡潔語法
 2 let name = 'name';
 3 let age=18
 4 let obj = {
 5     name,
 6     age,
 7     showA(){//註意這裡千萬不要用箭頭函數
 8         return this.name
 9     }
10 }
11 
12 //Object.is()  用於比較兩個值是否相等
13 NaN == NaN //false
14 Object.is(NaN,NaN) //true
15 +0 == -0 //true
16 Object.is(+0,-0) //false
17 
18 //Object.assign()用於合併對象
19 Object.assign(target,source1,source2,...)

對於Object.assign(): 當屬性重覆時，後面的覆蓋前面的

迴圈：Object.keys()  Object.values()  Object.entries()

解構賦值應用：let {keys,entries,values} = obj;