JS基础入门篇(四十三)—ES6(二)
1.对象简洁表示法
原来写法
var name = "lzf";var gender = "male";var fn = function(){console.log(1);}var obj = {name:name,gender:gender,fn:fn,fn2:function(){console.log(2)}};console.log( obj );obj.fn2();obj.fn();
简洁写法
var name = "zm";var gender = "male";var fn = function(){console.log(1);}var obj = {name,gender,fn,fn2(){console.log(2)}};console.log( obj );obj.fn2();obj.fn();
2.Array.map( )
map( ): 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map( ): 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
举例一:
var arr=[10,,12,13];//item:表示数组每一项的值//index:表示下标//arr:表示数组var res=arr.map(function (item,index,arr) {console.log( item,index,arr );})
运行结果:
举例二:
var arr=[10,11,12];
var res=arr.map(function (item,index,arr) {console.log( item,index,arr );arr.shift();
})
运行结果:
举例三:
var arr = [100,,300];arr[10] = 1000;var res = arr.map( function(item){return item * 10} );console.log( res );//[1000, empty, 3000, empty × 7, 10000]console.log( arr );//[100, empty, 300, empty × 7, 1000]
3.Array.filter( )
filter( ) : 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter( ) 不会对空数组进行检测。
注意: filter( ) 不会改变原始数组。
var arr = [1, 5, 8, 7, 2, 4];
var res = arr.filter(item => item < 5);
console.log(res);//[1, 2, 4]
4.Array.every( )
只要有一次 回调函数 执行 返回值 为 假
就立刻 停止
并且 every返回值为假
var arr = [1,-5,2,3,34,54,56];var res = arr.every( item => {console.log( item );return item > 0;});console.log( res );
运行结果:
5.Array.some( )
只要 有一次 回调函数 执行 返回值 为 真
,就立刻 停止 并且 some返回值为真
var arr = [1,-5,2,3,34,54,56];var res = arr.some( item => {console.log( item );return item > 0} );console.log( res );
运行结果:
6.Array.reduce( )
举例说明一:
//reduce( fn[,attr1] )//其中fn是函数,attr1是参数//fn函数有两个参数a,b。//第一次执行a的值为attr1,b的值为数组第0项//第二次执行a指的是第一次执行的返回值,b的值为数组第1项//第三次执行a指的是第二次执行的返回值,b的值为数组第2项//直到遍历数组的全部内容,返回最终结果。var arr = [1,2,3,4,5];var res = arr.reduce( function( a,b ){console.log( a,b );return a+b},100);console.log( res );
运行结果为:
举例说明二:
//reduce( fn )
//其中fn是函数,当没有第二个参数时。
//fn函数有两个参数a,b。
//第一次执行a的值为数组第0项,b的值为数组第1项
//第二次执行a指的是第一次执行的返回值,b的值为数组第2项
//第三次执行a指的是第二次执行的返回值,b的值为数组第3项
//直到遍历数组的全部内容,返回最终结果。
var arr = [1,2,3,4,5];
var res = arr.reduce( function( a,b ){console.log( a,b );return a+b});
console.log( res );
运行结果为:
7.Array.includes( )
includes( ) 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
var arr = [1,2,3,4,undefined,false,5,"a",null,NaN];console.log( arr.includes( "a" ) );//true
console.log( arr.includes( NaN ) );//true
console.log( arr.includes( "1" ) );//false
console.log( arr.includes( null ) );//true
console.log( arr.includes( undefined ) );//true
console.log( arr.includes( false ) );//true
8.Array.fill( )
fill( ):填充数组,返回新数组,改变原来数组。
这个博客对fill( )的用法写的更清楚,想进一步了解请点击
var arr = [1,2,4,3];
var res = arr.fill( ["a","b"]);
console.log( arr );
console.log( res );
运行结果:
9.Array.of( )和Array.from( )
Array.of( )
var arr = Array.of( 4,5,6,7 );
console.log( arr );// [4, 5, 6, 7]
Array.from( ):将类数组转化为数组。有三个参数,并没有深入研究。
<body><ul><li></li><li></li><li></li><li></li><li></li></ul>
<script>var lis = document.getElementsByTagName("li");var res = Array.from( lis );console.log( res );res.push( 2 );console.log( res );
</script>
运行结果:
11.Array.find( )和Array.findIndex( )
find( )函数用来查找目标元素,找到就返回该元素,找不到返回undefined。
findIndex( )函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。
<body>
<ul><li>1</li><li>2</li><li>5</li><li>3</li><li>5</li>
</ul>
<script>var lis = document.getElementsByTagName("li");var res1 = Array.from(lis).find( function( item,index,arr ){console.log( item,index,arr );return item.innerHTML === "50";} );console.log( res1 );//------------------------------------------var res2 = Array.from(lis).findIndex( function( item,index,arr ){console.log( item,index,arr );return item.innerHTML === "5";} )console.log( res2 );
</script>
</body>
运行结果:
JS基础入门篇(四十三)—ES6(二)相关推荐
- FPGA基础入门篇(四) 边沿检测电路
FPGA基础入门篇(四)--边沿检测电路 一.边沿检测 边沿检测,就是检测输入信号,或者FPGA内部逻辑信号的跳变,即上升沿或者下降沿的检测.在检测到所需要的边沿后产生一个高电平的脉冲.这在FPGA电 ...
- JS基础入门篇(四)—this的使用,模拟单选框,选项卡和复选框
1.this的使用 thisjs中的关键字js内部已经定义好了,可以不声明 直接使用 this的指向问题1. 在函数外部使用this指向的是window2. 在函数内部使用有名函数直接调用函数 thi ...
- JS基础入门篇(一)
1.JS存放在代码中的位置 1.JS写在行间 <div style="background-color: red;" onclick="alert(1)" ...
- JS基础入门篇( 一 )
1.JS存放在代码中的位置 1.JS写在行间 <div style="background-color: red;" onclick="alert(1)" ...
- java用netty做tcpserver接收c++消息_netty案例,netty4.1基础入门篇四《NettyServer收发数据》...
小傅哥 | https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获.专注于原创专题案例编写,目前已完成的专题有:Netty4.x实战专题案例.用Java实现JVM.基于Ja ...
- A.深度学习基础入门篇[四]:激活函数介绍:tanh、sigmoid、ReLU、PReLU、ELU、softplus、softmax、swish等
[深度学习入门到进阶]必看系列,含激活函数.优化策略.损失函数.模型调优.归一化算法.卷积模型.序列模型.预训练模型.对抗神经网络等 专栏详细介绍:[深度学习入门到进阶]必看系列,含激活函数.优化策略 ...
- JS基础入门篇(三)— for循环,取余,取整。
1.for循环 1.for的基本简介 作用:根据一定的条件,重复地执行一行或多行代码语法:for( 初始化 ; 判断条件 ; 条件改变 ){代码块} 2.for循环的执行顺序 <body> ...
- 九宫怎么排列和使用_广告视频配音剪映零基础入门教程第二十三篇:剪辑之九宫格教程...
朋友圈最火九宫格视频你们知道是怎样制作的吗?我们常常在玩朋友圈的时候想用九宫格照片,但是你们有没有遇到这种情况,想玩九宫格却发现找不到那么多能用的照片,那这时候怎么办呢?玩腻了平常图片的发法,今天我们 ...
- EGE基础入门篇(二):开始使用EGE
EGE专栏:EGE专栏 上一篇:EGE基础入门篇(一):绘图基础知识 下一篇:EGE基础入门篇(三):开场动画 EGE基础入门篇(二) 文章最后修改时间:2021年6月23日19:30:47 文章目录 ...
最新文章
- 打造一个名博需要多久
- 对ZNNT-5NM力矩传感器进行标定
- Spring全局异常处理
- Spatial Transformer Networks(STN)代码分析
- lk启动流程详细分析
- MVC3中的视图文件
- Hive设计和体系结构
- C语言解析动态html,【c语言】使用gumbo解析HTML
- ApacheCN 2019Q1 总结
- echarts设置网格线颜色
- php获取2次跳转之后的网址,爬虫:获取多次跳转后的页面url
- 如何减小电压跟随器输出电阻_补课贴 | 关于运算放大器和比较器的异同,那些你不得不知道的小知识!...
- android设计个人简历页面_Android程序员简历模板
- 分享一个影视解析接口
- 条件数、奇异值与海森矩阵
- 设置来电铃声、卡2来电铃声、短信铃声、提示铃声、闹铃铃声
- 做一个最简单的上位机
- 划重点 传输层协议 tcp三次握手和四次挥手
- 真空扫街机行业调研报告 - 市场现状分析与发展前景预测
- Google Colab中把pyth3.7版本更换成python3.6(tensorflow1.13)
热门文章
- GDCM:gdcm::JSON的测试程序
- Boost::context模块fiber的jump_mov测试程序
- Boost:ping的测试程序
- ITK:对给定LabelMap的所有LabelObject应用形态学关闭操作
- DCMTK:测试图像像素模块功能
- VTK:Math之1DTupleInterpolation
- OpenCV限制对比度自适应直方图均衡(CLAHE)的实例(附完整代码)
- Qt Creator将QML模块与插件一起使用
- C++实现0-1-knapsack背包问题 (附完整源码)
- C++::CPLEX文件读写