JavaScript高級教程（20）——ES5新增方法

1.ES5新增方法概述

1.1ES5新增方法概述

ES5中給我們新增了一些方法，可以很方便的操作數組或者字符串，這些方法主要包括：

數組方法
字符串方法
對象方法

1.2數組方法

迭代（遍歷）方法：foreach()、map()、 filter()、some()、every();

currentValue:數組當前項的值
index:數組當前項的索引
arr：數組對象本身

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

map() 方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。
map() 方法按照原始數組元素順序依次處理元素。
注意： map() 不會對空數組進行檢測。
注意： map() 不會改變原始數組。

filter()方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素，主要用於篩選數組
注意它直接返回一個新數組
currentValue:數組當前項的值
index：數組當前項的索引
arr：數組對象本身
filter() 不會對空數組進行檢測，filter() 不會改變原始數組

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //filter篩選數組
        var arr = [12, 66, 4, 88];
        var newArr = arr.filter(function(value, index) {
            return value >= 20;
        });
        console.log(newArr);
    </script>
</body>

</html>

some()方法用於檢測數組中的元素是否滿足指定條件，通俗點查找數組中是否有滿足條件的元素
注意它返回值是布爾值，如果查找到這個元素，就返回true,如果查找不到就返回false
如果找到第一個滿足條件的元素，則終止循環，不在繼續查找
currentValue:數組當前項的值
index：數組當前項的索引
arr：數組對象本身
some() 不會對空數組進行檢測， some() 不會改變原始數組

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //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也是查找滿足條件的元素是否存在  返回的是一個布爾值  如果查找到第一個滿足條件的元素就終止循環
    </script>
</body>

</html>

every() 方法用於檢測數組所有元素是否都符合指定條件（通過函數提供）。

every() 方法使用指定函數檢測數組中的所有元素：
如果數組中檢測到有一個元素不滿足，則整個表達式返回 false ，且剩餘的元素不會再進行檢測。
如果所有元素都滿足條件，則返回 true。
注意： every() 不會對空數組進行檢測。
注意： every() 不會改變原始數組。
商品查詢案例：

<!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 product = document.querySelector('.product');
        var search_pro = document.querySelector('.search-pro');
        setData(data);
        //2.把數據渲染到頁面
        function setData(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(1);
            var newData = data.filter(function(value) {
                return value.price >= start.value && value.price <= end.value;
            });
            // console.log(newData);
            //把篩選完之後的對象渲染到頁面中
            setData(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
                }
            });
            //把拿到的數據渲染到頁面
            setData(arr);
        })
    </script>
</body>

</html>

1.3字符串方法

trim()方法會從一個字符串的兩端刪除空白字符。

trim()方法並不影響原字符串本身，它返回的是一個新的字符串

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text"><button>點擊</button>
    <div></div>
    <script>
        //trim方法去除字符串兩側的空格
        var str = '    andy    ';
        console.log(str);

        var str1 = str.trim();
        console.log(str1);
        var input = document.querySelector('input');
        var btn = document.querySelector('button');
        // console.log(btn);

        var div = document.querySelector('div');
        btn.onclick = function() {
            var str = input.value.trim();
            if (str === '') {
                alert('請輸入內容');
            } else {
                console.log(str.length);

                div.innerHTML = str;
            }
        }
    </script>
</body>

</html>

1.4對象方法

1.Object.keys()用於獲取對象自身所有的屬性

效果類似於for……in
返回一個由屬性名組成的數組

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //1.用於獲取對象自身的所有屬性
        var Obj = {
            id: 1,
            uname: '小米',
            price: 1999,
            num: 2000
        };
        var arr = Object.keys(Obj);
        console.log(arr);
        console.log(arr[1]);
        arr.forEach(function(value) {
            console.log(value);

        })
    </script>


</body>

</html>

2.Object.defineProperty()定義對象中新屬性或者修改原有的屬性

obj:必需。目標對象
prop:必需。需定義或修改原有的屬性
descriptor:必需。目標屬性所擁有的屬性

Object.defineProperty()第三個參數的說明：以對象形式{}書寫

value:設置屬性的值，默認爲undefined
writable:值是否可以重寫，true | false默認爲false
enumerable:目標屬性是否可以被枚舉，true | false默認爲false
configurable:目標屬性是否可以被刪除或是否可以再次修改特性 true | false默認爲false

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //Object.defineProperty()  定義新屬性或者修改原來的屬性
        var Obj = {
            id: 1,
            uname: '小米',
            price: 1999,
        };
        //1.以前的對象添加和修改屬性的方式
        // Obj.num = 1000;
        // Obj.price = 99;
        // console.log(Obj);
        //2. Object.defineProperty()  定義新屬性或者修改原來的屬性
        Object.defineProperty(Obj, 'num', {
            value: 1000
        });
        console.log(Obj);
        Object.defineProperty(Obj, 'price', {
            value: 9.9,

        });
        console.log(Obj);
        Object.defineProperty(Obj, 'id', {
            //不允許修改這個屬性
            writable: true

        });
        Obj.id = 2;
        console.log(Obj);
        Object.defineProperty(Obj, 'address', {
            value: '中國xx市xx',
            writable: false,
            // enumerable如果值爲false  則不允許遍歷，默認值是false
            enumerable: false,
            // configurable 如果值爲false  則不允許被刪除  不允許被修改第三個裏面的特性
            configurable: false

        });
        console.log(Obj);
        console.log(Object.keys(Obj));
        delete Obj.address;
        console.log(Obj);
        delete Obj.uname;
        console.log(Obj);
        Object.defineProperty(Obj, 'address', {
            value: '中國xx市xx',
            writable: true,
            // enumerable如果值爲false  則不允許遍歷，默認值是false
            enumerable: true,
            // configurable 如果值爲false  則不允許被刪除  不允許被修改
            configurable: true

        });
        console.log(Obj.address);
    </script>


</body>

</html>

輸出截圖：

JavaScript高級教程（20）——ES5新增方法

記一次 .NET某工業設計軟件崩潰分析

創建 Vue3 項目

TS + Webpack 整合 Jest

分享5款.NET開源免費的Redis客戶端組件庫

安卓手機如何登錄抖音境外版

golang開發 gorilla websocket的使用

面試官：如果不允許線程池丟棄任務，應該選擇哪個拒絕策略？

Mac卸載 Node npm，升級 Node

嵌入式汽車電子學習路線

uni.showModel內容換行

js學習筆記（6）——作用域、對象、構造函數

JavaScript高級教程（23）——高階函數、函數的閉包、遞歸

js學習筆記（7）——js內置對象（Math、Date、Array、字符串）

js學習筆記——（13）offset系列、client系列

js學習筆記（2）——JavaScript運算符以及優先級

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結