初识javascript

一、javascript介绍

JavaScript 布兰登·艾奇（Brendan Eich，1961年～）。 JavaScript 是一种运行在客户端(自己的电脑)的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程.

作用： 表单动态校验（密码强度检测） --JS 产生最初的目的 网页特效、 服务端开发(Node.js)、桌面程序(Electron)、App(Cordova) 、控制硬件-物联网(Ruff)、游戏开发 (cocos2d-js)

浏览器分成两部分：渲染引擎和  JS 引擎
渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
JS 引擎：也称为JS解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的 V8

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码 。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

1.体验js：输出语句

console.log('控制台输出');         // 用来给程序员自己看运行时的消息
console.error('控制台输入错内容');  // 浏览器控制台打印输出信息
console.warn('输入警告');
document.write('输出到页面')   // 能识别标签
alert('你好吗？')   // 浏览器弹出警示框,主要用来显示消息给用户
prompt('请输入：');  // 浏览器弹出输入框，用户可以输入
confirm('确认删除吗？');

2.js 的书写位置

1.行内式JS：和事件关联

<input type="button" onclick = "alert('hello world')"  value = "按钮"/>  
<a href="javascript:;"></a>    // 点击超链接不会跳转    

2.内嵌js

<script>  alert('hello world');  </script>

3.外部js文件(推荐使用) script:src --> tab 键

<script src="./***.js"></script>  
// 注意:引入外部js文件的标签内部不能写js代码，它只是占位，适合于JS 代码量比较大的情况

3.js代码的书写规范

1.命名规范:
  函数、变量的命名 必须要有意义
  变量的名称 一般用名词（描述某物）
  函数的名称一般用动词 （做一件事情）
2.变量规范 : 在操作符的前后要加上空格
3.注释规范 :  单行注释 // 后 要有一个空格  vscode 默认多行注释修改为:ctrl+shift+/
4.空格规范 : 
  if () { }  小括号前后应有空格
  for 循环:  括号前后空格、操作符前后空格、分号后面 也要空格
  数组 ： 逗号后空格
5.换行规范：起始大括号
  if 语句 大括号 { }   ： 起始大括号 要和if 在一行
  for 循环  ：  起始大括号 要和for 在一行
  定义函数时： 起始大括号 要和function 在一行

4.作用域：变量或函数可以起作用的范围

在函数内部定义的变量，在函数外部是否可以访问？
function fun() {
  var num = 5; // 局部变量，只能在函数内部使用
}
console.log(num); // num is not defined 报错

ECMAScript 将作用域分2种

1.全局作用域

• 直接编写在script标签中的js代码，都在全局作用域中
• 全局作用域在页面打开创建，在页面关闭时销毁
• 在全局作用域中有一个全局对象，window，它代表的是一个浏览器的窗口，它由浏览器创建，可以直接使用
• 在全局作用域中：创建的变量都会作为window对象的属性保存 创建的方法都会作为window对象的方法保存

2. 函数作用域

• 调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁 每调用一次函数，就会创建一个新的函数作用域，它们之间是相互独立的
• 在函数作用域中可以访问到全局作用域的变量 在全局作用域中无法访问到函数作用域的变量
• 当在一个函数作用域操作一个变量时，它会现在自身作用域中寻找，如果有就直接返回 如果没有则向上一级作用域中寻找，如果全局作用域依然没有找到，则会报错
• 在函数中要访问全局变量可以使用window对象
• 在函数作用域中，也有声明提前的特性
• 在函数中，不使用var 声明的变量都会成为全局变量

作用域链

var num = 456;  	// 0级链
function fn1() {
  var num = 123;		// 1级链
  function fn2 () {
    console.log(num);	// 2级链
  }
  fn2();
} 
fn1(); // 123     当前作用域找不着变量时，会向它的上一级作用域链找

5.预解析

1.变量提升

把变量的声明提升到当前作用域的最上面，不包括变量的赋值.

变量的声明提前:
    使用var 关键字声明的变量，会在所有代码执行之前被声明（但不会赋值）
    声明变量不使用var关键字的，变量不会被声明提前

