js初学者

js的基础

js分类

js分为ECMAscript、文档对象模型DOM、浏览器对象模型BOM。其中，ECMAscript是javascript的核心，描述了语言的基本语法和数据类型。

js的书写位置

代码分为行内式（直接把代码书写在标签身上）、内嵌式（把代码书写在一个script 标签对内
）、外链式（把代码书写在一个.js 文件内）
外链式JS代码，不需要依赖任何行为，打开页面就会执行使用script 标签的src属性引入指定JS文件

js的输出语句

方法	说明
alert(msg)	浏览器弹出警示框
console.log(msg)	浏览器控制台打印输出信息
prompt(info)	浏览器弹出输入框,用户可以输入

js变量

变量的定义：在程序运行过程中，保存个中间值使用
变量的书写： var num = 100
一个变量只能保存一个值
变量的书写规则：
变量只能由数字字母下划线美元符组成
变量不能由数字开头
严格区分大小写
不能使用关键字
尽可能使用一些有意义的单词或者拼音

js的数据类型

基本数据类型

1.数值类型

var n1 = 100
var n2 = 2e10（2的10次方）
var n3 = 0x100（0x 16进制）
var n4 = 00100（00 8进制）
var n5 = 0b100（0b 二进制）
数字型的最大值

console. log (Number . MAX_ VALUE);

数字型的最小值

console . log (Number .MIN VALUE);

无穷大

console . log (Number .MAX_ _VALUE *2); // Infinity 无穷大

无穷小

console . log( -Number .MAX_ _VALUE*2); //r-Infinity 无穷大

非数字

