JavaScript对象

1. 创建对象

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
head>

<body>
    <script>
        /************************************ 第一种创建对象的方法: 字面量 ****************************************/
        // var obj = {  };          //空对象
        var obj = {
            Name: 'boy',
            age: 19,
            sex: 'man',
            sayhello: function () {
                console.log('Hello World');
            }, // 形式1 
            sayHi() {
                console.log('hi, world');
            } // 形式2
        }
        console.log(obj.Name);
        console.log(obj['age']);
        obj.sayhello();
        obj.sayHi();
        console.log('------------------------------------------');


        /************************************ 第二种创建对象的方法：new ****************************************/
        var object = new Object();
        object.Name = 'girl';
        object.age = 18;
        object.sex = 'woman';
        object.sayHi = function () {
            console.log('hi');
        }
        console.log(object.age);
        console.log(object['sex']);
        object.sayHi();
        // console.log(Object.keys(object));
        // console.log(Object.getOwnPropertyNames(object));
        console.log('------------------------------------------');


        /************************************ 第三种创建对象的方法：构造函数(类似于C++中的类) ****************************************/
        function Star(Name, Age, Sex) {
            this.name = Name;
            this.age = Age;
            this.sex = Sex;
            this.sing = function (num) {
                console.log('sing a song');
                console.log(num);
            }
            this.dance = function () {
                console.log('dacing');
            }
        }
        var ldh = new Star('ldh', 18, 'man'); //实例化
        console.log(ldh.age);
        ldh.sing(666);
        console.log(ldh);
        console.log('------------------------------------------');

        //遍历对象
        console.log('----------遍历对象');
        for (var k in obj) {
            // console.log(k);      //out 属性名
            console.log(obj[k]); //out 属性值
        }
    script>

    
    
    <script>
        let _object = {
            name: 'XingWei',
            'hobby': 'eat',
            ['age']: 23,
            ['test']: function () {
                console.log('HelloWorld');
            }
        }
        console.log(_object.name);
        console.log(_object.hobby);
        console.log(_object.age);
        _object.test();
    script>
body>

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

2. 内置对象

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 1.
        console.log(Math.max(1,2,1));
        console.log(Math.max());

        // 2.
        console.log(Math.random()); //得到[0,1)之间的小数
        // console.log(Math.random() * (max-min + 1));
        function Random(min,max) {
            return Math.floor(Math.random() * (max-min+1)) + min;
        }
        console.log(Random(1,10));  //[1,10]之间的随机数

        //3. 
        var date = new Date();
        console.log(date);
        console.log(1995,1,4);
        console.log(date.getFullYear());
        console.log(date.getMonth() + 1);
        function getTime() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTime());
        //获取总毫秒数(时间戳)，自1970,1,1（4种方法）
        console.log(new Date().valueOf());
        console.log(new Date().getTime());
        console.log(Date.now());
        console.log(+new Date());       //最为简便
        //倒计时
        function countDown(time) {
            var nowTime = +new Date();
            var inputTime = +new Date(time);
            var times = (inputTime - nowTime) / 1000;   //总秒数
            var day = parseInt(times / 60 / 60 /24);
            var hour = parseInt(times / 60 / 60 % 24);
            var minute = parseInt(times /60 % 60);
            var second = parseInt(times % 60);
            return day + '天' +hour + '时' + minute + '分' + second + '秒';
        }
        console.log(countDown('2021-8-16 23:30:00'));
        console.log(new Date());
    script>
head>
<body>
    
body>
html>
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

3. 对象的引用

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <script>
        /*
            1. 对象的引用：
                如果不同的变量名指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址; 
                修改其中一个变量，会影响到其他所有变量; 
                如下代码：实际上person2 是对 person1的一个引用; 
                console.log(person1 === person2);       // true
        */
        var person1 = {
            num: 101,
            name: 'XingWei'
        }
        var person2 = person1;
        person1.num = 102;
        console.log(person2.num);       // 102
        person2.name = 'XingWeiZi';
        console.log(person1.name);      // 'XingWeiZi'

        
        /*
            2. 这种引用只局限于对象，如果两个变量指向同一个原始类型的值。那么，变量这时都是值的拷贝; 
            console.log(x === y);       // false
        */
        var x = 1;
        var y = x;
        x = 2;
        console.log(y);         // 1
    script>