2.函数提升

把函数的声明提升到当前作用域的最上面，不包括函数的调用.

函数的声明提前
	使用函数声明形式创建的函数 function fun() { }
		它会在所有的代码执行之前就被创建，所以可以在函数声明前调用
	使用函数表达式创建的函数，不会被声明提前，所以不能再声明前调用 
    var fun = function() { }

3.实例

console.log(num); // undefined
var num = 10;

// 预解析后
var num;
console.log(num); // undefined
var num = 10;

var a = 25;
function abc(){
  alert(a);
  var a = 10;
}
abc();  //undefined

// 预解析后
var a;
function abc() {
  var a;
  alert(a);
  a = 10;
}
a = 25;
abc(); // undefined

f1();
console.log(c); 
console.log(b);
console.log(a);
function f1() {
  var a = b = c = 9; 
  console.log(a); 
  console.log(b);
  console.log(c);
}
// 9 9 9 9 9 Uncaught ReferenceError: a is not defined

在预解析的过程中，如果函数和变量的名相同，函数优先

console.log(a); // function a(){}
function a() {
  console.log('aaaaa');
}
var a = 1;
console.log(a); // 1


// 预解析后
var a;
function a() {
  console.log('aaaa');
}
console.log(a);     // function a(){}
a = 1;
console.log(a);   // 1

6.测试代码的程序性能

开启一个计时器，字符串作为参数，这个字符串将会作为计时器的标识.
console.time('计时器的名字')；
console.timeEnd（'计时器的名字'）;

二、字面量和变量

字面量：都是一些不可改变的值，一般不会直接使用字面量
变量：     var 变量名 = 字面量;
  通俗：变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。
  是计算机内存中存储数据的标识符，根据变量名可以获取到内存中存储的数据；
  用来保存字面量，变量的值可以任意改变；
  在js中使用var 关键字 声明一个变量，为变量赋值，声明和赋值同时进行
  
  为什么要使用变量？ **使用变量可以方便的获取或者修改内存中的数据**

1.变量的命名规则：

驼峰命名规则：getElementById/matherAndFather/aaaOrBbbAndCcc
1.变量命名必须以字母或是下标符号"_"或者"$"为开头。
2.变量名长度不能超过255个字符。
3.变量名中不允许使用空格，【首个字母不能为数字】。
4.【不用】使用脚本语言中保留的【关键字】及保留符号作为变量名。
5.变量名【区分大小写】。(javascript是区分大小写的语言)
6.汉语可以作为变量名。但是不建议使用！！！（low）

2.如何使用变量?

1.定义变量

// 变量在使用时分为两步： 1. 声明变量  2. 赋值
// 1、先声明，再赋值
var num;
num = 5;

// 2、声明并赋值
var num1=5；
var num2= 6；

// 3、同时声明多个变量
var n1, n2, n3;

// 4、同时声明多个变量并赋值
var n1=1, n2=2, n3=3;

// 案例：变量的使用
// 1.弹出一个输入框，提示用户输入姓名
// 2.弹出一个对话框，输出用户刚才输入的姓名
var name = prompt("请输入你的名字");
alert(name);

// 声明变量特殊情况
var age ; console.log (age);  // 只声明 不赋值  --> undefined
console.log(gender)  // 不声明 不赋值  直接使用 --> 报错
num = 10; console.log (num);  // 不声明 只赋值 --> 10 

2.获取变量的值：通过变量名获取

alert(num1);
console.log(num2);

3.获取/判断变量的类型

// 1. typeof   返回值 为string 类型的值
// 不同类型的返回值: string number boolean undefined object
var age = 18；
var name = 'abc';
var result = typeof name;
console.log(typeof age);	//number
console.log(typeof name);  // string
console.log(typeof result);  //string

//切记：千万不能使用typeof运算符来判断对象的构造函数
//typeof null === "object"
//typeof {}  === "object"
//typeof []  === "object"
//typeof function(){} === "function"
//typeof /abc/     === "object"

// 2. instanceOf  使用instanceof 可以检查一个对象是否是一个类的实例
/* 语法：
	对象 instanceof 构造函数
	console.log(per01 instanceof Person);  // true
如果是返回true， 反之 false
*/

