JavaScript基础知识day06

一、原型链

1.原型链：

                万物皆对象，在js中对象和对象之间也是有联系的，并不是独立存在的。对象之间的继承关系是通过prototype指向父类对象，知道指向Object为止，这样形参的原型链式结构，叫做原型链

                eg：

                    var p1 = new Person();

                    p1继承Person , Person 继承Object

 

2.原型的作用：

                节省空间

                实现继承

                    1.将子类的原型对象指向父类

                    2.call改变this指向

                    3.组合继承

3.练习题

3.1

    <script src="">
        function One() {}

        function Two() {}

        function Three() {}
        Two.prototype = new One();//Two.prototype.__proto__== One.prototype
        Three.prototype = new Two();//Three.prototype.__proto__==Two.prototype
        var three = new Three();//three.__proto__==Three.prototype
        console.log(three);//Three()
        console.log(three.__proto__ === Three.prototype);//true
        console.log(three.__proto__.__proto__ === Two.prototype);//true
        console.log(three.__proto__.__proto__.__proto__ === One.prototype);//true
        console.log(three.__proto__.__proto__.__proto__.__proto__ === Object.prototype);//true
        //one.prototype.__proto__ == object.prototype
    </script>

3.2

    <script src="">
        function SuperType(name) {
            this.name = name;//this对象添加name属性
            this.colors = ["red", "blue", "green"];//this对象添加colors属性
        }
        SuperType.prototype.sayName = function () {//SuperType.prototype添加sayName
            console.log(this.name);
        };

        function SubType(name, age) {
            SuperType.call(this, name); //this指向改变
            this.age = age; //this对象添加age属性
        }
        SubType.prototype = new SuperType(); //SubType.prototype.__proto == SuperType.prototype

        SubType.prototype.sayAge = function () { //SubType.prototype添加sayAge
            console.log(this.age);
        };

        var instance1 = new SubType("Nicholas", 29); //instance1.__proto__==SubType.prototype
            //instance1 ={age:29}

        instance1.colors.push("black");//instance1.colors属性末尾添加"black"
        console.log(instance1.colors);//"red", "blue", "green","black"
        instance1.sayName(); //调用instance1.sayName()  //Nicholas
        instance1.sayAge();//instance1.sayAge()  //29
        //instance1.__proto__==SubType.prototype
        //SubType.prototype.__proto__==SuperType.prototype
        //SuperType.prototype.__proto__==Object.prototype

        var instance2 = new SubType("Greg", 27);//instance2.__proto__==SubType.prototype
        console.log(instance2.colors);//"red", "blue", "green"
        instance2.sayName();//调用instance2.sayName() //Greg
        instance2.sayAge();//instance2.sayAge() //27
        //instance2.__proto__==SubType.prototype
        //SubType.prototype.__proto__==SuperType.prototype
        //SuperType.prototype.__proto__==Object.prototype
    </script>

3.3

    <script src="">
        function Person() {
            this.name = 'qwer';//this对象添加name属性
        }
        var person1 = new Person();//person1.__proto__==Person.prototype
        Person.prototype.w = '这是Person的w属性';//Person.prototype添加w属性
        Function.prototype.q = '这是Function的q属性';//Function.prototype添加q属性
        Object.prototype.e = '这是Object的e属性';///Object.prototype添加e属性
        //person1.__proto__==Person.prototype
        //Person.prototype.__proto__==Object.prototype

        //person.__proto__ == Function.prototype
        //Function.prototype.__proto__ == Object.prototype

        console.log(person1.w);//'这是Person的w属性'
        console.log(person1.q);//undefined
        console.log(person1.e);//'这是Object的e属性'

        console.log(Person.w);//undefined
        console.log(Person.q);//'这是Function的q属性'
        console.log(Person.e);//'这是Object的e属性'

        //Function.__proto__==Function.prototype
        //Function.prototype.__proto__ == Object.prototype
        console.log(Function.q);//'这是Function的q属性'
        console.log(Function.e);//'这是Object的e属性'

        //Object.__proto__==Function.prototype
        //Function.prototype.__proto__ == Object.prototype
        console.log(Object.q);//'这是Function的q属性'
        console.log(Object.e);//'这是Object的e属性'

        // Object.__proto__  === Function.prototype
        console.log(Object.__proto__ === Function.prototype);//true
        console.log(Function.prototype.__proto__ === Object.prototype);//true
        console.log(Object.__proto__.__proto__ === Object.prototype);//true
        console.log(Object.__proto__.__proto__.__proto__);//null
    </script>

