js-MediumGrade-base.js

// 1.JavaScript 中的类型包括

    Number（数字）
    String（字符串）
    Boolean（布尔）
    Symbol（符号）（第六版新增）
    Object（对象）
        Function（函数）
        Array（数组）
        Date（日期）
        RegExp（正则表达式）
    Null（空）
    Undefined（未定义）



// 2.数字

    Math.sin(3.5);
    var d = Math.PI * r * r;

    parseInt("123", 10); //10进制
    parseInt("120", 8);     //8进制
    parseInt("120", 16); //16进制
    parseInt("hello", 10); // NaN

    parseFloat()

    isNaN(NaN); // true
    Infinity（正无穷）
    -Infinity（负无穷）

    isFinite(1/0); // false
    isFinite(-Infinity); // false
    isFinite(NaN); // false



// 3.字符串
    
    "hello".length; // 5
    "hello".charAt(0); // "h"
    "hello, world".replace("hello", "goodbye"); // "goodbye, world"
    "hello".toUpperCase(); // "HELLO"



// 4.变量

    var a;
    var name = "simon";



// 5.运算符

    x += 5; // 等价于 x = x + 5;
    "hello" + " world"; // hello world
    "3" + 4 + 5; // 345
    3 + 4 + "5"; // 75

    123 == "123" // true
    1 == true; // true

    1 === true; //false
    123 === "123"; // false



// 6.控制结构

    var name = "kittens";
    if (name == "puppies") {
      name += "!";
    } else if (name == "kittens") {
      name += "!!";
    } else {
      name = "!" + name;
    }
    name == "kittens!!"; // true

    ///////////////////////////////////////////

    while (true) {
      // 一个无限循环！
    }
    var input;
    do {
      input = get_input();
    } while (inputIsNotValid(input))

    ///////////////////////////////////////////

    for (var i = 0; i < 5; i++) {
      // 将会执行五次
    }

    ///////////////////////////////////////////

    switch(action) {
        case 'draw':
            drawIt();
            break;
        case 'eat':
            eatIt();
            break;
        default:
            doNothing();
    }



// 7.运算符
    
    var name = o && o.getName();
    var name = otherName || "default";
    var allowed = (age > 18) ? "yes" : "no";  //三元操作符



// 8.对象
    
    var obj = new Object();
    var obj = {};
    

    var obj = {
        name: "Carrot",
        "for": "Max",
        details: {
            color: "orange",
            size: 12
        }
    }
    obj.details.color; // orange
    obj["details"]["size"]; // 12



// 9.数组

    var a = new Array();
    a[0] = "dog";
    a[1] = "cat";
    a[2] = "hen";
    a.length; // 3

    // 遍历数组的三种方法 依次更好
    for (var i = 0; i < a.length; i++) {
        // Do something with a[i]
    }

    for (var i = 0, len = a.length; i < len; i++) {
        // Do something with a[i]
    }

    for (var i = 0, item; item = a[i++];) {
        // Do something with item
    }


array方法名称    描述

a.toString()    //返回一个包含数组中所有元素的字符串，每个元素通过逗号分隔。
a.toLocaleString()    //根据宿主环境的区域设置，返回一个包含数组中所有元素的字符串，每个元素通过逗号分隔。
a.concat(item1[, item2[, ...[, itemN]]])    //返回一个数组，这个数组包含原先 a 和 item1、item2、……、itemN 中的所有元素。
a.join(sep)    //返回一个包含数组中所有元素的字符串，每个元素通过指定的 sep 分隔。
a.pop()    //删除并返回数组中的最后一个元素。
a.push(item1, ..., itemN)    //将 item1、item2、……、itemN 追加至数组 a。
a.reverse()    //数组逆序（会更改原数组 a）。
a.shift()    //删除并返回数组中第一个元素。
a.slice(start, end)    //返回子数组，以 a[start] 开头，以 a[end] 前一个元素结尾。
a.sort([cmpfn])    //依据 cmpfn 返回的结果进行排序，如果未指定比较函数则按字符顺序比较（即使元素是数字）。
a.splice(start, delcount[, item1[, ...[, itemN]]])    //从 start 开始，删除 delcount 个元素，然后插入所有的 item。
a.unshift([item])    //将 item 插入数组头部，返回数组新长度（考虑 undefined）。



// 10.函数

    function add() {
        var sum = 0;
        for (var i = 0, j = arguments.length; i < j; i++) {
            sum += arguments[i];
        }
        return sum;
    }
    add(2, 3, 4, 5); // 14

    // --------------------加法的函数---------------------

    function avg() {
        var sum = 0;
        for (var i = 0, j = arguments.length; i < j; i++) {
            sum += arguments[i];
        }
        return sum / arguments.length;
    }
    avg(2, 3, 4, 5); // 3.5

    // --------------------平均数的函数---------------------

    function avgArray(arr) {
        var sum = 0;
        for (var i = 0, j = arr.length; i < j; i++) {
            sum += arr[i];
        }
        return sum / arr.length;
    }
    avgArray([2, 3, 4, 5]); // 3.5

    // --------------------平均数的函数【逗号连接的变量串】---------------------

    var avg = function() {
        var sum = 0;
        for (var i = 0, j = arguments.length; i < j; i++) {
            sum += arguments[i];
        }
        return sum / arguments.length;
    };

    // --------------------匿名函数---------------------



// 11.自定义对象

    function makePerson(first, last) {
        return {
            first: first,
            last: last
        }
    }
    function personFullName(person) {
        return person.first + ' ' + person.last;
    }
    function personFullNameReversed(person) {
        return person.last + ', ' + person.first
    }
    s = makePerson("Simon", "Willison");
    personFullName(s); // Simon Willison
    personFullNameReversed(s); // Willison, Simon

    // --------------------一般写法---------------------
    
    function makePerson(first, last) {
        return {
            first: first,
            last: last,
            fullName: function() {
                return this.first + ' ' + this.last;
            },
            fullNameReversed: function() {
                return this.last + ', ' + this.first;
            }
        }
    }
    s = makePerson("Simon", "Willison");
    s.fullName(); // Simon Willison
    s.fullNameReversed(); // Willison, Simon

    // --------------------对象概念 更优---------------------

    function Person(first, last) {
        this.first = first;
        this.last = last;
        this.fullName = function() {
            return this.first + ' ' + this.last;
        }
        this.fullNameReversed = function() {
            return this.last + ', ' + this.first;
        }
    }
    var s = new Person("Simon", "Willison");

    // --------------------this 改进已有的 makePerson函数---------------------



// 12.内部函数
    
    function betterExampleNeeded() {
        var a = 1;
        function oneMoreThanA() {
            return a + 1;
        }
        return oneMoreThanA();
    }



// 13.闭包

    function makeAdder(a) {
        return function(b) {
            return a + b;
        }
    }
    x = makeAdder(5);
    y = makeAdder(20);
    x(6); // 11
    y(7); // 27



// 14.内存泄露
    
    // 闭包很容易发生无意识的内存泄露

        function addHandler() {
            var el = document.getElementById('el');
            el.onclick = function() {
                el.style.backgroundColor = 'red';
            }
        }

    // 这个问题有很多种解决方法，最简单的一种是不要使用 el 变量

        function addHandler(){
            document.getElementById('el').onclick = function(){
                this.style.backgroundColor = 'red';
            };
        }

    // 有趣的是，有一种破坏因为闭包引入循环引用的窍门是添加另外一个闭包：

        function addHandler() {
            var clickHandler = function() {
                this.style.backgroundColor = 'red';
            };
            (function() {
                var el = document.getElementById('el');
                el.onclick = clickHandler;
            })();
        }