// 3. ===

4.变量提升

定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升。

5.案例:交换两个变量的值

// 更新变量:一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
var a = 2;
var b = 3;
var tem; 
tem = a; // 临时变量tem 存储a的值 2
a = b; // a 的值 = b的值 3
b = tem;  // b 的值 = 临时变量的值 2
console.log(a,b); // 3 2  完成了变量值的交换

6.案例:不使用临时变量，交换两个数值的变量

var a = 2;
var b = 3;
a = a + b; // a=2+3 5 
b = a - b; // b=5-3 2
a = a - b; // a=5-2 3
console.log(a,b); // 3 2  完成了变量值的交换

7.变量小结

为什么需要变量？ 因为我们一些数据需要保存，所以需要变量
变量是什么？  变量就是一个容器，用来存放数据的。方便我们以后使用里面的数据
变量的本质是什么?  变量是内存里的一块空间，用来存储数据。 声明变量本质是去内存申请空间。
变量怎么使用的？  我们使用变量的时候，一定要声明变量，然后赋值
什么是变量的初始化？  声明变量并赋值我们称之为变量的初始化
变量命名规范有哪些？  例：见名知意------驼峰命名法 

三、数据类型

简单数据类型：Number 数值、String 字符串、Boolean 布尔、Null 空、Undefined 未定义

复杂(引用)数据类型：Object 对象、Array 数组、Function 函数、正则表达式、Date

1.Number 数值

1.数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。
// 1.八进制数字序列范围：0~7
var num1 = 07; // 对应十进制的7
var num2 = 019; // 对应十进制的19
var num3 = 08; // 对应十进制的8
// 2.十六进制数字序列范围：0~9以及A~F
var num = 0xA; 

总结：在JS中八进制前面加0，十六进制前面加  0x 

2.数字型范围

// JavaScript中数值的最大和最小值：  由于内存的限制，ECMAScript 并不能保存世界上所有的数值
alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

// 数字型三个特殊值
alert(Infinity);  // Infinity 代表无穷大，大于任何数值
alert(-Infinity); // -Infinity  代表无穷小，小于任何数值

alert(NaN);   // NaN  Not a number，代表一个非数值
console.log("abc"/18);  //结果是NaN   一个数字和字符串相乘 会返回 NaN
// Undefined和任何数值计算为NaN;
// NaN 与任何值都不相等，包括 NaN 本身

浮点数：因为精度丢失问题，所以不判断计算后的两个浮点数是否相等。

3.isNaN()

用来判断一个变量是否为非数字的类型，返回  true 或者 false
isNaN()   任何不能被转换为数值的值都会导致这个函数返回 true

isNaN译为是否符合一个标准，什么标准呢？不是一个数字的标 准，如果符合了那么就不是一个数字，不符合就是一个数字

isNaN(NaN);  // true
isNaN("blue");  // true
isNaN(123);   // false
var num = 12;
isNaN(num);  // false 
var msg = 'abc';
isNaN(msg); // true

2.String 字符串

1) 字面量定义方式: 用引号时，可单可双，唯独不可一单一双。可用.length看有几个字符。
var str = 'abc';
console.log(str.length);    // 3       获取字符的长度

2) 转译 转义符: \ 转义 \n 换行 \t 缩进-tab键4个空格范围 \b 空格
总结：无法输出的字符，先输出/，在输出字符。（"、\、换行等....）

3) 字符串不可变 在内存中不会立刻消失，只能二次赋值，原有的字符在一定时间 内被 垃圾回收器回收。

4) 字符串拼接 如果两个变量都是字符串,无论是否包含数字,只要是拼接,那么在前一个后面添加后一个字符串。

3.Boolean 布尔

计算机内部的存储： true为1  、 false 为 2
1. 字面量：  true和false，区分大小写。（大写不对）
2. true：  true、除0数字、"something"、Object(任何对象)为true
3. false：  false、0 、""、undefined 、null为false
4. if判断时会把()内的值强行转换成boolean类型进行判断。

4.Null 空

