《javascript基础》学习笔记 二

---

前言

学习地址：https://www.bilibili.com/video/BV1ZE411c7yM?p=42

一、循环

1、for循环

for循环的语法
语法：

 for(1、初始化表达式； 2、条件表达式；  4、更新表达式) { 
                         3、语句... 
 }

执行流程：

(1)执行初始化表达式，初始化变量(初始化表达式只会执行一次) 
(2)执行条件表达式，判断是否执行循环： 
               如果为true， 则执行循环(3)
               如果为false，终止循环
(4)执行更新表达式，更新表达式执行完毕继续重复（2）

2、while循环语句

while循环
语法：

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

执行流程：

 
 while语句在执行时， 先对条件表达式进行求值判断：
    
      如果值为true， 则执行循环体： 
          循环体执行完毕以后，继续对表达式进行判断 
          如果为true， 则继续执行循环体， 以此类推 

如果值为false，则终止循环 

如果有必要的话， 我们可以使用break来终止循环。

3、do…while循环

语法：

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

执行流程：

do...while语句在执行时，会先执行循环体：

循环体执行完毕以后，在对while后的条件表达式进行判断：
   如果结果为true， 则继续执行循环体， 执行完毕继续判断以此类推
   如果结果为false，则终止循环 

while循环和do…while循环的区别

这两个语句的功能类似，不同的是：
while是先判断后执行， 而do…while是先执行后判断。
也就是说， do…while可以保证循环体至少执行一次， 而while不能。

4、break和continue

break
● break可以用来退出switch语句或整个循环语句（循环语句包括for、while。不包括if。if里不能用break和continue，否则会报错）。
● break会立即终止离它最近的那个循环语句。
● 可以为循环语句创建一个label，来标识当前的循环（格式🏷循环语句)。
使用break语句时，可以在break后跟着一个label，这样break将会结束指定的循环，而不是最近的。

举例1:通过break终止循环语句

