JavaScript知识点（阶段一）

JavaScript知识点（阶段一）

一. 初识JavaScript

1. 浏览器执行JS简介

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

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

2. JS的组成

2.1 ECMAScript

ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。

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

2.2 DOM—文档对象模型

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

2.3 BOM—浏览器对象模型

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

3. JS三种书写方式

同CSS一样，分为行内式，内嵌式，外部式

3.1 行内式JS

<input type="button" value="点我试试" onclick="alert('Hellow World')"/>

• 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性），如: onclick
• 注意单双引号的使用∶在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
• 可读性差，在html中编写JS大量代码时，不方便阅读;
• 引号易错，引号多层嵌套匹配时，非常容易弄混;
• 特殊情况下使用

3.2 内嵌式JS

<script>
    alert('Hello World');
</script>

• 可以将多行JS代码写到<script>标签中
• 内嵌JS是学习常用的方式

3.3 外部JS文件

<script src="my.js"></script>

• 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
• 引用外部JS文件的script标签中间不可以写代码
• 适合于JS代码量比较大的情况

4. 输入输出语句

方法：alert(msg)  说明：浏览器弹出警示框   

方法：console.log(msg)  说明：浏览器控制台打印信息

方法：prompt(info)  说明：浏览器弹出输入框，用户可以输入

二. 变量

1. 变量的使用

变量的使用分两步：1.声明变量 2.赋值

1.1 声明变量

// 声明变量
var age;//声明一个名为age的变量

var是JS的一个关键字，用来声明变量。

1.2 赋值

age = 18;

1.3 变量的初始化

var age = 18;

1.4 变量的命名规范

• 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($ )组成，如: usrAge, num01,_name
• 严格区分大小写。var app;和var App;是两个变量
• 不能以数字开头。18age是错误的
• 不能是关键字、保留字。例如: var、for、while变量名必须有意义。MMD BBDnl →age
• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
• 推荐翻译网站∶有道爱词霸

三. 数据类型

1. 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定

var age = 10;	//这是一个数字型
var areYouok ='是的';	//这是一个字符串

在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后变量就确定了数据类型。

JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型∶

var x = 6;		//x 为数字
var x ="Bill";		//x为字符串

2. 数据类型的分类

JS把数据类型分为两类∶

• JS把数据类型分为两类∶
  简单数据类型( Number , string,Boolean , Undefined,Null )
• 复杂数据类型( object)

2.1 简单数据类型（基本数据类型）

JavaScript中的简单数据类型及其说明如下∶

简单数据类型	说明	Number
Number	数字型，包含整型值和浮点型值，如21、0.21	0
Boolean	布尔值类型，如true , false，等价于1和0	false
String	字符串类型，如"张三”注意咱们js里面，字符串都带引号	”“
Undefined	var a;声明了变量a但是没有给值，此时a = undefined	undefined
Null	var a = null;声明了变量a为空值	null

2.1.1 数字型 Number

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

三个特殊值

alert ( Infinity) ; 	//Infinity 代表无穷大，大于任何数值
alert(-Infinity) ;	 //-Infinity 代表无穷小，小于任何数值
alert(NaN) ;	// NaN not a number 代表一个非数值

判断是否为数字：

isNaN()这个方法用来判断非数字―并且返回一个值如果是数字返回的是 false 如果不是数字返回的是true

console.log(isNaN(13));

2.2.2 字符串型String

JS推荐使用单引号 需要嵌套时注意引号嵌套

字符串转义字符

转义符	说明
\n	换行符，n是newline的意思
\\	斜杠\
\’	单引号
\"	双引号
\t	tab缩进
\b	空格，b是blank 的意思

字符串的长度

var str = 'fasdjfhawhefhk';
console.log(str.length);

字符串拼接

• 多个字符串之间可以使用＋进行拼接，其拼接方式为字符串＋任何类型=拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1.1字符串"相加"
alert( 'hello'+' '+ 'world ' ) ; // hello world
//1.2数值字符串"相加”
alert( 'hello'+' '+ 'world ' ) ; // hello world
//1.2数值字符串"相加”
alert ( '100'+ '100') ; // 100100
//1.3数值字符串＋数值
alert ( '11'+12);// 1112

3. 数据类型的转换

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

我们通常会实现3种方式的转换∶

• 转换为字符串类型
• 转换为数字型转换为布尔型

3.1 转换为字符串

