ES5 中的新增方法（查询商品案例）

努力学习前端的小陈

已于 2022-06-03 15:17:08 修改

阅读量598

点赞数

分类专栏： ES5和ES6 文章标签：前端 javascript es6

于 2022-04-07 21:41:55 首次发布

本文链接：https://blog.csdn.net/qq_57587705/article/details/124026992

版权

ES5和ES6 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1. Object.keys() 用于获取对象自身所有的属性

2. Object.defineProperty() 定义对象中新属性或修改原有的属性。(了解)

3. Object.defineProperty() 定义新属性或修改原有的属性。

1、ES5 新增方法概述

ES5 中给我们新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括：

数组方法

字符串方法

对象方法

2、数组方法

迭代(遍历)方法：forEach()、map()、filter()、some()、every()；

1、forEach()

array.forEach(function(currentValue, index, arr))

currentValue ：数组当前项的值

i ndex ：数组当前项的索引

arr：数组对象本身

// 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);

        const arr = ['小红', '你大红', '苏大强', '宝']

        // forEach 循环一旦开始，无法在中间被停止
        arr.forEach((item, index) => {
            console.log('object')
            if (item === '苏大强') {
                console.log(index)
            }
        })

2、filter()

array.filter(function(currentValue, index, arr))

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素 , 主要用于筛选数组

注意它直接返回一个新数组

currentValue : 数组当前项的值

index ：数组当前项的索引

arr：数组对象本身

 // filter 筛选数组
        var arr = [12, 66, 4, 88, 3, 7];
        var newArr = arr.filter(function(value, index) {
            // return value >= 20;
            return value % 2 === 0;
        });
        console.log(newArr);

3、some()

array.some(function(currentValue, index, arr))

some() 方法用于检测数组中的元素是否满足指定条件 . 通俗点查找数组中是否有满足条件的元素

注意它返回值是布尔值 , 如果查找到这个元素 , 就返回 true , 如果查找不到就返回 false.

如果找到第一个满足条件的元素 , 则终止循环 . 不在继续查找 .

currentValue : 数组当前项的值

index ：数组当前项的索引

arr：数组对象本身

在找到对应的项之后，可以通过 return true 固定的语法，来终止 some 循环

 // some 查找数组中是否有满足条件的元素 
        // var arr = [10, 30, 4];
        // var flag = arr.some(function(value) {
        //     // return value >= 20;
        //     return value < 3;
        // });
        // console.log(flag);
        var arr1 = ['red', 'pink', 'blue'];
        var flag1 = arr1.some(function(value) {
            return value == 'pink';
        });
        console.log(flag1);
        // 1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
        // 2. some 也是查找满足条件的元素是否存在  返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环

const arr = ['小红', '你大红', '苏大强', '宝']
arr.some((item, index) => {
            console.log('ok')
            if (item === '苏大强') {
                console.log(index)
                    // 在找到对应的项之后，可以通过 return true 固定的语法，来终止 some 循环
                return true
            }
        })

4、every()

 const arr = [
      { id: 1, name: '西瓜', state: true },
      { id: 2, name: '榴莲', state: false },
      { id: 3, name: '草莓', state: true },
    ]

    // 需求：判断数组中，水果是否被全选了！
    const result = arr.every(item => item.state===true)
    console.log(result)

5、reduce()

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

    // 需求：把购物车数组中，已勾选的水果，总价累加起来！
    /* let amt = 0 // 总价
        arr.filter(item => item.state).forEach(item => {
          amt += item.price * item.count
        })
    
        console.log(amt) */

    // 语法格式：
        //arr.filter(item => item.state).reduce((累加的结果, 当前循环项) => { }, 初始值)
    //reduce的简化形式（把箭头函数简化）
    const result = arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)

    console.log(result)
  </script>

6、查询商品案例

1. 把数据渲染到页面中 ( forEach )

2. 根据价格显示数据

3.根据商品名称显示数据

html代码部分

 <div class="search">
        按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button class="search-pro">查询</button>
    </div>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>产品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>

CSS代码部分

table {
            width: 400px;
            border: 1px solid #000;
            border-collapse: collapse;
            margin: 0 auto;
        }
        
        td,
        th {
            border: 1px solid #000;
            text-align: center;
        }
        
        input {
            width: 50px;
        }
        
        .search {
            width: 600px;
            margin: 20px auto;
        }

