JavaScript基础学习

一.走进JavaScrip

1.1.JavaScript是什么：

JavaScript：给网页增加交互性的编程语言。

1.2.JavaScript 组成

1.BOM:操作浏览器内容

2.DOM操作文档内容

3.ECMAScript:语法

1.3.JS书写位置

1.行内式

2.内嵌式

3.外链式

 二.JavaScript的基础语法

2.1标识符

所谓标识符，就是指给变量、函数、属性或函数的参数起名字。JavaScript是一种弱类型或者动态语言。

标识符可以是按照下列格式规则组合起来的一或多个字符：

• 第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
• 其它字符可以是字母、下划线、美元符号或数字。
• 按照惯例，ECMAScript 标识符采用驼峰命名法。
• 标识符不能是关键字和保留字符。

2.2变量

（1）变量的声明

var num

（2）变量的赋值

num=3

(3)变量的声明和赋值

var num=3 

2.3数据类型：

 1.数据类型分类

JavaScript中一共有5种基本数据类型：

注意：js的数据类型根据=右边变量值的数据类型来判断 

（1）数字型;Number

var a=10;

var  b=10.1;

注意：isNaN()用来判断非数字，并且返回一个值，如果是数字返回false,如果非数字返回true 。

console.log(isNaN(10));

 

console.log(isNaN("yefuan"));

 

(2)字符串型String

var str1="我是"；

var str2="也福安"；可以用单引号也可以用双引号 

 注意：引号嵌套是采用外双内单或者外单内双。

（3）布尔型：Boolean

var flag=true;

var flag=false;

注意：布尔型和数值型相加的时候，true的值为1，false的值为0

conse.log(true+1)  输出为2 

(4)undefined:

变量声明未赋值就是undefined;

注意：undefined和数值相加返回的是Nan,和字符串相加返回的是字符串。

(5)Null 

和数字相加返回的是数字

2.type运算符：

使用typeof操作符可以用来检查一个变量的数据类型。

 使用方法：

typeof 数据

3.数据类型转换

1.其他类型转换为数值类型：

 

注意：如果对非String使用parseInt()或parseFloat()，它会先将其转换为String然后在操作 

2.转换为字符串类型

 

 

 3.转换为Boolean类型

Boolean（）

注意：代表空和否定的值会呗转换为false(0,Non,undefined,null),其他转换为true .

2.4运算符

学习JavaScript这一篇就够了_轻松的小希的博客-CSDN博客_javascript学习

三.流程控制

3.1分支流程控制

 

条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句，最基本的条件语句：

• if…else
• switch…case

 1.if…else语句是一种最基本的控制语句，它让JavaScript可以有条件的执行语句。

  <script>
        var num=13;
        if(num>16){
            console.log("蓝叶春葳蕤")
        }else{
            console.log("桂华秋皎洁")
        }
    </script>

案例：闰年

<script>
var year=prompt("请输入年份：")
if(year % 4==0 && year % 100 !=0 || year % 400 ==0){
   alert("是闰年")
}else{
   alert("不是闰年");
}
</script>

 

2. 条件表达式

<script>
var num=5;
var result=num<3 ? '是' : '不是';
alert(result);
</script>

 

 3.switch…case

switch…case是另一种流程控制语句。

switch语句更适用于多条分支使用同一条语句的情况。

语法：

switch (语句) {

case 表达式1: 语句...

case 表达式2: 语句...

default: 语句... }

var today = 1;
switch (today) {
    case 1:
        console.log("星期一");
        break;
    case 2:
        console.log("星期二");
        break;
    case 3:
        console.log("星期三");
        break;
    case 4:
        console.log("星期四");
        break;
    case 5:
        console.log("星期五");
        break;
    case 6:
        console.log("星期六");
        break;
    case 7:
        console.log("星期日");
        break;
    default:
        console.log("输入错误");
}

 注意：需要注意的是一旦符合case的条件程序会一直运行到结束，所以我们一般会在case中添加break作为语句的结束。