专门用来表示一个为空的对象

// 一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)
var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);   // 11
console.log(true + vari);   //  1

5.Undefined 未定义

只声明了变量，但未赋值

// 一个对象中，获取某个不存在的属性，值为undefined
var variable;
console.log(variable);    // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable);    // NaN
console.log(true + variable);  //  NaN

// undefined和null
// 任何数据类型和undefined运算都是NaN;
// 任何值和null运算，null可看做0运算。

null和undefined有最大的相似性。看看null == undefined的结果(true)也就更加能说明这点。但是null ===undefined的结果(false)。不过相似归相似，还是有区别的，就是和数字运算时，10 + null结果为：10；10 + undefined结果为：NaN。

提示：不同的数据类型在控制台中打印的样式是不一样的:
    数值-蓝色、字符串-黑色、布尔-紫红、null / undefined-灰色

6.简单数据类型的强制转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

1. 其它类型转 【字符串】

1.变量.toString() 方法， 该方法不会影响到原变量，它将转换的结果返回

var num = 123;
var isRight = true;
console.log(num.toString()); // '123'
console.log(isRight.toString()); // 'true'
// 注意：null 和 undefined 没有.toString()方法，如果调用方法，会报错
var str = null;
console.log(str.toString()); 
// Uncaught TypeError: Cannot read property "toString" of null at  ....

2.调用 String(变量) 构造函数, 将被转换的数据作为参数传递给函数

// 专门用来转换 null 和undefined
var str = null;
console.log(String(str)); // 'null'

var str = undefined;
console.log(String(str)); // 'undefined'

3.变量 + '空字符串' 或 变量 + '任意字符串'

var a = 123;
var b = true;
console.log(a + ''); // '123'
console.log(b + ''); // 'true'
// 如果有一边是字符串，一边是数值，会先把数值转换成字符串，再进行字符串拼接
// 这一种方式也称之为隐式转换

2.其它类型转 【数值】

1.Number() 构造函数

 此转换容易产生NaN，一旦被转换的变量中含有非数字字符，都容易出现NaN
 
// 1、 如果是纯数字的字符串，则直接将其转换为数字
// 2、如果字符串有非数字的内容，返回NaN
// 3、如果字符串是一个空串或一个全是空格的字符串，则转换为 0
var str = 'abc';
var isRight = true;
console.log(Number(str));	// NaN
console.log(Number(isRight));	// 1
var str = '123';
console.log(Number(str));	//123
var str = '123abc';
console.log(Number(str));	//NaN   如果字符串中有一个字符不是数字，返回NaN
var str = null;
console.log(Number(str)); 		// 0
var a;
console.log(Number(a)); 		// NaN

2.parseInt() 构造函数 解析成整数

var atr = '123abc'; // 123
var str = 'abc123' ; // NaN 如果字符串中第一个字符不是数字，返回NaN
var b = 'abc';   //纯字符串转换为数值类型，返回结果NaN
var c = true;   //无法把布尔类型转换为数值类型，返回结果NaN
console.log(parseInt(atr)); // 123
console.log(parseInt(b)); // NaN  
console.log(parseInt(c)); // NaN

// 和Number 的区别？
 1、无法转换布尔类型
 2、字符串如果以数字开头，会取出数字内容
 3、如果字符串 以 非数字开头，返回NaN 

3.parseFloat()

解析数字时 包含小数部分 只认第一个小数点

4.取正数 或取 负数

var str = '123';
console.log(+ str); // 123
console.log(- str); // -123
var str = '123abc';
console.log(+ str); // NaN

var isRight = true;
console.log(+ isRight); // 1

5.-0 (和0 相减)

var str = '123';
console.log(str - 0); // 123

3.其它类型转 【布尔】

1.Boolean()

【0 、NaN、null、undefined 、空字符串】 5种情况会转换成false, 其它都会转换成true

// 数字转布尔:  0 和 NaN 为false ,  其它都是true
// 字符串转布尔： 空字符串为false ，  其它都是true
// null 、undefined 转布尔 : false
// 对象转布尔 true

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log('------------------------------');
console.log(Boolean('123'));
console.log(Boolean('你好吗'));
console.log(Boolean('我很好'));