二、数组的方法

1.concat()方法，将多个数组拼接成一个数组,返回值是一个新数组，不会影响到原数组

        var arr2 = ['hello', true];

        console.log(arr.concat(arr2));
        console.log(arr.concat(1, 'hello'));

2.indexof()方法，查找指定元素，存在返回元素第一次出现的位置(index)，不存在返回-1

            从前往后遍历

            indexof(ele，startindex)

                ele：表示查找的元素

                startindex(可选)：从哪个位置开始查找，默认从0开始

        var arr = [1, 2, 3, 4, 5, 6];
        console.log(arr.indexOf(9));//-1
        console.log(arr.indexOf(4, 3));//3

3.lastIndexOf(ele,startindex):返回元素最后一次出现的为位置，存在返回index，不存在返回-1

                从后往前遍历

                ele：表示查找的元素

                startindex(可选)：查找范围[0,startindex-1]，默认数组长度

4.sort()方法：数组排序,会影响原数组

         sort(function(m,n){return m-n})；

        var arr = [22, 3, 53, 75, 21, 34, 64];
        console.log(arr.sort(function(a,b){return a-b;}));// [3, 21, 22, 34, 53, 64, 75]

5.数组转成字符串

                toString(),String()

                数组的方法：join("分隔符"); 元素和元素之间存在分隔符

        var arr = [true, "hello", 1, 2, 5, 1, 7,'sa'];

        console.log(arr.toString());//true,hello,1,2,5,1,7,sa

        console.log(arr.join('-'));//true-hello-1-2-5-1-7-sa

三、数组迭代器方法（不生成新数组）

1.forEach ()     遍历数组

                forEach(function(ele,index,arr){

                    ele:表示数组中的每一个元素

                    index：表示数组中元素的下标

                    arr：表示源元素

                })

        var arr = ['hello', true, 666];
        console.log(arr.forEach(function (el, ind, arr) {
            console.log(el, ind, arr);
        }));

2.every()    每个元素都为真为真

                every(function(ele,index,arr){

                    ele:表示数组中的每一个元素

                    index：表示数组中元素的下标

                    arr：表示源元素

                })

        var arr = [1,2,3,4,5,6,7];
        var res = arr.every(function (el, ind, arr) {
            console.log(el, ind, arr);
            return el > 2;
        })
        console.log(res);

3.some()     一真为真

                some(function(ele,index,arr){

                    ele:表示数组中的每一个元素

                    index：表示数组中元素的下标

                    arr：表示源元素

                })

       var arr = [1,3,5,7,8,9];
       var res = arr.some(function (el, ind, arr) {
            console.log(el);
            return el % 2 == 0 ;
        })
        console.log(res);

四、练习题