3.2循环语句

循环语句和条件语句一样，也是基本的控制语句，只要满足一定的条件将会一直执行，最基本的循环语句：

循环的目的就是重复执行某些代码；

• while
• do…while
• for

1.for循环

语法：

for(初始化变量；条件表达式；操作表达式)｛

执行语句；

｝ 

for循环执行过程

1.第一步执行初始化表达式；   

2.第二步:执行条件表达式判断是否满足条件

3.第三步执行语句

4.第四步，执行更新表达式

5.从第二步开始执行循环。 

案例1:1~100相加

var sum=0;
    for(var i=1;i<=100;i++){
        sum +=i;
    }
    console.log(sum);

 

 案例2：1~100的平均值

<script>
    var sum=0;
    var avg=0;
    for(var i=1;i<=100;i++){
        sum +=i;
        
    }
    avg=sum/100;
    console.log("1~100的平均值"+avg);
</script>

案例3： 1~100的偶数和与奇数和

<script>
    var even=0;
    var odd=0;
    for(var i=1;i<=100;i++){
       if(i % 2 ==0){
        odd+=i;
       }  
    else{
        even+=i;
    }
}
    console.log("1~100的偶数和"+odd);
    console.log("1~100的奇数和"+even);
</script>

 

案例：一行打印五颗星星

<script>
    var str='';
    for(var i=1;i<=5;i++){
        str= str + "*";
    }
    console.log(str);
</script>

 

2.双重for循环

for(外层初始化变量；外层条件表达式；外层操作表达式)｛

    

for(里层初始化变量；里层条件表达式；里层操作表达式)｛

执行语句；

｝ 

｝ 

 案例1：打印5行5列的星星

<script>
    var str='';
    for(var i=1;i<=5;i++){
        for(var j=1;j<=5;j++){
        str= str + "*";
        }
        
        str=str+'/n';
    }
    console.log(str);
</script>

 

案例2：打印倒三角形 

<script>
    var str='';
    for(var i=1;i<=5;i++){
        for(var j=i;j<=5;j++){
        str= str + "*";
        }
        str=str+'\n';
    }
    console.log(str);
</script>

 

案例三：九九乘法表

<script>
    var str='';
    for(var i=1;i<=9;i++){
        for(var j=1;j<=i;j++){
            str += j + '*' + i + '=' +i*j + '\t';
        }
        str +='\n';
    }
    console.log(str);
</script>

 

 

3.while语句

while语句是一个最基本的循环语句，while语句也被称为while循环。

var i = 1;
while (i <= 10) {
    console.log(i);
    i++;
}

 输出结果：1-10

4.do...while

语法：

do{ 语句... }while(条件表达式);

do…while循环会至少执行一次

5.跳转控制

• break：结束最近的一次循环，可以在循环和switch语句中使用。
• continue：结束本次循环，执行下一次循环，只能在循环中使用。

 四.数组

 4.1数组的概念

数组是一组数据的集合，存储在单个变量下，数组内的各个值被称作元素，每一个元素都可以通过索引（下标）来快速读取，索引是从零开始的整数

注意：1.在JavaScript中是支持数组可以是不同的元素，这跟JavaScript的弱类型有关; 

           2.使用typeof检查一个数组对象时，会返回object 

4.2数组的创建方式

1. 使用new 关键字创建数组

//创建一个数组
var arr = new Array();
//x向数组中添加元素
arr[0]=1;
arr[1]=2;
arr[3]=3;

2.利用数组字面量创建数组

<script>
    //1.用数组字面量创建数组
    var arr=[];
    var arr1=[1,'ye',true,null];
    console.log(arr1);
</script>

 注意：1.数组的字面量是[]

2.声明数组并赋值称为数组初始化。

4.3访问数组元素

通过索引来访问，修改，设置对应的数组元素 。

