前端学习笔记——js入门（一）

一、Javascript简介

• JS是一门轻量级、基于面向对象的、即时编译的解释型语言。

语法特点：
严格区分大小写
每一行的代码应该以分号结尾，但有时可以省略
JS代码从上往下依次执行

• JS大多是依赖于浏览器运行的，JS代码引入网页的三种方式：

行内式，在HTML标签的属性中书写，不推荐
内部引入式，在script标签中直接书写
外部引入式，在.js文件中书写，并通过script标签的src属性引入
由于JS代码运行会阻塞页面渲染，建议将script标签卸载body标签的末尾

• 输出语句：打印需要的值，可用于调试代码
  页面输出：document.write()，会重置页面，不推荐
  弹窗输出：confirm()，会阻碍代码运行和页面渲染，不推荐
  控制台输出：console.log()，推荐使用

二、JS中的数据类型

1.四基（基本数据类型）两空（空指针类型）一对象

• 四基：number（数值类型）、boolean（布尔类型）、string（字符串类型）、symbol（符号类型）
• 两空：null（空对象）、undefined（未定义的空值）
• 一对象：object（在js中，“万物皆对象”）

2.创建变量

• 声明变量
  语法：var 变量名
  JS的变量拥有动态数据类型，用var关键字来声明，此时该变量的值没有人为设定，即没有值，默认为undefined。通过给变量赋值可以使变量变化为任意数据类型：

var a    //undefind 
var a = 10   //number
var a = '10'   //string
var a =  false//boolean

• 字面量：数据的直接形式，如：10，‘10’，‘hello world’。
• 使用 typeof 运算符，可以直接获取变量的数据类型，返回的结果通过字符串类型进行保存。
• JS中变量的数据类型可以相互转化

其他类型转化为Number：
Number()
parseInt()
parseFloat()

其他类型转化为String
String()
toString()
+''

其他类型转化为Boolean
Boolean()

三、JS中的基本运算

1.JS中的运算符

• 表达式：JS语句的基本构成单位
• 算术运算符：+、-、*、/、%、**(乘方)
  加减乘除，乘方。与许多编程语言不同的是，JS中的除法运算符/是数学意义上的除法而不是整除
• 赋值运算符：=
  将右边表达式的值赋给左边的变量
• 单目运算符：+、-、++、--、typeof
• 比较运算符：>、<、<=、>=、!=、==、===、!==
==:当两边的表达式数据类型不同时，先进行隐式转换将数据类型统一，然后比较值
  ===:不进行隐式转换，直接比较两个表达式的值
• 逻辑运算符：&&、||、!
&&:逻辑与，“一假即假，全真才真”，属于短路与，一旦前面的表达式为假，将不再判断后面的表达式的值。
  ||:逻辑或，“一真即真，全假才假”，属于短路或，一旦前面的表达式为真，将不再判断后面的表达式的值。
  不论是短路与还是短路或，返回的都是最后一个参与运算的表达式的值！

     var a=10||0 //10
     var a=0||false //false
     var a=10||1 //10
     var a=10&&0 //0
     var a=10&&1 //1

• 条件运算符：表达式1 ？ 表达式2 ： 表达式3
  当表达式1为真，返回表达式2的值，否则返回表达式三的值。

四、流程控制语句

1.条件语句

语法一：if(表达式) 语句；
语法二：if(表达式) 语句；else 语句；
语法三：if(表达式) 语句；else if(表达式) 语句；else 语句；

如果表达式的值为真，运行if后的语句（块语句），否则跳过f后的语句执行之后第一个else后的语句

2.分支语句

语法：switch(表达式){
case 表达式：语句；break；
case 表达式：语句；break；
…
default：语句；}

将switch后的表达式与case后的表达式进行匹配，如果全等，就执行匹配到的case后的语句，执行到break关键字后停止执行，结束switch语句；如果所有case语句后的表达式都不能与switch后的表达式匹配，则执行default后的语句；如果没有break关键字，当匹配到case后，后续的case无需再次匹配，直接执行后面的表达式。

3、循环语句

• while循环