body>

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

4. 字符串

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
head>

<body>

    <script>
        /*
            1. 基本包装类型：将简单数据类型包装为复杂数据类型，这样基本数据类型就有了属性和方法;
        */
        var str = 'andy'; // 实际上将str包装成了String类型
        console.log(str.length); // 为什么str可以调用length呢？？？

        /*
            第一句代码等价于：
            var temp = new String('andy');
            str = temp;
            temp = null;
        */


        /****************************************************************************************/
        /*
            2. 字符串的不可变性（开辟新内存）
            指的是里面的值不可变，虽然看上去确实改变了内容; 但实际上是地址改变了，是在内存中新开辟了一个内存空间！
        */
        var Str = 'abc';
        Str = 'Hello';

        /*
            当重新给Str赋值时，常量'abc'不会被修改，依然在内存当中; 
            重新赋值'Hello',实际是上在内存中重新开辟空间，用来存放'Hello';
            并且使得Str指向了'Hello'。
            => 所以说，不要随便给字符串赋值, 拼接，，，消耗内存; 
            Notice： 字符串中的所有方法，都不会修改字符串本身（不可变性），操作完成后会返回一个新的字符串; 
        */


        /****************************************************************************************/
        /* 3. 如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠; */
        var longString = 'Long \
       long \
       long \
       string';
        console.log(longString);


        /****************************************************************************************/
        /* 4. 字符串和字符数组: 字符串可以被视为字符数组. */
        var str = 'hello';
        console.log(str[1]);            // 'e'
        str[1] = 'd';               
        console.log(str[1]);            // 'e', 字符串内部的单个字符无法改变和增删，这些操作会默默地失败
        console.log(str.length);        //  5
        str.length = 2;                 //  同样是默默的失败
        console.log(str.length);        //  5
    script>


    <script>
        var str = "How are you doing today?"
        console.log(str.split(" "));        // ["How","are","you","doing","today?"]
        console.log(str.split(""));         // ["H","o","w"," ",,,,,"?"]
        console.log(str.split(" ", 3));     // ["How","are","you"]
        // 注释：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
    script>
body>

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

5. 深浅拷贝

（1）浅拷贝

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
head>

<body>
    <script>
        //1. 基础浅拷贝
        var obj = {
            id: 1,
            name: 'andy',           // 简单数据类型
            msg: {                  // 对象类型
                age: 19
            },
            color: ['pink', 'red']  //数组类型
        };
        var o = {};
        for (var k in obj) {
            o[k] = obj[k]; 
        }
        //浅拷贝：只会拷贝一层，对于更深层次对象，只是拷贝地址，比如说msg
        o.msg.age = 99;
        o.id = 2211;
        o.color[0] = 'green';   // 此时可知o 和 obj对象中的color[0]都变成了'green' 
        console.log(obj);       // 此时可知o 和 obj对象中msg.age都变成了99; 
        console.log(o);         // 但是id依然各自保持; 



        //2. 快速浅拷贝 => 更为简单 => Object.assign()
        console.log('--------------');
        var oo = {};
        Object.assign(oo, obj); //把obj拷贝给oo
        console.log(oo);
    script>
body>

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

（2）深拷贝

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
head>

<body>
    <script>
        var obj = {
            id: 1,
            name: 'andy', 
            msg: { 
                age: 19
            },
            color: ['pink', 'red'] 
        };

        var o = {};
        function deepCopy(newobj, oldobj) {
            for (var k in oldobj) {
                // 1.属于何种类型：简单 OR 复杂
                var item = oldobj[k];       //属性值
                console.log("属性k:" + k + "  " + "属性值item:" + item);
                // 2.是否是数组
                if (item instanceof Array) {
                    newobj[k] = [];                 // k是属性, 相当于newobj.color = []
                    deepCopy(newobj[k], item);      // ([], [pink, red])
                }
                // 3.是否是对象
                else if (item instanceof Object) {
                    newobj[k] = {};                 // newobj.msg = {}
                    deepCopy(newobj[k], item);      // ({}, {age: 99})
                }
                // 4.简单数据类型
                else {
                    newobj[k] = item;
                }
            }
        }
        deepCopy(o, obj);

        o.msg.age = 999;
        console.log(o);
        console.log(obj);
    script>