方式	说明	案例
toString()	转成字符串	var num= 1; alert(num.toString());
String()强制转换	转成字符串	var num = 1; alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1; alert(num+“我是字符串”);

• toString()和String()使用的方式不一样。
• 三种转换方式，我们更喜欢第三种符号拼接字符串转换方式，这一种方式也称之为隐性转换。

3.2 转换为数字型

方式	说明	案例
parseInt(string)函数	将string类型转成整数数值型	parseInt(‘78’)
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat(‘78.21’)
Number()强制转换函数	将string类型转换为数值型	Number(‘12’)
js隐式转换( - * / )	利用算术运算隐式转换为数值型	‘12’- 0

• 注意parselnt和parseFloat单词的大小写，这2个是重点

3.3 转换为布尔型

方式	说明	案例
Boolean()函数	其他类型转成布尔值	Boolean(‘true’);

• 代表空、否定的值会被转换为false ，如关0、NaN、null、undefined
• 其余值都会被转换为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 (Boolean ( '小白')); // true
console.log (Boolean ( 12)) ; // true

四. 运算符

1. 算数运算符

加、减、乘、除、取余：+、-、*、/、%

2. 递增递减运算符

2.1 前置递增运算符

++变量，就是自加1，类似于 变量 = 变量 + 1 先加1，在返回变量的值

2.2 后置递增运算符

先返回变量的值，再加1

3. 比较运算符

概念︰比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值( true / false )作为比较运算的结果。

运算符名称	说明
<	小于号
>	大于号
>=	大于等于号(大于或者等于)
<=	小于等于号(小于或者等于)
==	判等号（会转型)
!=	不等号
=== !==	全等要求值和数据类型都一致

4. 逻辑运算符

概念∶逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

逻辑运算符	说明
&&	“逻辑与”，简称"与" and
||	“逻辑或”，简称"或"or
!	“逻辑非”，简称"非" not

5. 赋值运算符

赋值运算符	说明	案例
=	直接赋值	var usrName = ‘我是值’;
+=、-=	加、减一个数后在赋值	var age = 10; age+=5; // 15
*=、/=、%=	乘、除、取模后在赋值	var age = 2; age*=5; //10

6. 运算符优先级

优先级	运算符	顺序
1	小括号	()
2	—元运算符	++ – !
3	算数运算符	先*/%后±
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&&后ll
7	赋值运算符	=
8	逗号运算符	，

• —元运算符里面的逻辑非优先级很高
• 逻辑与比逻辑或优先级高

五. 流程控制

1. 顺序流程控制

按顺序自上而下执行