console.log( ' pink老师-100); // NaN

2.字符串类型

一切以单引号或双引号包裹的内容都是字符串
转义字符

转义符	解释说明
\n	换行符，n是newline的意思
\	斜杠|
’	’ 单引号
"	" 双引号
\t	tab 缩进
\b	空格,b是blank的意思
检测获取字符串的长度clength

var str =' my name is andy' ;
console.1og(str.length); // 15

3.布尔类型

布尔类型只有两个类型，true 或 false，表示真或假

var flag =true; // flag布尔型
var flag1 =false;// flag1 布尔型
console.log(flag + 1); // true参与加法运算当1来看
console.1og(flag1 + 1); // false 参与加法运算当0来看
//如果一个变量声明未赋值就是undefined 未定义数据类型
var str;
console .1og(str );
var variable = undefined ;
console.log(variable + 'pink'); // undefinedpink
console.log(variable + 1); // NaN undefined和数字相加 最后的结果是NaN
// null 空值
var space =nu11;
console.log(space + 'pink' ); // nullpink
console.log(space + 1); // 1

4.空类型（Undefined、Null）

赋空值
null:表示有值，有一个空值
undefined: 表示没有值

5.typeof 检测数据类型

var num = 10;
console .1og(typeof num); // number
var str = 'pink' ;
console.log(typeof str); // string
var flag = true;
console .1og(typeof flag); // boolean
var vari = undefined;
console .10g(typeof vari); // undefined
var timer =
null ;
console. log(typeof timer); // object
// prompt取过来的值是 字符型的
var age = prompt( '请输入您的年龄”);
console.1og(age );
console .10g(typeof age);

数据类型转换

1.转数值

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

2.转字符串

把其他数据类型转换成字符串类型
toString() 转成字符串

var num= 1; alert(num.toString();

String()强制转换 转成字符串

var num = 1; alert(String(num));

加号拼接字符串 和字符串拼接的结果都是字符串

var num= 1; alert(num+“我是字符串");

3.转布尔

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

console.1og(Boolean( )); // false
console.1og(Boolean(0)); // false
console. log(Boolean(NaN)); // false
console .1og(Boolean(nu1l)); // false
console.log( Boolean(undefined)); // false
console.1og(Boolean( '1231' ));//ture
console .1og(Boolean('你好吗'));//ture
console .1og(Boolean( '我很好'));//ture

4.标识符、关键字、保留字

• 标识(zhi)符:就是指开发人员为变量、属性、函数、参数取的名字。

标识符不能是关键字或保留字

• 关键字:是指JS本身已经使用了的字,不能再用它们充当变量名、方法名。

包括: break. case、 catch、 continue、 default、 delete、 do、 else、 finally. for. function、 if、 in、instanceof、new、 return、 switch, this、 throw、 try、 typeof、 var. void、 while、 with等。

• 保留字:实际上就是预留的"关键字”, 意思是现在虽然还不是关键字,但是未来可能会成为关键字,同样不能使用它们当变量名或方法名。

包括: boolean. byte、 char、 class、 const、 debugger、 double、 enum. export、 extends、fimal、float、goto、implements、 import、 int、 interface、 1ong、 mative、package、private、protected、public、 short、 static、 super、 synchronized. throws、 transient、volatile等。

js运算符

运算符

运算符( operator )也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。

1.算数运算符

概念:算不运算使用的符号,用于执行两个变量或值的算不运算。

运算符	描述	实例
+	加	10 + 20 = 30
-	减	10 - 20 =-10
*	乘	10 * 20 = 200
/	除	10 / 20 = 0.5
%	取余数(取模)	返回除法的余数 9 % 2 = 1

浮点数值的最高精度是17位小数,但在进行算术计算时其精确度远远不如整数。

// 2.浮点数算数运算里面会有问题
console.log(0.1 + 0.2); // 0. 30000000000000004
console.1og(0.07 * 100); // 7 .000000000000001
// 3.我们不能直接拿着浮点数来进行相比较是否相等
var num = 0.1 + 0.2;
console.log(num == 0.3); // false

所以:不要直接判断两个浮点数是否相等!

2.递增与递减运算符

如果需要反复给数字变量添加或减去1 ,可以使用递增( ++ )和递减( – )运算符来完成。在JavaScript中,递增( + + )和递减( - -)既可以放在变量前面,也可以放在变量后面。放在变量前面时，我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。

• 1.前置递增运算符
  ++num前置递增,就是自加1,类似于num=num+1,但是++num写起来更简单。
  使用口诀:先自加,后返回值

• 2.后置递增运算符
  num++后置递增,就是自加1 ,类似于num= num + 1 , 但是num+ +写起来更简单。
  使用口诀:先返回原值,后自加

3.比较运算符

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

4.逻辑运算符

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

短路运算(逻辑中断)

短路运算的原理:当有多个表达式(值)时左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

• 1.逻辑与

●语法:表达式1 &&表达式2
●如果表达式1的值为真,则返回表达式2
●如果表达式1的值为假 ,则返回表达式1

console.1og(123 && 456); // 456
console.1og(0 && 456); // 0
console.log(0 && 1 + 2 && 456 * 56789); // 0
console.1og('' && 1 + 2 && 456 * 56789); //' '

• 2.逻辑或

●语法:表达式1||表达式2
●如果第一个表达式的值为真,则返回表达式1
●如果第一个表达式的值为假 ,则返回表达式2

console .1og(123 || 456); // 123
console.1og(123 || 456 || 456 + 123); // 123
console.1og(0 || 456 || 456 + 123); // 456

5.赋值运算符

概念:用来把数据赋值给变量的运算符。

6.运算符优先级

js流程控制

流程控制

在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行

流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。

1.顺序结构

顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行，程序中大多数的代码都是这样执行的。

2.分支结构

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

if 语句

// 1.if的语法结构 如果if
	if (条件表达式) {
 		//执行语句
		}
// 2.执行思路如果if里面的条件表达式结果为真true 则执行大括号里面的执行语句
// 如果if条件表达式结果为假 则不执行大括号里面的语句 则执行if语句后面的代码
// 3.代码体验
	if(3>5){
	alert('沙漠骆驼')
	};

if else 双分支语句

// 1.语法结构 if如果 else否则
// if (条件表达式) {
//执行语句1
}else{
//执行语句2
 }
// 2.执行思路如果表达式结果为真那么执行语句1 否则执行语句2
// 3.代码验证
var age = prompt( '请输入您的年龄:');
if (age >= 18) {
alert( '我想带你去网吧偷耳机');
} else {
alert('滚，回家做作业去');
}

if elseif 多分支语句

// 1.多分支语句 就是利用多个条件来选择不同的语句  执行得到不同的结果 多选1的过程
// 2. if else if语句是多分支语句
// 3.语法规范
if (条件表达式1) {
//语句1;
} else if (条件表达式2) {
//语句2;
} else if (条件表达式3) {
//语句3;
} else {
//最后的语句;
//4.执行思路
//如果条件表达式1满足就执行语句1执行完毕后，退出整个if分支语句
//如果条件表达式1不满足，则判断条件表达式2 满足的话，执行语句2以此类推
// 如果上面的所有条件表达式都不成立， 则执行else里面的语句
// 5.注意点
// (1) 多分支语句还是多选1最后只能有一个语句执行
// (2) else if里面的条件理论上是可以任意多个的
// (3) else if中间有个空格了

三元运算符

// 1.有三元运算符组成的式子我们称为三元表达式
// 2. ++num 3+5  ?:
// 3.语法结构
//条件表达式 ? 表达式1 : 表达式2
//4.执行思路
//如果条件表达式结果为真 则返回表达式1 的值如果条件表达式结果为假 则返回表达式2的值
//5.代码体验
var num = 10;
var result = num>5? '是的' : '不是的';//我们知道表达式是有返回值的
console .1og(result);

switch语句

switch语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置-系列的特定值的选项时,就可以使用switch。

// 1. switch 语句也是多分支语句也可以实现多选1 
// 2.语法结构switch转换、开关
	case 小例子或者选项的意思
	switch(表达式) {
	case value1:
	执行语句1;
	break;
	case value2:
	执行语句2;
	break ;
	......
	default:
	执行最后的语句;
}
// 3.执行思路利用我们的表达式的值和case后面的选项值相匹配如果匹配上，就执行该case里面的语句如果 都没有匹配上，那么执行default里 面的语句
// 4.代码验证
	switch (8) {
	case 1 :
	console.1og( '这是1' );
	break ;
	case 2:
	console .1og('这是2");
	break ;
	case 3:
	console.1og('这是3');
	break ;
	default:
	console.1og( '没有匹配结果');
// 5.switch注意事项
// 1.我们开发里面表达式我们经常写成变量
// 2.我们num的值和case 里面的值相匹配的时候是全等必须是值和数据类型一致才可以num === 1
// 3.break如果当前的case里面没有break则不会退出switch是继续执行下一个case

3.循环结构

for循环

// 1. for 重复执行某些代码， 通常跟计数有关系
// 2. for语法结构
// for (初始化变量;条件表达式;操作表达式) { 
//循环体
 }
// 3.初始化变量就是用var声明的一个普通变量， 通常用于作为计数器使用
// 4.条件表达式就是用来决定每次循环是 否继续执行就是终止的条件
// 5.操作表达式是每次循环最后执行的代码经常用于我们计数器变量进行更新(递增或者递减)
// 6.代码体验我们重复打印100局你好
for(vari=1;i<=100;i++){
	console.log('你好吗');
}

双重for循环

// 1.双重for循环语法结构
for (外层的初始化变量;外层的条件表达式;外层的操作表达式) {
for (里层的初始化变量;里层的条件表达式;里层的操作表达式) {
//执行语句;
}
}
//2.我们可以把里面的循环看做是外层循环的语句
// 3.外层循环循环一次， 里面的循环执行全部
// 4.代码验证
for(vari=1;i<=3;i++){
	console. log( '这是外层循环第’+ i + ' 次');
	for(varj=1;j<=3;j++){
		console.log( '这是里层的循环第' + j +次'); 
}|
}

while循环

// 1. while 循坏语法结构 while 当. . .的时候
// while (条件表达式) {
//
//循环体
// }
//2.执行思路当条件表达式结果为true则执行循环体否则退出循环
//3.代码验证
var num = 1;
while (num <= 100){
 	console.1og('好啊有');
	num++ ;
	}
// 4.里面应该也有计数器初始化变量
// 5.里面应该也有操作表达式 完成计数器的更新防止死循环

do while循环

// 1.do while循环语法结构
do {
//循环体
} while (条件表达式)
// 2.执行思路跟while不同的地方在于do while先执行一次循环体在判断条件如果条件表达式结果为真，则继续执行循环体，否则退出循环
// 3.代码验证
var i = 1;
do {
	console.log('how are you?' );
	i++ ;
} while (i <= 100)
// 4.我们的do while循环体至少执行一次

continue关键字

continue关键字用于立即跳出本次循环,继续下一次循环(本次循环体中continue之后的代码就会少执行一次)

// continue 关键字退 出本次T(当前次的循环)继续执行剩余 次数循环
for(vari = 1;i <= 5;i++){
	if(i == 3){
	continue; //只要遇见continue 就退出本次循环直接跳到i++
	}
	console.1og('我正在吃第’+ i + '个包子');
}

break关键字

break关键字用于立即跳出整个循环(循环结束)。

// break退出整个循环
for(var i = 1; i<= 5;i++){
	if(i == 3){
	break;
	}
	console.log( '我正在吃第' + i + '个包子');
}

数组

数组概述

• 什么是数组呢?

数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名 下的优雅方式。

数组的创建

• 利用new创建数组

vararr=newArray();//创建了一个空的数组

• 利用数组字面量创建数组[ ]

vararr=[];//创建了一个空的数组
var arr1 = [1, 2,'pink老师’，true];

我们数组里面的数据一 定用逗号分隔，数组里面的数据比如1,2,我们称为数组元素

获取数组元素

1.数组的索引

索引(下标) : 用来访问数组元素的序号(数组下标从0开始)。
数组可以通过索引来访问、设置、修改对应的数组元素,我们可以通过“数组名[索引]”的形式来获取数组中的元素。

2.遍历数组

可以通过“数组名[索引号]”的方式一项项的取出来。

// 遍历数组: 就是把数组的元素从头到尾访问一次
var arr = [ 'red','green' ,'blue'];
for(vari=0;i<3;i++){
	console.1og(arr[i]);
}
// 1.因为我们的数组索引号从0开始，所以i必须从0开始 i<3
// 2.输出的时候arr[i] i计数器当索引号来用

3.数组长度

//数组长度数组名. length
var arr = ['关羽'，'张飞'，'马超'，'赵云'，'黄忠'，'刘备’，'姜维'，pink'];
for (var i = 0;-i < arr .1ength; i++) {
	console . log(arr[i]);
}
// 1.数组的长度是元素个数 不要跟索引号混淆
// 2. arr. length 动态监测数组元素的个数

4.数组中新增元素

可以通过修改length长度以及索引号增加数组元素
●可以通过修改length长度来实现数组扩容的目的
●length 属性是可读写的

// 1.新增数组元素修改length长度
var arr = [ 'red', ' green', 'blue '];
console .1og(arr .1ength);
arr .length =5; //把我们数组的长度修改为了5里面应该有5个元素

// 2.新增数组元素修改索引号追加数组元素
var arr1 = ['red', ' green', 'blue ' ];
arr1[3] ='pink' ;
	console .1og(arr1);
arr1[4] = ' hotpink' ;
	console.log(arr1);
arr1[0] = 'yellow'; // 这里是替换原来的数组元素
	console . log(arr1);
arr1 = '有点意思';
	console. log(arr1); //不要直接给数组名赋值否则里面的数组元素都没有了

5.数组翻转

<script>
        var arr = ['sss', 'ddd', 'fff', 'ggg', 'hhh'];
        var newArr = [];// 声明新数组
        // 把旧数组索引号第4个取过来(arr. length - 1)， 给新数组索引号第0个元素(newArr . length)
        // 我们采取递减的方式i--
        for (var i = arr.length - 1; i >= 0; i--) {
            newArr[newArr.length] = arr[i];
        }
        console.log(newArr);
</script>

6.冒泡排序

概述：
冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，- -次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢浮到数列的顶端。

//冒泡排序
vararr=[5,4,3,2,1];
for(vari=0;i<=arr.length-1;i++){//外层循环管趟数
	for(varj=0;j<=arr.length-i-1;j++){//里面的循环管每一趟的交换次数
		//内部交换2个变量的值前一个和后面一个数组元素相比较
		if (arr[j] > arr[j + 1]) {
			var temp = arr[j];
			arr[j ]= arr[j + 1];
			arr[j + 1] = temp;
		}
	}
}
console.log(arr);

函数

函数概念

在JS里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。虽然for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用JS中的函数。
函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

函数的使用

//函数使用分为两步: 声明函数和调用函数

//1.声明函数
// function 函数名() {
//函数体 
}
function sayHi() {
	console.1og( 'hi~~' );
}

(1) function 声明函数的关键字全部小写
(2) 函数是做某件事情，函数名一般是动词 例如：sayHi
(3) 函数不调用自己不执行

// 2.调用函数
//函数名();
sayHi();

调用函数的时候千万不要忘记加小括号
注意:声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码。

函数的参数

• 形参和实参

在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参,而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参。

参数	说明
形参	形式上的参数函数定义的时候传递的参数当前并不知道是什么
实参	实际上的参数函数调用的时候传递的参数实参是传递给形参的

//1.函数可以重复相同的代码
function cook( ) {
	console.1og('酸辣土豆丝');
}
cook( ); 
cook( );
//2.我们可以利用函数的参数实现函数重复不同的代码
function 函数名(形参1,形参2...) { //在声明函数的小括号里面是形参(形式 上的参数)
}
函数名(实参1,实参2...); //在函数调用的小括号里面是实参(实际的参数)
//3.形参和实参的执行过程
function cook(aru) { //形参是接受实参的aru = '酸辣土豆丝'形参类似于一个变量
	console.1og(aru);
}
cook('酸辣土豆丝');
cook('大肘子');
// 4.函数的参数可以有，也可以没有个数不限

参数的作用:在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去。

//函数形参实参个数匹配
function getSum(num1, num2) {
	console.log(num1 + num2) ;
}
//1.如果实参的个数和形参的个数一致则正常输出结果
getSum(1, 2);
// 2.如果实参的个数多于形参的个数 会取到形参的个数
getSum(1, 2, 3);
// 3.如果实参的个数小于形参的个数 多于的形参定义为undefined 最终的结果就是NaN
//形参可以看做是不用声明的变量 num2 是一个变量但是没有接受值,结果就是undefined
getSum(1); // NaN 

函数的返回值

• 函数的返回值格式

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

(1) 我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名()通过return实现的
(2)只要函数遇到return就把后面的结果返回给函数的调用者函数名()=return后面的结果

• 代码验证

function getResult() {
	return 666; 
}
getResult(); // getResult()=666
console.log(getResult());

• 求任意两个数的和

function getSum(num1, num2) {
	return num1 + num2 ;
}
console.log(getSum(1, 2));

• retur终止函数只能返回一个值

// 函数返回值注意事项
// 1.return终止函数
function getSum(num1, num2) {
	return num1 + num2; // return 后面的代码不会被执行
	alert( '我是不会被执行的哦! ' )
}
console .1og(getSum(1, 2));
// 2. return 只能返回一个值
function fn(num1, num2) {
	return num1, num2; // 返回的结果是最后一个值
}
console.1og(fn(1, 2));
// 3.我们求任意两个数的加减乘数结果
function getResult(num1, num2) {
	return [ num1 + num2, num1 - num2, num1 * num2, num1 / num2 ] ;
}
var re = getResult(1, 2); //返回的是一个数组
console.log(re);
// 4.我们的函数如果有return 则返回的是return 后面的值，如果函数没有return 则返回undefined

arguments的使用

当我们不确定有多少个参数传递的时候,可以用arguments来获取。JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象, arguments对象中存储了传递的所有实参。

// arguments 的使用 只有函数才有arguments对象 而且是每个函数都内置好了这个arguments
function fn() {
// console. log( arguments); // 里面存储了所有传递过来的实参arguments = [1,2,3]
// console . log( arguments . length);
// console. log( arguments[2]); 
// 我们可以按照数组的方式遍历arguments
for (var i = 0; i < arguments.length; i++) { 
	console.log(arguments[i]);
}
fn(1, 2, 3); 
fn(1, 2, 3, 4, 5);
// 伪数组并不是真正意义上的数组
// 1.具有数组的length 属性
// 2.按照索引的方式进行存储的
// 3.它没有真正数组的一-些方法pop()push()等等

函数的两种声明方式

//函数的2中声明方式
// 1.利用函数关键字自定义函数(命名函数) 
function fn() {
}
fn();
// 2.函数表达式(匿名函数)
// var变量名= function() {};
var fun = function(aru) {
	console.log('我是函数表达式' );
	console .1og(aru);
}
fun(' pink老师' );
// (1) fun是变量名不是函数名
// (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值而函数表达式里面存的是函数
// (3) 函数表达式也可以进行传递参数

JavaScript作用域

// 1. JavaScript作用域:就是代码名字 (变量)在某个范围内起作用和效果目的是为了提高程序的可靠性更重要的是减少命名冲突
// 2. js的作用域(es6)之前:全局作用域 局部作用域
// 3.全局作用域: 整个script标签 或者是个单独的js文件
var num = 10;
var num = 30;
console.log(num);
//4.局部作用域(函数作用域)在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作用
function fn() {
//局部作用域
	var num = 20;
	console.1og(num);
}
fn();

1.变量作用域

变量的作用域:根据作用域的不同我们变量分为全局变量和局部变量

• 全局变量
  在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。
  ●全局变量在代码的任何位置都可以使用
  ●在全局作用域下var声明的变量是全局变量
  ●特殊情况下,在函数内不使用var声明，直接赋值的变量也是全局变量(不建议使用)

• 局部变量
  在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)
  ●局部变量只能在该函数内部使用
  ●在函数内部var声明的变量是局部变量
  ●函数的形参实际上就是局部变量

• 全局变量和局部变量的区别
  ●全局变量:在任何-一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
  ●局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间

2.作用域链

●只要是代码 ,就至少有一一个作用域
●写在函数内部的局部作用域
●如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
●根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链（就近原则）

函数预解析

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

console. log(num); // undefined 坑1
var num = 10;
//相当于执行了以下代码
var num; // 变量提升，但不赋值
console. log(num);
num = 10;

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

fun(); //报错 坑2
var fun = function() {
	console.1og(22);
}
//相当于执行了以下代码
var fun;// 函数声明
fun();
fun = function() {
	console.1og(22);
}

对象

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

对象是由属性和方法组成的
●属性:事物的特征,在对象中用属性来表示(常用名词)
●方法:事物的行为,在对象中用方法来表示(常用动词)

变量、属性、函数、方法的区别

//变量、属性、函数、方法的区别
//1.变量和属性的相同的他们都是用来存储数据的
var num = 10;
var obj={
	age: 18,
fn: function() {
	}
}
function fn() {
}
console.1og(obj.age );
// console .1og(age);
// 变量 单独声明并赋值 使用的时候直接写变量名 单独存在
// 属性 在对象里面的不需要声明的 使用的时候必须是对象.属性
// 2.函数和方法的相同点都是实现某种功能 做某件事
// 函数是单独声明 并且调用的 函数名() 单独存在的
// 方法 在对象里面 调用的时候 对象.方法() 

对象的使用

1.创建对象的三种方式

在JavaScript中，现阶段我们可以采用三种方式创建对象( object )
●利用字面量创建对象

// 1.利用对象字面量创建对象{}
//var obj={};//创建了一个空的对象
var obj={
	uname: '张三疯' ,
	age: 18 ,
	sex:'男',
	sayHi: function() {
		console.log('hi~' );
	}
}
	// (1) 里面的属性或者方法我们采取键值对的形式 键 属性名:值 属性值
	// (2) 多个属性或者方法中间用逗号隔开的
	// (3)方法冒号后面跟的是一个匿名函数
// 2.使用对象
// (1).调用对象的属性我们采取对象名.属性名 
console . log(obj .uname);
// (2). 调用属性还有I种方法对象名['属性名']
console.log(obj['age']);
// (3) 调用对象的方法sayHi对象名.方法名(),千万别忘记添加小括号
obj.savHi();

●利用new Object创建对象

//利用new object 创建对象
var obj=newObject();//创建了一个空的对象
	obj.uname = '张三疯;
	obj.age = 18;
	obj.sex = ' 男' ;
	obj.sayHi = function() {
		console.1og('hi~' );
}
// (1) 我们是利用等号=赋值的方法添加对象的属性和方法
// (2) 每个属性和方法之间用分号结束
console. log (obj . uname );
console.1og(obj[ 'sex' ]);
obj.sayHi();

●利用构造函数创建对象
我们为什么需要使用构造函数?
就是因为我们前面两种创建对象的方式次只能创建一个对象
因为我们一次创建个对象，里面很多的属性和方法是大量相同的，我们只能复制，因此我们可以利用函数的方法重复这些相同的代码我们就把这个函数称为构造函数，又因为这个函数不一样，里面封装的不是普通代码，而是对象构造函数，就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

//构造函数的语法格式
function构造函数名() {
this.属性=值;
this.方法 = function() {
}
 new构造函数名();//调用构造函数

function Star(uname, age, sex) {
	this . name = uname ;
	this.age = age;
	this.sex = sex;
	this.sing = function(song){
		console.log(song);
	}
}
var ldh = new Star ('刘德华’，18，'男'); //调用函数返回的是个对象
// console. log(typeof 1dh) ; 检测数据类型为 object（对象）
console . log( ldh.name) ;
console.1og(1dh[ 'sex']);
 ldh.sing('冰雨');
 
var zxy = new Star('张学友'，19，'男');
console. log(zxy .name) ;
console.1og(zxy.age );
// 1.构造函数名字首字母要大写
// 2.我们构造 函数不需要return就可以返回结果
// 3.我们调用构造函数必须使用new
// 4.我们只要new Star() 调用函数 就创建一个对象  1dh{} 
// 5.我们的属性和方法前面必须添加  this

2.构造函数和对象的区别

//构造函数和对象
// 1.构造函数 明星泛指的某大类 它类似于 java语言里面的类(class)
function Star(uname, age, sex) {
	this.name = uname ;
	this.age = age;
	this.sex = sex;
	this.sing = function(sang) {
	console . log(sang);
}
// 2.对象特指是一个具体的事物刘德华== {name: "刘德华"，age: 18，sex:"男"， sing: f}
var ldh = new Star('刘德华'， 18, '男'); //调用函数返 回的是一个对象
console. log(1dh);
//3.我们利用构造函数创建对象的过程我们也称为对象的实例化

3.new关键字

new在执行时会做四件事情:
1.在内存中创建一个新的空对象。
2.让this指向这个新的对象。
3.执行构造函数里面的代码,给这个新对象添加属性和方法。
4.返回这个新对象(所以构造函数里面不需要return )。

4.遍历对象

for in 遍历我们的对象

//遍历对象
var obj ={
name :' pink老师'，
age: 18,
sex :男',
fn: function() {}
}
// console .log( obj. name);
// console .1og(obj.age);
// console.1og(obj.sex) ;
// for(变量 in 对象){
// }
for (var k in obj) {
	console.1og(k); // k变量输出得到的是属性名
	console.1og(obj[k]); // obj[k] 得到是属性值
}
//我们使用for in 里面的变量我们喜欢写 k 或者 key

js内置对象

1.Math概述

Math对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用Math中的成员。

2.Math常用

类型	解释
Math.PI	圆周率
Math. floor ()	向下取整 （往大了取）
Math.ceil ()	向上取整（往大了取）
Math. round ()	四舍五入版 ，就近取整，注意 -3.5 ，结果是 -3
Math.abs ()	绝对值（会自动转换为数字类型）
Math .max () /Math.min()	求最大和最小值

3.Math随机数取法 random（）

//1.Math对象随机数方法random()返回一个随机的小数0=<X<1
//2.这个方法里面不跟参数
// 3.代码验证
console. log (Math. random());
// 4.我们想要得到两个数之间的随机整数并且包含这2个整数
// Math. floor (Math. random() * (max - min + 1)) + min;
function getRandom(min, max) {
return Math. floor (Math. random( )*(max-min+1))+ min;
}

4.Math日期取法 date（）

• 年月日

●Date 对象和Math对象不-样,他是一个构造函数 ,所以我们需要实例化后才能使用
●Date 实例用来处理日期和时间

// 1.使用Date
如果没有参数返回当前系统的当前时间
var date = new Date ();
console .1og(date);
// 2.参数常用的写法 数字型2019, 10, 01 或者是字符串型'2019-10-1 8:8:8'
var date1 = new Date(2019, 10，1);
console.1og(date1); // 返回的是11月不是10月
var date2 = new Date( ' 2019-10-1 8:8:8' ) ;
console . log(date2);

//格式化日期年月口
var date
new Date();
console. log(date. getFullYear()); //返回当前日期的年2019
console. log(date. getMonth() + 1); //月份返回的月份小1个月
记得月份+1呦
console.log(date. getDate()); //返回的是几号
console. log(date.getDay()); // 3周一 返回的是1周六返回的是6但是周日返回的是0
//我们写一个2019年5月1日星期三
var year = date .getFullYear();
var month = date. getMonth() + 1;
var dates = date. getDate();
var arr = ['星期日’，'星期一'，'星期二'，'星期三，'星期四’，'星期五’，'星期六'];
var day = date. getDay();
console.1og('今天是:' + year +'年'+month+'月'+dates+'日'+ arr[day]);

• 时分秒

//格式化日期时分秒
var date = new Date( );
console. log(date. getHours()); //时
console. log(date. getMinutes()); //分
console .1og(date . getSeconds()); //秒
//要求封装个函数返回当前的时分秒格式08:08:08
function getTime() {
	var time = new Date( ) ;
	var h = time.getHours();
	h = h < 10? '0'+ h : h;
	var m = time.getMinutes();
	m = m <1 0? '0' + m : m;
	var S = time.getSeconds( );
	s =s < 10 ? '0'+ s : s;
	return h+':' + m + ':' + s;
}
console.log(getTime());

• Date总毫秒数（时间戳）

//获得Date总的毫秒数(时间戳) 不是当前时间的毫秒数而是距离1970年1月1号过了多少毫秒数
// 1.通过value0f() getTime()
var date = newDate();
console. log(date .valueOf()); // 就是我们现在时间距离1970.1.1总的毫秒数
console . log(date .getTime());
// 2.简单的写法(最常用的写法)
var date1 = +new Date(); // +new Date() 返回的就是总的亳秒数
console . log(date1);
// 3. H5新增的获得总的毫秒数
console . log(Date. now( )); 

数组对象

//创建数组的两种方式
//1.利用数组字面量
var arr = [1, 2, 3];
console . log(arr[0]);
// 2.利用new Array()
// var arr1 = new Array(); //创建了一个空的数组
// var arr1 = new Array(2); //这个2 表示数组的长度为 2里面有2个空的数组元素
var arr1 = new Array (2, 3); //等价于[2,3] 这样写表示里面有2个数组元素是2和3
console .log(arr1);|

检测是否为数组

// (1) instanceof 运算符它可以用来检测是否为数组
var arr =[];
var obj = {};
console.log(arr instanceof Array) ; 
console.1og(obj instanceof Array);
// (2) Array. isArray(参数); 优先级大于instance of，兼容性强   H5新增的方法  ie9以上版本支持
console .1og(Array .isArray(arr));
console . log (Array . isArray(obj));

1.添加删除数组元素方法

// 1. push() 在我们数组的末尾添加一个或者多个数组元素push  推
var arr =[1, 2, 3];// arr. push(4,”pink' );
console. log(arr.push(4, 'pink'));
console.1og(arr );
// (1)push是可以给数组追加新的元素
// (2) push() 参数直接写数组元素就可以了
// (3) push完毕之后，返回的结果是新数组的长度
// (4) 原数组也会发生变化

// 2. unshift 在我们数组的开头添加一个或者多个数组元素
console.1og(arr .unshift('red'，' purple' ));
console .1og(arr);
// (1)unshift是可以给数组前面追加新的元素
// (2) unshift() 参数直接写数组元素就可以了
// (3) unshift完毕之后，返回的结果是新数组的长度
// (4) 原数组也会发生变化

//3.pop()它可以删除数组的最后一个元素
console.1og(arr .pop());
console.log(arr);
//(1)pop是可以删除数组的最后一个元素记住次只能删除个元素
// (2) pop()没有参数
// (3) pop完毕之后， 返回的结果是删除的那个元素
// (4)原数组也会发生变化

// 4. shift() 它可以删除数组的第个元素
console.1og(arr .shift());
console.log(arr);
// (1) shift是可以删除数组的第一个元素记住一次只能删除一个元素
// (2) shift() 没有参数
// (3) shift完毕之后，返回的结果是删除的那个元素
// (4) 原数组也会发生变化

.2数组排序

//数组排序
// 1.翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console .1og(arr);

//2.数组排序(冒泡排序)
var arr1 =[13,4,77,1,7];
arr1.sort(function(a, b) {
//  return a-b;升序的顺序排列
	returnb-a;//降序的顺序排列
});
console.log(arr1);

3.数组索引

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

// 返回数组元素索引号方法lastIndexOf(数组元素) 作用就是返回该数组元素的索引号从后面开始查找
var arr =['red', ' green','blue','pink', 'blue' ];
console. log(arr .1astIndexOf('blue')); // 4

4.数组去重案例！

<script>
        // 1.目标: 把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 放到新数组中去重。
        // 2.核心算法:我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加。
        // 3.我们怎么知道该元素没有存在? 利用新数组. indexOf(数组元素) 如果返回- 1  就说明新数组里面没有该元素
        //封装一个去重的函数unique   独一无二的
        // var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'];
        function unique(arr) {
            var newArr = [];
            for (var i = 0; i <= arr.length; i++) {
                if (newArr.indexOf(arr[i]) == -1) {
                    arr.push(arr[i]);
                }
            }
            return newArr;
        }
        var re = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
        console.log(re);
    </script>

5.数组转换为字符串

//数组转换为字符串
// 1. toString() 将我们的数组转换为字符串
var arr = [1, 2,3];
console.1og(arr . toString()); // 1,2,3
// 2. join( 分隔符)
var arr1 = ['green',' blue','pink '];
console.1og(arr1.join()); // green, blue, pink
console.log(arr1.join('-')); // green-blue-pink
console.log(arr1.join('&')); // green&blue&pink

6.基本包装类型

//基本包装类型
var str =' andy' ;
console .1og(str . length);
// 对象才有属性和方法 复杂数据类型才有属性和方法
// 简单数据类型为什么会有length 属性呢?
// 基本包装类型: 就是把简单数据类型包装成为了复杂数据类型
// (1)把简单数据类型包装为复杂数据类型
var temp = new String( ' andy' );
// (2)把临时变量的值给str
str = temp;
// (3) 销毁这个临时变量
temp = null ;

字符串对象

1.字符串对象根据字符返回位置

//字符串对象 根据字符返回位置
str.index0f( '要查找的字符'，[起始的位置])
var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春'));
console.log(str.indexOf('春'，3)); //从索引号是3的位置开始往后查找

2.根据位置返回字符

//根据位置返回字符
// 1. charAt(index) 根据位置返回字符
varstr='andy';
console .1og(str . charAt(3));
//遍历所有的字符
for(vari=0;i<str.length;i++){
	console . log(str .charAt(i));
}
// 2. charCodeAt(index) 返回相应索引号的字符ASCII值 目的: 
判断用户按下了那个键
console. log(str.charCodeAt(0)); // 97
// 3. str[index] H5新增的
console.log(str[0]); // a

3.字符串的操作方法（重点）

//字符串操作方法
// 1. concat('字符串1'，'字符串2'....)
var str ='andy' ;
console.log(str.concat( 'red' ));
// 2. substr( '截取的起始位置'，'截取几个字符');
var str1 = '改革春风吹满地';
console. log(str1.substr(2, 2)); //第一个2是索引号的2从第几个开始第二个2 是取几个字符		

4.替换字符replace

// 替换字符replace('被替换的字符'， '替换为的字符') 它只会替换第一个字符
var str ='andyandy';
console.1og(str.replace('a', 'b'));
//有一个字符串' abcoefoxyozzopp' 要求把里面所有的。替换为*
var str1 =' abcoefoxyozzopp' ;
while (str1.indexOf('o') !== -1) {
	str1 = str1.replace('o', '*');
	}
console.log(str1);

5.字符转换为数组splif

// 字符转换为数组splif('分隔符')
前面我们学过join 把数组转换为字符串
var str2 = 'red, pink, blue';
console . log(str2.split(',')); // ['red, pink, blue']
var str3 = ' red&pink&blue' ;
console . log(str3.split('&')); // ['red, pink, blue']

数据类型

简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。
●值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型（简单数据类型是存放在栈里面里面直接开辟一个空间存放的是值）
例如：string , number , boolean , undefined , null
●引用类型: 复杂数据类型,在存储时变量中存储的仅仅是地址(引用) ,因此叫做弓|用数据类型（复杂数据类型首先在栈里面存放地址十六进制表示然后这个地址指向堆里面的数据）
通过new关键字创建的对象(系统对象、自定义对象) , 如Object、Array、 Date等

类型传参

• 简单类型传参

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

• 复杂类型传参

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