2.布尔类型的隐式转换 ! 取非

var str = '123';
var isOk = ! str;
console.log(isOk); // false
console.log(isOk); //true

7.数据在内存中是如何存储的？

简单类型： 分别存储在内存中的哪个位置？  栈中
复杂类型： 存储在堆中
内存中的两个逻辑区域（看不到，只能想像，靠画图来理解）

堆和栈中存储的数据有什么区别？
简单类型的数据： 当一声明，栈就会开辟空间，存储数据，当变量超出作用域之后，变量要释放（变量所占的内存区域要被销毁/回收），栈上的数据回收是由操作系统完成。

堆中的数据：在底层语言中，在堆上存储数据时，需要程序员手动开辟内存存储数据，
当数据用完后，程序员手工把数据给清理掉，现今 不用手动清除

1.简单类型在内存中如何存储?

var n1 =10;   // n1 = 10;
var n2 = n1;  // n2 = 10;
n1 = 20;      // n1 = 20;
// n1 和 n2 各自有 各自的值，当其中一个变量发生改变时，不会影响另一个s

2.复杂类型在内存中如何存储?

// 当在堆中开辟空间，存储一个对象时，栈上也会开辟一块空间，用来存储该对象的内存地址值（内存地址值一般用十六进制表示）
var p1 = new Person('zs', 18);
var p2 = p1;
p1.name = 'ls';
// p1 和 p2 保存的内存地址值 相同，指向同一个对象，当改变对象的属性值时，随之变化

3.简单类型作为函数的参数时，在内存中是如何存储的?

函数的参数，其实就是函数内部的局部变量 
简单类型：在函数内部修改参数的值，不会影响外部

4.复杂类型作为函数的参数时，在内存中是如何存储的?

// 复杂类型：在函数内部修改了对象的某个属性，会影响外部的值，因为指向的是同一个对象
// 案例1：替换数组中的值
var arr = [14, 18, 20, 40, 32];
function fn(array) { array[0] = 10; }
fn(arr);
console.log(arr); // [10, 18, 20, 40, 32]


// 案例2：冒泡排序
function isSort(array) {
  var isSort = true;
  for (var i = 0; i < array.length; i++) {
    for (var j = 0; j < array.length - 1-i; j++) {
      if(array[j] > array[j+1]) {
        isSort = false;
        var tem = array[j];
        array[j] = array[j+1];
        array[j+1] = tem;
      }}
    if(isSort) { break; }
  }
  return array;
}
var array = [12, 9, 0, 3, 6, 8];
isSort(array);
console.log(array);

四、操作符/运算符operator

通过运算符可以对一个或多个值进行运算，并获取运算结果
比如typeof就是运算符，可以获得一个值得类型，以字符串的形式返回

【表达式和返回值】:
  表达式：由 操作数和运算符 组成 ，是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
  简单理解：是由数字、运算符、变量等组成的式子 
表达式最终都会有一个结果，返回给我们，我们成为返回值 ,
  例 5+6   运算后返回相应的结果 

1.算数运算符

概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

// +加法运算、- 减法运算、、* 乘法运算、/ 除法运算、% 取模运算（取余）数
var a = 1 +2 + '3' ;    // 33 从左往右执行 
var b = '1' + 2 + 3;    // "123"

// 任何值和字符串做加法运算，都会转换为字符串，然后拼串，并返回
// 任何值 和 NaN 做运算都得 NaN
// 对非number类型的值 做运算时，会将这些值转换为number 再运算

// 浮点数的精度问题
// 浮点数值的最高精度是  17 位小数，但在进行算术计算时其精确度远远不如整数。
var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100); // 结果不是 7，  而是：7.000000000000001
// 所以：不要直接判断两个浮点数是否相等  !   

1. 我们怎么判断 一个数能够被整除呢?
它的余数是0 就说明这个数能被整除， 这就是 %  取余运算符的主要用途

2. 请问 1 + 2 *  3 结果是？
结果是7 ，注意算术运算符优先级的，先乘除，后加减，有小括号先算小括号里面的