语法：

数组名[]

<script>
    //1.用数组字面量创建数组
    var arr=[];
    var arr1=[1,'ye',true,null];
    //输出数组中的第2个元素
    console.log(arr1[1]);
</script>

 

 

4.4遍历数组

把数组中的值从头到尾访问一遍

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

 

 案例：计算数组的和

<script>
    //1.用数组字面量创建数组
    var arr1=[1,2,3,4];
    var sum=0;
    //输出数组中的第2个元素
    for(var i=0;i<arr1.length;i++){
        sum+=arr1[i];
    }
   console.log(sum);
</script>

 

4.5数组新增元素

 1.通过修改length长度新增数组元素

<script>
    var arr=['雷梦杀','司空长风','雷无劫']
    console.log(arr.length)
    arr.length=5
    console.log(arr.length)
    console.log(arr[3])
    console.log(arr[4])
</script>

 

注意：索引3,4空间没有给值默认值是undefined

2.通过修改数组索引添加数组元素

<script>
    var arr=['雷梦杀','司空长风','雷无劫']
    arr[3]='ye'
    console.log(arr);
</script>

 

 3.案例：冒泡排序

4.6数组方法

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

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.push("唐僧", "蜘蛛精", "白骨精", "玉兔精");
console.log(arr);
console.log(result);

pop()方法演示：该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.pop();
console.log(arr);
console.log(result);

unshift()方法演示：该方法向数组开头添加一个或多个元素，并返回新的数组长度

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.unshift("牛魔王", "二郎神");
console.log(arr);
console.log(result);

shift()方法演示：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.shift();
console.log(arr);
console.log(result);

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

var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.splice(3, 2);
console.log(arr);
console.log(result);
result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿");
console.log(arr);
console.log(result);

concat()方法演示：该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var arr2 = ["白骨精", "玉兔精", "蜘蛛精"];
var arr3 = ["二郎神", "太上老君", "玉皇大帝"];
var result = arr.concat(arr2, arr3, "牛魔王", "铁扇公主");
console.log(result);

join()方法演示：该方法可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用，作为连接符

---

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.join("@-@");
console.log(result);

reverse()方法演示：该方法用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组

var arr = ["孙悟空", "猪八戒", "沙和尚"];
arr.reverse();
console.log(arr);

 sort()方法演示：该方法可以用来对数组中的元素进行排序，也会影响原数组，默认会按照Unicode编码进行排序

var arr = ["b", "c", "a"];
arr.sort();
console.log(arr);

五.函数

5.1.概述

函数是由一连串的子程序（语句的集合）所组成的，可以被外部程序调用，向函数传递参数之后，函数可以返回一定的值。

注意：JavaScript中的函数也是一个对象，使用typeof检查一个函数对象时，会返回function 

5.2.函数创建：

使用 函数声明 来创建一个函数

 function 函数名([形参1,形参2,...,形参N]) { 语句... }

使用 函数表达式 来创建一个函数 

var 函数名 = function([形参1,形参2,...,形参N]) { 语句.... }

5.3.函数调用：

.对于无参函数：

// 函数声明
var fun = function () {
    console.log("哈哈，我执行啦！");
}

// 函数调用
fun();

 .对于有参函数

var sum = function (num1, num2) {
    var result = num1 + num2;
    console.log("num1 + num2 = " + result);
}

// 函数调用
sum(10, 20);

5.4.函数参数

1.形参和实参 

案例：

<script>
    function sum(num1,num2){
        console.log(num1+num2)
    }
    sum(1,2)
</script>

 

2.形参和实参的匹配问题

 

 

5.5函数返回值

可以使用 return 来设置函数的返回值，return后的值将会作为函数的执行结果返回，可以定义一个变量，来接收该结果

<script>
    function getResult(){
        return 777
    }
    console.log(getResult());
</script>

 

注意：1.在函数中return后的语句都不会执行，