<body>
    <table border="1">
        <thead>
            <tr>
                <th>名称</th>
                <th>类型</th>
                <th>价格(￥)</th>
                <th>颜色</th>
            </tr>
        </thead>
        <tbody class="tb1 tb2 tb3"></tbody>
    </table>

    <script src="./product.js"></script>

    <script src>
        // 将数组放到界面上
        var tb1 = document.querySelector(".tb1");
        var s1 = '';
        arrProduct.forEach(function (ele) {
            s1 += `<tr>
                    <td>${ele.name}</td>
                    <td>${ele.type}</td>
                    <td>${ele.price}</td>
                    <td>${ele.color}</td>
                </tr>`;
        });
        tb1.innerHTML = s1;
    </script>

    <script src="">
        // 将数组中的商品按照价格排序之后放到下表中

        arrProduct.sort(function (a, b) {
            return a.price - b.price;
        });
        //console.log(arrProduct);
        var tb2 = document.querySelector(".tb2");
        var s2 = '';
        arrProduct.forEach(function (ele) {
            s2 += `<tr>
                    <td>${ele.name}</td>
                    <td>${ele.type}</td>
                    <td>${ele.price}</td>
                    <td>${ele.color}</td>
                </tr>`;
        });
        tb2.innerHTML = s2;
    </script>

    <script src="">
        //将数组中的第二个到第四个商品显示到下表中
        var newarr = [];
        for (let i = 1; i < 4; i++) {
            newarr.push(arrProduct[i]);
        }
        //console.log(newarr);
        var tb3 = document.querySelector(".tb3");
        var s3 = '';
        newarr.forEach(function (ele) {
            s3 += `<tr>
                    <td>${ele.name}</td>
                    <td>${ele.type}</td>
                    <td>${ele.price}</td>
                    <td>${ele.color}</td>
                </tr>`;
        });
        tb3.innerHTML = s3;
    </script>

    <script src="">
        /* 
            1.数组去重 for循环
        */
        var arr = [true, "hello", 1, 2, 5, 1, 1, 5, 7, true];
        Array.prototype.quchong = function (startindex) {
            var arr2 = [];
            if (startindex == undefined) {
                startindex = 0;
            }
            for (var i = 0; i < this.length; i++) {
                arr2[i] = this[i];
            }
            console.log(arr2);
            for (var j = startindex; j < arr2.length - 1; j++) {
                for (var k = j + 1; k <arr2.length; ) {
                    if (arr2[j] === arr2[k]) {
                        arr2.splice(k, 1);
                        k=k;
                    } else {
                        k++;
                    }
                }
            }
            return arr2;
        }
        console.log(arr.quchong());
    </script>

    <script src="">
        /*
            2.数组去重 indexof()方法
        */
        var arr = [true, "hello", 1, 2, 5, 1, 1, 5, 7, true];
        Array.prototype.quchong = function (startindex) {
            if (startindex == undefined) {
                startindex = 0;
            }
            for (var i = 0; i < this.length - 1;) {
                if (this[i] === this[this.indexOf(this[i], i + 1)]) {
                    console.log(this[i]);
                    this.splice(this.indexOf(this[i], i + 1), 1);
                    i = i;
                }
                else {
                    i++;
                }
            }
            return arr;
        }
        console.log(arr.quchong());
    </script>

    <script src="">
        /* 数组中的最大值第一种  sort排序*/
        var arr = [33, 21, 5, 1, 63, 32, 14];
        arr.sort(function (a, b) { return b - a; })
        console.log(`最大值为：${arr[0]}`);//最大值为：63

    </script>

    <script src="">
        /* 数组中的最大值第一种  比较*/
        var arr = [33, 21, 5, 1, 63, 32, 14];
        var sum = -Infinity;
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] > sum) {
                sum = arr[i];
            }
        }
        console.log(`最大值为：${sum}`);
    </script>

    <script src="">
        /* 数组中的最大值第一种  手动排序*/
        var arr = [2, 33, 21, 5, 1, 63, 32, 14];
        var sum = 0;
        for (let i = 0; i < arr.length ; i++) {
            for (let j = 0; j < arr.length - 1; j++) {
                if (arr[j] < arr[j + 1]) {
                    sum = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = sum;
                }
            }
        }
        console.log(arr);
        console.log(`最大值为：${arr[0]}`);

    </script>

    <script src="">
        /* 自己写indexof方法 */
        var arr = [2, 33, 21, 5, 1, 63, 32,5, 14];
        Array.prototype.MyIndexof = function(ele,startindex){
            if (startindex==undefined) {
                startindex=0;
            }
            for (let i = startindex; i < this.length; i++) {
                if (this[i] == ele) {
                    return i ;
                }
            }
            return -1;
        }
        console.log(arr.MyIndexof(5,1));//3
        console.log(arr.MyIndexof(21));//2
        console.log(arr.MyIndexof(11));//-1
    </script>
</body>