2.递增递减/一元运算符

只有一个操作数 的运算符

// 前置++    先让变量自身+1， 然后在返回表达式的结果  
// 后置++     先返回表达式的结果，在对变量值自身+1
var num = 1;
console.log(++num);   // 2  ++num 表达式：先让自身+1，再返回表达式的结果
console.log(num++);   // 2  num++ 表达式：先返回表达式的结果自身，再对自身+1 

// 注意: 递增和递减运算符必须和变量配合使用。 

3.逻辑运算符

1.&&与(并且)

// 只有两个操作符同时为true，结果才为true！！！
1、如果两个值都为true，则返回后边的
2、如果两个值有false，则返回靠前的false
  如果第一个值为true，则必然返回第二个值
  如果第一个值为false，则直接返回第一个值

2.||或(二选一)

// 只有两个结果同时为false，结果才为false,否则都为true！！！
result = 2 || 1;  // 如果第一个值为true，则直接返回第一个值
                 // 如果第一个值为false，则返回第二个值

3.!非(取反)

如果对一个值进行两次取反，它不会变化
如果对非布尔值进行运算，则会将其转换为布尔，再取反
可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样

4.非布尔值的情况

var result = 1 && 2；
console.log(result);  //2  会先将其转换为布尔值，然后再运算，并且返回原值

4.赋值运算符

= 等于 可以将符号右侧的值赋值给符号左侧的变量
+=  a+=5 等价于 a = a+5
-= 、 *= 、/=、 %=

5.关系运算符/比较运算符

通过关系运算符可以比较两个值之间的大小关系,关系成立会返回true，关系不成立 返回false
>、>= 、 < 、 <= 、 == 、！=、 ===、！==

== 与 === 的区别:
    =  赋值  把右边给左边
    == 判断 判断两边值是否相等(注意此时有隐式转换)
    === 全等 判断两边的值 和数据类型 是否完全相等
    
非数值的情况:
1、对于非数值进行比较式，会将其转换为数字然后再比较
2、若符号两侧是字符串，会分别比较字符串中字符的unicode 编码
	是一位一位进行比较，如果两位一样 ，则比较下一位
        
特殊的相等运算:
undefined == null   // true   undefined 衍生自null，所以这两个值做相等判断是，会返回true
NaN == NaN  // false   NaN 不和任何值相等，包括它本身

isNaN（） 判断b的值是否是NaN
var b = NaN;
console.log(isNaN(b));   // true

6.条件运算符/ 三元运算符

语法： 条件表达式 ？ 语句1 ： 语句2；

执行流程:
条件运算符在执行时，首先对条件表达式进行求值
如果该值为true，则执行语句1，并且返回执行结果
如果该值为false，则执行语句2，并返回执行结果


// 判断两个值的大小
var a = 10, b =20;
var max;
max = a > b ? a : b;
console.log(max);

// 判断3个值的大小
var a = 10, b =20, c = 30;
var max;
max = a > b ? （a > c ? a : c） :  (b > c ? b : c);   // 此方法不推荐使用，不方便阅读
console.log(max);

7.#### 运算符优先级

1 () 
2 !、-（负数）、++、-- （正数省略+）（一元运算）
3 *、/、% 
4 +、- （加，减）（二元运算）
5 <、<=、<、>= （一级逻辑运算）
6 ==、!=、===、!==、 （二级逻辑运算）
7 && （三级级逻辑运算）
8 || 
9 ?: （三元运算）
10 =、+=、-=、*=、/=、%= （赋值运算）

五、流程控制

js中代码块，只具有分组的作用。在js中使用{}来为语句进行分组
{ } 代码块里的内容，在外部是完全可用的。
同一个{}中的语句称为一组语句，它们要么都执行，要么都不执行
在代码块的后边 不用再编写；了

流程控制语句：js中的程序是从上到下一行一行执行的，通过流程控制语句可以控制程序执行流程， 使程序可以根据一定的条件来选择执行

语句的分类：(1.2为选择结构，3为循环结构)
1、条件判断语句   if     if...else     if...else...if...else     
三目运算可以替代部分if...else...功能

