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?临时数(就是临时的中间结果:前两个数的和)见下图
});

ES6学习总结二(数组的四个方法,字符串)

代码示例一:算平均数

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); //
//注意这里的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>`;
上一篇:用GL画出人物的移动路径


下一篇:【linux】kali安装python2、python3及pip2、pip3