JavaScript基础

一、JS介绍

　　（1）JS特点

　　　　1. 脚本语言：嵌入在HTML文件中被浏览器执行

　　　　2. 弱类型语言：使用var 声明变量

　　　　3. 基于对象的语言：一切数据类型皆对象

　　　　4. 解释型语言：不需要编译，由浏览器的JS解析引擎解析执行

　　　　5. 动态化语言：变量的值和类型只有代码执行到赋值处才确定

　　（2）JS注释

　　　　// 单行注释  　　/**/ 多行注释

　　（3）JS代码的写入位置：

　　JS是脚本语言，必须嵌入到html文件中才能被浏览器的JAVASCTIPT引擎解析，嵌入形式如下：

　　1. 嵌入到html元素标签中：

　　　　　　//一般用来绑定事件

　　2. 嵌入html Script标签中：

　　　　　　一般放到body中最后

　　　　　　一般放到header中

二、变量

（1） 什么是变量

　　变量是计算机内存中存储数据的标识符，根据变量的名称可以获取到内存中存取的数据。

（2）为什么使用变量

　　程序数据都是加载到内存中执行的，每一个数据都有一个32位或64位的数字编号（地址），使用这些数字编号找到数据太麻烦，故用变量来标识这些数据的位置。

（3）变量命名

　　1. 用有含义的单词给变量命名，增加代码可读性，方便维护

　　2. 小驼房法命名

　　3. 一般以字母、$、下划线开头，中间、后面可以有字母、数字、下划线。

　　4. 不能含有关键词，如js 中var,console,..

（4）变量声明：

　　声明作用：告诉计算机以这个标识符开启一块内存空间准备存储数据

　　ECMA5语法：

　　var 变量名；　　var 变量名1，变量名2，...；

　　ECMA6语法：

　　let 变量名;

（5）变量赋值：

　　作用：给分配的内存空间写入数据，数据存储的数据结构取决于变量的数据结构类型

　　赋值用代码的表现形式：

　　　　1. 声明时就赋值：var name = "aa";  var name = "aa", age=23, job = "web";

　　　　2. 声明后赋值：var name , age, job;  name = "aa"; age  = "23"; 

（6）变量类型转换：

　　1. 其它类型转换为字符串型：

　　　　var.toString();　　String(var);

　　2. 其它类型转换为数值型：

　　　　number(var);　　如果不是数值型数据，则转换时会报NaN

　　　　parseInt(var);　　强制转换为整型, 字符串以数字开头，取数字部分；以字母开头报NaN

　　　　parseFloat(var);　　强制转换为浮点型

　　3. 其它类型数据转换为布尔型：

　　　　boolean(var);　　"" | null | undefined | [ ]  转换为false,其余转换为true

　　4. 获取变量数据类型：

　　　　typeof(var); typeof var;

（7）变量作用域：（变量的作用范围）

　　全局变量：在script标签类任何地方都能使用

　　　　js中不再函数中，使用var声明的变量都是全局变量，一旦var声明变量，只可改变值，不可删除（在脚本结束前，变量一直存在，占用着空间）

　　局部变量：只能在局部范围使用

　　　　js中在函数中声明的变量都是局部变量

　　块级作用域：｛｝之间定义的变量。如if,while，for中定义的变量，在结构执行完，变量就没有了。但js中没用块级作用域，if,while，for结束后，其中变量任然存在，全局生效。

　　　　ES6中let声明的变量具有块级作用域，以后声明变量，建议使用let 　　　

　　隐式全局变量：不使用var ,直接声明的变量。可以被删除。name = "lisi";　　delete 变量名；

　　作用域链：在函数中使用变量，先在函数内查找是否存在该变量，存在则使用其值，没赋值则为undefined；若不存在则向上层作用域查找，始终没找到则报错。

（8） 变量交换：交换2个变量的值

　　1. 使用中间变量

　　　　var num1 = 10;

　　　　var num2 = 20;

　　　　var tmp = num1;

　　　　var num2 = num1;

　　　　var num1 = tmp;

　　2. 利用数学运算

　　　　var num1 = num1 + num2;

　　　　var num2 = num1 - num2;

　　　　var num1 = num1 - num2;

　　3. 位运算