2、条件分支语句 switch  判断条件出现的情况特别多的时候用switch

3、循环语句  
for   1．遍历数组首选for循环，简单循环使用for
while   不记循环次数（不知道循环多少次），首选while
do...while   无论怎样，至少执行一次是，使用do...while

1.条件判断语句

选择结构的特点： 要么执行if 后的语句，要么执行else后的语句

1.语法一：if (条件表达式) { 语句.... }

// 实例：求两个数的最大值
var a = 10;
var b = 20;
if(a > b) {
  alert('a = ' + a + ' a比较大');
}else {
  alert('b = ' + b + ' b比较大');
}

2.语法二： if (条件表达式) { 语句.... } else{ 语句... }

// 实例：判断一个数是偶数还是奇数
var num = + (prompt('请输入一个有效的数'));
if(num % 2 === 0 ) {
  alert('偶数');
}else {
  alert('奇数');
}

三元运算符 是对if...else 的简化写法 :
表达式1 ？ 表达式2 ： 表达式3；
  表达式1：布尔类型的表达式 --> 返回true /false
  当表达式1 成立，返回表达式2 的值
  当表达式1 不成立，此时返回表达式3 的值
  
// 实例：是否年满18岁？
var age = 19;
age > 18 ? alert('已成年') : alert('未成年');

// 实例：获取两个数中的最大值？
var num1 = 10;
var num2 = 20;
console.log(num1 > num2 ? num1 : num2);

3.语法三：if (条件表达式) { 语句.... } else if(条件表达式){ 语句... } else { 语句... }

// 实例：键盘输入期末成绩，当成绩为100时，'奖励一辆宝马'，当成绩为80-99时，'奖励iPhone'，当成绩为60-79时，'奖励一本书'，当成绩为60以下时，'揍一顿'。
var score = prompt('请输入成绩：');
if (score > 100 || score < 0 || isNaN(score)){
    alert('不是有效的值'); 		// 判断值是否合法
} else {
    if (score === 100) {
            alert('宝马，拿去~');
    }else if(score >= 80){
            alert('iPhone，拿去~');
    }else if(score >= 60){
            alert('参考书，拿去~');
    }else {
            alert('揍一顿');
    }
}


// 实例：由键盘输入三个值，分别存入num1，num2，num3，对它们进行排序，并且从小到大输出
var num1 = +(prompt('请输入第一个数')); 
var num2 = +(prompt('请输入第二个数'));
var num3 = +(prompt('请输入第三个数'));
if (num1 < num2 && num1 < num3) {
  if(num2 < num3) {
    alert(num1 + ',' + num2 +',' + num3);
  }else{
    alert(num1 + ',' + num3 +',' + num2);
  }
}else if (num2 > num1 && num2 < num3) {
  if (num1 < num3 ) {
    alert(num2 + ',' + num1 +',' + num3);
  }else {
    alert(num2 + ',' + num3 +',' + num1);
  }
}else if (num3 < num1 && num3 < num2) {
  if(num1 < num2) {
    alert(num3 + ',' + num1 +',' + num2);
  }else {
    alert(num3 + ',' + num2 +',' + num1);
  }
}

2.条件分支语句

语法： == 比较的是值， === 比较 值和类型 switch 语句中的判断使用的是 ===

switch（条件表达式） {
  case 表达式：
    语句；
    break；
  default：
    语句；
}

执行流程：
    在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较
    如果比较结果为true， 则从当前case处执行代码；
    如果比较结果为false，则继续向下比较

// 实例：输入一个数字，打印对应的日期
var num = + (prompt('请任意输入1-7之间的整数'));
switch(num) {
    case 1 :
            alert('星期一');
            break;
    case 2 :
            alert('星期二');
            break;
    case 3 :
            alert('星期三');
            break;
    case 4 :
            alert('星期四');
            break;
    case 5 :
            alert('星期五');
            break;
    case 6 :
            alert('星期六');
            break;
    case 7 :
            alert('星期日');
            break;
    default:
    alert('不是有效的星期数字');
}

