JavaScript高级:构造函数和原型-2.3.ES5 中的新增方法

前端小趴菜~时倾

于 2022-11-17 10:23:06 发布

阅读量106

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/shiqing4387/article/details/127898891

版权

JavaScript 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

2.3.1 ES5 新增方法概

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

2.3.2 数组方法

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

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

currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身

练习:14-forEach方法

<script>
        // forEach 迭代(遍历) 数组
        /**
         * 用法:array.forEach(function(currentValue, index, arr))
         * 参数:
         *      currentValue：数组当前项的值
         *      index：数组当前项的索引
         *      arr：数组对象本身


        */
        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>

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

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

 filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组 
 注意它直接返回一个新数组 
 currentValue: 数组当前项的值 
 index：数组当前项的索引 
 arr：数组对象本身

练习:15-filter筛选数组

<script>


        /**
         *  filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,
         *	主要用于筛选数组
        */
        // 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);
    </script>

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

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

 some() 方法用于检测数组中的元素是否满足指定条件. 通俗点 查找数组中是否有满足条件的元素 
 注意它返回值是布尔值, 如果查找到这个元素, 就返回true , 如果查找不到就返回false. 
 如果找到第一个满足条件的元素,则终止循环. 不在继续查找. 
 currentValue: 数组当前项的值 
 index：数组当前项的索引 
 arr：数组对象本身

练习:16-some查找数组中是否有满足条件的元素

<script>
        /**
         *  some() 方法用于检测数组中的元素是否满足指定条件.   通俗点 查找数组中是否有满足条件的元素
         *  注意它返回值是布尔值, 如果查找到这个元素, 就返回true ,  如果查找不到就返回false.
         *  如果找到第一个满足条件的元素,则终止循环. 不在继续查找.
        */
        // some 查找数组中是否有满足条件的元素 
        var arr = [10, 20, 3];
        var flag = arr.some(function (value) {
            // return value >= 20;
            return value<3;
        })
        console.log(flag);
        var arr1 = ['red', 'pink', 'yellow'];
        var flag1 = arr1.some(function (value) {
            
            return value == 'pink';
        })
        console.log(flag1);


        //1.filter 也是查找满足条件的元素,返回的是一个数组,而且是把所有满足条件的元素返回回来
        //2.some 也是查找满足条件的元素是否存在,返回的是一个布尔值,如果查找到第一个满足条件的元素就终止循环
    </script>

**查询商品案例 **

把数据渲染到页面中 (forEach)
根据价格显示数据 (filter)
根据商品名称显示数据

练习:17-商品查询案例-利用数组新增方法操作数据

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        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;
        }
    </style>
</head>


<body>
    <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>


        </tbody>
    </table>
    <script>
        // 利用新增数组方法操作数据
        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 search_pro = document.querySelector(".search-pro");
        var product = document.querySelector(".product");
        setDate(data);
        //2.把数据渲染到页面中
        function setDate(mudata) {
            //清空原来tbody里面的数据
            tbody.innerHTML = '';
            //forEach遍历方法
            mudata.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);
            })
        }
        //普通遍历方法
        // for(var i =0;i<data.length;i++){
        //     // console.log(data[i]);
        //     var tr = document.createElement("tr");
        //     tr.innerHTML = "<td>"+data[i].id+"</td><td>"+data[i].pname+"</td><td>"+data[i].price+"</td>";
        //     tbody.appendChild(tr);
        // }


        //3.根据价格查询商品
        //当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
        search_price.addEventListener('click', function () {
            var newData = data.filter(function (value) {
                // console.log(value);
                return value.price >= start.value && value.price <= end.value;
            })
            // console.log(newData);
            //把筛选完之后的对象渲染到页面中
            setDate(newData);
        })
        //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);
        })
        
    </script>
</body>


</html>

练习:18-forEach和some区别

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


        // });
    </script>

2.3.3 字符串方法

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

str.trim()

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

练习：19-trim方法去除两侧空格

<script>
        // 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;
            }
        }
    </script>

3.4 对象方法

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

Object.keys(obj)

l 效果类似 for…in
l 返回一个由属性名组成的数组

练习:20-Object.keys遍历对象属性

<script>
        // 用于获取对象自身所有的属性
        //Object.keys方法，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名
        /*
            效果类似 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);
        })
    </script>

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

Object.defineProperty(obj, prop, descriptor)

 obj：必需。目标对象 
 prop：必需。需定义或修改的属性的名字 
 descriptor：必需。目标属性所拥有的特性

 Object.defineProperty() 第三个参数 descriptor 说明： 以对象形式 { } 书写 
 value: 设置属性的值 默认为undefined 
 writable: 值是否可以重写。true | false 默认为false 
 enumerable: 目标属性是否可以被枚举。true | false 默认为 false 
 configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false 默认为false

练习:21-Object.defineProperty方法

<script>
        // Object.defineProperty() 定义新属性或修改原有的属性
        var obj = {
            id: 1,
            pname: '小米',
            price: 1999
        };
        // 1. 以前的对象添加和修改属性的方式
        // obj.num = 1000;
        // obj.price = 99;
        // console.log(obj);


        // 2. Object.defineProperty() 定义新属性或修改原有的属性
        /**
         * 参数:
         *  obj：必需。目标对象 
         *  prop：必需。需定义或修改的属性的名字
         *  descriptor：必需。目标属性所拥有的特性
         *      Object.defineProperty()   第三个参数 descriptor 说明： 以对象形式 { } 书写
         *          value: 设置属性的值  默认为undefined
         *          writable: 值是否可以重写。true | false  默认为false
         *          enumerable: 目标属性是否可以被枚举(是否能遍历出来)。true | false 默认为 false
         *          configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false  默认为false
        */
        Object.defineProperty(obj, 'num', {
            value: 1000,
            enumerable:true,
        });
        console.log(obj);
        Object.defineProperty(obj, 'price', {
            value: 9.9,
        });
        Object.defineProperty(obj, 'id', {
            //如果值为false则不允许修改这个属性值,默认为false
            writable: false,
        });
        obj.id = 2;
        console.log(obj);
        Object.defineProperty(obj, 'address', {
            value:'中国河北省邯郸市',
            //如果值为false则不允许修改这个属性值,默认为false
            writable: false,
            //enumerable 如果值为false则不允许遍历,默认为false
            enumerable:false,
            //configurable如果值为false则不允许删除这个属性并且不可以再次修改特性,默认为false
            configurable:false,
        });
        Object.defineProperty(obj, 'address', {
            value:'中国河北省邯郸市',
            //如果值为false则不允许修改这个属性值,默认为false
            writable: true,
            //enumerable 如果值为false则不允许遍历,默认为false
            enumerable:true,
            //configurable如果值为false则不允许删除这个属性并且不可以再次修改特性,默认为false
            configurable:true,
        });
        console.log(obj);
        //Object.keys方法，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名
        console.log(Object.keys(obj));
        delete obj.address;
        console.log(obj);
        delete obj.pname;
        console.log(obj);
    </script>