for (var i = 0; i < 5; i++）{
           console.log('i的值:'+ i);
           if (i == 2) {
           break;//注意，虽然在 if里使用了break，但这里的break是服务于外面的 for循环。
           }
   } 

打印结果：

  i的值 ：0
  i的值 ：1
  i的值 ：2  

举例2: label的使用

outer:
for (var i = 0; i < 5; i++）{
         console.log("外层循环i 的值:" +i)
         for (var j = 0; j < 5; j++){
         break outer;/ /直接跳出outer所在的外层循环（这个outer是我自定义的label）
         console.log("内层循环j的值:"+ j);
        }
}

打印结果:

外层循环 i 的值 : 0

continue
● continue可以用来跳过当次循环。
●同样，continue默认只会离他最近的循环起作用。

二、函数

1、函数的介绍

函数: 就是将一些功能或语句进行封装，在需要的时候，通过调用的形式，执行这些语句。

●函数也是一个对象
●使用typeof检查—个函数对象时，会返回function

函数的作用︰
●将大量重复的语句写在函数里，以后需要这些语句的时候，可以直接调用函数，避免重复劳动。
●简化编程，让编程模块化。

来看个例子:

console.log("你好");
sayHello(); // 调用函数

//定义函数
function sayHello(){
      console.1og("欢迎");
      conso1e.log("we1come");
}

2、函数的定义和调用

第一步:函数的定义
方式一:使用函数声明来创建一个函数。语法∶

function  函数名([形参1,形参2...形参N]){  //语法中的中括号，表示"可选”
        语句...
}

举例:

function sum(a，b){
      return a+b;
}

解释如下:
● function:是一个关键字。中文是"函数”、“功能"。
●函数名字∶命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。
●参数:可选。
●大括号里面，是这个函数的语句。

PS:在有些编辑器中，方法写完之后，我们在方法的前面输入 /**，然后回车，会发现，注释的格式会自动补
齐。

方式二:使用函数表达式来创建一个函数。语法:

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

3、函数的调用

函数的参数:形参和实参

假设我们定义一个求和的函数。

形参∶
●可以在函数的中来指定一个或多个形参。
●多个形参之间使用，隔开，声明形参就相当于在函数内部声明了对应的变量，但是并不赋值。

实参:
●在调用函数时，可以在中指定实参。
●实参将会赋值给函数中对应的形参。

举例:

//调用函数
sum(3,4);
sum("3",4);
sum("Hello" , "world");
//定义函数:求和
function sum(a，b）{
console.log(a + b);
}

控制台输出结果:

7
34
helloworld

实参的类型:
函数的实参可以是任意的数据类型。

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

实参的数量:

注意:JavaScript里不会对函数实际传入的参数进行检测。可以传值，也可以不传值，也可以任意传多个值

调用函数时，解析器也不会检查实参的数量∶
●多余实参不会被赋值
●如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined。例如︰

function sum(a,b){
    console.log(a);
    console.log(b);
    console.log(a+b);
}

sum(6);

arguments
可以通过arguments获取所有的实际传递的参数
例如：

function add(){
// arguments:可以获取所有实际传递的参数
     var sum = 0;
     console.log( arguments)
     for(var i = 0;i<arguments.length;i++){
     sum = sum + arguments[i]
}
return sum
}
add(1,3,3,5,6,7)

4、函数的返回值

举例:

console.log(sum(3，4));

//函数:求和
function sum(a， b){
lreturn a + b;
}

return的作用是结束方法。

注意∶
return后的值将会作为函数的执行结果返回，可以定义一个变量，来接收该结果。
● 在函数中return后的语句都不会执行（函数在执行完return语句之后停止并立即退出)
● 如果return语句后不跟任何值，就相当于返回一个undefined
● 如果函数中不写return，则也会返回undefined
● 返回值可以是任意的数据类型，可以是对象，也可以是函数。

函数名、函数体和函数加载问题（重要，请记住）
我们要记住:函数名== 整个函数。
举例:

console.log(fn) == console.log(function fn( { alert(1) });
//定义fn方法
function fn(){
alert(1)
};

我们知道，当我们在调用一个函数时，通常使用函数()这种格式;但此时，我们是直接使用函数这种格式，它的作用相当于整个函数。

函数的加载问题:JS加载的时候，只加载函数名，不加载函数体。所以如果想使用内部的成员变量，需要调用函数。

fn(）和fn的区别【重要】
●fn(:调用函数。相当于获取了函数的返回值。
●fn:函数对象。相当于直接获取了函数对象。

立即执行函数
现有匿名函数如下:

function(a，b）{
console.log("a = " + a);
console.log("b = " + b);
};

立即执行函数如下:

(function(a，b) {
console.log("a = " + a);
console.log("b = " +b);
})(123，456);

立即执行函数:函数定义完，立即被调用，这种函数叫做立即执行函数。

立即执行函数往往只会执行一次。为什么呢?因为没有变量保存它，执行完了之后，就找不到它了。

方法
函数也可以称为对象的属性。如果一个函数作为一个对象的属性保存，那么我们称这个函数是这个对象的方法。

调用这个函数就说调用对象的方法( method )。相比于方法，它只是名称上的区别，并没有其他的区别。

函数举例:

//调用函数
fn();

方法举例:

//调用方法
obj.fn();

我们可以这样说，如果直接是fn()，那就说明是函数调用。如果是发现xx.fn()的这种形式，那就说明是方法调用。

三、作用域

1、作用域(Scope）的概念

作用域指一个变量的作用范围。在js中，一共有两种作用域:
●全局作用域

●函数作用域

2、全局作用域

直接编写在script标签中的JS代码，都在全局作用域。
●全局作用域在页面打开时创建，在页面关闭时销毁。
●在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用。

在全局作用域中:
●创建的变量都会作为window对象的属性保存。

●创建的函数都会作为window对象的方法保存。
全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到。

3、变量的声明提前（变量提升）

使用var关键字声明的变量（比如var a = 1），会在所有的代码执行之前被声明（但是不会赋值），但是如果声明变量时不是用var关键字（比如直接写a=1），则变量不会被声明提前。

举例1:

console.log(a);
var a = 123;

打印结果: undefined。（说明变量a被被提前声明了，只是尚未被赋值)

作用域
作用域:变量和函数生效的区域。作用域在函数定义时，就已经确定了。

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

执行期上下文:当函数执行时，会创建一个执行期上下文的内部对象。每调用一次函数，就会创建一个新的上下文对象，他们之间是相互独立的。当函数执行完毕，它所产生的执行期上下文会被销毁。

当函数内部的变量被另外一个函数所引用，那么这个函数的变量将不会在执行完毕后销毁。

参考链接∶
https://www.cnblogs.com/chenyingjie1207/p/9966036.html

作用域的上下级关系:
当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用**(就近原则)**。如果没有则向上一级作用域中寻找，直到找到全局作用域;如果全局作用域中依然没有找到，则会报错ReferenceError。

在函数中要访问全局变量可以使用window对象。(比如说，全局作用域和函数作用域都定义了变量a，如果想访问全局变量，可以使用window.a )

提醒1:
在函数作用域也有声明提前的特性:

·使用var关键字声明的变量，会在函数中所有的代码执行之前被声明

·函数声明也会在函数中所有的代码执行之前执行

因此，在函数中，没有var声明的变量都是全局变量，而且并不会提前声明。
举例1:

var a = 1;

function foo(）{
console.log(a);
a = 2;   //此处的a相当于window. a即全局变量a
}

foo();
console.log(a);    //打印结果是2

上方代码中，foo()的打印结果是1。如果去掉第一行代码，打印结果是uncaught ReferenceError : a is notdefined

提醒2∶定义形参就相当于在函数作用域中声明了变量。

function fun6(e){ 
//这个函数中，因为有了形参e，此时就相当于在函数内部的第一行代码里，写了var e;
      console.log(e);
}
fun6();        //打印结果为undefined
fun6(123);           //打印结果为123

匿名函数：

(function(){
     var a= 3;//匿名函数不会创建全局作用域
})();

四、面向对象

1、面向对象简介

对象的作用是:封装信息。比如Student类里可以封装学生的姓名、年龄、成绩等。

对象具有特征（属性）和行为（方法）。

面向对象︰可以创建自定义的类型，很好的支持继承和多态。

面向对象的特征:封装、继承、多态。

2、对象简介

基本数据类型和引用数据类型的对比
●基本数据类型（值类型）:String字符串、Number数值、Boolean布尔值、Null空值、Undefined未定义。
●引用数据类型（引用类型）:Object对象。

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

对象∶

只要不是那五种基本数据类型，就全都是对象。

如果使用基本数据类型的数据，我们所创建的变量都是独立，不能成为一个整体。

对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。

对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间。变量保存的是对象的内存
地址（对象的引用）。

换而言之，对象的值是保存在堆内存中的，而对象的引用（即变量）是保存在栈内存中的。

如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响。

例如∶

var obj = new object(）;
obj.name = "孙悟空";

var obj2 = obj;

//修改obj的name属性
obj.name ="猪八戒";

上面的代码中，当我修改gbj的name属性后，会发现，obj2的name属性也会被修改。因为gbj和obj2指向的是堆内存中的同一个地址。

3、对象的分类

1.内置对象:
● 由ES标准中定义的对象，在任何的ES的实现中都可以使用
●比如:Math、String、Number、Boolean、Function、Object…

⒉.宿主对象:
●由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。
●比如BOM DOM。比如console、 document。

3.自定义对象∶
●由开发人员自己创建的对象

4、对象的基本操作

创建对象
使用new关键字调用的函数，是构造函数constructor。构造函数是专门用来创建对象的函数。

例如∶

var obj = new object();

另外，使用typeof检查一个对象时，会返回object。

向对象中添加属性
在对象中保存的值称为属性。
向对象添加属性的语法∶

对象.属性名=属性值;

举例:

var obj = new Object();

//向obj中添加一个name属性

obj.name = "孙悟空";

//向obj中添加一个gender属性

obj.gender ="男";

//向obj中添加一个age属性
obj.age = 18;

console.log(SON.stringify(obj));//将obj以字符串的形式打印出来

打印结果∶

{
"name":"孙悟空"，
"gender":"男"，
"age" :18
}

1、构造函数创建对象方式

   var student = new Object()
    student.name = "小明";
    student.like ="唱跳"; 
    student.draw = function(){
           console.log(student.name +"会画画")
    }
           console.log(student)

2、字面量的方式创建对象

var teacher= {}//创建没有属性和方法的对象
    teacher.name ="老吴";
    teacher.age = 18;
    teacher.teach = function(){
            console.log(this.name+"教书育人")
    }
    console.log(teacher)

var teacher = {
    name:"老郑",
    age: 22,
    sing:function(){
        console.log(this.name+ "会唱歌")
    }
}

5、获取对象中的属性

方式1:

语法:

对象.属性名

如果获取对象中没有的属性，不会报错而是返回undefined 。

举例:

var obj = new object(;

//向obj中添加一个name属性
obj.name ="孙悟空";

//向obj中添加一个gender属性
obj.gender =*男";

//向obj中添加一个age属性
obj.age = 18;

//获取对象中的属性，并打印出来
console.log(obj. gender); //打印结果:男
console.log(obj.color）; //打印结果:undefined

方式2∶可以使用[]这种形式去操作属性

对象的属性名不强制要求遵守标识符的规范，但是我们使用是还是尽量按照标识符的规范去做。
但如果要使用特殊的属性名，就不能采用.的方式来操作对象的属性。比如说，123这种属性名，如果我们直接写成obj.123= 789，是会报错的。那怎么 办呢?办法如下:

语法格式如下:（读取时，也是采用这种方式）

对象["属性名"]=属性值

上面这种语法格式，举例如下:

obj["123"] = 789;

重要︰使用口这种形式去操作属性，更加的灵活，因为，我们可以在[门]中直接传递一个变量，这样变量值是多少就会读取那个属性。

修改对象的属性值
语法:

对象.属性名=新值
对象[属性名]=新值
obj.name = "tom";
obj[name] = "tom";

删除对象的属性
语法:

delete obj.name;
delete obj[name];

6、in运算符

通过该运算符可以检查一个对象中是否含有指定的属性。如果有则返回true，没有则返回false.
语法:

"属性名" in  对象
对象.hasOwnProperty('属性名')

举例:

//检查obj中是否含有name属性
console.log("name" in obj);
console.log(obj.hasOwnProperty('name'));

我们平时使用的对象不一定是自己创建的，可能是别人提供的，这个时候，in运算符可以派上用场。

7、对象字面量

如果要创建—个对象，我们可以使用下面这种方式:

var obj = new Object();

但是上面的这种方式，比较麻烦，我们还有更简洁的方式来创建一个对象。如下。

使用对象字面量来创建一个对象:

var obj = { };

使用对象字面量，可以在创建对象时，直接指定对象中的属性。语法∶{属性名:属性值,属性名:属性值…}

例如∶

var obj2 = {
    name :"猪八戒"，
    age: 13,
    gender:"男"，
    test:  {
       name:"沙僧"
       }
//我们还可以在对象中增加一个方法。以后可以通过obj2.sayName()的方式调用这个方法
sayName: function(){
    console.log ('smyhvae');
   }
};

对象字面量的属性名可以加引号也可以不加，建议不加。如果要使用一些特殊的名字，则必须加引号。

属性名和属性值是一组一组的键值对结构，键和值之间使用:连接，多个值对之间使用，隔开。如果一个属性之后没有其他的属性了，就不要写，，因为它是对象的最后一个属性。

8、遍历对象中的属性:for in

语法:

for (var   变量   in   对象）{

}

解释∶对象中有几个属性，循环体就会执行几次。每次执行时，会将对象中的每个属性的属性名赋值给变量。

举例:

      <script type="text/javascript">
             var obj = {
             name: "smyhvae"，
             age: 26,
             gender:"男"，
           address: "shenzhen"
    };

//枚举对象中的属性
for (var n in obj) {
      console.log("属性名:" +n);
      console.log("属性值:"＋ obj[n]);// 注意，因为这里的属性名n是变量，所以，如果想获取属性值，不能写成obj.n，而是要写成obj[n]
 }
    </script>