2.如果return语句后不跟任何值就相当于返回一个undefined，如果函数中不写return，则也会返回undefined，return后可以跟任意类型的值 

5.6arguments使用

1.概述

       当我们不确定有多少个参数传递的时候，可以用arguments来获取，在JavaScript中，arguments实际上是当前函数的内置对象，所有函数都内置arguments对象，arguments中存储了传递的所有实参。

<script>
    function fn(){
        console.log(arguments)
    }
    fn(1,2,3)
</script>

 arguments是以伪数组的形式展示的，伪数组的特点：

1.具有length属性

2.按索引方式存储

3.不具有数组的方法

案例：利用函数求任意个数的最大值

<script>
    function getMax(){
        var max=arguments[0]
        for(var i=1;i<arguments.length;i++){
            if(arguments[i]>max){
                max=arguments[i]
            }
        }
        return max
    }
   num= getMax(1,2,3,4)
   console.log(num);
</script>

 

5.7this对象

解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象

• 以函数的形式调用时，this永远都是window
• 以方法的形式调用时，this就是调用方法的那个对象

//创建一个全局变量name
var name = "全局变量name";

//创建一个函数
function fun() {
    console.log(this.name);
}

//创建一个对象
var obj = {
    name: "孙悟空",
    sayName: fun
};

//我们希望调用obj.sayName()时可以输出obj的名字而不是全局变量name的名字
obj.sayName();

六 .作用域

6.1JavaScript作用域

1.代码在某个作用域或者某个范围内起作用

2.es6之前分为：全局作用域和局部作用域

6.2全局变量和局部变量

1.全局变量：在全局作用域下声明的变量

全局变量在任何位置都可以使用

在全局作用域下声明的变量

2.局部变量

在局部作用域下声明的变量

局部变量只能在该函数内部使用

3.全局变量和局部变量对比

全局变量在任何地方都可以使用，只有浏览器关闭时才会被销毁，因此比较占内存

局部变量只在函数内部使用，当其所在的代码块被执行时，会被初始化。当代码块运行结束后就会被销毁，更省内存。

6.3作用域链

1.概念

内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值，这种结构称为作用域链。（就近原则）

 2.7对象基础

1.概述：

Object类型，我们也称为一个对象，是JavaScript中的引用数据类型。它是一种复合值，它将很多值聚合到一起，可以通过名字访问这些值。对象也可以看做是属性的无序集合，每个属性都是一个名/值对。对象除了可以创建自有属性，还可以通过从一个名为原型的对象那里继承属性。除了字符串、数字、true、false、null和undefined之外，JavaScript中的值都是对象。

2.创建对象

 创建对象有两种方式：

第一种：

        var person=new Object;

        person.name="李白";

        person.age="300";

        console.log(person);

第二种：

var person{

 name: "孙悟空", age: 18

}

console.log(person);

3. 访问属性

访问属性的两种方式：

第一种方式：使用 . 来访问

对象.属性名

 第二种方式：使用 [] 来访问

对象[‘属性名’]

4.删除属性

 删除对象的属性可以使用delete关键字

delete 对象.属性名

var person = new Object();
person.name = "孙悟空";
person.age = 18;
console.log(person);

delete person.name
console.log(person);

 5.遍历对象

枚举遍历对象中的属性，可以使用for … in语句循环，对象中有几个属性，循环体就会执行几次。

基本语法：

for (var 变量 in 对象) {

}

案例：

var person = {
    name: "zhangsan",
    age: 18
}

for (var personKey in person) {
    var personVal = person[personKey];
    console.log(personKey + ":" + personVal);
}

 6.数据类型梳理

1.、基本数据类型

JavaScript中的变量可能包含两种不同数据类型的值：基本数据类型和引用数据类型。

JavaScript中一共有5种基本数据类型：String、Number、 Boolean、Undefined、Null。

基本数据类型的值是无法修改的，是不可变的。

