前端基础——JavaScript

前端基础学习第五天

一、DOM节点树

DOM（Document Object Model）文档对象类型，在页面被加载时，浏览器会创建页面的DOM，DOM节点树由HTML文档构成的，通过DOM节点树，JavaScript可以对HTML的内容进行操作。

二、JavaScript前言

JavaScript学习分为三部分：BOM、DOM、ES6。

BOM（Browser Object Model）浏览器对象类型，是HTML文档内容之外，可以与浏览器窗口互动的结构。

ES6（ECMAScript 6.0），是JavaScript的新版本标准。

JavaScript语言可以对BOM和DOM进行操作，而ES6是JavaScript的执行标准。

三、JavaScript数据类型

JavaScript数据类型分为两类，基础数据类型和引用数据类型。

1.基础数据类型

symbol（符号型）、boolean（布尔型）、number（数字型）、undefined（未定义）、string（字符串型）、null（对空）

2.引用数据类型

array（数组型）、object（对象型）、function（函数型）

3.数据类型转换

在JS中数据类型转换均为强制类型转换，而强制类型转换又分为显式类型转换和隐式类型转换。数据类型的转换都是针对基础数据类型的，不会转换引用数据类型的值。

显式类型转换明显的特征就是运用了方法或函数；

var a = 10;
var b =String(a);

隐式类型转换则是不运用函数或方法，通过其他途径转换；

var a = 10;
var b =a + '';
console.log(b,typeof(b));

+这个一元算术符只要左右任意一方是字符串型，则为字符串拼接，所以上述代码中的b就被转换成了字符串型。

（1）转换为字符串型

除了上面说的用+来转换成字符串型之外，还有显式类型转换的方式，比如：String()、toString()

String()是JS的内置全局函数，调用它来转换即可。

var a=10;
var b="1";
var c=null;
var d=undefined;
var e=true;
console.log(String(a),typeof(String(a)));
console.log(String(b),typeof(String(b)));
console.log(String(c),typeof(String(c)));
console.log(String(d),typeof(String(d)));
console.log(String(e),typeof(String(e)));

（ps:字符串打印出来是黑色的，数字是蓝色）

toString()是Object原型的方法，它不能转换null和undefined（会报错）。

var a=8;
var b=a.toString();
console.log(b,typeof(b));

注意String()和toString()它们本身来源就不一样，所以用法也会不一样。

（2）转换为数字型

Number()是JS的内置全局函数，调用它来转换即可。

var a=10;
var b="1";
var c=null;
var d=undefined;
var e=true;
console.log(Number(a),typeof(Number(a)));
console.log(Number(b),typeof(Number(b)));
console.log(Number(c),typeof(Number(c)));
console.log(Number(d),typeof(Number(d)));
console.log(Number(e),typeof(Number(e)));

parseInt()将字符串转换成数字取整形，和Number()的区别是它会先进行强制转换，转成字符串型，然后再转数字，而且在转换过程中遇到非字符数字会终止，但会输出已转换的数字。

parseFloat()将字符串转换为数字型的浮点数。

数字型还可用隐式转换，如下：-、*、%

var b="1";
var c=null;
var d=undefined;
var e=true;
var f=false;
console.log(b - 0,typeof(b - 0));
console.log(c - 0,typeof(c - 0));
console.log(d * 1,typeof(d * 1));
console.log(e % 1,typeof(e % 1));
console.log(f + 0,typeof(f + 0));

但是与显式转换还是有区别的。

（3）转换为布尔型

Boolean()函数会将代表空、否定的值转换为false，比如：""、0、NaN、null、undefined，其余转换为true。

var a=0;
var b=10;
var c="1";
var d=null;
var e=undefined;
var f=NaN;
console.log(Boolean(a),typeof(Boolean(a)));
console.log(Boolean(b),typeof(Boolean(b)));
console.log(Boolean(c),typeof(Boolean(c)));
console.log(Boolean(d),typeof(Boolean(d)));
console.log(Boolean(e),typeof(Boolean(e)));
console.log(Boolean(f),typeof(Boolean(f)));

四、ES6新增

1.var、let、const

let和const是ES6新增的，var、let、const用来定义变量，它们有很大的区别。

（1）var有变量声明提前的规则，并且变量a被var声明定义后，不能用let和const重复定义（可以用var重复定义）。

<script>
        console.log(a);
        var a = 10;
        console.log(a);
 </script>

代码运行后，根据词法分析会将a的函数声明运行在最前面：

var a;//声明在最前
console.log(a);
a = 10;//赋值依然在原位置
console.log(a);

运行结果：

（2）变量a被let声明定义后，不能被重复定义（const同样）。

（3）const定义的是常数变量，常数变量是不能改变的，所以给赋过值的const常量再赋值就会报错。

2.块级作用域（下一节详细讲解）

let和const就是块级作用域变量。

五、JavaScript作用域

JavaScript作用域是变量的集合，变量包括可访问变量、对象、函数。作用域种类又分为全局作用域、局部作用域（函数作用域）、块级作用域、动态作用域。

1.全局作用域

变量在函数之外定义，该变量就处于全局作用域，全局作用域中的变量是网页中所有脚本和函数均可使用（该变量名叫全局变量）。

2.局部作用域（函数作用域）

变量在函数内声明，变量为局部作用域（函数作用域），该变量只能在函数中被访问（名叫局部变量）。

3.块级作用域

ES6中新增了块级作用域，简单的理解，”{ }“之中的区域就是块级作用域，在”{ }“之中的变量就是属于块级作用域的，它们只能在块级作用域中被访问。

4.动态作用域

六、JavaScript对象

JavaScript对象分为三类：自定义对象、内置对象、浏览器对象。

对象（Object），包含属性和方法，W3school教程中用一个比喻很好的解释了对象：一辆汽车就是一个对象，汽车有重量和颜色等属性，也有启动和停止等的方法。

1.自定义对象

我们自己创建一个对象，该对象就是自定义对象。

var user ={
            firstname:"Max",
            lastname:"Black",
            id:123,
            sex:female,
            fullname:function(){

            }
}

创建对象也有多种方法，以后补充。

2.内置对象

JavaScript语言自带的对象，可供开发者使用，并且自带一些属性和方法。

（1）Math对象

它不是构造函数，可以用来做一些数学运算或任务。

属性&方法	作用
Math.PI	返回圆周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入，取最近的整数（负值取大的）
Math.abs()	绝对值
Math.max()/Math.min()	最大值/最小值
Math.random()	取0~1之间的随机数

var a= Math.random();
console.log(a);

（2）Date对象

date对象是一个构造函数，需要实例化才能使用，它可以用来处理日期和时间。

var a = new Date();
console.log(a);

（3）Array对象

Array对象可以单个变量存储多个值。

var arr =[1,2,3];

方法	作用
push()	将新元素添加至数组末尾，返回新长度
pop()	删除数组最后一个元素，并返回该元素
unshift()	将新元素添加到开头，返回新长度
shift()	删除数组第一个元素，并返回该元素
isArray()	检查是否为数组
toString()	将其转换为字符串
reverse()	颠倒数组元素的顺序，返回新数组
sort()	对数组元素进行排序，返回新数组

3.浏览器对象

浏览器对象，也就是BOM中的组成部分，它就是我们去进行一些关于浏览器的操作，常用的有：Window 对象、Navigator 对象、Screen 对象、History 对象、Location 对象。