body>

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

6. ES5新增Array方法

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
head>

<body>
    <script>
        // 1.数组中的 void forEach(function(currentvalue, index, arr) { ...} )
        var arr = [1, 2, 3];
        var sum = 0;
        arr.forEach(function (value, index, arr) {
            // console.log(value);
            // console.log(index);
            // console.log(arr);        //数组对象本身
            sum += value;
            if (value >= 3)
                return;
            /*注意：此处的return并不会像C++中的return，
            这里的意思是：如若此次遍历满足条件，则不往下往下执行下面语句了，
            但是仍然进行下一次遍历，并不是C++中的语法，一遇见return就结束函数！
            也说明了这个forEach是完*/
            console.log('fsfsfsfsfs'); // 2次
        }); 
        console.log(sum);


        // 2.数组中的 Array fliter(function(currentvalue, index, arr))
        // 主要用来筛选数组，直接返回一个新数组; 
        // 这里的return同理于forEach; 
        var arr1 = [12, 66, 4, 88];
        var NewArr = arr1.filter(function (currentvalue, index) {
            // return currentvalue >= 66;      // [ 66, 88], 返回筛选后(也即满足条件)的数组
            if (currentvalue > 66)
                return;
            console.log('fliter'); // 3次
        }); 
        console.log(NewArr);


        // 3.数组中的 bool some(function(currentvalue, index, arr)) 
        // 用于检测数组中的元素是否满足指定条件; 通俗点，就是查找数组中是否有满足条件的元素; 
        // 注意：找到第一个满足条件的值，就终止循环，返回bool值; 
        // Notice: some里面遇到return true就会退出遍历, 表示找到了, 不会执行下面的语句了; 
        //         如果return false, 那就会全部遍历完毕; 
        var arr2 = [10, 30, 4];
        var flag = arr2.some(function (value) {
            return value >= 20;         // true
        }); 
        console.log(flag);


        // 4. map( function(currentvalue, index, arr) { ... } ); 返回一个新数组
        var Arr = [2, 3, 4, 4];
        var _Arr = Arr.map(function (value) {
            return value *= 2;
        });
        console.log(_Arr);


        // 5. every( function(currentvalue, index, arr) { ... } ); 
        var ARR = [-1, 4, 5, 6];
        var _flag = ARR.every(function (value) {
            return value > 1;
        });
        console.log(_flag);     // false( 因为其中的-1 < 1)
    script>
body>

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

7. ES5新增string方法

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>Documenttitle>
head>

<body>
    <input type="text"> <button>点击button>
    <div>div>
    <script>
        // trim 方法去除字符串两侧空格
        var str = '   an dy   ';
        console.log(str);
        console.log(str.length);

        var str1 = str.trim();
        console.log(str1);
        console.log(str1.length);


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

8. ES5新增对象方法

DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Documenttitle> 
head> 
 