基本数据类型的比较是值的比较，也就是只要两个变量的值相等，我们就认为这两个变量相等。

2.引用数据类型

引用类型的值是保存在内存中的对象。

当一个变量是一个对象时，实际上变量中保存的并不是对象本身，而是对象的引用。

当从一个变量向另一个变量复制引用类型的值时，会将对象的引用复制到变量中，并不是创建一个新的对象。

这时，两个变量指向的是同一个对象。因此，改变其中一个变量会影响另一个。

7.栈和堆梳理

JavaScript在运行时数据是保存到栈内存和堆内存当中的。

简单来说栈内存用来保存变量和基本类型，堆内存是用来保存对象。

我们在声明一个变量时，实际上就是在栈内存中创建了一个空间用来保存变量。

 如果是基本类型则在栈内存中直接保存，如果是引用类型则会在堆内存中保存，栈中保存的实际上是对象在堆内存中的地址。

var a = 123;
var b = true;
var c = "hello";
var d = {name: 'sunwukong', age: 18};

 2.9对象进阶

1.用工厂方式创建对象

// 使用工厂模式创建对象
function createPerson(name, age) {
    // 创建新的对象
    var obj = new Object();
    // 设置对象属性
    obj.name = name;
    obj.age = age;
    // 设置对象方法
    obj.sayName = function () {
        console.log(this.name);
    };
    //返回新的对象
    return obj;
}

for (var i = 1; i <= 1000; i++) {
    var person = createPerson("person" + i, 18);
    console.log(person);
}

2.用构造函数创建对象

每一个构造函数你都可以理解为一个类别，用构造函数所创建的对象我们也成为类的实例，那我们来看看是如何做的：

// 使用构造函数来创建对象
function Person(name, age) {
    // 设置对象的属性
    this.name = name;
    this.age = age;
    // 设置对象的方法
    this.sayName = function () {
        console.log(this.name);
    };
}

var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);

console.log(person1);
console.log(person2);
console.log(person3);

构造函数：构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写，构造函数和普通函数的还有一个区别就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用。

那构造函数是怎么执行创建对象的过程呢？我再来解释一下：

1. 调用构造函数，它会立刻创建一个新的对象
2. 将新建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
3. 逐行执行函数中的代码
4. 将新建的对象作为返回值返回

区分this

• 当以函数的形式调用时，this是window
• 当以方法的形式调用时，谁调用方法this就是谁
• 当以构造函数的形式调用时，this就是新创建的那个对象

3.原型

使用构造函数的方式进行创建对象，但是，它还是存在一个问题，那就是，你会发现，每一个对象的属性不一样这是一定的，但是它的方法似乎好像是一样的，如果我创建1000个对象，那岂不是内存中就有1000个相同的方法，那要是有10000个，那对内存的浪费可不是一点半点的，我们有没有什么好的办法解决，没错，我们可以把函数抽取出来，作为全局函数，在构造函数中直接引用就可以了，上代码：
 

// 使用构造函数来创建对象
function Person(name, age) {
    // 设置对象的属性
    this.name = name;
    this.age = age;
    // 设置对象的方法
    this.sayName = sayName
}

// 抽取方法为全局函数
function sayName() {
    console.log(this.name);
}

var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);

person1.sayName();
person2.sayName();
person3.sayName();

但是，在全局作用域中定义函数却不是一个好的办法，为什么呢？因为，如果要是涉及到多人协作开发一个项目，别人也有可能叫sayName这个方法，这样在工程合并的时候就会导致一系列的问题，污染全局作用域，那该怎么办呢？有没有一种方法，我只在Person这个类的全局对象中添加一个函数，然后在类中引用？答案肯定是有的，这就需要原型对象了，我们先看看怎么做的，然后在详细讲解原型对象。
 

// 使用构造函数来创建对象
function Person(name, age) {
    // 设置对象的属性
    this.name = name;
    this.age = age;
}

