JavaScript学习笔记---02数组及对象

1.创建数组

格式1：声明同时赋值
var myarray=new Array();

<script type="text/javascript">
        var myarray = new Array(2, 3, 4, 5, 6);
        alert(myarray);

    </script>

格式2：声明后再赋值
var myarray=new Array();
myarray[0] = 2;

<script type="text/javascript">
        var myarray = new Array();
        myarray[0] = 2;
        myarray[1] = 4;
        myarray[2] = 5;
        myarray[3] = 9;
        alert(myarray);
    </script>

格式3：简化声明方式

<script type="text/javascript">
        var myarray = [];
        myarray[1] = 23;
        document.write(myarray.length);
        document.write(myarray[0]);
    </script>
   

结果：
2 undefined

2.数组混合赋值

<script type="text/javascript">
        var myarray = ['zian', 1, 1.3, 'lihai'];
        myarray.forEach(element => {
            document.write(element);
        });
        document.write("***********");
        for (var index = 0; index < myarray.length; index++) {
            document.write(myarray[index]);

        }

</script>

结果：
zian11.3lihai***********zian11.3lihai

javascrip引入了字符串下标，因此也就有了关联数组，也可以使用点句法（以对象的形式访问）

    <script type="text/javascript">
        var myarray = Array();
        myarray["name"] = "hello world";
        myarray["age"] = 32;
        document.write(myarray["name"]);
        document.write(myarray.age);
    </script>
</head>

结果：
hello world32

3.对象作为数组元素并访问

<script type="text/javascript">
        var myarray = [2, 3, { name: "zhangsan" }];
        document.write(myarray[2].name);
        document.write("<br>");
        document.write(myarray[2]["name"]);
</script>

4.定义一个类及实例化一个类（这种方法挺少见其实更多用1、构造，2object，3json方法构造）

<script type="text/javascript">
        class Tv {
            color = "red";
            look = function () {
                document.write("this is a " + color + " one instance of Tv");
            }
        }
        var tv = new Tv();    
    </script>

5.构造方法的方式创建一个对象

<script type="text/javascript">  
        function myfun() {
            document.write("constructe an object");
        }

        var obj = new myfun();
        alert(obj);
    </script>

6.Object方式创建一个对象

var myobj = new Object();       
alert(myobj);

7.json方式创建一个对象

var myobj2 = {};
 alert(myobj);

8.创建对象并给对象赋值及其方法，并调用

function myfun() {
            document.write("constructe an object");
        }

        var obj = new myfun();
        obj.name = "zhangsan";
        obj.speak = function () {
            document.write("speak chinese");
        }
        document.write("<br>");
        obj.speak();

结果
constructe an object
speak chinese

9.this关键字

function myfun() {
            this.name = "zhangsan";
            this.eat = function (food) {
                document.write(this.name + " eat " + food);
            }
        }

        var obj = new myfun();
        obj.eat("orange");
        document.write("<br>");
        obj.name = "wulaoge";
        obj.eat("apple");

结果：
zhangsan eat orange
wulaoge eat apple

10.json方式声明时添加对象属性，传递

var obj = {
            name: "zhangsan", drive: function (driver) {
                document.write("as an " + driver + "," + this.name + " drive every well");
            }
        }

        obj.drive("old driver");
        document.write("<br>");
        obj.name = "wulaoge";
        obj.drive("freshman");
        document.write("<br>");

        var obj1=obj;
        obj1.drive("linghuc");

结果：
as an old driver,zhangsan drive every well
as an freshman,wulaoge drive every well
as an linghuc,wulaoge drive every well

11.删除对象属性及方法

使用delete函数

var obj = {
            name: "zhangsan", drive: function (driver) {
                document.write("as an " + driver + "," + this.name + " drive every well");
            }
        }

        obj.drive("old driver");
        document.write("<br>");
        obj.name = "wulaoge";
        obj.drive("freshman");
        document.write("<br>");

        var obj1=obj;
        obj1.drive("linghuc");
        document.write("<br>");

        delete(obj.name);
        obj.drive("freshman");
        document.write("<br>");

结果
as an old driver,zhangsan drive every well
as an freshman,wulaoge drive every well
as an linghuc,wulaoge drive every well
as an freshman,undefined drive every well

12.自定义一个数组类及类对象的遍历

function myArray(){
        var length=arguments.length;
        for (let index = 0; index < length; index++) {
           this[index] = arguments[index];
            
        }
    }
    document.write("<br>");
    var arr=new myArray(1,2,3,4);
    document.write(arr[0]);

结果输出：1

13.工厂函数的方式对类及类对象的遍历

function dianshi() {
            var Tv = {};
            Tv.color = "red";
            Tv.size = "20inch";
            Tv.look = function () {
                document.write("we are watching tv");
            }
            Tv.show = function () {
                document.write("we are showing the tv progaram");
            }

            return Tv;
        }


        var mytv1 = new dianshi();
        document.write(typeof (mytv) + "<br>");

        var mytv2 = new dianshi("green", "65inch");
        
        document.write(mytv2.size);

结果：
object
20inch

14.使用原型prototype方法共享属性和方法

function Tv(color, size) {
    this.color = color;
    this.size = size;

}
//通过原型把共享代码段放到象中
Tv.prototype.look = function () {
    document.write("we are watching tv");
}
Tv.prototype.show = function () {
    document.write("we are showing the tv progaram");
}

var mytv1 = new Tv("green", "65inch");
        var mytv2 = new Tv("red", "65inch");
        mytv1.look();
        document.write("<br>");
        document.write(mytv1.color);
        document.write("<br>");
        document.write(mytv2.color);
        document.write("<br>");
        mytv2.show();

结果：
we are watching tv
green
red
we are showing the tv progaram