// 实例：对于成绩大于60分的，输出'合格',小于60分的，输出'不合格'
var score = + (prompt('请输入你的有效成绩'));
switch (parseInt(score/10)) {
    case 10:
    case 9:
    case 8:
    case 7:
    case 6:
        alert('合格');
        break;
    default:
        alert('不合格');
        break;
}

3.循环语句

可以反复执行一段代码多次.

1.语法一：while（条件表达式） { 语句； 更新表达式；}

执行流程：
  先对表达式进行求值判断，如果值为true，则执行循环体
    循环体执行完毕后，继续对表达式进行判断
    如果为true，则继续执行循环体，以此类推
    如果值为false，则终止循环
    
创建一个循环，需要三个步骤：
    1、初始化一个变量
    2、在循环中设置一个条件表达式
    3、定义一个更新表达式，每次更新初始化变量    
    

2.语法二： do{ 循环体；}while(条件表达式);

执行流程：先执行循环体一次，再判断

3.语法三：for 循环

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

for(var i=1; i<=100; i++) { console.log(i);}  // 实例： 打印1-100之间所有

1.实例：求1-100之间所有数的和

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

2.实例：求1-100之间所有数的平均值

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

3.实例：求 1-100之间所有偶数的和

var sum = 0;
for (var i=1; i<=100; i++) {
  if (i % 2 === 0) {
    sum += i;
  }
}
console.log(sum); // 2550

4.实例：在控制台中 一行打印10个*：拼字符串

var str = '';
for(var i=0; i<10; i++){
	str += '* '; // 每次拼字符串
}
console.log(str); // * * * * * * * * * *

5.实例：打印10*10正方形

var str = '';
for(var i =0; i < 10; i++) { //外层循环控制行数
  for(var j =0; j < 10; j++) { // 内循环控制列数
    str += '* ';
  }
  str += '\n';
}
console.log(str);

6.实例：打印 逐渐递增三角形 1 ->5

var str = '';
for(var i =0; i < 5; i++) { //外层循环控制行数
  for(var j = 0; j < i+1; j++) { // 内循环控制列数
    str += '* ';
  }
  str += '\n';
}
console.log(str); 

7.实例：打印 逐渐递减三角形 5 ->1

var str = '';
for(var i =0; i < 5; i++) { //外层循环控制行数
  for(var j = i; j < 5; j++) { // 内循环控制列数
    str += '* ';
  }
  str += '\n';
}
console.log(str); 

8.实例：打印九九乘法表

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

9.实例：本金+利息

本金10000元存入银行，年利率是千分之三，每过1年，将本金和利息相加作为新的本金，计算5年后获得的本金是多少？

var money = 10000; // 本金
var rate = 0.003; // 利率
// money = money + money * rate // 1年的本金
for (var  i = 1; i <= 5; i++) {
  money += money * rate;
}
console.log(money); //10150.90270405243

10.实例：兔子的规律为数列 1,1,2,3,5,8,13,21，问第12个值是多少？

var n1 = 1;
var n2 = 1;
var n3;
for (var i = 3; i <= 12; i++) {
  n3 = n2 + n1;
  n1 = n2;
  n2 = n3;
}
console.log(n3); // 144

4.和循环相关的两个关键字

1.break

-   破坏循环，终止循环，不在继续
-   实例： 求整数50-200 之间第一个能被7整除的数

for(var i = 50; i <= 200; i++) {
  if(i % 7 === 0) {
    console.log(i);  //56
    break;
  }
}

2.continue

-   跳出当前循环，执行下一次循环
-   实例：求整数1-100的累加值，但要求跳过所有个位为3的数

var sum = 0;
for (var i =1; i <= 100; i++) {
  if (i % 10 === 3) {
    continue;
  }
  sum += i;
}
console.log(sum); // 4570

5.调试debugger

目的：确定错误的原因和位置，并解决错误

错误分：1) 语法错误 ： F12, 浏览器的控制台会给错误提示(较好解决); 2) 逻辑错误

调试方式：
-   console.log
-   alert
-   断点调试 : sources 在语句的序号处单击，设置断点， -- > F5刷新