03-Es5新增方法

一、ForEach

    <script>
        //forEach 迭代数组
        var arr = [1, 2, 3]
        var sum = 0
        arr.forEach(function(value, index, array) {
            console.log('数组元素' + value);
            console.log('数组元素对应的下标' + index);
            console.log('数组本身' + array);
            sum += value
        })
        console.log(sum);
    </script>

运行结果:
数组元素1

数组元素对应的下标0

数组本身1,2,3

数组元素2

数组元素对应的下标1

数组本身1,2,3

数组元素3

数组元素对应的下标2

数组本身1,2,3

6

二、filter筛选数组

    <script>
        //filter筛选数组 返回的是一个数组  而且是把所有满足条件的元素返回回来
        var arr = [12, 66, 51, 88]
        var newArr = arr.filter(function(value, index) {
            return value >= 20 && value % 2 == 0;
            //return console.log(value >= 20)返回的是布尔值
        })
        console.log(newArr);
    </script>

运行结果:[66,88]

三、some

    <script>
        //some查找数组
        var arr = [12, 66, 51, 88]
            //some如果找到一个匹配的值 就不会继续向下执行
        var flag = arr.some(function(value, index) { //返回布尔值
            return value > 90
        })
        console.log(flag);
    </script>

运行结果:false

四、map

    <script>
        var students = [{
            id: '1',
            name: '张三',
            class: '大一'
        }, {
            id: '2',
            name: '王五',
            class: '大二'
        }]
        var arr = students.map(function(item) { //将原始的数据提取一部分出来  返回一个新数组
            return {
                id: item.id,
                name: item.name
            }
        })
        console.log(arr);
    </script>

运行结果:
image

五、every

    <script>
        var arr = [1, 2, 3, 4, 5]
            //对数组每一个元素 进行对比 必须要所有数值满足条件才会返回true 否则false
        var newArr = arr.every(function(value) {
            return value > 3
        })
        console.log(newArr);
    </script>

运行结果:false

六、案例

<body>
    按照价格查询:<input type="text" id="text1">-<input type="text" id="text2"><button id="btn1">搜索</button> 按照名称查询:
    <input type="text" id="text3"><button id="btn2">查询</button>
    <table border="1" style="border-collapse:collapse">
        <thead>
            <td>id</td>
            <td>产品名称</td>
            <td>价格</td>
            <tbody>

            </tbody>
        </thead>
    </table>
    <script>
        var data = [{
            id: 1,
            name: '小米',
            price: 3999
        }, {
            id: 2,
            name: 'oppo',
            price: 999
        }, {
            id: 3,
            name: '华为',
            price: 1299
        }, {
            id: 4,
            name: '苹果',
            price: 888
        }, ]

        //1.获取相应的元素
        function f1(mydata) {
            var tbody = document.querySelector('tbody')
            tbody.innerHTML = ''
            mydata.forEach(function(value, index) {
                var tr = document.createElement('tr')
                var Id = index + 1
                tr.innerHTML = '<td>' + Id + '</td><td>' + value.name + ' </td><td>' + value.price + '</td>'
                tbody.appendChild(tr)
            })
        }
        f1(data)



        //获取输入框的id
        var btn1 = document.getElementById('btn1')
        var text1 = document.getElementById('text1')
        var text2 = document.getElementById('text2')

        //按照价格筛选商品
        btn1.onclick = () => {
            if (text1.value == '' || text2.value == '') {
                return alert('请重请输入!')
            }
            var newArr = data.filter(function(value) {
                return value.price >= text1.value && value.price <= text2.value;
            })
            f1(newArr)
        }

        //按照名称筛选商品
        var text3 = document.getElementById('text3')
        var btn2 = document.getElementById('btn2')
        btn2.onclick = () => {
            if (text3.value == '') {
                return alert('请重新输入!')
            }
            var arrs = []
            var flag = data.some(function(value) {
                if (value.name == text3.value) {
                    arrs.push(value)
                    return true
                }
            })
            f1(arrs)
        }
    </script>
</body>

运行结果

七、trim

    <script>
        //trim去除两侧的空格
        var str = ' j  z[ '
        console.log(str);
        console.log(str.trim());
    </script>

八、Obejct.defineProperty

    <script>
        var obj = {
            id: 1,
            name: '小米',
            price: 1111
        }

        //定义新属性或者修改原属性
        Object.defineProperty(obj, 'num', {
            value: 222
        })
        Object.defineProperty(obj, 'id', {
            value: 222
        })
        Object.defineProperty(obj, 'name', {
            writable: false, //不允许修改此属性 默认false
            enumerable: false, //默认false 不允许遍历
            configurable: false //不允许被删除这个属性或修改 默认为false
        })
        console.log(obj);
    </script>

九、reduce

    <script>
        const arr = [{
            id: 1,
            name: '西瓜',
            state: true,
            price: 10,
            count: 1
        }, {
            id: 2,
            name: '哈密瓜',
            state: false,
            price: 20,
            count: 2
        }, {
            id: 3,
            name: '草莓',
            state: true,
            price: 30,
            count: 3
        }]

        //        reduce((累加的结果,当前循环项)=>{},初始值)
        const result = arr.filter(item => item.state).reduce((amt, item) => {
            return amt += item.price * item.count
        }, 0)
        console.log(result);
    </script>

运行结果:100

posted @ 2024-05-30 14:36  _你听得到  阅读(4)  评论(0)    收藏  举报