ES6（2）

最新推荐文章于 2022-08-11 20:44:31 发布
最新推荐文章于 2022-08-11 20:44:31 发布
阅读量560 收藏
点赞数
分类专栏： ES6 文章标签： javascript p2p wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Drunk_Invader/article/details/121879569
版权

一、map方法

       数组增加方法.push 

       .map 是将数组中的每个元素增加特殊处理后，再返回数组

       .replace 表示替换（替换前值，替换后值）

let prices=[20,30,40]  
arr = prices.map(item=>item+'元')  //使用map将其中的每个元素拿出来并加入元，箭头函数
无法使用构造函数
console.log(arr)
案例
let movies=[
    {id:1,name:'逃学威龙',imgUrl:"http://xxx.douban.com/1.png"},
    {id:2,name:'逃学威龙',imgUrl:"http://xxx.douban.com/1.png"},
    {id:3,name:'逃学威龙',imgUrl:"http://xxx.douban.com/1.png"}
]
movies = movies.map(item=>{
      item.imgUrl= item.imgUrl.replace("xxx","www")
    return item
})
 console.log(movies)

二、some 与 every

        .every() 依次 拿出数组中的元素与特定的值进行比较，如果一个返回的是假 整体返回就是假，如果全部返回真 ，则为真  一假既假  返回的是 T OR F

        .some()   一真既真      返回的是 T OR F

//every 表示要每一个成立才返回真
let scores=[88,20,33,55,99,100]
let result = scores.every(item=>{
    return item>=60)}
console.log(result)   //f
//.some有一个为真则为真
let scores=[88,20,33,55,99,100]
let result1 = scores.some(item=>{
    return item>=60)}
console.log(result1)   //t

三、filter过滤

        .filter ()  过滤 后接方法

        filter方法  依次的拿出数组中的元素，返回符合要求元素 返回一个新的数组

        let arr=[1,2,3]
        for(let n=0;n<arr.length;n++){
            console.log(arr[n])
        }
        //forEach 依次拿出数组的元素  item
        arr.forEach(item=>{
            console.log(item)
        })    //依次拿出数组中的元素
<body>
    <button id="bt1">显示所有留言</button>
    <p>
        输入作者：<input type="text" id="bt2">
    </p>
    <button id="bt3">筛选指定作者留言</button>
    <ul id="mes">
        
    </ul>
    <script>
        function Message(name,title,content){
            this.name=name
            this.title=title
            this.content=content
        }    //构造函数 共有类
        let messages=[new Message("张三","今天天气不错","出去玩一天"),new Message("李四","楼上说的不对","今天下雨了"),new Message("张三","你猜不对","哈哈哈"),new Message("王五","你俩有病吧","啊啊啊")]  //数组
        let bt1=document.getElementById("bt1") //获取标签
        let mes=document.getElementById("mes") 
        bt1.onclick=function(){
            let str=""
            messages.forEach(item=>{
                str+=`<li>${item.name}说了${item.title}:${item.content}</li>` //利用反引号进行输入
            })
            mes.innerHTML=str  //加入标签
        }
        let bt3=document.getElementById("bt3")
        let bt2=document.getElementById("bt2")
        bt3.onclick=function(){
            let uname=bt2.value//获取输入作者名称 
            //根据作者名称 对messages数组进行过滤 ，符合要求的元素
            let result=messages.filter(item=>item.name==uname)  //过滤 数组中name等于unmane的值，并返回数组
            //现在result所获得的函数即为赛选后的函数，在利用forEach将其中的值放入str中
            if(result.length>0){
                let str=""
                result.forEach(item=>{
                    str+=`<li>${item.name}说了${item.title}:${item.content}</li>`
                })
                mes.innerHTML=str
            }else{
                let str="<li>没有对应用户</li>"
                mes.innerHTML=str
            }
           
        }

    </script>
</body>

四、reduce 方法

        map 和 filter 依次拿出其中的数   一对一指向

        reduce  依次拿出其中的数  一对多指向

        reduce (prev,item,index,array) 四个参数

        prev 上次操作的返回结果

        item 当前处理的数组元素

        array 当前处理的数组

        默认情况下 表示第一次返回的结果是第一个元素  

        结果返回的是最后一个结果

        let arr=["百度","腾讯","阿里","京东"]
        let result=arr.reduce((prev,item,index,array)=>{
            console.log("prev"+prev)
            console.log("Item"+item)
            console.log("index"+index)
            console.log("--------------------------")
            return item   //返回的是最后一个结果
        })
        console.log(result)  
