JavaScript基础篇上(变量,数据类型,操作符,流程控制)

一.JavaScript

1.JavaScript的书写位置

-(1) 内嵌式js写法

•  在head里写<script></script>
  

-(2)行内式js写法—不推荐使用,不利于html和js的分离

•  <!-- <a href="javascript:alert(400);">这是a标签</a> -->
  

•  使用javascript伪协议    <a href="javascript:;">这是a标签</a>
  

-(3) 外链试js写法—推荐使用

•  <!-- <script src="tool.js"></script> -->
  

2.注释的使用

• 单行注释: //
• 多行注释: /**/

3.变量的使用

(1) 变量是用于存储数据的容器
(2).作用:用于存储数据,让数据可以复用
(3) 变量的使用方式:

•  .1:变量的声明方式:变量必须声明后再使用
   .2.var -可变的:js中的变量可以保存的数据类型是可变的(不限制)
  

(4) 变量的赋值:

•  	var num;
       num600;
   	console.log(num);
  

(5)变量的初始化操作

•  	 var num;
       num600;
   	console.log(num);
  

4.变量命名规范

•  (1)由字母,数字,下划线&符号组成,不能有数字开头
   (2)不能是关键字或保留字
   (3) 区分大小写
   (4)变量名必须有意义
   (5)遵守驼峰命名法
  

5.JavaScript语言特性

•   javascript是一种直译式脚本语言,是一种动态类型,弱类型,基于原型语言的语言,内置支持类型.
   脚本语言:(另一种语言形式编译语言),代码可以直接执行,不需要编译的语言形式.
   解释型:从上往下一行一行执行
   弱类型语言:不限制一个变量可以保存的数据类型
   动态类型语言:允许在代码执行过程中修改一个变量中的数据类型(直接改,类型转换操作)
  

•  特点:
   a.是一种解释型脚本语言(代码不进行预编译)
   b.主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为
   c.可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离
   d.跨平台特性,在绝大浏览器的支持下,可以在多种平台下运行(如windows,linux,Mac,Android,ios等)
  

二.数据类型

1.数据类型

• (1) 简单数据类型:

•  number  基本值:整数和小数
   NaN 不是一个数值
   isNaN 判断是不是一个数值
   infinity 无穷大
   -infinity 无穷小
   强制转换方式:
   Number(值);
   parseInt(); 	 --- 用于将字符串转换为整数
   			   		规则:从左向右查找,遇到不是数就停止
   parseFloat(); 	 --- 用于将字符串转化为小数
   隐式转换方式:
   	+ - * / %    都能转换
   小数计算的精度问题:先扩大倍数之后计算,计算结束后再除以扩大的倍数
  

• (2)string 字符串类型

