关于HarmonyOS的学习

day25

一、some和every

    var arr = [10, 20, 30, 66, 88, 99]
    //some(): 方法用于检测数组中的元素是否满足指定条件（函数提供）。如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。否则返回false
    //场景：加入购物车
    var res = arr.some(function(item){
        return item >= 30
    })
    console.log(res)
    if(res){
        console.log('改变数量')
    }else{
        console.log('添加')
    }
​
    var arr = [10, 20, 30, 66, 88, 99]
    //every(): 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。如果有一个不符合就返回false
    //全选功能
    var res = arr.every(function(item){
        return item >= 10
    })
    console.log(res)

二、全选功能

    var all = $('.all>input')
    var selects = $('.select>input', true)
​
    all.onclick = function(){
        // 需要知道自身的是否为选中的状态 this.checked 返回true和false
        var state = this.checked
        selects.forEach(function(item){
            item.checked = state
        })
    }
​
    selects.forEach(function(item){
        item.onclick = function(){
            // 注意点：every方法不能给伪数组使用，只能给真正的数组使用
            // Array.from() 可以把伪数组转成真正的数组
            var res = Array.from(selects).every(function(it){
                return it.checked === true
            })
            if(res){
                all.checked = true
            }else{
                all.checked = false
            }
        }
    })
​
    // console.log(Array.from(selects))
    // console.log(Array.from('hello'))
​
    // 注意点：every()方法，如果数组为空的情况下，会直接返回true，不会进行数组的遍历
    var arr = []
    var res = arr.every(function(item){
        console.log(item)
    })
    console.log(res)

三、reduce

        reduce() 
        + 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
        + 参数
          => 参数1表示回调函数
          => 参数2表示计算开始的默认值
        + 回调函数参数
          => 参数1表示累加的结果（是一个变化的值）
          => 参数2表示要进行累加计算的选项（数组元素）

    var arr = [10, 20, 30, 60, 100]
    var sum = arr.reduce(function(result, item){
        return result + item
    }, 0)

    // 二维数组
     var arr = [[10, 20, 30], ['a', 'b'], ['哈哈']]
    // 把二维数组转成一维数组
     var newArr = arr.reduce(function(result, item){
         return result.concat(item)
     })
     console.log(newArr)

四、flat

    // flat() 把可以把多维数组转成指定维数的数组
    // 参数是数值，没有单位
    // Infinity 无限的
    var arr = [[10, 20, 30, [1, 2, 3, ['a', 'b', 'd']]], ['a', ['嘿嘿'], 'b'], ['哈哈', ['呵呵', ['嘻嘻', ['嘤嘤', [66]]]]]]
    // var newArr = arr.flat(3)
    var newArr = arr.flat(Infinity)
    console.log(newArr)

五、ES6模板字符串

1.模板字符串 ​ + 语法 ​ => `` ​ + 可以简化字符串的拼接，模板字符串里面还可以进行换行操作 ​ + 模板字符串里面如果需要解析变量不需要使用加号，直接使用${变量}