------------------------------------------------------------------------
        let arr=["百度","腾讯","阿里","京东"]
        let result=arr.reduce((prev,item,index,array)=>{
            console.log("prev"+prev)
            console.log("Item"+item)
            console.log("index"+index)
            console.log("--------------------------")
            return prev     //第一次返回的是百度 始终返回的是上一个结果即为百度
        })
        console.log(result) 
            //利用reduce方法进行求和
            let arr=[1,2,3,5]      
            let result=arr.reduce((prev,item)=>{
                console.log("prev"+prev)
                console.log("Item"+item)
                console.log("--------------------------")
                return prev+item  // 第一次就是0+1 的二次返回的是第一次的结果1 item为2 结果为3，第三次返回的上次结果3 item为3 结果为6 ， 第四次 上次返回的结果是6  所以prev = 6 item为5 结果为11
            },0) // 0 表示的是prev 的初始值
            //     let result=arr.reduce((prev,item)=>item+prev)  //箭头函数简写
            console.log(result)
        let arr=["百度","腾讯","阿里","京东"]
        let result=arr.reduce((prev,item)=>{
            console.log("prev"+prev)
            console.log("Item"+item)
            console.log("--------------------------")
            return prev+"<li>"+item+"</li>"
        },"") //需要对prev设置初始值，若不进行设置，第一个prev为百度，则第一个prev中未加入标签<li></li>
        console.log(result)

五、字符串新增方法

        .repeat()      重复  返回新字符串

        .includes()        是否包含指定内容  返回的 f  或 t

       . indexOf() 返回指定元素的对应位置  没有返回-1

       . startsWith() 是否以什么开头

        .endsWith()  是否以什么结尾

         .trim() 清除前后的空格

        // .repeat(数字) 重复  返回新字符串
        let str="hello world"
        let result=str.repeat(3)
        console.log(result)  //重复3遍的str
--------------------------------------------------------------------
        // includes() 是否包含指定内容
        let str="hello world"
        let result=str.includes("x")
        console.log(result) //f   说明str中没有X
-------------------------------------------------------------------
        //startsWith() 是否以什么开头
        let str="hello world"
        let result=str.startsWith("he")
        console.log(result)  //t  说明str的开头是he
---------------------------------------------------------------------
        // endsWith()  是否以什么结尾
        let imgUrl="1.jpg"
        let result=imgUrl.endsWith("png")
        console.log(result)  //f  说明 imgUrl 的结尾不是png
--------------------------------------------------------------------------
        // trim() 清除前后的空格 ！！！！！
        let str=" hello world "
        console.log(str=="hello world")
        let result=str.trim()   //去掉空格的str
        console.log(result=="hello world")

六、map的数据类型

        对原本的对象类型， 原本的对象类型 key只能是字符串

        map类型 可以让任意类型数据 作为对象的key

        如果是特殊的变量，作为key值，需要使用set get方法 获取值

        let m=new Map() //创建一个map对象
        m.name="王一"
        console.log(m)
-----------------------------------------------------------
<body>
    <button id="bt1">确定</button>
    <script>
        let bt1=document.getElementById("bt1")
        let m=new Map() //创建一个map对象
        m.set(bt1,"5")   //设置bt1的值
        console.log(m)  //输出m的对象为buttim
        console.log(m.get(bt1))  // 5 用get 得到bt1的值 5
    </script>
</body>

七、symbol

        独一无二的值 ，防止出现命名的冲突问题，用于作为对象的key值

        let s=Symbol("name")
        let obj={
            age:21
        }
        obj[s]="王一"

        obj.name="王二"
        obj.s="哈哈"
        console.log(obj) // 无论加入的是obj.name 或者 obj.s都无法改变s中 Symbol的值

八、class属性

        super()方法  父级的构造函数   

        constructor（）公共属性

        extends  前者继承后者

        //普通方法创建
        function People(name,age,height){
            this.name=name
            this.age=age
            this.height=height
        }
        People.prototype.run=function(){
            console.log("正在跑")
        }
        let p1=new People("王一",21,193)
		console.log(p1)
		p1.run()
------------------------------------------------------------
        //class方法创建
        class People{
            //构造函数
            constructor(name,age,height){
                this.name=name
                this.age=age
                this.height=height
            }     //公共属性
            run(){
                console.log("正在跑")
            }     //原型中的方法
        }
        class Student extends People{
            constructor(name,age,height,score){
                //super()方法  父级的构造函数        
                super(name,age,height)              
                this.score=score  //super必须写在 自己属性的上方      
            }
            showInfo(){
                console.log(this.name)   //自己的函数
            }
            run(){
                console.log(this.name+"正在跑")  //若需要修改父级原型中的值 直接修改即可
            }
        }
        let s1=new Student("王一",21,22,65)
        console.log(s1 instanceof Student)
        console.log(s1)

