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); //
//注意这里的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>`;
ES6学习总结二(数组的四个方法,字符串)的更多相关文章
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- JS 中检测数组的四种方法
今天和大家分享一下 JS 中检测是不是数组的四种方法,虽然篇幅不长,不过方法应该算是比较全面了. 1. instanceof 方法 instanceof 用于检测一个对象是不是某个类的实例,数组也是一 ...
- es6学习笔记一数组(上)
最近公司没什么事情,我们老大让我看看es6,小颖就练习了下数组的各个方法,今天先给大家分享一部分.嘻嘻,希望对大家有所帮助. every方法: 概述: every() 方法测试数组的所有元素是否 ...
- ES6学习笔记二
字符串遍历 var str = 'hello'; for(let s of str){console.log(s += ' ')} //h e l l o 字符串查找:添加了include(str,i ...
- ES6学习笔记(数组)
1.扩展运算符:, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 用于函数调用 function add(x, y) { r ...
- ES6学习笔记(二)
Set 和 Map 数据结构 1.set 基本用法 ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值 Set本身是一个构造函数,用来生成Set数据结构 const s ...
- ES6学习笔记之数组
1.拓展运算符 含义 拓展运算符是三个点(...),功能是将数组或类数组对象展开成一系列用逗号隔开的值.如下面代码: console.log(...[1, 2, 3]); //1 2 3 consol ...
- es6学习笔记一数组(下)
entries() 方法: 概述: entries() 方法返回一个 Array Iterator(数组迭代) 对象,该对象包含数组中每一个索引的键值对. 示例: let arr = [&quo ...
- Java编程思想学习(十二) 数组和容器
一.数组 1).数组的多种初始化方式 下面总结了初始化数组的多种方式,以及如何对指向数组的引用赋值,使其指向另一个数组对象.值得注意的是:对象数组和普通数组的各种操作基本上都是一样的:要说有什么不同的 ...
- ES6学习笔记之数组的扩展
✏️1. 扩展运算符 扩展运算符(spread)是三个点(...),将一个数组转为用逗号分隔的参数序列. 普通用法 console.log(...[1,2,3]);//1 2 3 数组拷贝(普通类型深 ...
随机推荐
- [bzoj4552][Tjoi2016&Heoi2016]排序-二分+线段树
Brief Description DZY有一个数列a[1..n],它是1∼n这n个正整数的一个排列. 现在他想支持两种操作: 0, l, r: 将a[l..r]原地升序排序. 1, l, r: 将a ...
- Python世界里的赋值运算符
Python赋值运算符 以下假设变量a为10,变量b为20: "=" 的作用是把右边的数值赋值给左边的变量 示例1:编程实现145893秒是几天几小时几分钟几秒钟? total = ...
- Caused by: java.lang.ClassCastException: org.springframework.web.SpringServletContainerInitializer cannot be cast to javax.servlet.ServletContainerInitializer错误解决办法
严重: Failed to initialize end point associated with ProtocolHandler ["http-bio-8080"] java. ...
- Java文件及文件夹的创建与删除
功能 这个实例实现了在D盘创建一个文件和文件夹,并删除它们. 函数介绍 createNewFile():当文件不存在时,根据绝对路径创建该文件. delete():删除文件或者文件夹. ...
- 【SSH框架】系列之 Spring 整合 Hibernate 框架
1.SSH 三大框架整合原理 Spring 与 Struts2 的整合就是将 Action 对象交给 Spring 容器来负责创建. Spring 与 Hibernate 的整合就是将 Session ...
- 《Java编程思想》读书笔记
前言 这个月一直没更新,就是一直在读这本<Java编程思想>,这本书可以在Java业界被传神的一本书,无论谁谈起这本书都说好,不管这个人是否真的读过这本书,都说啊,这本书很好.然后再看这边 ...
- ul 和 ol 标签的相关设置
初学者不喜欢 ul 标签的最重要一点莫过于其前面的黑点了,每次写个无序列表其前面总有一个黑点是个很讨厌的事,去掉黑点的话自然是要用到 list-style:none:这条css 属性设置了. p.p1 ...
- caffe+GAN︱PPGN生成模型5则官方案例(caffe版)
一.效果与架构 PPGN 整合了对抗训练.cnn特征匹配.降噪自编码.Langevin采样:在NIPS2016得到了Ian Goodfellow的介绍. PPGN生成的图像同类差异化大,可根据指定生成 ...
- Davinci DM6446开发攻略——linux-2.6.18移植
TI DAVINCI 使用最新的内核是montavista linux-2.6.18,之前说过,国内很多公司,包括开发板的软件包,一直在使用montavista linux-2.6.10,这个版本准 ...
- BIOS简介
BIOS简介: BIOS是英文"Basic Input Output System"的缩略词,直译过来后中文名称就是"基本输入输出系统".其实,它是一组固化到计 ...