2.渲染商品 var miList = [ { id: 1, url: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202407190938_6086b4a2d6895f3f00fe0cbd605239fa.png?thumb=1&w=400&h=400&f=webp&q=90', title: 'Redmi K70 至尊版', desc: '性能魔王 全面进化', price: 2599 }, { id: 2, url: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1f2a2b0cbf65d5d0ba5c715b0215493b.png?thumb=1&w=400&h=400&f=webp&q=90', title: 'Xiaomi MIX Flip', desc: '4.01英寸多功能超大外屏|徕卡光学Summilux镜头', price: 5999 }, { id: 3, url: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202407181428_bcbd77c13f958f6acc18dee8899cb7a1.png?thumb=1&w=400&h=400&f=webp&q=90', title: 'Xiaomi MIX Fold 4', desc: '超轻薄四曲面机身|小米龙骨转轴2.0|全碳纤维支撑架构', price: 8999 }, { id: 4, url: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202407181428_bcbd77c13f958f6acc18dee8899cb7a1.png?thumb=1&w=400&h=400&f=webp&q=90', title: '华为手机', desc: '遥遥领先', price: 19999 }, { id: 5, url: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202407181428_bcbd77c13f958f6acc18dee8899cb7a1.png?thumb=1&w=400&h=400&f=webp&q=90', title: 'apple', desc: '超轻薄四曲面机身|小米龙骨转轴2.0|全碳纤维支撑架构', price: 9998 } ]

    // 获取元素
    var txt = $('input')
    var search = $('button')
    var ul = $('ul')
​
    // 渲染商品列表
    // function render(miList){
    //     var str = ''
    //     miList.forEach(function(item){
    //         str += '<li>'
    //             str += '<img src='+item.url+'>'
    //             str += '<h3>'+item.title+'</h3>'
    //             str += ' <p class="desc">'+item.desc+'</p>'
    //             str += ' <p class="price">'+item.price+'</p>'
    //         str += '</li>'
    //     })
    //     ul.innerHTML = str
    // }
​
    function render(miList){
        miList.forEach(function(item){
            ul.innerHTML += `
                <li>
                    <img src="${item.url}" alt="">
                    <h3>${item.title}</h3>
                    <p class="desc">${item.desc}</p>
                    <p class="price">${item.price}</p>
                </li>
            `
        })
    }
    render(miList)
​
     // 绑定事件
    search.onclick = function(){
        var shopping = miList.filter(function(item){
            return item.title.includes(txt.value.trim())
        })
        // shopping是返回的新的数组数据，把这个数据传递给了render函数，那么它内部就以你新传递的数据为主进行渲染
        render(shopping)
    }

六、ES6声明变量

let => 块级作用域，不能重复声明，没有变量声明提升 const => 块级作用域，专门用来声明常量的（不能修改的数据称之为常量），不能重复声明，没有变量声明提升 var => 没有块级作用域，可以重复声明，存在变量声明提升 块级作用域 =>以代码块为界限作为一个独立的作用域 =>以花括号

注意：for代码整体是一个代码块，有一个块级作用域存在

七、箭头函数

+ 语法 ​ => const fn = ()=>{} ​ + 特点 ​ => 箭头函数是普通函数的一种简化形式 ​ => 箭头函数没有自己的this，如果里面写了this，那么this指向的是箭头函数的上一级代码 ​ => 箭头函数可以省略return ​ + 注意点 ​ => 箭头函数的声明只能是表达式形式的 ​ => 箭头函数如果只有一个形参的时候，小括号可以省略不写 ​ => 箭头函数可以省略return，省略的时候其实可以把花括号也省略 ​ => 如果省略了return和花括号，函数内部向外界返回一个对象的话，那么需要把对象使用小括号进行包裹

八、ES6扩展运算符

+ 语法 ​ => ... ​ + 作用 ​ => 展开 ​ => 合并 ​ => 复制属性 ​ => ...

1.展开数组

    const arr = [10, 20, 30]
    function fn(a, b, c){
        console.log(a, b, c)
    }
    fn(arr[0], arr[1], arr[2])
    //展开数组
    fn(...arr)
    const arr2 = ['a', 'b', ...[10, 20]]
    console.log(arr2)

2.合并

    function fn2(...data){
        console.log(data)
    }
    fn2(10, 20, 30)

3.复制

    let obj1 = {
        name: '张',
        age: 18,
        sex: '男'
    }
    let obj2 = {
        ...obj1
    }
    console.log(obj2) 

    console.log(obj1 == obj2)

九、ES6解构赋值

1.数组解构

    let [a, b, c] = [10, 20, 30]
    console.log(a, b, c)

2.字符串解构

    let [a, b, c, d] = '嘿嘿哈哈'
    console.log(a, b, c, d)

3.对象解构（解析出来的属性必须是对象里面存在的）

    let obj = {
        name: '张三',
        age: 18,
        like: ['篮球', 'rap', '跳舞']
    }
    console.log(obj.name)
    console.log(obj.age)

十、for of

1.遍历方式

    let arr = [10, 20, 30]
    for(let item of arr){
        console.log(item)
    }

2.repeat（）重复

    let str = '他敲代码很牛！<br/>'
    document.write(str.repeat(20))