尚硅谷JavaScript基础教程个人笔记（1）

前言

课程来源：尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)
此文用来记录尚硅谷Javascript课程中P1~P90中与C或Java语言不同的语法及概念，可快速帮助有其他语言基础的人学习JavaScript。

一、强制类型转换

1.将其他类型转化为Number型

①使用Number()函数

只适用于仅含数字的字符串，如"123"，类似"123b"或者"123.3"等包含字符的字符串均不适用。对于值为null的变量，转化后的结果为0；对于boolean类型的变量，true为1，false为0；对于undefined变量，结果为NaN。

②使用parseInt()函数与parseFloat函数

Ⅰ 这两种函数都只有效于字符串中的第一个数字子字符串，例如parseInt(123.456)就只返回123，parseFloat(123.456.789)就只返回123.456。

Ⅱ 如果对非String类型变量使用parseInt()或parseFloat()，则会被函数先转化为String再进行操作。

Ⅲ 不同的浏览器对于数字的进制解析不同，例如以下的一串代码

	var a = '070';
	a = parseInt(a);
	document.write(a);

在firefox、chrome中会显示70，而在IE的较早版本中则会显示为56，因为将其解析为了八进制数。

P.S.

070 八进制 = 56

0x10 十六进制 = 16

0b10 二进制 = 2

解决方法：向parseInt中传入第二个参数，用来表示解析的进制数。如parseInt(“070”,8) = 56。

Tips1

将浮点数转化为整数可以直接使用paeseInt()函数，能直接将小数点后的位数去除。

2.将其他类型转化为Boolean型

使用Boolean()函数：

Number ----> Boolean：除了0和NaN为false，其余全为true。

String ----> Boolean：除了空串为false，其余全为true。

null/undefined ----> Boolean：全为false。

二、算数运算符

1. “+”

① 与其他语言差不多，当Number类型与非Number类型(除String外)的值相加时，会将这些值先转化为Number然后再算，但需要注意的是任何值和NaN做运算结果都为NaN。

② String类型的转化优先级较高，因此会将非String的值转化为String后做拼接操作。

Tips2

针对这一特性，当需要将变量转化为String类型时，可进行a = a + “” 的隐式类型转化。

2. “-”，“÷”，"*"

① 除了"+"运算外，其余运算都会自动转化为Number类型。

ex1. 100 - “1” = 99。

ex2. “8” * 2 = 16。

ex3. undefined * 2 = NaN。

Tips3

针对这一特性，当需要将变量转化为Number类型时，可进行a = a - 0 ，a = a / 1, a = a * 1的隐式类型转化。

② 不同于C语言等常规语言，"/"会区分整数与浮点数。

ex4. 4 / 2 = 2。

ex5. 3 / 2 = 1.5。

3. “+”（正号），"-"（负号）

①负号可以对Number类型进行取反，对非Number类型的值，会先将其转化为Number类型后再进行取反。

②可以对一个数据类型使用+，来将其转化为Number类型。例如：

    <script>
        // console.log('aaaa');
        var a = 1 + +"2" + 3;
        console.log(a);
    </script>

结果则会在控制台输出一个类型为Number的6。

三、逻辑运算符

1. “&&”

JS中的&&运算符为短路运算符，如果第一个值为false，则不执行之后的内容，直接返回false。例如：

    <script>
        var a = 1 + +"2" + 3;
        console.log(a==0 && a++); // false
        console.log(a); //a = 6
    </script>

在第一个输出语句中，&&运算符左边的等式返回false，则此时不会执行&&右边的自增操作，自然a的值就不会发生改变。

2. “||”

JS中的||运算符为短路运算符，如果第一个值为true，则不执行之后的内容，直接返回true。例如：

    <script>
        var a = 1 + +"2" + 3;
        console.log(a!=0 || a++);//true
        console.log(a);//6
    </script>

因此不推荐在逻辑运算符中加入其他赋值运算，如果可以的话，最好还是分开计算后再合并。

3. "&&“与”||"两边为非布尔值

①对于非布尔值进行与、或运算时，会先将其转化为boolean类型，然后再运算，并且返回原值。

②与运算：

  -如果第一个值为true，则必然返回第二个值。

  -如果第一个值为false，则直接返回第一个值。

  P.S. 均返回的是原值！！！

    <script>
        var a = 5 && 7;
        console.log(a);//7
        a = NaN && 0
        console.log(a);//NaN
    </script>