<body> 
    <script> 
        // 一. 获取对象自身所有的属性:   Object.keys(selfObj) => 返回一个由属性名组成的数组
        var object = { 
            id: 1, 
            name: 'hello', 
            price: 1999, 
            num: 101 
        } 
        var arr = Object.keys(object);      // [ "id", "name", "price", "num"]    
        arr.forEach(function (value) {
            console.log(value);
        });
        console.log('------------');


        // 二. Object.defineProperty(object, prop, descriptor)：定义新属性或修改原有的属性
            //第三个参数：以对象形式书写{  }
                // value:            设置属性的值，默认是undefined; 
                // writable:         值是否可以被修改，true|false, 默认是false; 
                // enumerable:       目标属性是否可以被枚举，true|false, 默认是false; 
                // configurable:     目标属性是否可以被删除或是否可以再次修改特性, true|false, 默认false; 
        var obj = {
            id: 1,
            name: 'world',
            price: 1999,
            address: '中国制造'
        };
        // obj.score = 199;             //之前方式(新增属性)
        // obj.name = 'hello World';    //之前方式(更改某一属性值)


        /******************************* 新方式 *****************************/ 
        // 1. 新增属性
        console.log('------new add------');
        Object.defineProperty(obj, 'num', {
            value: 1000,
            enumerable: true,
        }); 
        console.log(obj);

        // 2. 修改属性值
        console.log('------writable------');
        Object.defineProperty(obj, 'price', {
            value: 9999
        }); 
        Object.defineProperty(obj, 'id', {
            writable: false,        // 不允许修改
        }); 
        obj.id = 2;
        console.log(obj);

        // 3. enumerable
        console.log('------enumerable------');
        Object.defineProperty(obj, 'address', {
            value: '江苏省苏州市姑苏区xxxxxx单元',
            enumerable: false,              // false：不允许遍历，默认false
            configurable: false,            // false：不允许被删除， 也不允许再次修改address的相关特性
            writable: false
        })  
        console.log( Object.keys(obj) );   // 为什么num也没有呢？ => 因为enumerable默认是false，修改为true即可
                                           // ["id", "name", "price", "num"]; 

        // 4. configurable
        console.log('------configurable-1------');
        delete obj.address;     // 删除属性
        console.log(obj);       // 之前设置了不允许删除, 所有并没有被删除

        // 
        console.log('-----configurable-2-----');
        Object.defineProperty(obj,'address', {
            enumerable: true       
        })  
        console.log(obj);       // 此时ERROR 
            // 因为68行的address属性中的configurable特性设置为false, 
            // 表示不可以再修改address中的特性了; 
            // 但是此处又妄想修改address中的enumerable属性为true，此时报错; 
    script>
body>

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

9. getter和setter

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
     
head>

