ES6學習總結二（數組的四個方法; 字符串）

數組

1 map　　　　　　 映射　　　　　　一個對一個

如：分數數組[34,56,78,99]映射為[不及格，不及格，及格，及格];

　　等級數組[23,56,89]映射為

　　[

　　　　{name:'lmx',level:1,role:1},

　　　　{name:'zhangsan',level:88,role:3},

　　　　{name:'lisi',level:33,role:2},　　　

　　];

代碼示例一：

let score=[34,56,78,99];
let res=score.map(item=>item>=60?'及格':'不及格');
alert(res);

代碼示例二：

let arr=[12,5,9];

let res=arr.map(function(item){
     return item*2; 
});

alert(res);
   

//簡寫
let result=arr.map(item=>item*2);
alert(result);

 

2 reduce　　　　    匯總　　　　一堆出來一個

算總數　　     [1,2,3] => 6

算平均數         [1,2,3] => 2

代碼示例一：算總數

// reduce參數還原
let arr=[12,69,180,8763];

arr.reduce(function(a,b,c){
      alert（a+','+b+','+c）;
      // 12 69 1
      // undifined 180 2
      // undifined 8763 3
});
//從彈出的結果我們可以看出參數代表的是什么

arr.reduce(function(tmp,item,index){ alert（tmp+','+item+','+inedx）; // item指元素 // index 元素下標 // tmp?臨時數（就是臨時的中間結果：前兩個數的和）見下圖 });

代碼示例一：算平均數

let arr=[1,2,3];

let result=arr.reduce(function(tmp,item,index){
     if(index!=arr.length-1){// 不是最后一次
           return tmp+item;
     }else{                            //最后一次
           return (tmp+item)/arr.length;    
     }
});

alert(result); // 2
//注意這里的arr.length不能寫成this.length 因為此時的this指向window

 

3 filter　　　　　　  過濾器

示例1：過濾出能被3整除的數

let arr=[3,4,5,6,7,8,9];

let res=arr.filter(item=>{
     if(item%3==0){
          return true;  //通過false 和 true 決定是否輸出
     }else{
          return false;
     }  
});

alert(res); // 3 6 9

// 簡化版 因為item%3==0本身就是個布爾值

// let res=arr.filter(item=>item%3==0);

示例2：篩選出1萬以上的商品

let arr=[
     {title:'男鞋',price:300},  
     {title:'女鞋',price:2000}, 
     {title:'男包',price:500}, 
     {title:'女包',price:60000} 
];

let res=arr.filter(json=>json.price>=10000);
console.log(res); //object {title:'女包',price：60000} 

 

4 forEach　　　　    循環（迭代）

let arr=[1,2,3,45];

arr.forEach((index,item)=>{
      alert(index+':'+item);
    // 0:1
    // 1:2
    // 2:3
    // 3:45
});

 

字符串

1. 多了兩個新方法 (返回布爾值)

　　startsWith     以什么開頭

　　endsWith        以什么結尾

let str='asdfgh';
alert(str.startsWith('a')); //true

示例1：判斷網址的類型

let str='http://www.baidu.com';

if(str.startsWith('http://')){
    console.log('普通地址');
}else if (str.startsWith('https://')){
    console.log('安全地址');    
}else if (str.startsWith('git://')){
    console.log('git地址');    
} else{
    console.log('其他');    
}    

示例2：根據后綴判斷類型

let str='1.txt';

if(str.endsWith('.txt')){
　　console.log('文本文件');
}else if(str.endsWith('.jpg')){
　　console.log('圖片類型');
}else{
　　console.log('其他');
}

 

2. 字符串模板

    字符串鏈接

　　a 直接把東西塞到字符串里面    ${東西}

　　b 可以折行

示例1：

//傳統字符串是單雙引號
let str='lmx';
let str="lmx";

//這里是反單引號
let str='lmx';

let res=`you are ${str}`;

console.log(res);// you are lmx

 

示例2：字符串拼接對比

// 傳統字符串連接 不能折行 (缺點：麻煩 )
let title='標題';
let content='內容';

let str='<div>\
        <h1>+title+</h1>\
         <p>+content+</p>\
         </div>';

// ES6 反單引號拼接 可以折行 在拼接大段很有優勢

let str2=`<div>
                <h1>${title}</h1>
                <p>${content}</p>
               </div>`;