2. 分支流程控制

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码(执行代码多选一的过程），从而得到不同的结果

• if语句
• switch语句

2.1 if语句

if(条件表达式){
//执行语句
}

//if else双分支语句
if(条件表达式){
//执行语句
}
else {
    //执行语句
}

//多分支语句
if(条件表达式){
//执行语句
}
else if(条件表达式) {
    //执行语句
}
else if(条件表达式) {
    //执行语句
}
else {
    //执行语句
}

2.2 三元表达式

条件表达式 ? 表达式1 :  表达式2
//表达式的条件为真时 返回表达式1
//表达式的条件为假时 返回表达式2

2.3 switch语句

switch(表达式){
       case value1;
        执行语句1;
        break;
        
       case value2;
        执行语句2;
        break;
        
       default;
        最后的执行语句;
}

3. 循环流程控制

3.1 for循环

其语法结构如下：

for(初始化变量;条件表达式;操作表达式){
    //循环体
}

3.2 while循环

while(条件表达式) {
    //循环体
}
//当条件表达式结果为true 则执行循环  否则  退出循环

3.3 do while循环

do {
    //循环体
}while(条件表达式)
//先执行循环体，在判断条件

六. 数组

1. 数组创建

JS中创建数组有两种方式:

• 利用new创建数组
• 利用数组字面量创建数组

var arr = new Array(); //利用new创建数组

var arr = []; //利用数组字面量创建数组

2. 获取数组元素

数组的索引：用来访问数组元素的序号（数组下标从0开始）

3. 数组长度

arr(数组名).length

4. 数组新增元素

4.1 增加length长度

• 可以通过修改length长度来实现数组扩容的目的
• length属性是可读写的

4.2 修改索引新增数组元素

• 可以通过修改数组索引的方式追加数组元素
• 不能直接给数组名赋值，否则会覆盖掉以前的数据

七. 函数

1. 函数的使用

1.声明函数

2.调用函数

function 函数名(){
    //函数体
}
//调用函数
函数名();

2. 函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

3. 函数的参数

形参和实参

形参是形式上的参数，函数定义时候传递的参数；

实参是实际的参数，函数调用时传递的参数；

4. 函数的返回值

function 函数名() {
    return 需要返回的结果;
}
函数名();

return返回并终止函数并且只返回一个值

八. 作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高护程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

• 全局作用域
• 局部作用域

变量在作用域的影响下分为全局变量和局部变量

在函数内部没有声明的直接赋值的变量也是全局变量

JS采用链式作用域的访问机制

九. 预解析

1．我们js引擎运行js分为两步:预解析代码执行

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

(2)．代码执行按照代码书写的顺序从上往下执行

2．预解析分为变量预解析（变量提升）和函数预解析（函数提升）

1．我们js引擎运行js分为两步:预解析代码执行
(1)．预解析js引擎会把js里面所有的 var 还有 function提升到当前作用域的最前面(2)．代码执行按照代码书写的顺序从上往下执行
2．预解析分为变量预解析（变量提升）和函数预解析（函数提升）
(1）变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作

(2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数

十. 对象

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

1. 创建对象的三种方式

1.1 利用字面量创建对象

**对象字面量:**就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法。

var obj = {
    name: 'TT',
    age: 18,
    sayHi: function() {
        console.log('hi~');
    }
}

• 里面的属性或者方法我们采取键值对的形式 键 属性名:值属性值
• 多个属性或者方法中间用逗号隔开的
• 方法冒号后面跟的是一个匿名函数

使用对象

（1）调用对象的属性我们采取 对象名.属性名

（2）调用属性还有一种方法 对象名[‘属性名’]

（3）调用对象的方法sayHi 对象名.方法名()

1.2 利用new object 创建对象

var obj = new Object();
obj.name = 'TT';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
    console.log('hi~')；
}

1.3 利用构造函数创建对象

**构造函数︰**是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

语法格式：

function 构造函数名() {
	this.属性 = 值；
	this.方法 = function() {
	
	}
}
new 构造函数名();

• 构造函数名字首字母要大写
• 我们构造函数不需要return 就可以返回结果
• 我们调用构造函数必须使用 new
• 我们只要 new Star() 调用函数就创建一个对象 ldh {

利用for…in遍历数组或者对象属性

for(var k in obj) {
    console.log(k); // k变量 输出 得到的是k的属性名
    console.log(obj[k]); // obj[k] 得到的是 属性值
}

十一. 内置对象

• JavaScript中的对象分为3种∶自定义对象、内置对象、浏览器对象
• 前面两种对象是JS基础内容，属于ECMAScript;第三个浏览器对象属于我们S独有的，我们JS API讲解
• 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法)
• 内置对象最大的优点就是帮助我们快速开发
• JavaScript提供了多个内置对象:Math、Date . Array、string等

1. Math数学对象

Math. PI				//圆周率
Math.floor ()			//向下取整
Math.ceil()				//向上取整
Math.round ()			//四舍五入版就近取整注意-3.5结果是-3
Math.abs ()				//绝对值
Math.max ( )/Math.min()  //求最大和最小值

1.1 随机数方法random()

Math.random();

2. 日期对象Date()

获取当前时间必须实例化

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

Date()构造函数的参数

如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date(‘2019-5-1’)或者 new Date(‘2019/5/1’)

2.1 格式化日期

方法名	说明	代码
getFullYear()	获取当年	dObj.getFullYear()
getMonth()	获取当月(0-11)	dObj.getMonth()
getDate()	获取当天日期	dObj.getDate()
getDay()	获取星期几(周日0到周六6)	dObj.getDay()
getHours()	获取当前小时	dObj.getHours()
getMinutes()	获取当前分钟	dObj.getMinutes()
getSeconds()	获取当前秒钟	dObj.getSeconds()

2.2 获取总的毫秒数(时间戳)

获得Date总的毫秒数 不是当前时间的毫秒数而是距离1970年1月1号过了多少毫秒数

1．通过 valueOf() getTime()

var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());

2．简单的写法(最常用的写法)

var date = +new Date();

3．H5新增写法

console.log(Date.now());

3. 数组对象

3.1 数组的检测方式

1.instanceof 运算符 检测是否为数组

arr instanceof Array;

2.Array.isArray(参数) H5新增的方法

Array.isArray(arr);

3.2 添加删除数组的方法

方法名	说明	返回值
push(参数1…)	末尾添加一个或多个元素，注意修改原数组	并返回新的长度
pop()	删除数组最后一个元素，把数组长度减1无参数、修改原数组	返回它删除的元素的值
unshift(参数1…)	向数组的开头添加一个或更多元素，注意修改原数组	并返回新的长度
shift()	删除数组的第一个元素，数组长度减1无参数、修改原数组	并返回第一个元素的值

3.3 反转数组

arr.reverse();

3.4 数组排序

arr.sort();
arr.sort(function(a,b){
    return a - b;//升序排序 降序a b对调 b - a
})

sort()是基数排序，先看第一位从小到大排，第一位相同的，位数少的排前面

3.5 数组索引方法

方法名	说明	返回值
indexOf()	数组查找给定元素的第一个索引	如果存在返回索引号 如果不存在，则返回-1
lastIndexOf()	在数组中的最后一个的索引	如果存在返回索引号 如果不存在，则返回-1

// 返回数组索引号方法  indexOf(数组元素)	作用书返回该数组元素的索引号
// 它只返回第一个满足条件的索引号
// 它如果在该数组里找不到元素，则返回的是	-1
var	 arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.indexOf('blue'));