// 在Person类的原型对象中添加方法
Person.prototype.sayName = function() {
    console.log(this.name);
};

var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);

person1.sayName();
person2.sayName();
person3.sayName();

原型：

     创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象，即显式原型，原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

/*
   解决问题：+ 原型
   =>概念：每一个函数天生自带一个prototype是一个对象数据类型
   =>:每一个对象天生自带一个属性__proto__,指向所属构造函数的prototype
   =>当访问对象的成员的时候，首先在自己身上查找，如果没有就去__proto__查找
   如何解决问题：
   => 把需要添加给实列的方法，放在构造函数的原型上（prototype），通过实列进行访问
+原型
   =>构造函数天生自带的prototype
   =>作用：向构造函数中添加方法，给实列对象使用
   */
   //当函数书写完毕，就会产生一个prototype
   function Person(){}
   Person.prototype.a=100;
   Person.prototype.b=200;
   console.log(Person.prototype);

   //创建一个实列对象p1,
   //p1所属的构造函数就是Person

   var p1= new Person()
   console.log(p1.__proto__);
   console.log(p1.__proto__===Person.prototype)

   //当访问p1的a成员时
   //访问p1.a的时候自己没有，就去__proto__,既是在Person.prototype上查找

   console.log(p1.a)

4.原型链

访问一个对象的属性时，先在自身属性中查找，找到返回， 如果没有，再沿着__proto__这条链向上查找，找到返回，如果最终没找到，返回undefined，这就是原型链，又称隐式原型链，它的作用就是查找对象的属性(方法)。

 注意：Object对象是所有对象的祖宗，Object的原型对象指向为null，也就是没有原型对象

5.toString()函数

toString()函数用于将当前对象以字符串的形式返回。该方法属于Object对象，由于所有的对象都"继承"了Object的对象实例，因此几乎所有的实例对象都可以使用该方法，所有主流浏览器均支持该函数。

// 使用构造函数来创建对象
function Person(name, age) {
    // 设置对象的属性
    this.name = name;
    this.age = age;
}

//创建对象的一个实例对象
var p = new Person("张三", 20);
console.log(p.toString());

 6.hasOwnProperty方法

如果我只想要检查自身对象是否含有某个方法或属性，我们可以使用Object的hasOwnProperty()方法，它返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。

// 创造一个构造函数
function MyClass() {
}

// 向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的名字";

// 创建一个MyClass的实例
var mc = new MyClass();
mc.age = 18;

// 使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
console.log("age" in mc);
console.log("name" in mc);

// 可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性，使用该方法只有当对象自身中含有属性时，才会返回true
console.log(mc.hasOwnProperty("age"));
console.log(mc.hasOwnProperty("name"));

2.10对象继承

JavaScript语言是通过一种叫做原型（prototype）的方式来实现面向对象编程的。那实现继承有一个最大的好处就是子对象可以使用父对象的属性和方法，从而简化了一些代码。

JavaScript常用的对象继承方式：

• 原型链继承
• 借用构造函数继承
• 组合继承（重要）

pt常用对象

1、call()和apply()

   call()和apply()这两个方法都是函数对象的方法，需要通过函数对象来调用，当对函数调用call()和apply()都会调用函数执行，在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this，call()方法可以将实参在对象之后依次传递，apply()方法需要将实参封装到一个数组中统一传递。
 

function fun(a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
    console.log("fun = " + this);
}

var obj = {
    name: "obj",
    sayName: function () {
        console.log(this.name);
    }
};

fun(2, 3);
console.log("===============");
fun.call(obj, 2, 3);

 2.this指向

• 以函数形式调用时，this永远都是window
• 以方法的形式调用时，this是调用方法的对象
• 以构造函数的形式调用时，this是新创建的那个对象
• 使用call和apply调用时，this是传入的那个指定对象

3.arguments参数

arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度，在调用函数时，我们所传递的实参都会在arguments中保存，比如：arguments.length 可以用来获取实参的长度，我们即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦，例如：
 