ㄗòs╃牸架
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
es6 阮一峰
02-07
2. **模板字符串**：使用反引号（`）定义，支持字符串插值，使得拼接字符串变得更加简洁。 3. **箭头函数**：使用=>表示，简化了函数的定义，其this指向与所在上下文一致，解决了闭包中this指向的问题。 4. **类与...
es6笔记es6笔记es6笔记
04-03
2. ES6中的类和对象 在ES6之前，JavaScript虽然可以模拟实现类和对象的概念，但语法相对复杂。ES6引入了`class`关键字，使得创建类变得更加直观。类定义了对象的行为和属性，而对象是类的实例，包含了类定义的属性和...
java8 filter 取反_Java8-6-Predicate接口详解
weixin_35012566的博客
02-13 835
上一篇我们学习了Function和BiFunction函数式接口，本篇继续了解下其他常用的函数式接口。先来看下PredicatePredicate函数式接口的主要作用就是提供一个test方法，接受一个参数返回一个布尔类型，Predicate在stream api中进行一些判断的时候非常常用。@FunctionalInterfacepublic interface Predicate {/*** E...
JavaScript基础---函数
weixin_33800593的博客
09-06 66
一、JavaScript函数没有函数重载 1.函数参数arguments对象，类数组对象 正是由于函数体内使用arguments对象接收传递的参数，所以即便你定义的函数只接收两个参数，在调用函数时也未必一定要传递两个参数。 2.函数重载 在其他语言中如Java，所谓函数重载就是方法名相同参数不同的所有方法，因为在Java中只要函数签名(接...
Vue遍历data中某个字段并累加，res.result.forEach方法总结
qq_26780317的博客
12-11 7205
前言：在实际的项目中，有时会遇到将data中返回的数据进行累计求和返显。这时，我们就可以使用forEach()方法进行处理。 forEach的定义和方法： forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。 注意：forEach()对于空数组是不会执行回调函数的。 一、html部分 <div class="tab-content"> <ta...
javascript里面的循环方法：forEach，for-in，for-of总结
foolishbig的博客
12-24 718
写前端，必然会用到循环遍历，特别是当后台数据很多，需要动态渲染数据到前台，循环遍历的方式就及其重要，极大的减少了动态渲染的js的代码，循环方法配合好table标签，非常好用. 首先，先看看内置的forEach()方法 myArray.forEach(function(value)){ console.log(value); } 这种写法简单，但是不能中断循环，不能使用break和re...
map方法的常见使用
qq_63608203的博客
08-01 947
js中map()方法在平时开发中的基本使用
ES6_es6_
09-30
2. **箭头函数** - 箭头函数用 `=>` 表示，语法简洁，没有自己的 this，它会捕获其所在（即定义时）的作用域的 this 值。 3. **模板字符串** - 使用反引号（`）创建字符串，可以方便地插入变量，多行书写更自然。...
es6-promise
04-02
es6-promise.auto.js ,可用于微信小程序开发，小程序里需要
foreach遍历迭代的常见用法
m0_37635053的博客
08-22 2090
foreach遍历迭代的常见用法 代码示例： SELECT honor FROM member_manager_table m LEFT JOIN sys_user_table u ON m.member_id = u.user_id WHERE u.user_id IN #{item} dao层的写法：int queryMemberTotalHonor(List list); foreach...
RDD之foreach和foreachPartition方法
weixin_43866709的博客
03-19 1万+
当我们创建一个RDD，并且执行map操作的时候，会生成一个新的RDD。 而当我们不想要生成新的RDD时，我们要使用foreach或者foreachPartition方法 foreach 当执行完foreach，发现并没有打印出来结果。 这个foreach方法是一个Action方法，而且任务执行的时候是在executor端执行的，所以它会将结果打印到executor端。详细解释请看博客：http...
foreach 循环
MAX的专栏
10-16 326
foreach循环-* 原文地址 http://docs.oracle.com/javase/1.5.0/docs/guide/language/foreach.html*集合迭代的代码实现往往非常臃肿。考虑下面这个例子，它遍历定时器任务并取消它们：void cancelAll(Collection<TimerTask> c) { for (Iterator<TimerTask> i = c
Spark常用算子
qq_51628990的博客
08-11 4194
fullOuterJoin算子(K,,V)格式的RDD和(K,V)格式的RDD，使用fullOuterJoin结合是以两边的RDD出现的key为主，得到(K(Option(V),Option(W)))会产生shuffle,(K,V)格式的RDD和(K,V)格式的RDD按照相同的K，join得到(K,(V,W))格式的数据，分区数按照大的来。取RDD的差集，subtract两个RDD的类型要一致，结果RDD的分区数与subtract算子前面的RDD分区数多的一致。...
foreach用法，常用
热门推荐
一只小小的猿的博客
03-30 3万+
foreach的主要用在构建in条件中，它可以在SQL语句中进行迭代一个集合。foreach元素的属性主要有item，index，collection，open，separator，close。item表示集合中每一个元素进行迭代时的别名，index指定一个名字，用于表示在迭代过程中，每次迭代到的位置，open表示该语句以什么开始，separator表示在每次进行迭代之间以什么符号作为分隔符，cl
Java中的foreach解析
晚晴小筑
03-11 864
foreach是JDK1.5新加入的增强for循环。 语法： for(part1:part2){part3}; // part2 中是一个数组对象，或者是是一个Iterable对象。 // part1 定义了一个局部变量，这个局部变量的类型与 part2 中的对象元素的类型是一致的。 // part3 当然还是循环体。 使用foreach遍历数组 public class Main...
vue2 es6语法报错
最新发布
01-25
在Vue2中，如果你在使用ES6语法时遇到报错，可以尝试以下解决方法： 1. 确保你的开发环境支持ES6语法。Vue2默认支持ES5语法，如果你想使用ES6语法，需要进行一些配置。你可以使用Babel来将ES6语法转换为ES5语法。在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值