20180605-前端学习日志-JavaScript之函数数组与对象_javascript函数与对象,数组与对象-优快云博客

本文详细介绍了JavaScript的基本概念，包括函数的定义与使用、数组的操作方法、对象的创建与属性管理等内容，适合初学者入门。

一、函数

1.函数是一段代码，基本格式为function fun_name(){ }和function fun_name(a,b){ }。

2.var f = new Function("x","y","return x*y");等价于function f(x,y){return x*y;}。

3.函数可以进行嵌套，一个函数可以作为参数传入到另一个函数，如function add(a,b){return a+b;} function cal(f,a,b){return f(a,b);}然后可以使用cal(add,5,6)调用。

4. 关于函数变量空间：定义在任何函数之外的变量属于全局变量，在整个网页中全部有效；而定义在某个函数内部的变量属于局部变量，只在函数内部有效。当局部变量有和全局变量一样的变量时，采用局部变量。

    <script>
        function max(a, b) {
            return a > b ? a : b;
        }
        var u = 42;
        var v = 24;
        function print(s) {
            document.write(s);
        }
        function println(s) {
            print(s + "<br>");
        }
        function gcd(u, v) {
            var a = u;
            var b = v;
            var temp = v;
            while (v != 0) {
                temp = u % v;
                u = v;
                v = temp;
            }
            // alert(a + "和" + b + "的最大公约数是" + u);
            println(a + "和" + b + "的最大公约数是" + u);
        }
        gcd(42, 21);
        gcd(12, 67);
        println(max(42, 21));
    </script>

二、数组

1.数组的几种格式有：

var a = new Array();
var b = new Array(size);
var c = new Array(d1,d2,...,dn);
var d = [d1,d2,...,dn]

其中：[]可以访问一个数组单元、a[0]可读可写，索引从0开始。a[x]=n代表创建数组中一个单元x并赋值为n。

2. a.length代表数组长度，是其中最大的下标加一。

3. .length长度可写。如下

    <script>
        var colors = ["red", "blue", "green"];
        colors.length = 2;
        alert(colors[2]);
    </script>

这里自定义长度为2，第三个元素green被挤掉。于是colors[2]代表的第三个元素由于未定义，运行结果应为undefined。

    <script>
        var colors = ["red", "blue", "green"];
        colors.length = 4;
        alert(colors[3]);
        colors[colors.length] = "black";
        colors[colors.length] = "brown";
    </script>

这里自定义长度是4，但是第四个还是没有赋值，结果仍为undefined。后面两个colors.length分别都在原来数组的基础上添加了一组元素（先加了black，后加了brown。最终数组长度是6），增加了代码的可扩展性。

4. 还有一些对数组的操作，toString和valueOf都是转换数组为字符串输出（产生字符串），join里面添加的是分隔符。

    <script>
        var colors = ["red", "blue", "green"];
        colors.length = 4;
        alert(colors[3]);
        colors[colors.length] = "black";
        colors[colors.length] = "brown";
        alert(colors.toString()); //产生字符串
        alert(colors.valueOf()); //产生字符串
        alert(colors);
        alert(colors.join(",")); //分隔符为，
        alert(colors.join("||"));//分隔符为||
    </script>

5. 数组堆栈操作

堆栈操作即为像往一个只有一个出口的瓶子里面放东西一样，遵循先进后出，后进先出的规则。

    <script>
        var colors = new Array();
        var count = colors.push("red","green"); //push进两个元素
        alert(count);  //2
        count = colors.push("black"); // push进一个black
        alert(count); //3
        var item=colors.pop();  //pop出最后的元素
        alert(item); //black
        alert(colors.length); //恢复为2
    </script>

6. 数组队列操作

此种方式遵循先进先出的原则，和排队一样。

    <script>
        var colors = new Array();
        var count = colors.push("red","green");
        alert(count);
        count = colors.push("black");
        alert(count);
        var item = colors.shift(); //队列操作
        alert(item); //先出red
        alert(colors.length); //长度2
    </script>

7. 排序操作

从小到大排序sort；倒序排序reverse。此处要注意直接使用sort时是按照unicode的顺序来的，想要正常排序要创建排序函数sortNumber。

<script>
        function sortNumber(a, b) {
            return a - b; //
        }
        var values = [0, 1, 15, 5, 10];
        var me = values.slice(0); //相当于克隆了代码
        // function gettime() {
        //     var myDate = new Date();
        //     return myDate.getTime();
        // }
        // var start = gettime();
        values.sort();
        document.write(values + "<br>");//0,1,10,15,5注意Unicode顺序
        values.sort(sortNumber);
        document.write(values + "<br>");//0,1,5,10,15
        me.reverse();
        document.write(me + "<br>");//10,5,15,1,0
        // var end = gettime();
        // var time = end - start;
        // document.write(time+"<br>");
    </script>