　　　　var num1 = num1 ^ num2;

　　　　var num2 = num1 ^ num2;

　　　　var num1 = num1 ^ num2;

（9）变量比较：

　　　==　　//变量的值进行比较

　　　===　　//变量的数据类型和值进行比较

　　（9）预解析：

　　　　js脚本在浏览器中执行分2个过程：预解析，代码执行

　　　　1. 将当前作用域的变量和函数声明提前（变量先，函数后），其它按照代码先后顺序执行。

　　　　2. 是分段预解析，不同script标签中的函数同名不会冲突。全局作用域变量在全局提前声明，函数中变量在函数作用域内提前声明。　　　　　　　

function f1(){
    console.log(name);
}
f1();
var name = "ss";
//输出结果为undefined，说明name已经声明，但未赋值。

function f1(){
   console.log(name);
　　var name = "ss";
} 
f1(); 
//输出结果为undefined，说明在执行函数前，函数内部变量声明被提前了。

function f1(){
　　var name = "wotamade";
}
console.log(name);
//报错，因为name只是在函数中声明，全局不存在name

 

三、js数据类型（数据结构类型）

　　数据类型分类：（不同数据类型，在内存中存储方式不一样）

　　原始数据类型：string,boolean,number,null,undefined,object

　　简单数据类型（值类型）：string,boolean,number　　//数据存储在栈区

　　复杂数据类型（应用类型）：object　　　　　　　　//数据存储在栈区和堆区，键在栈区，值在堆区

　　空类型：null,undefined

　　1. string　　字符串型，在代码中是用单引号或双引号包起来的字符表示

　　2. bollean　　布尔型，在代码中用true,false关键字赋值给变量表示

　　3. number　　数值类型（整数和小数）。在代码中直接用数字赋值给变量表示

　　4. null　　　　空类型（是一个指向空对象的指针）。在代码中用null关键字赋值给变量表示

　　5. undefined　　未定义类型。

　　6. object　　对象类型。

　　注意：   1. 出现undefined的原因：

　　　　　　　　a. 变量声明了，未赋值，则为undefined类型

　　　　　　　　b. 函数没有返回值，则函数返回值类型为undefined

　　　　　　2. 不是数字类型的变量进行数学运算，会报Nan错误　

四、运算符

　　1. 赋值运算符：=

　　2. 算数运算符：+ - * / %

　　3. 一元运算符：++ 、--　、！　只需要一个操作数就可以运算的操作符。num++ 参与运算后加1，++num参与运算前加1

　　4. 二元运算符：需要2个操作数的运算符

　　5. 三元运算符："a"?"b":"c"

　　6. 复合运算符：+= .= *= /= %=

　　7. 比较运算符：> < >= <= == != === !===

　　8. 逻辑运算符：&&、||、！

 五、流程控制：（3种形式）

　　1. 顺序结构：代码按从上到下的顺序执行

　　2. 分支结构：if , switch, 三元运算符

　　　　if(){}　　if(){}else{}　　if()elseif(){}else{}　　//if结构一般用于范围判断

　　　　switch( 值表达式)｛　　//switch结构一般用于值的判断，break表示跳出当前分支

　　　　　　case 常量表达式1 ：

　　　　　　　　语句1；break;

　　　　　　case 常量表达式2 ：

　　　　　　　　语句2；break;

　　　　　　......

　　　　　　default ：　　//当所有条件都不符合的时候，执行的语句

　　　　　　　　语句1；break;

　　　　｝

　　3. 循环结构：while(){}　　do{}while()　　for(){}

　　　　循环3要素：计数器，循环条件，循环体

//while循环：先判断条件，再决定是否执行循环体，循环可能一次都不执行
var i = 0;　　//计数器 i
while( i<100){　　//循环条件
　　console.log(1);　　//循环体
　　i++;　　//计数，特容易掉
}　　
//do-while循环：先执行一次循环体，再进行条件判断，循环至少会执行一次
var i = 0;　　　　//计数器 i
do{
　　console.log(i)；　　//循环体
　　i++;
}while(i<100);　　//循环条件
//for循环：和while类似
for（ var i=0; i<=100; i++）｛ //计数器和循环条件在括号中
　　console.log(i);　　//循环体
｝