③或运算与运算相反。

四、关系运算符

1. ‘<’,’>’,’<=’,’>=’

①对于非数值进行比较时，会将其转化为数字然后再比较。

Ⅰ如果符号两侧的值都是字符串时，不会将其转化为数字进行比较，而会逐次比较字符串中字符的Unicode编码。因此如果比较的是两个字符类型的数字的话，可能结果会不同，可以在前面加一个"+"转型。

Ⅱ如果符号两侧有变量的值为NaN，则直接返回false。

2. ‘==’

①对于同类型的两个变量，若相等，则返回true，反之，返回false。

②对于不同类型的两个变量，在一般情况下，会将变量都转化为Number类型后在进行比较判断。以下列出几个特殊情况：

    <script>
    	console.log(null == undefined) //true
        console.log(null == 0); //false
        console.log(NaN == null); //false
        console.log(NaN == 0); //false
        console.log(NaN == NaN) //false
    </script>

解析：NaN不和任何值相等，包括其自身。因此若想判断一个变量的值是否为NaN时，不能直接使用’==’，考虑调用函数isNaN()进行判断。

3. ‘!=’

①对于同类型的两个变量，若不等，则返回true，反之，返回false。

②对于不同类型的两个变量，可将其想象成"=="的逆操作，也就是说不同于C、JAVA等语言，当执行以下代码块时会自动进行类型的转换，之后再进行比较。

    <script>
        console.log('1' != 1); //false
    </script>

P.S.

若想实现C语言、Java语言中包括类型判断的相等与不等运算符，则可以使用"===“与”!= ="。

五、练习： 键盘输入方法-Prompt()函数

①prompt()可以弹出一个提示框，该提示框中会带有一个文本框，用户可以再文本框中输入一段内容，该函数需要一个字符串作为参数，该字符串将会作为提示框的提示文字。该函数返回用户输入的内容，可以定义一个变量来接收该内容。

<script>
var a = prompt("请输入您的年龄~");
console.log("您的年龄为" + a + "岁");
</script>

②需要特别注意的是，prompt()返回的是字符串类型，因此若想进行数值的比较的话，可以在赋值时添个"+"号。（参考Tips2）

六、for循环练习： 水仙花数

①先贴代码：

    <script>
        for(var i = 100;i<=999;i++) {
            var sum = 0;
            for(var j=i;j!=0; ) {
                var index = j%10;
                sum += index * index * index;
                j = parseInt(j/10);
            }
            if(sum == i) document.write(i + "</br>");//153 370 371 407
        }
    </script>

②题目还是很简单的，但是需要注意的是JS中变量经过若干运算得出小数是会直接保留小数位的，因此若想逐个取位，要调用parseInt()函数舍弃小数为转化为整数。

七、break和continue

1.创建循环语句标签

①可以为循环语句创建一个label，来标识当前的循环。使用break语句时，可以在break后跟一个label，这样break语句将会结束指定的循环，而不是最近的，同样的，使用continue语句时，也可以使用label来跳过指定的循环部分。例如：

    <script>
        loop1:
        for(var i=0;i<10;i++) {
            loop2:
            for(var j=0;j<10;j++) {
                if(i==0) continue loop1;
                document.write("当前执行到第("+i+","+j+")部分");
                break loop1;
            }
        }
    </script>

结果显示：“当前执行到第（1，0）部分”

2.计时器

①console.time(“count_name”)可以用来开启一个计时器，它需要一个字符串作为参数，这个字符串将会作为计时器的标识。

②console.timeEnd(“count_name”)用来停止一个计时器，需要一个计时器的名字作为参数。

八、对象

1.对象的基本操作

①创建对象：var obj = new Object();

②添加/修改属性：obj.name = “Enoke”;

③读取属性：a = obj.name;如果读取的属性并未定义过，不会报错，而是会返回undefined。

④删除属性：delete obj.name；

⑤创建读取特殊的属性名：obj[“123”] = 789; console.log(obj[“123”]);
利用这种特性，可以在[ ]中直接传递一个变量，这样变量值是多少就会去读那个属性。例如：

    <script>
        var obj = new Object();
        obj["123"] = 456;
        var n = "123";
        document.write(obj[n]); //456
    </script>

