ES6(2)

一、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)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值