function fun(a, b) {
    // 通过下标获取第一个参数
    console.log(arguments[0]);
    // 通过下标获取第二个参数
    console.log(arguments[1]);
    // 获取实参的个数
    console.log(arguments.length);
    // 看看它的函数对象
    console.log(arguments.callee);
    console.log(arguments.callee == fun);
}

fun("Hello", "World");

3.3Date对象

在JavaScript中使用Date对象来表示一个时间，如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间；

var date = new Date();
console.log(date);

console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)

3.4、Math对象

Math和其它的对象不同，它不是一个构造函数，它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法

/*固定值*/
console.log("PI = " + Math.PI);
console.log("E  = " + Math.E);
console.log("===============");
/*正数*/
console.log(Math.abs(1));        //可以用来计算一个数的绝对值
console.log(Math.ceil(1.1));     //可以对一个数进行向上取整，小数位只有有值就自动进1
console.log(Math.floor(1.99));   //可以对一个数进行向下取整，小数部分会被舍掉
console.log(Math.round(1.4));    //可以对一个数进行四舍五入取整
console.log("===============");
/*负数*/
console.log(Math.abs(-1));       //可以用来计算一个数的绝对值
console.log(Math.ceil(-1.1));    //可以对一个数进行向上取整，小数部分会被舍掉
console.log(Math.floor(-1.99));  //可以对一个数进行向下取整，小数位只有有值就自动进1
console.log(Math.round(-1.4));   //可以对一个数进行四舍五入取整
console.log("===============");
/*随机数*/
//Math.random()：可以用来生成一个0-1之间的随机数
//生成一个0-x之间的随机数：Math.round(Math.random()*x)
//生成一个x-y之间的随机数：Math.round(Math.random()*(y-x)+x)
console.log(Math.round(Math.random() * 10));            //生成一个0-10之间的随机数
console.log(Math.round(Math.random() * (10 - 1) + 1));  //生成一个1-10之间的随机数
console.log("===============");
/*数学运算*/
console.log(Math.pow(12, 3));   //Math.pow(x,y)：返回x的y次幂
console.log(Math.sqrt(4));      //Math.sqrt(x) ：返回x的平方根

3.5、String对象

1.概述

在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象

• String()：可以将基本数据类型字符串转换为String对象
• Number()：可以将基本数据类型的数字转换为Number对象
• Boolean()：可以将基本数据类型的布尔值转换为Boolean对象

2.字符串属性

constructor属性演示：返回创建字符串对象的原型函数

var str = "Hello,World!";
console.log(str.constructor);

 length属性演示：可以用来获取字符串的长度

var str = "Hello,World!";
console.log(str.length);

3.字符串方法 

charAt()方法演示：该方法可以根据索引获取指定位置的字符

var str = "Hello,World!";
console.log(str.charAt(1));

concat()方法演示：该方法可以用来连接两个或多个字符串

var str = "Hello,World!";
console.log(str.concat("你好，", "世界！"));

 indexof()方法演示：该方法可以检索一个字符串中是否含有指定内容，如果字符串中含有该内容，则会返回其第一次出现的索引，如果没有找到指定的内容，则返回-1，可以指定一个第二个参数，指定开始查找的位置

var str = "Hello,World!";
console.log(str.indexOf("o"));
console.log(str.indexOf("o", 5));

 substring()方法演示：可以用来截取一个字符串

• 第一个参数：开始截取位置的索引（包括开始位置）
• 第二个参数：结束位置的索引（不包括结束位置），如果省略第二个参数，则会截取到后边所有的

• var str = "Hello,World!";
  var result = str.substring(1, 4);
  console.log(result);
  result = str.substring(1);
  console.log(result);
  result = str.substring(1, -1);
  console.log(result);
  

  split()方法演示：该方法可以将一个字符串拆分为一个数组，需要一个字符串作为参数，将会根据该字符串去拆分数组