⑥检查对象中的属性：in运算符，通过该运算符可以查看一个对象中是否含有指定的属性。如果有，返回true，否则，返回false。

语法：“属性名” in 对象

例子：

    <script>
        var obj = new Object();
        obj["123"] = 456;
        var n = "123";
        document.write(obj[n]);
        document.write("123" in obj);//true
    </script>

2.基本数据类型和引用数据类型的区别

①基本数据类型的数据，在栈内存内存储，变量是直接保存的它的值。变量与变量之间是相互独立的，修改一个变量不会影响其他的变量。

例子：

    <script>
        var var1 = 123;
        var var2 = var1;
        var1 = 124;
        console.log(var1);//124
        console.log(var2);//123
    </script>

②引用数据类型的数据，在堆内存储，变量是保存的对象的引用（内存地址）。每创建一个新的对象，就会在堆内存中开辟出一个新的内存地址。

如果多个变量指向的是同一个对象，此时修改一个变量的属性，就相当于照着门牌号（地址）找人一样会直接修改堆内存中对应的数据，因此会影响其他的变量。

③比较两个变量时，对于基本数据类型，比较的就是值，对于引用数据类型比较的是地址，地址相同才相同。

④当两个对象同时指向同一地址时，此时若设置其中一个对象的值为null，则中断了该对象与所指地址之间的联系，所以不会再对地址以及其他指向该地址的对象造成影响。
例子：

    <script>
        var obj1 = new Object();
        obj1.name = 'Enoke';
        var obj2 = obj1;
        console.log(obj2.name);//Enoke
        obj1.name = 'cn';
        console.log(obj2.name);//cn
        obj2 = null;
        console.log(typeof obj1);//object
        console.log(typeof onj2);//undefined
    </script>

3.使用字面量来创建对象

语法：
var obj1 = {属性名1:属性值,属性名2:属性值…};

例子：

    <script>
        var obj1 = {
            name:"Enoke",
            age:20,
            gender:"male"
            }
        console.log(typeof obj1);//object
        console.log(obj1.name);//Enoke
        console.log(obj1.age);//20
        console.log(obj1.gender);//male
    </script>

4.遍历对象中的属性

语法：for(var 变量 in 对象){traverse String}

例子：

<script>
    var obj = Object();
    obj.name = "Enoke";
    obj.fun = function() {
        console.log("This is method");
    }
    obj.gender = "male";
    obj.score = 98;

    for (var i in obj) {
        console.log("属性名：" + i);
        console.log("属性值：" + obj[i]);
    }
</script>

九、函数

1.函数的基本操作

①概念：函数也是一个对象。因此函数可以实现对象的所有功能。

②创建函数1：var fun1 = new Function(“function_string”);
可以将要封装的代码以字符串的形式传递给构造函数

例子：

    <script>
        var fun = Function("console.log('this is test code!')");
        fun();//在控制台输出语句
    </script>

创建函数2: function fun2(var1, var2,…) {function_string}

更推荐用此方式创建函数，因为可以包含多条语句。

创建函数3：var fun3 = function(var1,var2,…){function_string}

类似于java中的匿名函数，不指定函数的名称，将此函数赋值给变量fun3，调用方式和之前两种一样，都是fun3()。

③包含形参的函数
与C语言类似，JS中函数也是可以在（）内添加形参的，不同的是，JS不用声明参数的类型（毕竟都是用var来创建的）。

例子：

    <script>
        function sum(a,b){
            console.log(a+b);
        }
        sum(1,2);//3
    </script>

P.S.

Ⅰ 在调用函数时，解析器不会检查实参的类型，因此，在使用时要注意是否有可能接收到非法的参数，如果有可能则需要对参数进行类型的检查。

Ⅱ 在调用函数时，解析器也不会检查实参的数量，多余的参数不会被赋值，减少的参数将是undefined。

Ⅲ 函数的实参可以是任意的数据类型，包括对象，函数。

④函数的返回值：函数可以使用return关键字返回所需的结果，若不加return，则函数的返回undefined。

⑤函数的“套娃”（重点！！！）

A.函数作为另一个函数的形参

