JS入门到精通

<!-- 可以将js代码编写到标签中的onclick属性中，当我们点击按钮时，js代码才会执行
		虽然可以写在标签中，都是他们属于结构与行为耦合，不方便维护，不推荐。
		-->
		<botton onclick="alert('点击弹出警告窗口');">点击</botton>
		<!-- 可以将js代码卸载超链接的herf属性中，这样点击超链接时，会执行js代码 -->
   <a href="javascript:alert('点击弹出警告窗口');">点击2</a>

2、写到ds标签中

<script type="text/javascript">
			alert('欢迎来到js滴世界哦')
		</script>

3、外部js文件

外部文件可以在不同页面中同时引用，也可以利用到浏览器的缓存机制。

这是我们推荐使用的方式

script标签一旦引入外部文件了，就不能再编写代码了，即使编写了浏览器也会忽略。如果需要则可以再创建一个新的script标签

<!-- 写到外部文件 -->
		<script type="text/javascript" src="dist/js/app.5f4a6536.js"></script>、

上面地址是js文件的地址

js的基本语法

1、注释

	 <script type="text/javascript">
	 	// js的注释（ctrl+/） 单行注释
		/*
		多行注释
		*/
	 </script>

2、基础语法

js中严格区分大小写
js中每一条语句以分号（；）结尾

如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，浏览器会加错分号，所以在开发中必须写分号。

js中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

字面量和变量

1、字面量

字面量都是可以直接使用的，但是我们一般不直接使用字面量

2、变量

变量可以用来保存字面量，而且变量的值是任意改变的。

变量更方便我们使用，所以在开发中都是通过变量去保存严格字面量，而不会直接使用字面量，

可以通过变量对字面量进行描述；

声明变量 var、let、const

变量赋值：a=23；，声明和赋值可以同时进行；

标识符

在js中所有的由我们自主命名的都可以称为标识符；

例如：函数名、变量名、属性名都属于标识符

命名标识符需要符合的规则：

标识符中可以含有字母、数字、_、$
标识符不能以数字开头
不能是ES中的关键字或保留字
标识符一般采用驼峰命名法（首字母小写，每个单词的开头字母大写，其余字母小写）

数据类型

数据类型指的就是字面量的类型

String、Number、Boolen、Null、Undefined属于基本数据类型，而Object属于引用数据类型。

字符串（String）

在字符串中使用字符串，需要引号引起来，使用单引号和双引号都可以，但是不要混着用；引号不能嵌套，双引号不能放双引号，单引号不能放单引号

var ste=‘hello’；

str='我说："今天天气不错！" '；

\t:标识换行； \':表示 ’ ；\":表示：“； \n：表示换行；\\:表示\; \\\\:表示\\；

//输出字符串
	 console.log('abc')
	 // 输出变量
	 console.log(abc)

数值（Number）

在js中所有的数值都是Number类型，包括整数和浮点数（小数）

/*
	   可以使用严格运算符typeof来检查一个变量的类型
		 语法：typeof  变量
		 检查数值时，会返回一个number
		 检查字符串时，会发返回一个String
	 */
	console.log(abc)

js中表示数字的最大值

Number.Max_VALUE

注：如果一个数字使用Number超过了最大值，则会返回一个Infinity表示一个正无穷，

使用typeof检查Infinity也会返回一个Number，使用typeof检查NaN也会返回一个Number

	/*
	在js中的整数运算可以确保其精确值
	如果使用js进行浮点元素，可能得到一个不精确的结果，所以千万不要使用js进行对精确度要求比较高的运算
	*/
 var a=0.1+0.2；//结果不等于0.3，等于0.30000000000000004

布尔值（ Boolen）

布尔值只有两个，true和false，主要用来做逻辑判断

使用typeof检查布尔值，会返回一个Boolen

空值（Null）

Null类型的值只有一个，即为null

null这个值专门用来表示一个空的对象

使用typrof来检查null，则会返回object

未定义（Undefined）

undefined的类型只有一个，就undefined

当声明一个变量，但是并不给变量赋值，它的值就是undefined

let b;

console.log(b) //输出undefine

使用typrof来检查undefined，则会返回undefined

对象 (Object）

强制的类型转化

指的是将一个数据类型强制转化为其他类型。

类型转化主要指的是将其他数据类型转换为String 、Number、Boolean

将其他数据类型转化为String

方法一：调用被转换数据类型的toString（）方法

不会转化

（1）

let a=123;
 a.toString();
 console.log(typeof a);  //a的类型还是Number

（2)null转字符串

let a=null;
a=a.toString;
console.log(typeof a)//报错

（3）undefine转字符串

let a=undefined;
a=a.toString;
console.log(typeof a)//报错

会转化

数字转字符串


 let a=123;