• var str = "Hello,World!";
  var result = str.split(",");
  console.log(result);
  

• toUpperCase()方法演示：将一个字符串转换为大写并返回

• toLowerCase()方法演示：将一个字符串转换为小写并返回

3.6、RegExp对象

 1.概述

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

使用typeof检查正则对象，会返回object。

 2.创建正则对象

（1）使用对象创建

语法格式：

var 变量 = new RegExp("正则表达式"，"匹配模式");

匹配模式：

• i：忽略大小写
• g：全局匹配模式
• ig：忽略大小写且全局匹配模式

// 这个正则表达式可以来检查一个字符串中是否含有a
var reg = new RegExp("ab", "i");
var str = "Abc";
var result = reg.test(str);
console.log(result);

 （2）使用字面量创建

语法格式：

var 变量名=/正则表达式/匹配模式;

// 这个正则表达式可以来检查一个字符串中是否含有a
var reg = /a/i;
var str = "Abc";
var result = reg.test(str);
console.log(result);

3.正则进阶

需求信息：创建一个正则表达式，检查一个字符串中是否有a或b

语法格式：使用 | 表示或者的意思

// 这个正则表达式可以来检查一个字符串中是否含有a
var reg = /a|b|c/;
var str = "Abc";
var result = reg.test(str);
console.log(result);

需求信息：创建一个正则表达式，检查一个字符串中是否有字母

语法格式：[ ] 里的内容也是或的关系

// 这个正则表达式可以来检查一个字符串中是否含有字母
var reg = /[A-z]/;
var str = "Abc";
var result = reg.test(str);
console.log(result);

常见组合：

• [a-z]：任意小写字母
• [A-Z]：任意大写字母
• [A-z]：任意字母
• [0-9]：任意数字

需求信息：创建一个正则表达式，检查一个字符串中是否含有 abc 或 adc 或 aec

// 这个正则表达式可以来检查一个字符串中是否含有abc或adc或aec
var reg = /a[bde]c/;
var str = "abc123";
var result = reg.test(str);
console.log(result);

常见组合：

• [^a-z]：除了任意小写字母
• [^A-Z]：除了任意大写字母
• [^A-z]：除了任意字母
• [^0-9]：除了任意数字

需求信息：创建一个正则表达式，检查一个字符串中是否除了数字还有其它字母

// 这个正则表达式可以来检查一个字符串中是否除了数字还有其它字母
var reg = /[^0-9]/;
var str = "0123456789";
var result = reg.test(str);
console.log(result);

 4.正则方法

split()方法演示：该方法可以将一个字符串拆分为一个数组，方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串，这个方法即使不指定全局匹配，也会全都插分

var str = "1a2b3c4d5e6f7";
var result = str.split(/[A-z]/);
console.log(result);

 search()方法演示：该方法可以搜索字符串中是否含有指定内容，如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1，它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串，serach()只会查找第一个，即使设置全局匹配也没用

var str = "hello abc hello aec afc";
var result = str.search(/a[bef]c/);
console.log(result);

match()方法演示：该方法可以根据正则表达式，从一个字符串中将符合条件的内容提取出来，默认情况下我们的match()只会找到第一个符合要求的内容，找到以后就停止检索，我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容，可以为一个正则表达式设置多个匹配模式，且顺序无所谓，match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
 

var str = "1a2a3a4a5e6f7A8B9C";
var result = str.match(/[a-z]/ig);
console.log(result);

replace()方法演示：该方法可以将字符串中指定内容替换为新的内容，默认只会替换第一个，但是可以设置全局匹配替换全部

参数：

• 第一个参数：被替换的内容，可以接受一个正则表达式作为参数
• 第二个参数：新的内容

• var str = "1a2a3a4a5e6f7A8B9C";
  var result = str.replace(/[a-z]/gi, "@_@");
  console.log(result);