•  a.标识方法:用单引号或双引号括起来的字符
   b.字符串拼接用+号
   	如果+号有一边是字符串类型,+号就是拼接功能
   	如果+号两边都是数值类型,+号就是计算功能
   c..转义符:能够把特殊符号变成字符串形式输出
   	给普通字符设备特殊含义 例如:\n \t
   d..字符串长度属性
   		string.length
   e..类型转换方式:
   		强制转换: String(值) 				 ---可以用于任意数据类型的字符串转换操作
   				 值.toString()				 ---undefined/null不能转换
   		隐式转换: +号转换
   		(注意:数据转换的基本原则就是不能改变数据的原内容,通常使用''操作
   		// console.log(6 + '');)
  

• (3)boolean

•  	a.强制转换方式：Boolean(值);
   	b.true和false
   		计算机内部存储：0为false 1为true
   	c.隐式转换操作:
   		!!值
   	d.类型转换结果
   		转换为false结果的有6个：false  0  ”空字符串“ NaN  null  undefined
  

• (4)undefined

•  	出现场景:
   	1.变量声明未赋值
   	2.函数的返回值为空  默认为undefined
   	3.访问的对象的属性不存在,默认为undefined
   	4.访问的数组的元素不存在,默认为undefined
   	5.当函数的形参没有接收到对应的实参时,返回undefined
  

• (5)null

•  注意点:
   检测null的类型
   	console.log(objedt.prototype.toString.call(null))
   	//结果为[object Null]
  

2.基本数据类型和复杂数据类型的区别

•  a.保存数据的个数不同
   b.在内存中的保存方式不同
   	基本类型是具体数值
   	复杂类型在内存中保存的是具体指的指针(地址)
   c.复制操作结果不同
   	复制的内存中保存的值不同
   	基本数据类型:复制之后,两个值没有关系
   	复杂数据类型:是同一个值
   d.函数参数值传递(复制)的结果不同
   
   小结:如果实参是基本数据类型,修改后必须设置返回值(获取型操作)
   	 如果实参是复杂数据类型,修改后不需要设置返回值(设置型操作)
  

3.基本数据类型的检测方式

•  a.typeOf-----------用于检测大部分的基本数据类型
   b. instanceof---------返回的是布尔值
    	eg: console.log(arr instanceof Array);//true
   		console.log('arr' instanceof Array);//false
   c.constructor属性
   	eg:  console.log(arr.constructor===Array);//true
   d.object.prototype.toString.call(数据)------能够得到数据的类型名称
   	eg:console.log(object.prototype.toString.call(null))//结果为[object Null]
   	   console.log(object.prototype.toString.call(arr))//结果为[object Array]
  

4.基本的包装方式

•  Number,Boolean,String
  

三.运算符(操作符)

• 1.算数运算符

•  + - * /
  

• 2.比较运算符

•  > < >= <=	所有的比较运算符均返回布尔类型值
  

• 3.比较运算符

•  也属于比较运算符的一部分，但是功能特殊，做单独说明
   用于进行相等比较操作  ==  !=  
   规则：比较数据的值，不比较类型。比较方式不严谨，不推荐使用。
   用于进行全等比较操作 ==  !== (推荐使用的方式)
   规则:不仅比较值,还比较类型
  

•  特殊的使用结果:
   NaN和任意数据类型比较均返回false
   console.log(NaN == NaN); //false
   NaN的检测方法: isNaN(值)  如果字不是数,返回true,如果是数,返回false
   console.log(isNaN(100)); // false
   console.log(isNaN(NaN)); // true
   console.log(isNaN('abc')); // true
  

• 4.逻辑运算符

• 4.1基本使用方式:

•  逻辑与(且) && :两个操作数均为true,结果为true;任意一个为false,结果为false
   逻辑或 ||：两个操作数均为false，结果为false，任意一个为true，结果为true
   逻辑非 ! : 取反
  

  4.2 特殊使用方式(短路操作):

•  出现场景：当某一个操作数为非布尔类型时:
   	- 从左往右看
   	-如果操作数不是布尔类型,隐式转换为布尔类型
   	-那个操作数可以决定式子的结果,就返回这个原操作数
   逻辑非的操作：如果操作数不是布尔类型，隐式转换后取反，返回值为布尔					类型
  

• 5.赋值运算符

•  =   +=  -=   *=   /=   %=
  

• 6.三元表达式

•   表达式1 ? 表达式2 : 表达式3
   	表达式1:是判断条件
   	表达式1和表达式2是语体
   	实际上是指 对if...else语句的一种简化写法
  

四.流程控制

1.顺序结构

• 顺序结构就是从上到下,按照标准流规则执行

2.分支结构

(1)if选择判断

•  语法结构：
   if (/* 条件表达式 */) {
   // 执行语句
   }
  

•  if (/* 条件表达式 */){
    // 成立执行语句
   } else {
    // 否则执行语句
   }
  

•  if (/* 条件1 */){
    // 成立执行语句
   } else if (/* 条件2 */){
     // 成立执行语句
   } else if (/* 条件3 */){
     // 成立执行语句
   } else {
     // 最后默认执行语句
   }
  

(2)switch分支

•  (1)做单个值的比较
   switch (expression) {//expression是个确定的值
    case 常量1:
    语句;
    break;
    case 常量2:
    语句;
    break;
    case 常量3:
    语句;
    break;
   	 …
    case 常量n:
    语句;
    break;
   default:
    语句;
    break;
   }
  

•  (2)做范围比较
   switch也可以做范围比较：switch（true）{
    case  score>=60:
   console.log('D');
    }//转化为布尔类型
   注意点：break可以省略，如果省略，代码会继续执行下一个case
       switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换
      （例如，字符串'10' 不等于数值 10）
  

3.循环结构

(1)for循环

•  for循环----for循环一般在确定循环次数的时候比较方便
   		-------for循环的表达式之间用的是;号分隔的
   		-------for (初始化表达式1; 判断表达式2; 自增表达式3) {
   		}
  

  (2)do…while循环

•  先执行循环体，再判断条件，（至少执行一次）
  

  (3)while循环

• -----while (循环条件) {
  }
  // 当循环条件为true时，执行循环体，
  // 当循环条件为false时，结束循环。

4.continue和break

•   (1) break:立即跳出整个循环，即循环结束，开始执行循环后面的内（直接跳到大括号）
    (2)continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）