函数可以作为实参传入另一个函数之中，但根据书写方式的不同会有不同的效果：
例子1：

    <script>
        function sum(a,b) {
            return a+b;
        }

        function accept_fun(a) {
            console.log("a = "+a);
            console.log(typeof a);
            console.log(a(1,2));
        }

        accept_fun(sum);
    </script>

如代码所示，在accpt_fun函数中传入sum函数，此时传入的是函数本身，如果将accpt_fun函数比作一个餐厅的话，那么此时sum函数就相当于一名服务生，通过在accpt_fun函数中调用sum函数来点食物。

例子2：

    <script>
        function sum(a,b) {
            return a+b;
        }

        function accept_fun(a) {
            console.log("a = "+a);
            console.log(typeof a)
            //console.log(a(1,2));
        }

        accept_fun(sum(1,2));
    </script>

在例子2中，此时传入的是sum()函数调用后的结果，即Number类型的3，所以无法在accpt_fun函数中调用a这个形参，否则会报错。这就类似于自助餐厅，没有sum()这个服务生供调用，而是直接拿取食物。

B.在函数中创建函数

在函数中创建子函数的语法与通常语法一样，函数也可以通过return关键字返回子函数。与上文一样，此时也需要注意返回的是函数本身（无括号）还是调用后的函数结果（有括号）。

例子：

    <script>
        function father_fun(){
            function son_fun(){
                return 1;
            }

            return son_fun; 
        }

        console.log(father_fun()());//1
    </script>

2.立即执行函数

语法：(function(var1, var2,…){function_String})(var1,var2,…)

例子：

    <script>
        (function(a, b){
            console.log("a = " + a);//a=2
            console.log("b = " + b);//b=3
        })(2,3);
    </script>

3.方法

方法是特殊的函数，是对象中创建的一个属性。语法：obj.fun()；

例子：

<script>
    var obj = Object();
    obj.name = "Enoke";
    obj.fun = function() {
        console.log("This is method");
    }
    obj.fun();
</script>

在上例中，fun就是obj对象的一个属性函数，即方法，要调用时只需像正常函数一样在后面添加括号即可。

4.函数的方法call()和apply()

这两个方法都是函数对象的方法，需要通过函数对象来调用，当对函数调用call()和apply()时都会执行函数。

语法：fun.call(obj, var1, var2, …)     fun.apply(obj,[var1, var2])

在调用call()和apply()时可以将一个对象指定为第一个参数，此时这个对象将会称为函数执行时的this，也就是将函数的this由window改成obj。

call()方法可以将实参在对象之后依次传递，apply()方法需要将实参封装在数组中。

例子：

<script>
    fun = function(a,b){
        console.log(this);
        console.log(a+b);
    }
    fun(1,2);

    var obj1 = new Object();
    fun.call(obj1,2,3);

    var obj2 = new Object();
    fun.apply(obj2,[3,4]);
</script>

十、作用域

1.全局作用域

①全局作用域在页面打开时创建，在页面关闭时销毁。

②在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用。

③在全局作用域中，创建的变量都会作为window对象的属性保存;创建的函数都会作为window对象的方法保存。

例子：

<script>
    var a = 123;
    console.log(a);//123
    console.log(window.a);//123
</script>

2.变量的申明提前

使用var关键字声明的变量，会在所有的代码执行之前被声明（预编译，但是不会赋值，就相当于在所有的代码之前先声明了一个变量）；不使用var声明的变量，则不会被提前声明。

例子：

<script>
    console.log("使用var声明的结果：" + a);
    console.log("不使用var声明的结果：" + b);
    var a = 123;
    b = 124;
</script>

3.函数的申明提前

使用函数声明形式创建的函数：
function 函数名() {}，它会在所有的代码执行之前被创建，所以我们可以在函数声明前来调用函数。
使用变量表达式创建的函数，只有变量被提前声明，函数本身不会被提前声明，所以不能在声明前调用。

例子：

<script>
    fun1();
    fun2();
    function fun1() {
        console.log("我是使用函数声明创建的函数~");
    }
    var fun2 = function() {
        console.log("我是使用函数表达式创建的函数~");
    }
    
</script>

4.函数作用域

①调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁。

②每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的。

③在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量。

④当在函数作用域中操作一个变量，它会先在自身作用域中寻找，如果有就直接使用，如果没有则向上一级作用域中寻找，直到找到全局作用域，如果全局作用域中依然没有找到，则会报错ReferenceError。

