数组的新增方法

最新推荐文章于 2022-09-01 11:27:26 发布
最新推荐文章于 2022-09-01 11:27:26 发布
阅读量327 收藏
点赞数
文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67387108/article/details/124212969
版权

目录

一、map

        ①map方法

        ②map类型

二、filter

三 some、every方法

        ①some方法

        ②every方法

四、reduce方法

一、map

        map方法

给数组中的每一个元素进行特出处理后，返回一个新的数组

举例

//单价数组
let prices=[50,80,90]
prices=prices.map((item,index)=>{
      return item+"元"
})
//简写方式
prices=prices.map(item=>item+"元")
console.log(prices)  //(3) ['50元', '80元', '90元']

案例

//在部分应用接口中，会出现一些问题，例如下图中会出现需要更换将XXX替换为www
let movies=[{id:1,name:"逃学威龙",imgUrl:"http://xxx.douban.com/1.jpg"},{id:2,name:"逃学威龙",imgUrl:"http://xxx.douban.com/2.jpg"},{id:3,name:"逃学威龙",imgUrl:"http://xxx.douban.com/1.jpg"}]
movies=movies.map(item=>{        
     item.imgUrl=item.imgUrl.replace("xxx","www")  //找到数组中的xxx并改为www     
     return item        
})
console.log(movies)  //输出结果网址的xxx变为www

map类型

map类型为object对象的升级版

二、filter

过滤数组中符合要求的元素，并返回一个新数组

举例：挑选一个数组中大于60 的 并返回成一个新的数组

let scores=[80,59,10,55,90,88]
 //拿到当前及格的人的数组
let arr=scores.filter(item=>{
        if(item>60){  
            eturn true;
        }
})
//简写方式
let arr=scores.filter(item=>item>=60)
console.log(arr)//[80,90,88]

案例

let scores=["中国","英国","日本","俄罗斯"]
let arr=scores.filter(item=>{
            if(item.includes("国")){//判断是否含有国
                return true;
            }
})
console.log(arr)//[中国，英国]

三、some、every方法

①some方法  ---   只要有一个符合条件 就返回true

let scores=[80,49,12,50,69]

let result=scores.every(item=>item>=60)

console.log(result)  /true

②every方法 ---  只要有一个不符合就返回FALSE

let scores=[80,49,12,50,69]

let result=scores.every(item=>item>=60)

console.log(result)//false

一般用于：前端校验器（账号、密码、手机号等）

<body>
    <p>用户名：<input type="text" id="username"></p>
    <p>密码：<input type="text" id="mima"></p>
    <button id="login">登录</button>
</body>
//提交AJAX请求前 ，通常需要所有的校验都通过时
let results=[false,false] //校验结果的数组
username.οnblur=function(){
     results[0]=this.value.length>8
}
 mima.οnblur=function(){
     //长度大于8
     if(this.value.length>8){
           results[0]=true
     }else{
          results[0]=false
     }
     // results[0]=this.value.length>8
}
login.οnclick=function(){
//先判断前期的校验是否都通过
let result=results.every(item=>item=true)
    if(result==true){
        console.log(result+"ajax");                
        }             
}
 

四、reduce方法

将数组中的元素整合，返回一个新的内容

4个参数

prev：上一次操作返回的结果 ,可以设置默认值，如果不设置默认值，那么第一个元素就作为第一个prev

item: 本次操作的元素

index:本次操作元素的索引值

array:当前操作的数组

举例 --  数组求和

 let arr=[20,40,50,21]
 let result=arr.reduce((prev,item,index,array)=>{
           console.log("prev"+prev)//prev20
           // console.log("item"+item)//item40第一个不计入循环，所以是40
           // console.log("index"+index)//index1
           // console.log("array"+array)//[20,40,50,21]
           return prev+item
       })
       console.log(result)//131
 

举例 ---  使用reduce拼接字符串给prev设置默认值：
1.所有元素参加循环
2.确定返回内容

//给每一个数组元素  <li>  百度 </li> <li>腾讯</li>>
let result=arr.reduce((prev,item)=>{
    console.log(prev)
    return prev+"<li>"+item+"</li>"
},"")// 给prev设置默认值：""空字符串
console.log(result)
 