<body>
    <script>
        /*
            0. [getter]; 
            1. ```在新对象初始化时，可以通过get关键字为对象添加一个getter，作为可读的伪属性```, 
                get语法将对象属性绑定到查询该属性时将被调用的函数; 
            2. 语法：
                    a. get prop() { ... }
                    b. get [expr]() { ... }
                    c. ```prop 和 expr都是位数姓名```; 
                参数：
                    prop:  要绑定到给定函数的属性名; 
                    expr:  从ES6开始, 还可以使用一个计算属性名的表达式绑定到给定的函数; 
            3. 如下所示：这会为object创建一个可读的伪属性latest，它会返回array数组的最后一个元素; 
        */

        // ```形式1. get prop() {}```
        const object = {
            array: ['a', 'b', 'c', 'd'],
            get latest() {
                if (this.array.length === 0) {
                    return undefined;
                }
                return this.array[this.array.length - 1];
            }
        }
        console.log(object.latest); // 'd'


        // ```形式2. get [expr]() {}```
        const expr = 'good';
        const _object = {
            log: [],
            get [expr]() {              // 等价于get ['good']() { ... }
                return 'XingWei';
            }
        };
        console.log(_object.good); // 'XingWei'
        console.log('----------');
    script>


    <script>
        /*
            0. [setter];
            1. 在新对象初始化时，可以通过set关键字为对象添加一个setter，作为可写的伪属性; 
            2. 语法：
                    a. set prop(value) { ... }
                    b. set [expr]() { ... }
                参数：
                    prop:  同getter; 
                    expr:  同getter; 
            3. 如下所示, 定义一个对象的伪属性fullName，当fullName被分配一个值时，将使用该值更新firstName和lastName,
               ``````请注意，fullName属性是未定义的，访问它时将会返回 undefined``````;
        */
        // ```形式1. set prop() {}```
        const Object = {
            firstName: '',
            lastName: '',
            set fullName(value) {
                const names = value.split(' ');
                this.firstName = names[0];
                this.lastName = names[1];
            }
        };
        Object.fullName = 'XingWei Zhang';
        console.log(Object.firstName);  // 'XingWei'
        console.log(Object.lastName);   // 'Zhang'


        // ```形式2. set [expr]() { ... } ```
        const _Object = {
            name: 'XingWei',
            set ['foo'](value) {
                this.name = value;
            }
        };
        console.log(_Object.name);  // 'XingWei'
        _Object.foo = 'XingWeiZi';
        console.log(_Object.name);  // 'XingWeiZi'
        console.log('---------');
    script>


    <script>
        /*
            1. Object.prototype.__defineGetter__; 
            2. Object.prototype.__defineSetter__; 
        */
       const obj = {
           firstName: 'XingWei',
           lastName: 'Zhang'
       };
       // ```getter```
       obj.__defineGetter__('fullName', function() {
           return this.firstName + ' ' + this. lastName; 
       }); 
       console.log(obj.fullName);       // 'XingWei Zhang'


       // ```setter```
       obj.__defineSetter__('name', function(value) {
            const names = value.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
       });
       obj.name = 'Hello World1';
       console.log(obj.firstName);  // 'Hello'
       console.log(obj.lastName);   // 'World'
    script>


    <script>
        /*
            1. Object.defineProperty(): 
                    const obj = {
                        firstName: '',
                        lastName: ''
                    } ;
                    
                    Object.defineProperty(obj, 'fullName', {
                        get: function() {
                            return this.firstName + ' ' + this.lastName; 
                        }
                        set: function(value) {
                            const names = value.split(' ');
                            this.firstName = names[0];
                            this.lastName = names[1];
                        }
                    }); 

            2. Object.defineProperties(): 
                    const obj = {
                        firstName: '',
                        lastName: '',
                        job: ''
                    };

                    Object.defineProperties(obj, {
                        fullName: {
                            get: function() {
                                return this.firstName + ' ' + this.lastName;
                            }, 
                            set: function(value) {
                                const names = value.split(' ');
                                this.firstName = names[0];
                                this.lastName = names[1];
                            }
                        },

                        job: {
                            get: function() {
                                return this.job.toString.toUpperCase(); 
                            }
                            set: function(value) {
                                this.job = value;
                            }
                        }
                    }); 
        */
    script>

    
    <script>
        const student = {
            num: 101,
            book: '',
            get hobby() {
                return 'PingPong'; 
            },
            set read(value) {
                this.book = value; 
            }
        };
        console.log(student.hobby);     // 'PingPong'
        student.read = 'SanGuoYanYi';
        console.log(student.book);      // 'SanGuoYanYi'

        // ```getter(): 确实是将属性添加到了对象上; ```
        // ```setter(): 只是赋值时触发了setter()函数, ..., 但是并没有将属性添加到对象上; ```
        console.log(student.read);      // 'undefined', 只是为read伪属性赋值时会自动调用setter()函数, 但是并不会将其添加到student上
                                        /*
                                            console.log(student);
                                            >student
                                                hobby: 'PingPong'
                                                num: 101
                                                book: 'SanGuoYanYi'
                                                >get hobby(): f hobby()
                                                >set read(): f read(value)
                                                >__proto__
                                                    ...
                                        */  
    script>
body>

html>
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218

10. ES5新增方法案例

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>Documenttitle>
    <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>idth>
                <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 = '' + value.id + '' + value.pname + '' + value.price + '';
                tbody.appendChild(tr);
            });
        }

        
        // 3. 根据价格查询商品
        // 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
        search_price.addEventListener('click', function() {
            // alert(11);
            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) {
                    arr.push(value);
                    return true;    // return后面必须写true, 表示找到了 
                }
            });
            // 把拿到的数据渲染到页面中
            setData(arr);
        }); 
    script>
body>

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

请添加图片描述

相关阅读:
51单片机学习（3）-----独立按键控制LED的亮灭状态
 这款新一代开源免费的轻量级 SSH 终端，我太喜欢了
 数据可视化如何革新智慧物流管理？
win7下安装nodejs16+
su root失败 sudo su成功进入root
hadoop—haddop部署、yarn管理器使用、hdfs的高可用、yarn的高可用、Hbase分布式部署
 接口幂等性详解
 【MySql】MySQL概述及其语法概述
 道可云元宇宙每日资讯｜德国研发元宇宙虚拟战场训练平台
 高精度减法
原文地址：https://blog.csdn.net/TianYanRen111/article/details/130895630