JavaScript Array map() 方法、箭头函数Arrow_functions的简单用法

最新推荐文章于 2023-06-22 10:15:47 发布
最新推荐文章于 2023-06-22 10:15:47 发布
阅读量843 收藏 1
点赞数
分类专栏： es6 前端开发 箭头函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37279880/article/details/104741963
版权

参考资料：

①菜鸟教程JavaScript Array map() 方法

②MDN箭头函数

结合参考资料，博主写的demo代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Array map() 方法、箭头函数Arrow_functions的简单用法</title>
</head>
<body>
<p>点击按钮获取数组numbers的元素的平方根、数组materials中单词的长度。</p>
<button onclick="myFunction()">点我</button>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
	
<script>
var numbers = [4, 9, 16, 25];
const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];
function myFunction() {
    x = doc
最低0.47元/天 解锁文章
Easy_Lee_willpower
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript中Array.prototype.map()详解
10-25
map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。
Array.prototype.map:符合Array.prototype.map规范的polyfill
05-01
array.prototype.map 符合ES5规范的Array.prototype.map填充程序/ polyfill / replacement可以使用到ES3。 该软件包实现了接口。 它可以在ES3支持的环境中工作并符合。 因为Array.prototype.map依赖于接收方（“ this”值），所以Array.prototype.map出将数组作为第一个参数进行操作。 例子 var map = require ( 'array.prototype.map' ) ; var assert = require ( 'assert' ) ; assert . deepEqual ( map ( [ 1 , 1 , 1 ] , function ( x ) { return x + 1 ; } ) , [ 2 , 2 , 2 ] ) ; assert . deepEqual (
ES6 array.map()用法
jaryle的专栏
05-23 1万+
定义：对数组中的每个元素进行处理，得到新的数组； 特点：不改变原有数据的结构和数据 const array = [1, 3, 6, 9]; const newArray = array.map(function (value) { return value + 1; }); console.log(newArray); console.log(array); 还有一种另外的写法，使用箭...
JavaScript 中的 Array.map() 方法
web15185420056的博客
03-21 1775
大家好，今天我们正在讨论最重要的话题之一。 今天我们在学习map()方法，那么就开始今天的文章吧。 ?? 文章内容 Array.map() 方法是什么？ Array.map() 方法的语法？ Array.map() 方法的使用？ Array.map() 方法示例？ 示例说明 ?? 什么是 Array.map() 方法？ => map() 方法用于数组转换。它接受另一个自定义函数作为参数，并在每个数组项上应用该函数。 ?? Array.map() 方法的语法？ => ?? 使用 Array.ma
ES6新特性-箭头函数
weixin_46115791的博客
08-19 1277
ES6新特性的学习一.箭头函数的基础语法二.箭头函数的高级语法三.箭头函数的this指向 一.箭头函数的基础语法 //一般语法： (参数1, 参数2, …, 参数N) => { 函数声明 } //相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; } (参数1, 参数2, …, 参数N) => 表达式（单一） // 当只有一个参数时，圆括号是省略的： (单一参数) => {函数声明} 单一参数 => {函数声明} // 没有参数的函数应该写成一对
JS 中的=＞箭头函数使用说明
白袍小将的博客
01-03 3321
JS箭头函数的基本使用说明，本文阐述的箭头函数的语法定义与基本使用说明
Array、箭头函数和对象的扩展
ch2362710931的博客
07-10 161
数组的遍历伪数组Array.from() 如何判断是否是数组？函数参数与解构赋值结合参数作用域作用域链：当在JS中使用一个变量的时候，首先JS会尝试在当前作用域下去寻找该变量，如果没有找到，再到它上一层作用域寻找。以此类推直到找到该变量为止，如果最后也没找到，直接报错！ 3.扩展运算符：把数组或者类数组展开用逗号隔开的值，应用场景如下：复制数组 数组合并 剩余参数：把逗号隔开的值组合成一个数组，应用场景如下：不定参数 arguments 解构赋值 二、箭头函数 定义函数的几种方
【JavaScript】数组的映射
最新发布
小秀的博客
06-22 1201
JavaScript数组的映射
React hello world
weixin_42121307的博客
03-13 174
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Page Title&lt;/title&gt; &lt;script type="text/javascript" src="../JS/react.d
箭头函数和js里面的map函数用法
会写Bug的攻城狮
10-18 3217
箭头函数s => s.length或者（a,b）=>{c=a+b*4}，在map方法中写箭头函数，会将箭头函数处理的结果返回到一个新的数组或者其他的可遍历对象。 var a = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryl­lium' ]; //获取每个元素的长度，组成一个数组，方法1 var b = a.map(function(s){return s.length}); //方法2 var c = a.map(s => s.leng.
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
10-16
主要介绍了JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法,结合实例形式分析了javascript函数式编程中箭头函数相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
详解Javascript ES6中的箭头函数(Arrow Functions)
10-21
箭头函数，若有了解过coffeeScript的同学，或许对此印象深刻，因为它可以让语法省略不少，特别是对于回调函数，会让代码更清晰简洁。下面让我们一起来学习学习ES6中的箭头函数。
详解Javascript ES6中的箭头函数(Arrow Functions)_.docx
10-10
详解Javascript ES6中的箭头函数(Arrow Functions)_.docx
ES6学习02 箭头函数
pspxuan的博客
10-12 172
1.基本用法 1.1定义箭头函数 ES6允许了用“箭头”（=>）来定义函数 var f = v => v; // 等同于 var f = function (v) { return v; }; 当函数没有参数或者有多个参数（多于一个）时，需要用括号包裹（代表）参数部分 var f = () => 5; // 等同于 var f = function () { return...
【React】js array的map方法总结
RogerQianpeng的博客
06-30 632
在写React官方教程的示例游戏（三连棋）时，对于map方法有些疑惑，解决之后做一个记录。 代码内容 const moves = history.map((step,move)=>{ const desc = move? 'Go to move #' + move : 'Go to game start'; return ( <li key={mov.
关于forEach和map的使用，使用箭头函数让你更会偷懒
WDNMDDDD的博客
01-09 2886
我们在使用forEach以及map时，首先要明白这两个是什么 forEach和map都是数组的方法，什么是方法，就需要自身去查看之前的学习笔记或者资料了 forEach和map他们都有三个值 首先说forEach（）在我们使用这个数组方法时通常是为了遍历数组内部的值和下标。 forEach（形参1，形参2，形参3） forEach一共有三个形参我们在使用的时候通常用前两个 形参1：遍历数组中的所有值 形参2：遍历数组中的所有值的下标也就是索引 而我们通常将forEach作为常用箭头函数的原因是，rorEac
js reduce实现map_JS异常函数之-箭头函数
weixin_39900206的博客
11-24 212
为了保证的可读性，本文采用意译而非直译。在JS中，箭头函数可以像普通函数一样以多种方式使用。但是，它们一般用于需要匿名函数表达式，例如回调函数。下面示例显示举例箭头函数作为回调函数，尤其是对于map(), filter(), reduce(), sort()等数组方法。const scores = [ 1, 28, 66, 666];const maxScore = Math.max(...sco...
React报错大坑之一：Warning: Functions are not valid as a React child. This may happen if you return a Co...
热门推荐
Easylee的博客
05-16 4万+
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. 翻译： 方法（函数）作为一个React子组件是无效的。 出现这种情况可能是因为： ①你return..
array.map的箭头函数中可以return吗
05-14
可以。在JavaScript中，箭头函数有两种形式：可以使用花括号的多行形式和单行形式。如果你使用多行形式，你需要使用return关键字来显式地返回值。如果你使用单行形式，返回值将被隐式地返回。在Array.map()函数中，你可以使用任何一种形式的箭头函数来返回一个新的数组。下面是两种形式的示例： 使用多行形式： ```javascript const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = numbers.map(number => { return number * 2; }); console.log(doubledNumbers); // [2, 4, 6, 8, 10] ``` 使用单行形式： ```javascript const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = numbers.map(number => number * 2); console.log(doubledNumbers); // [2, 4, 6, 8, 10] ``` 在这两个例子中，我们都使用了箭头函数来将数组中的每个元素翻倍并返回一个新的数组。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值