举例 ---  利用reduce实现数组去重
let arr=[“百度”,“腾讯”,“阿里”,“字节”,“阿里”,“腾讯”,“百度”]

let result=arr.reduce((prev,item)=>{
//includes判断是有具有指定元素 有t 没有f
      if(!prev.includes(item)){
         prev.push(item)
      }
      return prev
},[ ])
console.log(result)

举例 --- 统计字符的出现次数返回一个对象 统计每一个字符的出现次数 {a:2,w:3}

let arr=["a","b","a","c","a","c"]
let result=arr.reduce((prev,item)=>{
      if(item in prev){   //if条件 当前属性是否在对象内部
      //找到对应属性值 ++
          prev[item]++
      }else{
          prev[item]=1
      }
        return prev
},{})
console.log(result) //[a:3,b:1,c:2]

 

金汤肥牛郭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ES5数组新增方法
Rossbort的博客
08-10 267
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分
利用数组新增方法操作数据
03-08
数组新增方法是ES6中的重要知识点，它们使得处理数组变得更加高效和简洁。在这个“利用数组新增方法操作数据”的练习中，我们将探讨`push`, `pop`, `shift`, `unshift`, `splice`, `concat`, `map`, `filter`, `...
数组新增方法
wanhaixing的博客
06-19 134
数组新增方法 reduce
新增数组方法
weixin_44668640的博客
08-08 447
​ 新增数组方法 indexOf方法 查找某个元素在数组中第一次出现的位置 arr.indexOf(元素,[开始查找的起始下标]); // 参数1：将要查找的元素 // 参数2：可选项。从哪个下标开始往后查找 // 返回值：如果找到了，就返回这个元素在数组中的下标，如果没有找到，就返回-1 var arr = [1,2,3,4,5,1,2,3]; var brr=arr.indexOf(3)//需定义变量接受数据 console.log(brr)//2 这个2就是3第一次出现的下标位置 var arr =
31. 数组新增方法
Mr_LiuP的博客
03-04 905
javascript 新增数组属性
浅谈ES6新增的数组方法和对象
08-29
ES6新增的数组方法和对象 ES6中新增了许多实用的数组方法和对象，下面我们将逐一介绍这些新增的方法和对象。 首先，ES6中新增了遍历数组的方法，使用for...of语句可以遍历数组或对象。例如： ``` let arr = [1, 2,...
ES6中数组array新增方法实例总结
08-28
ES6 中数组 array 新增方法实例总结 ES6 中数组 array 新增了许多有用的方法，这些方法可以帮助开发者更方便地操作数组。下面将对这些方法进行总结和分析。 find 方法 find 方法用于查找数组中第一个符合条件的...
ES5新增数组的实现方法
11-20
下面将详细解释这些新增的数组实现方法： 1. **静态方法 `Array.isArray()`**： `Array.isArray()` 是用来判断一个变量是否为数组的静态方法。在JavaScript中，`typeof`运算符对于数组来说会返回`"object"`，而不...
数组新增
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-21 255
前言 最近研究zepto源码的时候发现一些非常好用的数组方法，这些就是es5新增的数组方法，而w3c这些网站并没有这些方法介绍，可能是太久没更新维护了。总结了一下，给这些方法分了类，大体如下：  5个迭代方法：forEach()、map()、filter()、some()、every()；  2个索引方法：indexOf() 和 lastIndexOf()；  2个归并方法：reduce()、r...
数组新增常用的4个方法
W Y L
02-19 589
map --映射 let arr=[66,59,80]; let result=arr.map(item => { if(item >= 60){ return "及格" }else{ return "不及格" } }); //result:["及格", "不及格", "及格"] reduce --汇总 let arr = [12,69,180,8763]; let resu...
数组新增的方法和字符串的方法
rqq123的博客
11-29 169
数组新增的方法和字符串的方法 数组新增的方法： indexOf(n)返回n在数组中的索引，无就返回-1 forEach() map() filter() 过滤出满足条件的数组元素 some() 只要有一个数组元素满足条件，就返回true every() 每一个数组元素都满足条件，就返回true reduce() 累积 字符串常见方法： charAt(index) 取到对应索引位上的字符 index...
新增数组元素
m0_70552412的博客
06-17 399
我们新增数组元素有两种方法：分别为：1.修改length长度，但是添加完他是undefined空的元素#2.修改索引号，追加数组长度，不能直接给索引号赋值，否则会覆盖掉原来的元素。这种方式为常用的方式。想确切的给一个值，可以通过修改索引号的方式，来追加数组长度，如果原先没有索引号，你就追加，如果原先有的话，再追加，那就会覆盖掉原来的元素。不要直接给数组名赋值，不然会替换掉原来的数组元素1.主要通过循环来追加数组2.要声明一个空白的数组 arr3.通过for循环中的作为计数器的i，来做为数组元素依次存入4.由
数组新增方法：forEach(),map(),filter(),some(),every()
6747的博客
09-01 205
数组新增方法：forEach(),map(),filter(),some(),every()
ES6-----数组新增方法
qq_53441451的博客
03-11 189
数组新增方法： 一、扩展运算符 （...） 例如：var arr=[10,20,30]; var arr1=[1,2,3]; // 将arr与arr1拼接起来 var res=[...arr,...arr1]; 例如： //求取最大值 // ES6 的写法 var arr2=[14, 3, 77] console.log(Math.max(...arr2)); 二、转为数组 ①Array.from()可将两类对象转为真正的数组：类
数组新增东西
Yang_lan1的博客
04-25 297
Array.from() 作用：把类数组转为数组 function demo(){ console.log(arguments);//Arguments(5) [3, 6, 7, 4, 8] console.log(Array.from(arguments));//Array(5) [3, 6, 7, 4, 8] ...
ES6数组新增的方法
qq_37530031的博客
05-01 9508
ES6数组方法 1.JSON数组格式转换Array.from()方法: let people={ 0:'zhangsan', '1':24, //key值必须是0,1,2......可以是数字或者字符串 length:2 //必须有length这个特殊的属性 }; let trans=Array.from(people);//Array.from...
用jq写构造函数、数组新增方法forEach()、filter()方法、some()方法等商品查询案例能够帮助用户按照预设的条件快速的查询商品信息，实现的思路主要是当用户输入指定的价格区间和商品名称后，单击页面中的搜索按钮，页面会展示符合当前条件下的商品信息。
最新发布
05-27
好的，让我来回答你的问题。你想让我用jq写构造函数、数组新增方法forEach()、filter()方法、some()方法等商品查询案例，来帮助用户按照预设的条件快速查询商品信息，对吗？ 首先，我们需要定义一个构造函数来创建商品对象。以下是一个简单的构造函数示例： ``` function Product(name, price, category) { this.name = name; this.price = price; this.category = category; } ``` 接下来，我们可以创建一些商品对象，并将它们存储在一个数组中： ``` var products = [ new Product("iPhone", 1000, "Electronics"), new Product("Macbook", 1500, "Electronics"), new Product("Chair", 50, "Furniture"), new Product("Table", 100, "Furniture") ]; ``` 现在，我们可以使用jQuery的`$.each()`方法来实现我们自己的`forEach()`方法： ``` $.fn.myForEach = function(callback) { return this.each(function(index, element) { callback.call(element, index, element); }); }; ``` 我们可以使用它来迭代`products`数组： ``` $(products).myForEach(function(index, product) { console.log(product.name); }); ``` 接下来，我们可以使用`filter()`方法来筛选商品。以下是一个示例： ``` var filteredProducts = $(products).filter(function(index, product) { return product.price < 100; }); $(filteredProducts).myForEach(function(index, product) { console.log(product.name + ": $" + product.price); }); ``` 最后，我们可以使用`some()`方法来检查是否有符合条件的商品。以下是一个示例： ``` var hasExpensiveProducts = $(products).some(function(index, product) { return product.price > 1000; }); if (hasExpensiveProducts) { console.log("There are expensive products."); } else { console.log("There are no expensive products."); } ``` 以上就是一个简单的商品查询案例的示例代码，希望对你有所帮助。如果你有任何问题，请随时问我！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值