另一个从大到小的排序：

    <script>
        function compare(value1, value2) {
            if (value1 < value2) {
                return 1;
            } else if (value1 > value2) {
                return -1;
            } else {
                return 0;
            }
        }
        var values = [0, 5, 1, 10, 15];
        values.sort(compare);
        alert(values);//15,10,5,1,0
    </script>

8. 数组操作

连接：concat
截取：slice

        colors2 = colors.concat("yellow", ["black", "brown"]); //连接
        colors3 = colors.slice(1, 4); //截取1-4

splice(开始位置，删除个数，插入元素)

        splice(0, 2); //删除
        splice(2, 0, "red", "green");//插入两个数组元素
        splice(2, 1, "red", "green");//替换

三、对象

对象是JavaScript中的一种复合数据类型，可以把多个数据集中到一个变量中，并且给其中的每个数据起名字。换言之，对象是一个属性集合，每个属性都有自己的名字和值。

格式如下：var o = new Object(); //空的对象

var ciclr = { x : 0, y:0, radius :2};

1. 访问对象属性（通过运算符）

如：

    var book = new Object(); 
    book.title = "HTML5学习"
    book.translator = "楚留香";
    book.chapter1 = new Object();
    book.chapter1.title = "HTML5简介"

即使构造的时候不存在的属性也可以在之后随时增加。

2. 删除对象属性

delete book.chaspter1;或者book.chapter1 = null;

3. 遍历所有属性

for (var x in o)

    <script>
        var o = new Object();
        o.name = "Jack Chu";
        o.age = 20;
        o.salary = 300;
        for (var x in o) {
            // alert(x); 错误，会显示元素名
            // alert(o[x]);
            alert(x + "=" + o[x]);
        }
    </script>

4. 构造方法

构造函数

1. 不能直接制造对象；

2. 通过this来定义成员；

3. 没有return；

    <script>
        function Rect(w, h) {
            this.width = w; this.height = h;
            this.area = function () {
                return this.width * this.height;
            };
        }
        var r = new Rect(5, 10); alert("长方形的面积是" + r.area());
        r.width = 10; alert("长方形的面积变成了" + r.area());
    </script>

只定义了构造函数就可以构造任意数量的对象。

原型对象

1. prototype属性制定了他的原型对象，可以用 “ . ”运算符直接读它的的原型对象的属性。

2. 档写这个属性时才在它自己内部产生实际的属性。

<script>
    function Person() {
    }
    Person.prototype.name = "Jack";
    Person.prototype.age = 20;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function () {
        alert(this.name);
    };
    var person1 = new Person();
    // person1.sayName(); //Jack
    var person2 = new Person();
    // person2.sayName(); //Jack
    // alert(person1.sayName == person2.sayName); //true
    person1.name="Chu";
    alert(person1.name);//Chu  from instance
    alert(person2.name);//Jack  from prototype
</script>

关于prototype的更多解释如下：

JS中的protype和Java的继承不是一个概念的。Java中的继承是类继承，而JS中是没有类的，只有对象（哪怕ES6中有class语法也是一种语法糖，不是真正的‘类’）。

JavaScript 中的对象有一个特殊的 [[Prototype]] 内置属性，表示对其他对象的引用。几乎所有的对象在创建时 [[Prototype]] 属性都会被赋予一个非空的值。 

比如一个对象
var a = {
 b:1
}
当进行a.b操作的时候会触发对象的[[GET]]操作，这个操作会检查对象是否有这个属性，有就使用没有就到 [[Prototype]] 属性上去查找，一层层查找上去直到[[Prototype]] 为空，这就是原型链的概念。

prototype只保留了对原型链上属性和方法的引用，你可以理解成通过它可以访问自身和原型链上属性或方法，但其实本身对象上的只是一个指针，并不拥有这些属性

在Java中类被实例化，会把把类的行为复制到对象中，但是原型继承并不会复制对象属性，而是相当于在两个对象中创建一个关联，这样一个对象可以顺着原型链查找到另一个对象的属性或方法

    <script>
        function Person(name, age, job) {
            this.name = name;  //代表不共享，是自己的
            this.age = age;
            this.job = job;
            this.friends = ["Jack", "Martin"];
        }
        Person.prototype = {
            constructor: Person,
            sayName: function () {
                alert(this.name);
            }
        };
        var person1 = new Person("Nics", 29, "Software Engineer");
        var person2 = new Person("Ian", 32, "Doctor");
        person1.friends.push("Marry");
        alert(person1.friends);
        alert(person2.friends);
        alert(person1.friends == person2.friends);//false
        alert(person1.sayName == person2.sayName);//true
    </script>