let a=a.toString();
 console.log(typeof a);  //输出String

布尔值转字符串

a=true;
a=a.toString

方法二：调用String函数，并将被转换的数据作为参数传递给函数

可以将null、undefined转化为字符串

语法

let a=123;
a=String(a);
consoloe.log(typeof a);

let a=null;
a=String(a);
consoloe.log(typeof a);//String
console.log(a)//输出"null"

let a=undefined;
a=String(a);
consoloe.log(typeof a);//String
console.log(a)//输出"undefined"

将其他数据类型转化为Number

方法一：调用Number（）函数来将a转化为Number类型

1、字符串转数字，如果是纯数字字符串，则直接转化为数字

let a="123"
a=Number(a);

2、如果字符串中有非数字的内容，则转换为NaN

let a="1abc"
a=Number(a);
console.log(typeof a)//number
console.log(a)//NaN

3、字符串是一个空字符串或者是一个全是空格的字符，则转化为0；

let a=“"
a=Number(a);
console.log(typeof a)//number
console.log(a)//0

4、布尔值

true转化为1

false转化为0

5、null转化为数字

转成为0

6、undefined

转数字为NaN

方法二：这种方式用来对付字符串

parseInt() 转化为整数 parseInt（）转化为浮点数

let a="123px"
a=a.parseInt(a)
console.log(typeof a)//Number
console.log(a)//123

let a="b123px"
a=a.parseInt(a)
console.log(typeof a)//Number
console.log(a)//NaN

如果对非String使用parseInt（）或parseFloat

它会先将其转化为String

其他进制的数字

在js中，如果需要表示16进制的数字，则需要以 0x开头

let a=0x10;
console.log(a)//16

如果需要表示8进制的数字，则需要以0开头

像070有时会当成八进制，有时也会被当成十进制

let a=070;
console.log(a)//56

如果需要表示2进制，则需要0b开头,但是不是所有的浏览器都支持

将其他数据类型转化为Boolen

方法一：布尔函数Boolen

数字

let a=123;
a=Boolen()//true;
a=-123; 
a=Boolen() ; //true;
a=0;  
a=Boolen();  //false;
a=Infinity;/
a=Boolen()  /true;
a=Boolen()
a=NaN; //false

若是字符串，只要不为空都是true，若为空字符串，则返回false

若 a=null;

a=a.Boolen() //结果为false

若 a=undefined;

a=a.Boolen（）//结果为false；

对象也会转换为true

方法二：可以为任意数据类型取两次取反，来将其转化为布尔值

运算

算术运算符

运算符也叫操作符

通过运算符可以对一个或多个值进行运算，并获取运算结果

1、typeof就是运算符，可以用来获取一个值的类型，它会将该值的类型以字符串的形式返回。

2、数学运算符号

+ - * / %

加法

对非Number类型的值进行运算时，会将这些值转化为Number然后再运算，

任何值和NaN相加都得NaN，

字符串相加先转化为字符串，再来拼接，结果也还为字符串

a=2+NaN //结果也为NaN

a="123"+"234"// 结果为123234

a=1+2+'3' //结果为33

a='1'+2+3 //结果为123；

减法结果都为数字

乘法

a =2*"8" //16

a=2*undefined //结果为NaN

任何值做 - * /运算时，都会自动转化为Number，可以通过一个值 -0 *1、/1来将其转化为Number

一元运算符

只需要一个操作符

+正号：正号不会对数字产生影响

-负号：负号可对数字进行负号的取反

对于非Number值，会先转化为数字，然后再进行运算，可以对一个其他的数据类型使用+，将其转化为Number

var a= 1++"2"+3 //结果为

自增和自减

自增++

自增可以使变量在自身的基础上增加1

对于一个变量自增以后，原变量的值就会立即自增1；

自增分为两种：a++;++a;,无论时a++还是++a，都会立即使原变量的值自增1

不同的时a++、和++a的值不同

a++的值等于原变量的值

let a=1;

console.log(a++) //1

console.log("a="+a) //a=2

let a=1;

console.log(++a) //2

console.log("a="+a) //a=2

let d=20;

let a=d++ + ++d +d; //64

自减

自减可以使变量在自身的基础上增加1

对于一个变量自减以后，原变量的值就会立即自减1；

自减分为两种：a--;--a;,无论时a--还是--a，都会立即使原变量的值自减1

不同的时a--、和--a的值不同

逻辑运算符

！非

，对值进行非运算，就是对布尔值进行一个取反，先变成布尔值，然后再取反

如果对一个值进行两次取反，那么它不会变化

可以为任意数据类型取两次取反，来将其转化为布尔值

原理和Boolen函数一样

&& 与

&&可以对符号两侧进行与运算并返回结果

运算规则：

如果两端都为true，结构都为true，只要有一个flase则返回false，只有两个值都为true，才返回true；