3.6 数组转换为字符串

方法名	说明	返回值
toString()	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join(‘分隔符’)	方法用于把数组中的所有元素转换为一个字符串	返回一个字符串

arr.toString();
arr.join('分隔符自定义')

4. 字符串对象

4.1 基本包装类型

把简单数据类型 包装成为了 复杂数据类型

//下面代码有什么问题?var 
str = 'andy' ;
console.log (str.length);

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js 会托基本数据类型包装为复杂数据类型，其执行过程如下:

//1.生成临时变量，把简单类型包装为复杂数据类型
var temp = new string ( 'andy' ) ;
//2.赋值给我们声明的字符变量
str = temp ;
//3.销毁临时变量temp = null;

4.2 字符串不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

var str = 'abc ';
str = 'hello ';
//当重新给str赋值的时候，常量'abc '不会被修改，依然在内存中
//重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
//由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str = '';
for (var i = 0; i < 100000; i++){
    str t= i;
}
console.log(str); //这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间

字符串里的所有方法都不会修改字符串本身（字符串本身是不可变的），操作完成会返回一个新的字符串

4.3 根据字符返回位置

方法名	说明
indexOf(‘查找的字符’,开始的位置)	返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是index索引号
lastIndexOf()	从前往后找，执照第一个匹配的

4.4 根据位置返回字符

方法名	说明	使用
charAt(index)	返回指定位置的字符(index字符串的索引号)	str.charAt(0)
charCodeAt(index)	获取指定位置处字符的ASCIl码(index索引号)	str.charCodeAt(0)
str[index]	获取指定位置处字符	HTML5，IE8+支持和charAt()等效

4.5 字符串常用操作方法

方法名	说明
concat(str1,str2,str3…)	concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用
substr(start,length)	从start位置开始（索引号) , length 取的个数重点记住这个
slice(start, end)	从start位置开始，截取到end位置，end取不到(他们俩都是索引号)
substring(start, end)	从start位置开始，截取到end位置，end取不到基本和slice相同但是不接受负值
toUpperCase()	将字符串转为大写
toLowerCase()	将字符串转为小写

十二. 简单数据类型和复杂数据类型

1. 简单类型和复杂类型内存分配

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

• 值类型︰简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string , number , boolean , undefined , null
• 引用类型︰复杂数据类型，在存储时变量中存储的仅仅是地址(引用），因此叫做引用数据类型通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等

堆栈空间分配区别:

1. 栈(操作系统）︰由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;

   简单数据类型存放到栈里面

2. 堆(操作系统）:存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

   复杂数据类型存放到堆里面

2. 简单数据类型和复杂数据类型传参

2.1 简单数据类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量

function fn(a) {
    a++;
    console.log(a) ;
}
var x = 10;
fn (x) ;
console.log(x);

2.2 复杂数据类型传参

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

function Person (name) {
    this.name = name;
}
function f1(x) { // x = p
    console.log (x.name) ;// 2．这个输出什么?
    x.name = "张学友" ; 
    console.log (x.name) ; // 3．这个输出什么?
}
var p = new Person ( "刘德华");
console.log (p.name) ;// 1．这个输出什么?
f1(p);
console.log (p.name) ;// 4．这个输出什么?