ES5 中的新增方法

进阶JavaScript

ES5 中的新增方法

1. 概述

image-20230501173527028

2. 数组方法

2.1 forEach()

image-20230501173543104

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 查看内置对象Array数组的所有方法
// console.log(Array.prototype);

var arr = [312, 321, 123, 345, 4567]
// 原始遍历方法
for (var i = 0; i < arr.length; i++) {
    console.log('每个数组元素' + arr[i]);
}

// forEach 迭代遍历数组
var sum = 0
arr.forEach(function (value, index, array) {
    //参数一是:数组元素
    //参数二是:数组元素的索引
    //参数三是:当前的数组
    // console.log('每个数组元素' + value);
    // console.log('每个数组元素索引号' + index);
    console.log('数组本身' + array);
    sum += value;
});
console.log(sum);
//相当于数组遍历的 for循环 没有返回值

2.2 filter()

image-20230501173653057

1
2
3
4
5
6
7
8
9
10
// filter筛选数组
var arr = [1, 23, 4, 231, 5, 32]
var newArr = arr.filter(function (value, index, array) {
    //参数一是:数组元素
    //参数二是:数组元素的索引
    //参数三是:当前的数组
    // return value > 20//返回大于20的所有数字
    return value % 2 === 0//返回所有偶数
})
console.log(newArr);

2.3 some()

image-20230501173758495

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// some 查找数组中是否有满足条件的元素 ，返回一个布尔值boolean
// 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 也是查找满足条件的元素是否存在  返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环

2.4 三者区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var arr = ['red', 'green', 'blue', 'pink'];
// 1. forEach迭代 遍历
arr.forEach(function(value) {
    if (value == 'green') {
        console.log('找到了该元素');
        return true; // 在forEach 里面 return 不会终止迭代
    }
    console.log(11);
})

// 2.如果查询数组中唯一的元素, 用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);

});

2.5 map与every

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// map方法与forEach类似
// every与some方法类似

// 1.Array.prototype.map() 方法是 JavaScript 中的一个高阶函数，
// 用于对数组中的每个元素执行指定操作，并返回一个新的数组，新数组的每个元素都是原始数组中对应元素执行操作后的结果。
// 该方法接受一个函数作为参数，该函数将被传递给原始数组中的每个元素，并返回一个新值。
// 新值将组成一个新的数组，该数组与原始数组具有相同的长度。
var arr = ["apple", "banana", "orange"];
var newArr = arr.map(function (value) {
    // 将元素改为大写
    return value.toUpperCase();
});
console.log(newArr);
// 在这个例子中，map() 方法将 value 参数设置为数组中的每个元素，并将其传递给函数。
// 函数将每个元素转换为大写字母，并将结果添加到新数组 newArr 中。
// 最后，newArr 包含与原始数组 arr 中相同的元素，但它们都是大写的。
// 需要注意的是，map() 方法不会改变原始数组，而是返回一个新的数组。
// 如果要改变原始数组，应该使用 forEach() 方法或直接修改数组元素。

// 2.Array.prototype.every() 方法是 JavaScript 中的一个高阶函数，用于检查数组中的所有元素是否都满足指定的条件。
// 该方法接受一个函数作为参数，并将该函数应用于数组的每个元素，如果所有元素都满足条件，它将返回 true，否则返回 false。
// 以下是一个使用 every() 方法的例子，检查数组中的所有元素是否都是正整数：
var arr = [123, 456, 789, 234, 345, 678]
var isPositiveInteger = arr.every(function (element) {
    return element > 0 && Number.isInteger(element);
});
console.log(isPositiveInteger);
// 在这个例子中，every() 方法将 element 参数设置为数组中的每个元素，并将其传递给函数。
// 函数检查每个元素是否大于 0 并且是整数，如果所有元素都满足条件，它将返回 true。
// 需要注意的是，如果数组为空，every() 方法将返回 true。
// 如果要检查数组中的任意元素是否满足条件，可以使用 some() 方法。