⑤在函数中如果要指定访问全局变量，则可以使用window对象。

⑥在函数作用域中也具有提前声明的特性，且基本与全局作用域概念相同。

⑦易错点！！！在函数中，不使用var声明的变量都会成为全局变量。

例子1：

<script>
    function fun_father(){
        var a = 1;
        function fun_son(){
            console.log("a="+a);
            var a = 2;
        }
        fun_son();
    }
    
    fun_father();//a=undefined
</script>

在例1中，子函数内部是先输出变量a，再定义a，最终的输出结果也并未报错，而是返回undefined，这与全局作用域的情况是一致的。

例子2：

<script>
    var d = 3;
    function fun_father(){
        var a = 1;
        function fun_son(){
            console.log("a="+a);//a=1
            console.log("d="+d);//d=3
            a = 2;
        }
        fun_son();
    }
    
    fun_father();

</script>

在例2中，子函数输出a时由于子函数内部没有声明a，因此往上级函数查找，父函数中有，所以使用父函数中的a；d也同理，父函数中没有，就再次向上寻找直到查找到全局作用域中的d。

例子3：

<script>
    function fun_father(){
        d = 3;
        function fun_son(){
            var d = 1;
            console.log("d="+ d);//d=1
        }
        fun_son();
    }
    
    fun_father();
    console.log("d=" + d);//d=3
</script>

由例3可以看出，在函数中不使用var定义变量也会被当作全局变量，但需要注意的是必须先调用函数才可在之后使用此变量。

5.this 和 arguements

①解析器（浏览器）在调用函数时，每次都会向函数内部传递两个隐含的参数，其中一个隐含的参数就是this，this指向的是一个对象，这个对象称为函数执行的上下文对象。

②根据函数的调用方式的不同，this会指向不同的对象。

Ⅰ 以函数的形式调用时，this永远都是window

Ⅱ 以方法的形式调用时，this就是调用方法的那个对象。

Ⅲ以构造函数的形式调用时，this就是新创建的那个对象。

Ⅳ使用call和apply调用时，this是指定的那个对象。

例子：

<script>
    function fun(){
        console.log(this);
    }

    var obj = {
        fun1:fun
    }
    fun();//Window
    obj.fun1();//Object
</script>

③另一个隐含的参数就是封装实参的对象arguements，arguements是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度，在调用函数时，我们所传递的实参都会保存在arguements中。

④可以使用arguements.length来获取实参的长度，且可以使用实参，例如:arguements[0]获取第一个实参。

⑤arguements有一个属性callee，这个属性对应一个函数对象，就是当前正在指向的函数的对象。

例子：

<script>
    function fun(){
        console.log(arguments.callee == fun);
    }

    fun();//true
</script>

十一、构造函数

1.基本操作

①构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写。

②构造函数和普通函数的区别就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用。

③构造函数的执行过程：

Ⅰ 立刻创建一个新的对象

Ⅱ 将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象

Ⅲ 逐行执行函数中的代码

Ⅳ 将新建的对象作为返回值返回

④使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类，我们将通过一个构造函数创建的对象，称为是该类的实例。

⑤使用instanceof来判断一个对象是否实例化某个类，与java的语法相同。

例子：

<script>
    function Person(name,age) {
        this.name=name;
        this.age=age;
    }
    function Animal(name,age) {
        this.name=name;
        this.age=age;
    }

    var per = new Person("Enoke",20);
    var ani = new Animal("Tom",3);

    console.log(per);
    console.log(ani);
</script>

十二、原型对象–prototype（重点！！！）

1.原型对象是什么？

①我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象。

②如果函数作为普通函数调用，则prototype无任何作用；当函数以构造函数的形式被调用时，它所创建的对象都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问该属性。

③原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中，而无需设置在全局作用域中，这样既避免了占用函数命名的尴尬，也可以消除公共函数被覆盖定义的误差。

④当我们访问对象的一个属性或方法时，它会先在对象自身寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。

⑤以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个实例都具有这些属性和方法了。

例子：

