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>`;