JavaScript学习第1天：浏览器组成、JS的组成、变量、数据类型转化、运算符、流程控制、数组、函数

一、浏览器的组成

浏览器分成两部分：渲染引擎和 JS 引擎
渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink
JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。 JavaScript 语言归为脚本语言。

二、JS的组成

JavaScript由ECMAScript（JavaScript语法）、DOM（页面文档对象模型）、BOM（浏览器对象模型）组成。

ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

三、变量

变量是程序在内存中申请的一块用来存放数据的空间。

1、同时声明多个变量

同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。

var age = 10, name = 'zs', sex = 2;

2、声明变量特殊情况

情况	说明	结果
var age;console.log(age);	只声明不赋值	undefined
console.log(age);	不声明不赋值，直接使用	报错
age=10，console.log(age);	不声明只赋值	10

四、数据类型

JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

1、数据类型分类

JS 把数据类型分为两类：
① 简单数据类型 （Number,String,Boolean,Undefined,Null）
② 复杂数据类型 （object)

2、 isNaN()方法

isNaN()方法用来判断一个变量是否为非数字的类型，返回 true 或者 false

3、字符串转义符

转义符	说明
\n	换行符
\	斜杠\
\’	‘ 单引号
"	"双引号
\t	tab缩进
\b	空格

4、字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

经常会将字符串和变量来拼接，变量是不能添加引号的，因为加引号的变量会变成字符串，如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

5、特殊拼接

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1); // 2
console.log(false + 1); // 1

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

五、数据类型转换

可以使用 typeof 获取变量的数据类型

1、转化为字符串

方式	说明	举例
toString()	转换成字符串	var num=1; alert(num.toString())
String	转换成字符串	var num=1; alert(String(num))
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1; alert(num+‘你好’)

2、转化为数字型

方式	说明	举例
parseInt(string)	转化为整数	parseInt(‘89’)
parseFloat(string)	转化为浮点数	parseFloat(‘89.98’)
Number()强制转化	转化为数字	Number(‘89’)
js隐式转换（- * /）	利用算术运算隐式转换为数值型	‘12’- 0

3、转化为布尔值

方式	说明	举例
(Boolean()	转化为布尔型	(Boolean(‘true’)

代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined ,其余值都会被转换为 true

六、运算符

不要直接判断两个浮点数是否相等

var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100); // 结果不是 7， 而是：7.000000000000001

1、递增和递减运算符

递增（++）和递减（ – ）分为前置递增（递减）运算符和后置递增（递减）运算符，递增和递减运算符必须和变量配合使用。

前置递增：先自加，后运算
后置递增：先原值运算，后自加

区别：单独使用时，运行结果相同， 与其他代码联用时，执行结果会不同, 开发时，大多使用后置递增/减，并且代码独占一行，例如：num++; 或者 num–;

var num = 10;
alert(++num + 10); // 21
alert(10 + num++); // 20

var a = 10;
++a;      // ++a=11,a=11
var b = ++a + 2;     // ++a=12
console.log(b); // 结果：

var c = 10;
c++;      // c++=11,c=11,
var d = c++ + 2;  // c++=11,c=12
console.log(d); // 结果：13

var e = 10;
var f = e++ + ++e;  // e++=10,e=11,++e=12
console.log(f); // 结果：23

2、逻辑运算符

《1》布尔值参与的逻辑运算符
&&：两边都是 true才返回 true，否则返回 false，
||：两边都为 false 才返回 false，否则都为true

var num = 7;
var str = "我爱你~中国~";  //length = 7 
console.log(num > 5 && str.length >= num); // true
console.log(num < 5 || str.length >= num); // true

《2》短路运算（逻辑中断）
当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值
&&：如果第一个表达式的值为真，则返回表达式2； 如果第一个表达式的值为假，则返回表达式1
II： 如果第一个表达式的值为真，则返回表达式1；如果第一个表达式的值为假，则返回表达式2

七、流程控制

1、while循环

while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。

while (条件表达式) {
	// 循环体代码
}

使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环

2、do…while循环

do… while 语句先执行一次循环体，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

do {
	// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

3、continue break关键字

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。
break 关键字用于立即跳出整个循环（循环结束）。

八、数组

数组中可以存放任意类型的数据

九、函数

函数：就是封装了一段可被重复调用执行的代码块。在JavaScript中，形参的默认值是undefined。

1、函数的返回值

参数个数	说明
实参 等于 形参	输出正确结果
实参 大于 形参	只取到形参的个数
实参 小于 形参	多的形参定义为undefined，结果为NaN

2、函数的返回值return

通过 return 语句实现函数将值返回给调用者
在使用 return 语句时，函数会停止执行，并返回指定的值，如果函数没有 return ，返回的值是 undefined
return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

3、arguments

不确定要传递多少个参数时，可以使用argument来获取，arguments 实际上是当前函数的一个内置对象。
arguments展示形式是一个伪数组，因此可以进行遍历。特点：① 具有 length属性 ②按索引方式储存数据 ③不具有数组的 push , pop 等方法

// 利用函数求最大值
function maxValue() {
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (max < arguments[i]) {
max = arguments[i];
}
}
return max;
}
console.log(maxValue(2, 4, 5, 9));
console.log(maxValue(12, 4, 9));

4、函数的两种声明方式

《1》自定义函数（命名函数）
调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

// 声明定义方式
function fn() {...}
// 调用 
fn();

《2》函数表达式（匿名函数）
函数调用的代码必须写到函数体后面

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

5、函数的作用域

JS（es6前）中的作用域有两种： 全局作用域（(整个 script 标签内部）和局部作用域（函数作用域）
ES6之前，JS没有块级作用域，块级作用域由{}包括
在JS中，根据作用域的不同，变量可分为：全局变量（在函数外声明）和局部变量（函数内声明）
局部变量只能在该函数内部使用

作用域链：采取就近原则的方式来查找变量最终的值。

十、预解析

JS解析器在运行JS代码的时候分为两步：预解析和代码执行
 预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
 代码执行： 从上到下执行JS语句。

1、变量预解析

变量提升：变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

2、函数预解析

函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

alert(a);
 var a = 1;
 alert(a);
 function a() {
   return false;
 }
// 结果：先弹出函数表达式，然后弹出1

十一、对象

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

1、创建对象的3种方式

《1》字面量

var obj = {
	name: '憨瓜',
	sayHi: function() {
		alert('大家好')
	}
}
obj.sayHi()  // 调用sayHi方法

《2》new Object

var obj = new Object();
obj.name = '憨瓜';
obj.sayHi = function(){
	alert('大家好啊~');
}

《3》构造函数
构造函数 ：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值。
在 js 中，构造函数的特点：
① 构造函数用于创建某一类对象，其首字母要大写
② 构造函数要和 new 一起使用才有意义

function Person(name, age, sex) {
	this.name = name;
	this.sayHi = function() {
		alert('大家好');
	}
}
var hangua = new Person('憨瓜');
console.log(hangua.name);
console.log(hangua.sayHi());

注意
① 构造函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法
② 构造函数中不需要 return 返回结果
③ 利用构造函数创建对象的过程叫做对象的实例化

2、new关键字

new 在执行时会做四件事情：①在内存中创建一个新的空对象 → ② 让 this 指向这个新的对象 → ③ 执行构造函数里面的代码，给这个新对象添加属性和方法 → ④ 返回这个新对象（所以构造函数里面不需要return）

3、遍历对象

for...in 语句用于对数组或者对象的属性进行循环操作。

for (变量 in 对象名字) {  //  变量通常写为 `k 或者 key`。
// 在此执行代码
}