<script>
    function Person(name, age, gender){
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
    Person.prototype.sayName = function(){
        console.log("我的名字是："+this.name);
    }
    Person.prototype.a = 123;

    var per1 = new Person("Enoke","20","male");
    var per2 = new Person("Maria","19","female");
    per1.a = "我是实例对象自身定义的属性";

    per1.sayName();
    console.log(per1.a);
    per2.sayName();
    console.log(per2.a);
    
</script>

2.查看对象的属性

①使用in检查对象是否含有某个属性，但此时如果对象中没有该属性但是原型中有，也会返回true。

②使用hasOwnProperty()来检查对象自身是否含有该属性，使用该方法只有当对象自身中含有属性时，才会返回true。

例子：

<script>
    function Person(name, age, gender){
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
    Person.prototype.sayName = function(){
        console.log("我的名字是："+this.name);
    }
    Person.prototype.a = 123;

    var per1 = new Person("Enoke","20","male");
    var per2 = new Person("Maria","19","female");
    per1.a = "我是实例对象自身定义的属性";

    console.log("a" in per2);//true
    console.log(per2.hasOwnProperty("a"));//false

</script>

3.原型的原型

①原型对象也是对象，所以它也有原型。

②当我们使用一个对象的属性或方法时，会先在自身中寻找，自身中如果有，就直接使用，如果没有则去原型对象中寻找，如果原型对象中有，则使用，如果没有则去原型的原型中寻找，直到找到Object对象的原型，Object对象的原型不存在原型，如果在Object中依然没有找到，则返回null。

例子：

<script>
    function Person(name, age, gender){
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
    Person.prototype.sayName = function(){
        console.log("我的名字是："+this.name);
    }
    Person.prototype.a = 123;

    var per1 = new Person("Enoke","20","male");
    var per2 = new Person("Maria","19","female");
    per1.a = "我是实例对象自身定义的属性";

    console.log(per1.hasOwnProperty("hasOwnProperty"));//对象自身--Person
    console.log(per1.__proto__.hasOwnProperty("hasOwnProperty"));//对象的原型--Object
    console.log(per1.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//原型的原型--Object的原型--Object
    console.log(per1.__proto__.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//无Object的原型的原型--null

</script>

十三、数组

1.基本操作

① 创建数组对象
语法：var arr = new Array(1, 2, 3, 4)；当括号中只有一个元素的时候，此元素代表数组的长度；若元素个数大于1时，则是创建一个包含这些元素的数组。

② 向数组中添加元素
语法：数组[索引] = 值；

③ 读取数组中的元素
语法：数组[索引]

④ 获取数组的长度
语法： arr.length
对于连续的数组，使用length可以获取到数组的长度（元素的个数）；对于非连续的数组，使用length会获取到数组的最大的索引+1。

⑤修改数组的长度
语法： arr.length = 10;
如果修改的length大于原长度，则多出部分会空出来；如果修改的lenght小于原长度，则多出的元素会被删除。

2.使用字面量创建数组

①数组中的元数可以是任意的数据类型，也可以是函数，甚至是数组。语法：
Ⅰ var arr = [1, 2, 3, 4, true, null, undefined, “hello”];
Ⅱ arr = [{name:“孙悟空”},{name:“猪八戒”},{name:“沙和尚”}];

3.数组常用方法

①push()方法:该方法可以向数组的末尾添加一个或多个元素，并返回数组的新长度。

例子：

<script>
    var arr = ["孙悟空","猪八戒","沙和尚"];
    var arr_length = arr.push("唐僧","白龙马","玉皇大帝");
    console.log(arr_length);//6
</script>

②pop()方法：该方法可以删除数组的最后一位元素，并返回删去的元素。

③unshift()方法：向数组开头添加一个或多个元素，并返回新的数组长度。向前边插入元素之后，其他的元素索引会依次增加。

④shift()方法：删除数组的第一个元素，并返回删除的元素。

⑤slice()方法：从已有的数组中返回选定的元素，不会影响原数组，左闭右开。

语法：arrayObject.slice(start, end)

也可只传一个元素，此时表示从start位置一直截取到数组末尾。

⑥splice()方法：删除数组中的指定元素，会影响到原数组，将指定元素从原数组中删除，并将被删除的元素作为返回值返回。

语法：arrayObject.splice(start, num, var1, var2, …)

将从start位置开始的总计num个元素删除，并将新元素自动插入到开始位置索引的前边。

例子：对数组去重

<script>
    var arr = [1,2,3,3,4,5,4,4,6];
    for(var i=0;i<arr.length;i++){
        for(var j=i+1;j<arr.length;j++){
            if(arr[i]==arr[j]){
                arr.splice(j,1);
                j--;
            }
        }
    }
    console.log("去重后的数组为：" + arr);//1 2 3 4 5 6
</script>

⑦contact()方法：可以连接两个或多个数组，甚至任何对象，不会对原数组造成影响，并返回连接后的结果。

语法：arr.contact(arr1, arr2, var1, var2,…)

⑧join()方法：可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回。

语法：arr.join(contact_char);

在join()中可以指定一个字符串作为参数，这个字符串将会称为数组中元素的连接符，如果不指定连接符，则默认使用","作为连接符。

⑨reverse()方法：用来反转数组，会对原数组产生影响。

⑩sort()方法：用来对数组中的元素进行排序，也会影响原数组。

语法：arr.sort(回调函数);

若不指定回调函数，则排序默认会按照Unicode编码来排序，因此对于纯数字的数组，可能会得到错误的结果。

我们可以添加一个回调函数，来指定排序规则，回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前面。
浏览器会根据回调函数的返回值来决定元素的顺序：

Ⅰ 如果返回一个大于0的值，则元素会交换位置。

Ⅱ 如果返回一个等于0或小于0的值，则元素位置不变。

例子：对数组型数组实现升序排序

<script>
    var arr = [3,1,9,8,10,13,11];
    arr.sort(function(a, b){
        return a - b;
    });

    console.log(arr);//1 3 8 9 10 11 13

</script>

4.数组的遍历

①使用for()语句进行遍历：for(int i = 0;i < arr.length; i++)

②forEach()方法：该方法需要一个函数作为参数，像这种有我们创建但是不由我们调用的函数，称为回调函数。数组中有几个元素，函数就会执行几次，且每次执行时，浏览器会将三个参数以实参的形式传递进来，我们可以定义形参来读取这些内容。

Ⅰ 第一个参数，是当前正在遍历的元素

Ⅱ 第二个参数，是当前正在遍历的元素的索引

Ⅲ 第三个参数，是正在遍历的整个数组

例子：

<script>
    var arr = ["孙悟空","猪八戒","沙和尚","白龙马","太上老君"];
    arr.forEach(function(value, index, obj){
        console.log(value);
        console.log(value);
        console.log(obj);
    }); 
</script>

十四、Date对象

1.基本操作

①创建Date对象

var d = new Date();创建当前的时间对象

var d2 = new Date(“12/03/2016 11:10:30”);创建指定的时间对象

2.常用方法

①getDate()：获取当前对象是几号

②getDay()：获取当前对象是周几，会返回一个0-6的值，0表示周日，6表示周六。

③getMonth()：获取月份，会返回一个0-11的值，0表示1月，11表示12月。

④getFullYear()：获取年份。

⑤getTime()：获取时间戳，即从格林威治标准时间的1970年1月1日，0时0分0秒到当前日期所花费的毫秒数。

例子：

<script>
    var d1 = new Date("10/26/2020 21:15:30");
    var date = d1.getDate();
    var day = d1.getDay();
    var month = d1.getMonth();
    var year = d1.getFullYear();
    var stamp = d1.getTime();
    console.log(d1);
    console.log(date);
    console.log(day);
    console.log(month);
    console.log(year);
    console.log(stamp);
</script>

需要注意的是，创建的时间并非是标准的格林威治时间，而是系统默认的中国时间，如：

<script>
    var stand_date = new Date("01/01/1970 00:00:00");
    console.log(stand_date.getTime());//-28800000
</script>

⑥now()：获取当前的时间戳，常用于测试代码的性能。

十五、Math对象

1.基础知识

Math和其他的对象不同，它不是一个构造函数，它属于一个工具类，不用创建对象，可以直接使用其内部封装的数学运算相关的属性和方法。

2.常用方法

①ceil(num)：可以对一个数进行向上取整，小数位只有有值就自动进1。

②floor()：可以对一个数进行向下取整。

③round()：四舍五入取整。

④random()：生成一个0-1之间的随机数。

十六、字符串方法

①str.charAt(num)：可以返回字符串指定位置的字符。与str[num]效果相同。

②str.charCodeAt(num)：获取字符串指定位置字符的Unicode编码。

③String.fromCharCode(num)：根据字符编码去获取相应的字符。

④str.concat(str1, str2,…)：可以用来连接字符串，效果与"+"号相同。

⑤str.indexof(char,index)：该方法可以检索一个字符串中是否含有指定内容。如果存在，则会返回其第一次出现的索引；如果没有找到，则返回-1。参数index可以指定从第几个字符开始寻找。

⑥str.lastIndexof()：该方法的用法与indexof()类似，不同之处在于该方法从后往前找。

⑦str.slice(num1, num2)：可以从字符串中截取指定的内容，不会影响原字符串，而是将截取内容返回。第一个参数表示开始位置的索引，第二个参数表示结束位置的索引（不包含结束位置）。

⑧str.substr(num1, num2)：用来截取字符串，第一个参数表示开始位置的索引，第二个参数表示截取的长度

⑨str.split(str)：可以将一个字符串拆分为一个数组，需要一个字符串作为参数，将会根据该字符串去拆分数组。如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素。

⑩toUpperCase()和toLowerCase():将一个字符串转换为大写并返回。

十七、正则表达式

1.基本概念

正则表达式用于定义一些字符串的规则：计算机可以根据正则表达式，来检查一个字符串是否符合规则，将把字符串中符合规则的内容提取出来。

2.基础操作

①创建正则表达式的对象

语法：
var 变量 = new RegExp(“正则表达式”,“匹配模式”);

第二个参数表示匹配模式，可以是

i：忽略大小写

g：全局匹配模式

②test()方法：使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，如果符合则返回true，否则返回false。

例子：

<script>
    var reg = RegExp("a");
    var str = "a";
    var result = reg.test(str);

    console.log("result=" + result);//result = true
</script>

在这个例子中，创建了一个正则表达式的对象reg，可以用来检查一个字符串是否含有"a"。

③使用字面量来创建正则表达式

语法：var 变量 = /正则表达式/匹配模式;

3.正则表达式的常见例子

①"a|b"与[ab]：表示匹配含有a或b的字符串

②[A-z]：表示任意字母

③[^ab]：表示寻找a与b以外的字符

④[^0-9]：表示数字以外

4.正则表达式在字符串中的应用

①str.split(reg)：可以将一个字符串分为一个数组，方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串。

例子：

<script>
    var str = "1a2b3c4d56hg9";
    var result = str.split(/[a-z]/);
    console.log(result);
</script>

②str.search(reg)：可以搜索字符串中是否含有指定内容，与indexof()类似，如果搜索到指定内容，则会返回第一次出现的索引，否则返回-1。需要注意的是，search()只会查找第一个，即使设置全局匹配也没用。

③str.match(reg)：可以根据正则表达式，从一个字符串中将符合条件的内容提取出来，封装成数组返回。默认情况下match只会找到第一个符合要求的内容，找到后就会停止检索，所以可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容。

④str.replace(reg, str)：可以将字符串中指定内容替换为新的内容，第一个参数为被替换的内容，第二个参数为新的内容。

5.正则表达式的语法

① 量词：通过量词可以设置一个内容出现的次数。

Ⅰ {n}：正好出现n次。

Ⅱ {n, m}：出现n-m次。

Ⅲ {n, }：出现n次以上。

Ⅳ “+”：至少一个，相当于{1, }。

Ⅴ “*”：0个或多个，相当于{0, }。

Ⅵ “?”：0个或1个，相当于{0, 1}。

② 位置词：通过位置词可以设置一个内容在字符串中的位置。

A. /^a/：检查一个字符串中是否以a开头。

B. /$a/：检查一个字符串是否以a结尾。

C. /^ a $/：如果正则表达式中同时使用^与 $，则要求字符串必须完全符合正则表达式。

D. /^a | a $/：要求正则表达式以a开头或者以a结尾。

例子：创建一个正则表达式，用来检查一个字符串是否是一个手机号。

手机号的规则：

1. 以1开头

2. 第二位3-9任意数字

3. 三位以后任意数字9个

<script>
    var phoneStr = "18879808765";
    var phoneReg = /^1[3-9][0-9]{9}$/;
    console.log(phoneReg.test(phoneStr));//true
</script>