|| 或

|| 可以对运算符号两侧的值进行或运算并返回结果

运算规则：

只要有一个为true，就返回true；若都为false，则返回false

非布尔值的与或运算

&& || 非布尔值情况：

对于非布尔值进行与或运算时，会向将其转化为布尔值

&&

true && true （与）

如果两个值都为true，则返回后面的值

var reslult =2&&1； //结果为1

false&&true （true&&false）

返回前面的false

a=0&&2; //结果为0

a=2&&0; //结果也为0

false&&false

结果返回靠前的false

a=NaN&&0； //NaN

a=0&&NaN; //结果为0

||

如果第一个值为true，直接返回第一个true

如果第一个值为false，则直接返回第二个数

赋值运算符

= 可以将符号右侧的值赋给符号左侧的值

+= a=a+5 等价于 a+=5；

-= a=a-5 等价于 a-=5；

/=;*=;%= 这些与前面的例子都一样

关系运算符

通过关系运算符今天比较两个值之间的大小关系

如果关系成立，它就会返回true，成立返回false

对于非数值的情况

对于非数值进行比较时，会将其转换为数字然后在比较
如果符号两侧的值都是字符串时，不会将其转化为数字进行比较而会分别比较字符串中字符的Unicode编码。

任何值和NaN做任何比较都是false

算术运算符和关系运算符都是先转换为数值再处理，逻辑运算符先转换为布尔值再处理。

console.log("11"<"5");  true

console.log("12">"21") //true
console.log("a"<"b")  //true
//比较字符串编码时是一位一位进行比较的,如果两位一样，则比较下一位，所以借用它来进行英文排序
console.log("abc">"b")  //true
console.log("abc"<"bcd"); //true
//比较中文时没有意义
console.log("戒" >"我")  //true
console.log("11"<"5")  //true
//如果比较的两个字符串型的数字，可能会得到不可预期的结果，所以注意在比较两个字符串的数字时，一定要转型
console.log("11123123123123123123"<+"5"); //true

相等运算符

相等运算符用来比较两个值是否相等

如果相等就会返回true，否则返回false

使用== 来做相等运算（会做自动的类型转换）

当使用==来比较两个值时，如果值得类型不同，则会自动进行类型转换，将其转换为相同的类型，然后再比较

let a=10；

console.log(a==5) //false

console.log(true =="1") //true

console.log(null == 0) //false

undefined 衍生自null所以这两个值做相等判断时，会返回true

console.log(undefined == null) //true

NaN不和任何值相等，包括它本身，可以通过isNaN()函数来判断一个值是否是NaN

！=（会自动类型转换）

不相等则返回true，不相等则返回false

=== （不会自动类型转换）

用来判断两个值是否全等，与“==”类似

！== 不全等（不会自动类型转换）

用来判断两个值是否会全等

条件运算符

条件运算符也叫三元运算符

语法：

条件表达式？语句1：语句2；

执行流程：

条件运算符再执行时，首先对条件式进行求值

如果该值为true，则执行语句1，并返回执行操作

如果该值为false，则执行语句2，并返回执行操作

let max =a>b ?(a>c?a:c) :(b>c?b:c); //一般不建议这么些（比较三个数的最大值）

运算符的优先级

使用，可以同时声明多个变量

let a,b,c;9

在js中有一个符号优先的表，在表中越靠上，优先级越高，优先级越高越先计算，如果同级则从左往右，如果有优先级不清楚可以使用括号来改变

流程控制语句

js程序是从上到下，一行一行执行的，通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行

语句的分类：

1、条件判断语句

2、条件分支语句

3、循环语句

if语句

语法一：

if（条件表达式）

  语句
if语句执行时，会先对条件表达时进行求值判断，如果条件表达式的值为true，则执行if后的语句。如果为false，则不会执行if后的语句

语法二

if（条件表达式）{
        语句...
}else{   语句...}

语法三：

if（条件表达式）{
        语句...
}if else{语句....}
if else {语句....}
else{   语句...}
如果值为true，则执行这个语句，从上到下

条件分支语句，也叫switch

语法：

switch（条件表达式）{

case 表达式：

语句...

break;

case 表达式：

语句...;

break;

case 表达式：

语句...;

break;

default:

语句...

break；

}

执行流程：

switch ...case...语句

在执行时会溢出将case后的表达式的值和switch后的条件表达式的只矩形全等比较

如果比较结果为true，则当前case处开始执行代码；会继续比较，若添加break则会终止；如果比较结果为false，则继续向下比较；如果所有的比较都为false，则只执行default后的语句。

//使用break会退出语句

switch语句和if语句的功能实际上有重复的·，使用switch可以实现if的功能，同样使用if也可以实现switch的功能

循环语句