// 以下是一个使用 every() 方法的例子，检查数组中的所有元素是否都是偶数：
const isEven = arr.every(function (element) {
    return element % 2 === 0
});
console.log(isEven); // false
// 在这个例子中，every() 方法将 element 参数设置为数组中的每个元素，并将其传递给函数。
// 函数检查每个元素是否是偶数，由于数组中有一个元素不是偶数，因此它将返回 false。
// 需要注意的是，every() 方法在遇到第一个不满足条件的元素时就会停止遍历数组，并立即返回 false，因此它可能比 forEach() 方法更有效率。

2.6 查询商品案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!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>
            <!-- <tr>
                <td>123</td>
                <td>123</td>
                <td>123</td>
            </tr>
            <tr>
                <td>123</td>
                <td>123</td>
                <td>123</td>
            </tr>
            <tr>
                <td>123</td>
                <td>123</td>
                <td>123</td>
            </tr> -->
        </tbody>
    </table>
    <script>
        // 利用新增数组forEach方法操作数据
        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 start = document.querySelector('.start')
        var end = document.querySelector('.end')
        var search = document.querySelector('.search-price')
        var product = document.querySelector('.product')
        var query = document.querySelector('.search-pro')

        // 2.将数据渲染到页面中
        // 初始化渲染一遍原始数据
        setData(data)
        function setData(myData) {
            // 初始化清空数据
            tbody.innerHTML = ''
            // data.forEach()：对数组 data 中的每个元素执行给定的函数。
            // function (value, index)：定义一个匿名函数，该函数将被传递给 forEach() 方法，并接受两个参数 value 和 index，表示当前元素的值和索引。
            myData.forEach(function (value, index) {
                var tr = document.createElement('tr')
                // for (var k in data[index])：遍历 data 数组中的 index 元素中的所有属性，将它们存储在变量 k 中。
                for (var k in myData[index]) {
                    var td = document.createElement('td')
                    tr.appendChild(td)
                    td.innerHTML = myData[index][k]
                }

                //不可取：tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
                tbody.appendChild(tr)
            })
        }

        // 3.根据价格查询商品
        // 当我们点击了按钮，就可以根据商品价格去筛选数组里的对象
        search.addEventListener('click', function () {
            var newData = data.filter(function (value) {
                return value.price >= start.value && value.price <= end.value
            })
            // 将筛选完的数据渲染到页面
            setData(newData)
        })

        // 4.根据商品名查找商品
        // 如果查询数组中的唯一元素，用some方法更合适，因为它找到这个元素，就不再进行循环，效率更高
        query.addEventListener('click', function () {
            var newData = new Array()
            data.some(function (value) {
                if (value.pname === product.value) {
                    newData.push(value)
                    return true
                }
            })
            // 将筛选完的数据渲染到页面
            setData(newData)
        })

    </script>
</body>

</html>

3. 字符串方法

image-20230501174101056

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
</head>

<body>
    <input type="text"> <button>点击</button>
    <div></div>
    <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>
</body>

</html>

4. 对象方法

4.1 Object.keys()

image-20230501174202193

1
2
3
4
5
6
7
8
9
10
11
12
// 用于获取对象自身所有的属性
var obj = {
    id: 1,
    pname: '小米',
    price: 1999,
    num: 2000
};
var arr = Object.keys(obj);
console.log(arr);
arr.forEach(function(value) {
    console.log(value);
})

4.2 Object.defineProperty()

image-20230501174237018

image-20230501174246662

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// 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, prop, descriptor)
// obj: 必需。目标对象
// prop: 必需。需定义或修改的属性的名字
// descriptor: 必需。目标属性所拥有的特性

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

// 2.1添加属性
Object.defineProperty(obj, 'num', {
    value: 1000,
    enumerable: true
});
console.log(obj);

// 2.2修改属性
Object.defineProperty(obj, 'price', {
    value: 9.9
});
console.log(obj);

// 2.3禁止修改
Object.defineProperty(obj, 'id', {
    // 如果值为false 不允许修改这个属性值 默认值也是false
    writable: false,
});
obj.id = 2;
console.log(obj);

Object.defineProperty(obj, 'address', {
    value: '中国山东蓝翔技校xx单元',
    // 如果只为false 不允许修改这个属性值 默认值也是false
    writable: false,

    // 2.3遍历
    // enumerable 如果值为false 则不允许遍历, 默认的值是 false
    enumerable: false,

    // 2.4删除
    // 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);

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~