语法:
while(表达式）{
语句；
}

判断表达式的值，如果为真，执行语句，执行完后并没有结束，而是再次判断表达式的值，知道表达式的值为假，否则会一直循环执行。
为了避免死循环，在使用循环语句时，必须指定循环结束的条件，需要设置循环控制变量，并在每次循环结束时更新循环控制变量。

• do…while循环

语法：
do{
语句；
}while(表达式);

与while类似，但会先执行循环体中的语句，然后判断while后表达式的值，如果为真则一直循环执行，直到表达式的值为假才会结束循环。
**与while循环的区别在于，当一开始条件就不成立，while不会进入循环体，而do…while却会执行一次循环体里的代码。

• for循环

语法：
for(表达式1;表达式2;表达式3){
语句；
}

表达式1只会在进入for循环时执行一次，通常用来对循环控制变量进行初始化。表达式2会在每次循环前计算一次，如果结果为真，则执行语句，否则结束整个循环。表达式三会在每次循环结束时计算一次，通常同来更新循环控制变量。
三个表达式可以省略:for(;;){语句}。省略表达式1对整个循环没有影响，可以正常执行；省略表达式2会陷入死循环，一般不省略；省略表达式3，如果循环体中没有更新循环控制变量，则会陷入死循环。

• break与continue关键字
  break:结束当前循环，不再执行break之后的循环体语句
  continue:跳过本次循环，进行下一次循环前的判断。

五、对象

1.object对象

• 在JS中，万物皆对象，数组、函数、字符串甚至一个数字都可以说是一个对象，这些都可以说是广义的对象。
  这里说的object对象是指狭义的对象，即由{}包裹的对象，对象是变量的容器。对象中的变量称为属性，以key:value这样的键值对方式存在，对象中的属性名是唯一的，如果给同一个属性赋值，会覆盖原本的值。对象中可以保存函数，这些函数称为方法。对象中可以存储不同类型的任何数据
• 创建对象

通过字面量

var obj = {
     name:'张三',
     age:19,
     sex:'女'
     }

通过构造函数，创建空对象

var obj =new Object();

• 访问对象中的数据
  直接访问对象整体：obj
  访问对象中的属性：obj.name或obj[‘name’]
  如果访问对象中不存在的属性，会返回undefined；
• 值存储和地址存储
  基本数据类型存储在栈空间，引用数据类型存储在堆空间，如果将一个对象赋值给一个变量，实际上是将对象在堆空间的存储地址赋值给了变量。一个空对象{}在堆空间也有存储地址，不等于null。

2.Array数组

• 创建数组
  字面量：var arr = [1,2,‘a’]
  构造函数：var arr = new Array();
• 访问数据
  通过下标值：arr[1];下标从零开始计算。
  返回数组长度：arr.length;
  在数组末尾添加一个元素：arr.push(‘b’);只有数组对象能调用该方法。
  删除并返回最后一个元素：arr.pop();t同样只有数组对象能调用该方法。

3.Function函数

• 函数：封装好的可以反复调用的可以实现特定功能的代码块。

• 创建和声明一个函数
  function func(参数列表）{
  语句；
  }
  参数可以有任意个，参数为零时成为无参函数，否则都是有参函数，函数声明后，需要调用才会执行函数体中的语句：
  func ();

• 函数的返回值
  函数也是一个表达式，默认返回只是undefined，如果想要指定函数返回值，可以使用return关键字将数据返回并结束函数的执行。

• 函数的存储类型
  函数也是一个对象，属于引用数据类型，函数名实际上保存的是函数保存的地址，可以将函数名赋值给一个变量。

• 函数的参数传递
  值传递：实参是基本数据类型，传递给形参的是一个数值，形参改变不影响实参的值。
  引用传递：实参是引用数据类型，传递给形参的是一个地址，形参和实参访问的实际上是同一个对象，形参改变会影响到实参的值。（本质上还是值传递）
  函数声明和创建时的参数称为形参，调用时的参数称为实参

• 作用域：对应的变量和函数可以被调用的区域，在ES6之前，JS中只有两种作用域：全局作用域，函数作用域
  作用域链：将多个作用域进行关联，形成一个隐式的链条，通过这个链条可以访问到上级作用域。
  函数外的作用域是全局作用域，其中的变量称为全局变量；函数内的作用于是函数作用域，其中的变量称为局部变量。

• 函数调用时，隐式地传入了两个参数：this、arguments.
  this指向一个对象，根据调用的情况指向不同的对象。
  arguments接收函数调用时传入的所有实参，即使实参数量多于形参，是一个类数组。