JS代码部分

 // 利用新增数组方法操作数据
        var data = [{
            id: 1,
            pname: '小米',
            price: 3999
        }, {
            id: 2,
            pname: 'oppo',
            price: 999
        }, {
            id: 3,
            pname: '荣耀',
            price: 1299
        }, {
            id: 4,
            pname: '华为',
            price: 1999
        }, ];
        // 1. 获取相应的元素
        var tbody = document.querySelector('tbody');
        var search_price = document.querySelector('.search-price');
        var start = document.querySelector('.start');
        var end = document.querySelector('.end');
        var product = document.querySelector('.product');
        var search_pro = document.querySelector('.search-pro');
        setDate(data);
        // 2. 把数据渲染到页面中
        function setDate(mydata) {
            // 先清空原来tbody 里面的数据
            tbody.innerHTML = '';
            mydata.forEach(function(value) {
                // console.log(value);
                var tr = document.createElement('tr');
                tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
                tbody.appendChild(tr);
            });
        }

        // 3. 根据价格查询商品
        // 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
        search_price.addEventListener('click', function() {
            // alert(11);
            var newDate = data.filter(function(value) {
                return value.price >= start.value && value.price <= end.value;
            });
            console.log(newDate);
            // 把筛选完之后的对象渲染到页面中
            setDate(newDate);
        });
        // 4. 根据商品名称查找商品
        // 如果查询数组中唯一的元素, 用some方法更合适,因为它找到这个元素,就不在进行循环,效率更高]
        search_pro.addEventListener('click', function() {
            var arr = [];
            data.some(function(value) {
                if (value.pname === product.value) {
                    // console.log(value);
                    arr.push(value);
                    return true; // return 后面必须写true  
                }
            });
            // 把拿到的数据渲染到页面中
            setDate(arr);
        })

forEach和some区别

var arr = ['red', 'green', 'blue', 'pink'];
        // 1. forEach迭代 遍历
        // arr.forEach(function(value) {
        //     if (value == 'green') {
        //         console.log('找到了该元素');
        //         return true; // 在forEach 里面 return 不会终止迭代
        //     }
        //     console.log(11);

        // })
        // 如果查询数组中唯一的元素, 用some方法更合适,
        arr.some(function(value) {
            if (value == 'green') {
                console.log('找到了该元素');
                return true; //  在some 里面 遇到 return true 就是终止遍历 迭代效率更高
            }
            console.log(11);

        });
        // arr.filter(function(value) {
        //     if (value == 'green') {
        //         console.log('找到了该元素');
        //         return true; //  // filter 里面 return 不会终止迭代
        //     }
        //     console.log(11);

        // });

3、字符串方法

trim() 方法会从一个字符串的两端删除空白字符。

str.trim()

trim() 方法并不影响原字符串本身，它返回的是一个新的字符串。

// trim 方法去除字符串两侧空格
        var str = '   an  dy   ';
        console.log(str);
        var str1 = str.trim();
        console.log(str1);
        var input = document.querySelector('input');
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            var str = input.value.trim();
            if (str === '') {
                alert('请输入内容');
            } else {
                console.log(str);
                console.log(str.length);
                div.innerHTML = str;
            }
        }

4、对象方法

1. Object.keys() 用于获取对象自身所有的属性

Object.keys(obj)

效果类似 for…in

返回一个由属性名组成的数组

 // 用于获取对象自身所有的属性
        var obj = {
            id: 1,
            pname: '小米',
            price: 1999,
            num: 2000
        };
        var arr = Object.keys(obj);
        console.log(arr);
        arr.forEach(function(value) {
            console.log(value);

        })

2. Object.defineProperty() 定义对象中新属性或修改原有的属性。(了解)

Object.defineProperty(obj, prop, descriptor)

obj：必需。目标对象

prop：必需。需定义或修改的属性的名字

descriptor：必需。目标属性所拥有的特性

3. Object.defineProperty() 定义新属性或修改原有的属性。

Object.defineProperty(obj, prop, descriptor)

Object.defineProperty() 第三个参数 descriptor 说明：以对象形式 { } 书写

value: 设置属性的值默认为 undefined

writable: 值是否可以重写。true | false 默认为 false

enumerable: 目标属性是否可以被枚举。true | false 默认为 false

configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false 默认为 false

// Object.defineProperty() 定义新属性或修改原有的属性
        var obj = {
            id: 1,
            pname: '小米',
            price: 1999
        };
        // 1. 以前的对象添加和修改属性的方式
        // obj.num = 1000;
        // obj.price = 99;
        // console.log(obj);
        // 2. Object.defineProperty() 定义新属性或修改原有的属性
        Object.defineProperty(obj, 'num', {
            value: 1000,
            enumerable: true
        });
        console.log(obj);
        Object.defineProperty(obj, 'price', {
            value: 9.9
        });
        console.log(obj);
        Object.defineProperty(obj, 'id', {
            // 如果值为false 不允许修改这个属性值 默认值也是false
            writable: false,
        });
        obj.id = 2;
        console.log(obj);
        Object.defineProperty(obj, 'address', {
            value: '中国山东蓝翔技校xx单元',
            // 如果只为false 不允许修改这个属性值 默认值也是false
            writable: false,
            // enumerable 如果值为false 则不允许遍历, 默认的值是 false
            enumerable: false,
            // configurable 如果为false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为false
            configurable: false
        });
        console.log(obj);
        console.log(Object.keys(obj));
        delete obj.address;
        console.log(obj);
        delete obj.pname;
        console.log(obj);
        Object.defineProperty(obj, 'address', {
            value: '中国山东蓝翔技校xx单元',
            // 如果值为false 不允许修改这个属性值 默认值也是false
            writable: true,
            // enumerable 如果值为false 则不允许遍历, 默认的值是 false
            enumerable: true,
            // configurable 如果为false 则不允许删除这个属性 默认为false
            configurable: true
        });
        console.log(obj.address);