while循环

while（条件表达式）{

语句....

}

while 语句在执行时，先对条件表达式进行求值判断，如果值为true，则执行循环体，循环体执行完毕以后，继续对表达式进行判断，以此类推；

若为false，则终止循环

while（true）{
    alert（n++）
}
像这种表达式写死为true的循环，叫做思想和，该循环不会停止，除非浏览器关闭，死循环在开发中慎用，可以使用break来终止循环。

创建循环，往往需要三个步骤

//初始化一个变量

let i=0;
//在循环中设置一个条件表示式
while(i<10){
//定义一个更新表达式，每次更新初始化变量
i++;
alert("1");
}

do ...while循环

语法

do{

语句....

}while（条件表达式）

执行do...while语句执行时，会先执行循环体，循环执行完毕以后，在对while后的条件表示式进行判断，如果结果为true则继续执行循环体，如果结果为false则终止循环；

do...while语句与while语句功能类似，前者执行后判断，后者先判断后执行；前者保证循环体至少循环一次，后者不能。

for循环

在for循环中，为我们专门提供了位置来放三个表达式

1、初始化表达式；

2、条件表达式

3、更新表达式

for循环的语法：

for( 初始化表达式；条件表达式；更新标识式）{

语句...

}

for循环的执行流程：

（1）执行初始化表达式，初始化变量

（2）执行条件表达式，判断是否执行循环

如果为true，则执行循环；如果为false，终止循环

（3）执行更新表达式；更新表达式执行完毕继续重复（2）

for循环中的三个部分都可以省略，也可以写在外部

如果for循环中不写任何的表达式，只写两个；
此时循环时一个死循环会一直循环下去，慎用 for（；；）{alert（‘hello’）；}

let i=0;

for(;i<10;){

alert(i++)

}

break和continue

break关键字可以退出switch或循环语句

不能在if语句中使用break和continue
break关键字，会立即终止离他最近的那个循环语句
可以为循环语句创建一个label，来标识当前的循环

label：循环语句

使用break语句是，可以在break后跟着一个label，这样break将会结束指定的循环，而不是最近的

break outer

for(let i=0;i<5;i++){
			console.log("@外层循环"+i)
			for(let j=0;j<5;j++){
				break  outer;
				console.log("内层循环"+j);
		}
//@外层循环0

continue关键字可以用来跳过当前循环，立即结束当前循环，只跳过一次，跳过当前循环，同样continue只会对离它最近的循环起作用

对象

对象属于一种复合的数据类型，在对象中可以保存多个不同的数据类型的属性

对象的分类：

1、内建对象

由ES标准定义的对象，在任何的ES的实现中都可以使用

比如：Math String Number Boolean Function object...

2、宿主对象

由js的运行环境提供的对象，目前来讲主要指由浏览器提供的对象

比如 BOM DOM

3、自定义对象

由开发人员自己创建的对象

创建对象

使用new关键字调用的函数，是构造函数constructor，构造函数是专门用来创建对象的函数

	let obj =new object();

在对象中保存的值称为属性，

向对象添加属性

语法：对象.属性名 = 属性值；

对象的属性名不强制要求遵守标识符的规范，但是使用时尽量按照标识符的规范去做

如果要使用特殊属性名，不能采用.的方式来操作，需要用另一种方式：

语法：对象["属性名"] = 属性值

//向obj添加name属性
obj.name="孙悟空"
//向obj添加age属性
		obj.age=18;
//向obj添加gender属性
		obj.gender='男'

读取对象中的属性

语法：对象.属性名

console.log(obj.name)

如果读取对象中没有的属性，不会报错而是会返回undefined

修改对象的属性值

语法：对象.属性名 =新值

删除对象的属性

语法：delete 对象.属性名

属性名、属性值

如果要是使用特殊的属性名，不能采用.的方式来操作，需要用另一种方式：

语法：对象["属性名"]=属性值，读取也用这种方式

obj['123']=789;
console.log(obj['123']

使用[]这种形式去操作属性，更加灵活，在[]中可以直接传递一个变量，这样变量值时多少就会读取那个属性

obj['123'] =789;
let n="123" ;
console.log(obj[n]);//与console.log(obj[123']相等

基本数据类型和引用数据类型

基本数据类型：

String、Number、null、undefined、Boolean

引用数据类型：

Object

js中的变量都是保存到栈内存中的，

基本数据类型的值直接在栈内存中储存，值与值之间是独立存在的，修改一个变量不会影响到其他的变量。

对象是保存到堆内存中的，每创建一个新的对象，就会在内存中开辟出一个新的空间，而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，当一个通过一个比变量修改属性时，另一个也会受到影响。

	let obj =new object();
		obj.name="孙悟空"
		let obj2.name&#

最低0.47元/天解锁文章