JavaScript简介(一)

一、JavaScript简介(JS)

1、JS概述

 1、JavaScript是现阶段最主流的编程语言之一，是一种运行在客服端(浏览器)的脚本语言，同时也是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

 2、脚本语言（Script）：不需要进行编译，运行过程中由js引擎逐行来进行解释并执行。

 3、JS也可以基于Node.js来进行服务端(后端)编程。

2、浏览器执行解释JS

浏览器分为两部分 ：渲染引擎和JS引擎

l 渲染引擎：用于解析HTML+CSS，俗称内核，比如chrome浏览器的blink。

l JS引擎：也称为JS解释器。用于读取网页中的JavaScript代码，对其进行处理后运行。比如chrome浏览器的V8。

浏览器通过内置的JS引擎对JS代码逐行进行解释编译。

3、JS的组成

l ECMAScript(JS语法)：

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

l DOM(文档对象模型):

 Document Object Model，简称DOM。是W3C组织推荐的处理可扩展置标语言的标准编程接口，通过DOM提供的接口来对页面上的各种元素进行操作(大小、位置、颜色等)。

l BOM(浏览器对象模型):

 Browser Object Model，简称BOM。它提供了独立于内容的、可以于浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

二、JS基础语法

1、JS输入输出函数

方法

说明

alert(msg)

浏览器弹出警示框

console.log(msg)

浏览器控制台打印输出信息

prompt(info)

浏览器弹出输入框，用户输入

(string类型)

2、变量

 变量可以理解为存放数据的容器，便于操作存放在内存中的数据。

语法：

var 变量名

  

3、数据类型

 JavaScript 是一种拥有动态类型的编程语言。不同于JAVA、C#这类后端语言，需要规定具体的数据类型。JavaScript 不用声明具体的数据类型，会在程序运行中被自动确定。

值类型

(基本类型)：

字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）

引用类型

(对象类型):

对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）

  

  

简单数据类型
1、string(字符串)
1）、字符串转义符 \
转义符

解释说明

\n

换行符

\\

斜杠 \

\’

‘单引号

\”

“双引号

\t

Tab 缩进

\b

空格

2）、字符串的长度以及拼接
length属性

 用于获取字符串或数组长度

语法：

.length --返回长度

3）、字符串拼接
 多个字符串之间可以使用 + 进行拼接。

 在拼接前，会将与字符串拼接的任何类型转换为字符串，再拼接为一个新字符串。

 注：使用字符串进行拼接时 ‘’ 引号采用就近原则进行匹配。

  

  

2、boolean(布尔型)

布尔类型有true 和 false。

布尔型在与数值型进行拼接时，true为(1)，false为(0)。

3、Undefined(未定义)

一个声明后没有被赋值的变量会有一个默认值(Undefined)，表示未定义数据类型(基于JavaScript的变量的特性)。

4、Null(空)

表示为空(null)，需与Undefined区别开。

l Typeof 可用来获取检测变量的数据类型
语法：

var numb = 12;

Console.log(typeof numb); // 返回结果为 number

4、数据类型转换

1\转换为字符串

方式说明

.toString()转换为字符串

String()强制转换

转换为字符串

+ ’ ’ 加号拼接字符串

和字符串拼接的结果都是字符串(隐式转换)

2\转换为数值型
 

方式说明

案例

parseInt(string)函数

将string类型转换为整数数值型

parseInt(‘35’)

parseFloat(string)函数

将string类型转换为浮点数值型

parseInt(‘23.65’)

Number()强制转换函数

将string类型转换为数值型

Number(‘12’)

js隐式转换(- * /)

利用算术运算隐式转换为数值型

‘12’ - 0

3\转换为布尔型

方式

说明

案例

Boolean()函数

将其他类型转换为布尔型

Boolean(‘true’)

l 代表空、否定的值会被转换为false ,如： ‘ ’ 、0、NaN、null、undefined。

l 其余值都会被转换为true。 

二、JS函数

1、函数(function)

l 就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

l 函数可以带参数也可以不带参数

l 声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined

l 调用函数的时候，函数名括号里面的是实参

l 多个参数中间用逗号分隔

l 形参的个数需与实参个数匹配

2、函数的声明及调用

     // 带参数的函数声明

    function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔

    // 函数体

    }

    // 带参数的函数调用

    函数名(实参1, 实参2, 实参3...);

3、函数的返回值(return)

 在使用 return 语句时，函数会停止执行，并返回指定的值,如果函数没有 return ，返回的值是 undefined。

// 声明函数

function 函数名（）{

  ...

  return  需要返回的值;

}

// 调用函数

函数名();  // 此时调用函数就可以得到函数体内return 后面的值

注：

return 语句之后的代码不被执行。

return 只能返回一个值。如果用逗号隔开多个值，则返回最后一个值。

break、continue、return 的区别：
l break ： 结束当前循环体 (如 for、while)

l continue ：跳出本次循环，继续执行下次循环 (如for、while)

l return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

4、函数的Arguments对象

 JS函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

 arguments展示形式是一个伪数组，因此可以进行遍历。

伪数组具有以下特点：

  ①：具有 length 属性

  ②：按索引方式储存数据

  ③：不具有数组的 push , pop 等方法

三、JS作用域

1、概念

 一段程序代码所作用的程序范围，而限定这段程序的可用性范围就是作用域。

2、作用域的分类

JavaScript (ES6前) 中的作用域有两种：

l 全局作用域 (作用在script 标签范围内)

l 局部作用域 (函数作用域)

3、变量的作用域

1）、全局变量
在全局作用域下，声明的变量叫做全局变量（在函数外部定义的变量）

l 全局变量，变量的整个<script>标签中都可以使用。

l 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

2）、局部变量
在局部作用域下，声明的变量叫做局部变量（在函数内部定义的变量）

l 局部变量只能在该函数内部使用

l 函数的形参实际上就是局部变量

3）、区别
 全局变量：在整个<script>标签中都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存

 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

4、块级作用域(ES6)

 块作用域由 {} 包括。在 {} 里面声明的变量不能在 {} 外调用。

 ES6以前，JS没有块级作用域的概念。

四、JS预解析

1、概念：

 JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：

 预解析；(JS引擎会把JS里面所有的 var 还有 function 提升到当前作用域的最前面)

 代码执行。

 注：预解析只会发生在通过 var 定义的变量和 function 上。

2、变量预解析(变量提升)

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

     console.log(num); // 结果是多少？

    var num = 10; 

    // 输出返回undefined

    //相当于执行了以下代码

    var num;    // 变量声明提升到当前作用域最上面

    console.log(num); // 输出返回undefined

    num = 10;   // 变量的赋值不会提升

  

3、函数预解析(函数提升)

1、概念：

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

2、函数表达式声明调用问题

 函数表达式调用必须写在函数声明的下面。(因为函数表达式是通过变量的形式接收函数的，变量提升只提升变量，不提升赋值操作)

    // 匿名函数(函数表达式方式):若我们把函数调用放在函数声明上面

    fn();

    var  fn = function() {

      console.log('22'); // 报错

    }

    //相当于执行了以下代码

    var fn;

    fn();   //fn没赋值，没这个，报错

    var  fn = function() {

      console.log('22'); //报错

    }