JS语法

title: JS语法
date: 2020-12-13 10:45:05
tags: JS

JavaScript基础语法

1、主要内容

重点：变量、数组，函数、对象

2、JavaScript

2.1简介

​ JavaScript是一种具有面向对象能力的，解释型的程序设计语言。它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。它的主要目的是，验证发送服务器端的数据，增加web互动，加强用户体验度等。

image-20201204234655122

​ ECMAScript定义的只是这门语言的基础，与Web浏览器没有依赖关系，而在基础语法上可以构建更完善的脚本语言。JavaScript的运行需要一定的环境，脱离了环境JavaScript代码是不能运行的，JavaScript只能够寄生在某个具体的环境中才能够工作。JavaScript运行环境一般都由宿主环境和执行期环境共同构成，其中宿主环境是由外壳程序生成的，如Web浏览器就是一个外壳程序，它提供了一个可控制浏览器窗口的宿主环境。执行期环境则由嵌入到外壳程序中的JavaScript引擎(或称为JavaScript解释器）生成，在这个环境中JavaScript能够生成内置静态对象，初始化执行环境等。
​ Web浏览器自定义的DOM组件，以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象，是我们用传统的方法(javascript)获得的对象。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
​ 前面的DOM是为了操作浏览器中的文档，而为了控制浏览器的行为和操作，浏览器还提供了BOM(浏览器对象模型)。

ECMAScript(基础语法)

  • JavaScript的核心语法ECMAScript描述了该语言的语法和基本对象

DOM(文档对象模型)

  • 文档对象模型(DOM)——描述了处理网页内容的方法和接口

BOM(浏览器对象模型)

  • 浏览器对象模型(BOM) —―描述了与浏览器进行交互的方法和接口

2.2 基本写法

​ JS需要和HTML一起使用才有效果，我们可以通过直接或间接的方式将JS代码嵌入在HTML页面中。

​ 行内JS : 写在标签内部的js代码
​ 内部S : 定义在script标签内部的js代码
​ 外部S∶单独的js文件，在HTML中通过script标签引入

​ 我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。由于页面的加载方式是从上往下依次加载的，而这个对我们放置的js代码运行是有影响的。放在<head>部分，最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。放在<body>部分，JavaScript代码在网页读取到该语句的时候就会执行。

3、JavaScript基础语法

3.1语句和注释

	JavaScript程序的执行单位为行（line)，也就是一行一行地执行。一般情况下，每一行就是一个语句。

​ 语句(statement)是为了完成某种任务而进行的操作，语句以分号结尾，一个分号即表示一个语句结束。多个语句可以写在一行内(不建议这么写代码)，但是一行写多条语句时，语句必须以分号结尾。

​ 表达式不需要分号结尾。一旦在表达式后面添加分号，则javaScript引擎就将表达式视为语句，这样会产生一些没有任何意义的语句。

//单行注释:用//起头;
/*多行注释:放在之间*/ /
<!--兼容htm1注释方式: -->

3.2标识符和关键字

标识符就是一个名字，用来给变量和函数进行命名，有特定规则和规范规则:

  • 由unicode字母、_、$、数字组成、中文组成
    • 不能以数字开头
    • 不能是关键字和保留字
    • 严格区分大小写
  • 规范:
    (1) 见名知意
    (2) 驼峰命名或下划线规则

关键字也称保留字，是被JavaScript征用来有特殊含义的单词

3.3变量：

3.3.1变量的声明

js是一种弱类型语言，在声明变量时不需要指定为数据类型，直接使用var修饰符声明变量

变量的声明

  • 声明并赋值
  • 先声明后再赋值

3.3.2 变量声明的注意点

  1. 若只声明而没有赋值，则该变量的值为undefined
  2. 变量要有定义才能使用，若变量未声明就使用，javaScript会报错，告诉你变量未定义
  3. 可以在同一条var命令中声明多个变量
		var a=12;b=12;c = 12;
		console.log(a,b,c,)

  1. 重新使用var声明一个已经存在的变量，是无效的

  2. 重新使用var变量声明一个已经存在的变量且自动赋值，则会覆盖掉前面的值

  3. JavaScript是一种动态类型、弱类型的语言，也就是，变量的类型没有显示，可以赋予各种类型的值

3.3.3变量提升

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果是，所有变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。

注意：只有用var声明的变量，才会做变量提升

3.4数据类型

Js是弱类型语言，变量没有类型，但是数据本身是有类型的。针对不同的类型，我们可以进行不同的操作。

JavaScript有6种数据类型，其中五种简单的数据类型：Undefined、Null、布尔、数值和字符串。一种复杂数据类型Object

/*
数值(Number)    整数和小数（比如1和3.14)
字符串(string)  字符组成的文本(比如""He11o wor1d"")
布尔值(Boolean) true(真)和false(假)两个特定值
undefined      表示"未定义"或不存在，即此处目前没有任何值
Null           表示空缺。即此处应该有一个值,但目前为空

对象(object)(引用):各种值组成的集合
1)、对象(object) {name : "zhangsan" ,age : "18"}
2)、数组(array)[1,2,3]
3)、函数（function) function test(){}
*/

3.4.1Undefined

3.4.2Null

​ null类型是只有一个值的数据类型，即特殊的值null。它表示空值，即该处的值现在为空，它表示一个空对象引用。
使用Null类型值时注意以下几点:
​ 1) 使用typepf操作符测试null返回object字符串。
​ 2) undefined派生自null，所以等值比较返回值是true。未初始化的变量和赋值为nulI的变量相等。

<script type="text/javascript">
   	/* Undefined */
   	//1.声明变量但未赋值	
   	
   	// 2.调用函数，函数有形参，但未提供实参，则参数未undefined
   	function test(str){
   		console.log(str)
   	}
   	//调用方法
   	test()
   	// 3.函数没有返回值，默认返回undefined
   	function test01(){
   		console.log("HELLO WORLD")
   	}
   	var re = test01();
   	console.log(re)
   	/* Null */
   	var a = 1
   	var b = true
   	console.log(typeof a)
   	console.log(typeof b)
   	
   	var c = null;
   	console.log(typeof c)//返回object
   	
   	var d;
   	console.log(c==d);//返回true
   </script>v

3.4.3Boolean

布尔类型：true或false

3.4.4数值型

数值型包括：整型和浮点型

  1. 所有数字〔整型和浮点型）都是以64位浮点类型存储的。所以在js中，1与1.0是相等的，1+1.0的值为2
  2. 浮点类高精度是17位，浮点类型运算时可能不准确，不建议使用浮点型做判断
  3. 在存储数值时会自动将整型的浮点数值(1.0）转换成整型(1)

3.4.5.字符串

  • 使用''或" "引起来，如: 'hello',"good""。

  • 使用加号+'进行字符串的拼接，如: console.log('hello' + ' everybody")

    3.4.6.对象

    对象是一组数据和功能的集合

3.5类型转换

3.5.1自动类型转换

image-20201205105959992

3.5.2.函数转换 (String to Number)

​ JS提供了parseInt()和 parseFloat()两个全局转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)。

3.5.2.1. parselnt()

在转换之前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，如果不是，则直接返回NaN，不再继续，如果是则继续,直到找到非字符

	<script type="text/javascript">
		// parseInt()
		console.log(parseInt("1234b1ue"));//1234
		console.log(parseInt("22.5"));//22
		console.log(parseInt("blue"))//NaN
	</script>
3.5.2.2. parseFloat()

该方法与parseInt()方法的处理方式相似，从位置0开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换成数字。不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的，parseFloat()方法会把这个小数点之前的字符串转换成数字。

3.5.3.显示转换

  • 几乎每个数对象都提供了toString()函数将内容转换为字符串形式，其中Number提供的toString()函数可以将数字转换为字符串。
  • Number还提供了toFixed()函数将根据小数点后指定位数将数字转为字符串，四舍五入
//将内容转换为字符串形式

//根据小数点后指定位数将数字转为字符串，四舍五入
 var data = 1.455;
console.log(data.toFixed(0))//1
console.log(data.toFixed(1));//1.5
console.log(data.toFixed(2));//1.46 
//不能对nu11和undefined使用toString()
  • JS为Number、Boolean、String对象提供了构造方法，用于强制转换其他类型的数据。

此时操作的是整个数据，而不是部分。

​ image-20201205143826367

最后一种强制类型转换方法String()是最简单的，因为它可把任何值转换成字符串。要执行这种强制类型转换，只需要调用作为参数传递进来的值的 toString()方法，即把1转换成"1"，把 true转换成"true "，把false转换成"false "，依此类推。强制转换成字符串和调用toString()方法的唯一不同之处在于，对null 或 undefined值强制类型转换可以生成字符串而不引发错误:

var dat = null;
console.log(String(dat));//null	 
console.log(dat.toString());//错误：UncaughtTypeError: Cannot read property 'toString' of null

image-20201205144101932

3.6 运算符

3.6.1算数运算符

image-20201205145000284

3.6.2 赋值和扩展运算符

image-20201205145036943

3.6.3比较运算符

image-20201205145133492

3.6.4逻辑运算符

image-20201205145308167

3.6.5三目运算符

?: 如果..否则

	<script type="text/javascript">		var data = 1<2?"true":"false";		console.log(data)//true		console.log(typeof data)//string	</script>

3.7 控制语句

我们写的JavaScript 代码都是按照从上到下依次执行，很多时候我们希望代码按照我们的意愿去执行，比如有选择性地执行某些代码，或者重复地执行某些代码，这就需要使用到流程控制语句。
流程控制语句一共有三种:

  1. 流程执行:从上到下，从左到右
  2. 选择执行:分支选择
  3. 循环执行:重复执行

3.7.1选择

3.7.1.1.单选择

​ if(条件){
​ 语句体;
​ }
首先执行条件:
如果结果为true，则执行语句体
如果结果为false，则结束if语句
注意:若语句体只有一条语句，可以省略大括号，但不建议省略

3.7.1.2.双选择
if(条件){	语句体1;    else {	语句体2;}

首先执行条件
如果结果为true，则执行语句体1;如果结果为false，则执行语句体2。

3.7.1.3.多选择
if(比较表达式1){	语句体1;}else if(比较表达式2){	语句体2;}else if(比较表达式3){	语句体3;}	...[else{	语句体n+1;}]
3.7.1.4.switch结构

多个if...else且值为定值时（即在比较运行结果时，采用的是严格相等运算符(===)，而不是相等运算符(==)，这意味着比较时不会发生类型转)，可以使用switch 替换:

switch(表达式){	case 值1:        语句体1;        break;    case 值2:		语句体2;        break ;     ...	default:		语句体n+1;        [break;]}

break防止穿透，如果没有break,则继续执行后面的代码，直到遇到 break或全部执行完毕，但是有些时候会利用穿透。

3.7.2 循环

循环结构用于重复执行某个操作简单理解就是重复执行同类型的代码，它有多种形式。

3.7.2.1. while：先判断后执行

基本格式：

while(判断条件语句){	循环体语句;}

扩展格式：

初始化语句;while(判断条件语句){	循环体语句;	控制条件语句;//少了它很容易形成死循环}
3.7.2.2.do...while：先执行后判断，至少执行一次

基本格式

do {循环体语句;}while(判断条件语句);

扩展格式:

初始化语句;do {	循环体语句;    控制条件语句;}while(判断条件语句);
3.7.2.3. for
for(初始化语句;判断条件语句;控制条件语句){	循环体语句;}
3.7.2.4.死循环

条件永远成立，永远为true,则会产生死循环，下面是最简单的死循环

while(true)for(;;){}
3.7.2.5. break 与continue

break: 停止本层循环
continue:暂停本次循环，继续下一次

3.8.数组

数组是按次序排列的一组数据，每个值的位置都有编号（从0开始)，整个数组用方括号表示。

3.8.1.数组定义

JS中定义数组的三种方式如下（也可先声明再赋值)︰

var arr =[值1,值2,值3];//隐式创建var arr = new Array(值1,值2,值3;//直接实例化var arr = new Array(size); //创建数组并指定长度

数组的特点

1．长度可变
2．数组中数据类型任意
3．索引从0开始
4．可以使用任意字符当作数组的索引，如果索引是非正整数，我们称之为数组的属性，属性不影响数组的长度。

5．数组中的每一个元素都可以被访问和修改，甚至是不存在的元素，无所谓越界

3.8.2.基本操作

数组的长度可以通过length属性来获取，并可以任意更改

  • 数组名.length
  • 数组名.length =新长度

数组中的每一个元素都可以被访问和修改，甚至是不存在的元素，无所谓越界

  • 数组名[下标]
  • 数组名[下标]=新值

3.8.3.数组遍历

数组的遍历即依次访问数组的每一个元素，JS提供三种遍历数组的方式:

3.8.3.1.普通的for循环遍历

for(var i=0; i<=数组.length-1; i++){
}
如:
for(var idx=0 ; idx<arr. length;idx++){
console.log(arr[idx]);

3.8.3.2.for ... in
for(var下标(名称任意) in 数组名){	数组名[下标]是获取元素}//下标(名称任意)// 直接实例化var arr3 = new Array(1,"2",true);console.log( arr3);for (var index in arr3) {	console.log(index);	console.log(arr3[index]);	console.log("====")}
3.8.3.3. forEach
数组名.forEach(function(element,index){//element(名释任意):元素，index(名称任意):下标}如:   arr3.forEach(function(elem,index){	 console.log(elem+"元素");	 console.log(index+"索引");
3.8.3.4.了解

数组在使用的时候建议大家规矩来用。在存放数据时，从下标0开始顺序的存放数组元素。

如果下标:
1.为非负整数(包括整数字符串):自动从0开始,不存在添加undefined
2.为负数、小数、非数字符串:这些内容不计算在长度内，当成"属性"处理，相当于自定义属性。
数组非常灵活，使用数组元素
1.下标:非负整数(包括整数字符串)∶
数组.下标
数组[下标]
2.下标:负数、小数、非数字字符串:
数组[属性]

  • for -->不遍历属性
  • foreach -->不遍历属性和索引中的undefined
  • for in -->不遍历索引中的undefined

3.8.4 数组提供的操作方法

Array对象为我们提供了一些方法，可以很方便地操作数组
push 添加元素到最后
unshift 添加元素到最前
pop 删除最后项
shift 删除第一质
reverse 数组翻转
join 数组转成字符串
indexof 数组元素索引
slice 截取（切片)数组，原数组不发生变化
splice 剪接数组，原数组变化，可以实现前后删除效果
concat 数组合并

3.9.函数

函数，即方法。就是一段预先设置的功能代码块，可以反复调用，根据输入参数的不同，返回不同的值。函数也是对象。

3.9.1.函数的定义

有三种函数定义的方式:函数声明语句、函数定义表达式、 Function构造函数

3.9.1.1.函数声明语句
function 函数名([参数列表]){}例如:function foo(){    console.1og(1);}foo();该种方式定义的函数具有声明提升的效果foo(;function foo(){console.log(1);}/变量声明提升conso1e.1og( a );var a = 2;
3.9.1.2.函数定义表达式

以表达式方式定义的函数，函数的名称是可以不需要的

var 变量名 = function([参数列表]){}变量名();例如:var fun = function(){console.log("He11o");fun();

这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称函数表达式，因为赋值语句的等号右侧只能放表达式。

Function构造函数

var 变量名 = new Function('a','b','return(a+b)');

注意：

  1. 如果使用函数声明语句这种方式声明函数，会具有函数名提升的效果
	<script type="text/javascript">		/* 函数的定义 */		// 1.函数声明语句		test();//依然可以调用函数test()!!!!		function test(){			console.log("含食宿");}		// test();	</script>
  1. Js方法中没有重载，如果出现同名方法则覆盖

3.9.2函数的参数，调用和return语句

​ 函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数，定义时的参数称为形参，调用时的参数称为实参

  • 实参可以省略，那么对应形参为undefined
  • 若函数形参同名(一般不会这么干)︰在使用时以最后一个值为准
  • 可以给参数默认值：当参数为特殊值时，可以赋予默认值
  • 参数为值传递，传递副本
  • 引用传递时传递地址，操作的是同一个对象
<script>// 调用函数时，实参可以省略，则对应形参为undefined    function add(a , b) {	console. log(a + "+” + b + "=”+(a + b));}add(3,4,5)//3+4=7add(1);//1+undefined=NaNadd(); / /undefined+undefined=NaN//若函数形参同名(一般不会这么干)∶在使用时以最后一个值为准    function add2(a , a) {		console.log(a);}add2(1,2);//1//给参数默认值	function defau1tvalue(a){		a = a || "a" ;}</script>

Function构造函数

var变量名= new Function( "a ' , 'b " , " return (a+b) ' );

​ 1 如果使用函数声明语句这种方式声明函数，会具有函数名提升的效果。

​ 2 JS中方法没有重载,如果出现同名方法则覆盖。

函数的调用

​ 1 常用调用方式:函数名([参数列表]);

​ 2 函数调用模式

​ 3 对象调用模式

函数的返回
1、如果函数有返回值,需要通过return返回

2．如果函数不需要返回数据时，则无返回值，或者说返回undefinded

3．如果函数不需要返回值时，使用return，则表示结束方法

​ 作用:

​ 1.返回结果给调用者

​ 2.结束语句

3.9.3 函数的作用域

注意：在js中只有函数有作用域

函数作用域:全局(global variable)和局部(local variable)

<script>//1．全局变量与局部变量同名问题var box =1;//全局变量    function disp1ay(box){		var box = 3;//此处box与全局变量box没有关系，这里的box为传递的参数，相当于新声明的局部变量        var b = 2;//局部变量console. log(""box-->" + box);}display();console.log(""b-->" + b) ;// b不能访问//2.在函数中定义变量时，若没有加var关键字，使用之后自动变为全局变量function fun(){    a = 100；}a = 100;fun();alert(a);</script>

3.10 内置对象

Arguments 只在函数内部定义，保存了函数的实参

Array 数组对象
Date 日期对象，用来创建和获取日期
Math 数学对象
string 字符串对象，提供对字符串的一系列操作

3.10.1.String

charAt(idx) 返回指定位置处的字符
indexof(chr) 返回指定子字符串的位置，从左到右。找不到返回-1
substr(m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。
toLowercase 将字符串中的字符全部转化成小写。
touppercase 将字符串中的字符全部转化成大写。
length 属性，不是方法。返回字符串的长度。

3.10.2.Math

Math .random(）随机数
Math.ceil( ) 向上取整，大于最大整数
Math.floor( ) 向小取整,小于最小整数string

3.10.3. Date

//获取日期

getFu11Year年:getMonth(月getDateo日getHourso时getMinutesO分 getsecondsO秒//设置日期setYear(·setMonth。 setDatee setHoursO。 setMinutes(·setseconds(。toLoacalestring(转换成本地时间字符串说明:js1.getMonth():得到的值:0~11 (1月~12月)2.setMonth(J设置值时0~113.toLocaleString():可根据本地时间把Date对象转换为字符串，并返回结果。

3.11.对象

对象（object)是JavaScript的核心概念，也是最重要的数据类型。JavaScript的所有数据都可以被视为对象。JavaScript提供多个内建对象，比如String、Date、Array等等。对象是带有属性和方法的特殊数据类型。
简单说，所谓对象，就是一种无序的数据集合，由若干个"键值对”(key-value)构成。通过JavaScript我们可以创建自己的对象。JavaScript对象满足的这种"键值对"的格式我们称为JSON格式，以后会见得非常多，即伟大的JSON对象。

3.11.1.对象的创建

JS创建自定义对象，主要通过三种方式:字面量形式创建对象(常用）、通过new Object对象创建、通过Object对象的create方法创建对象。

3.11.1.1.字面量形式创建
		/* 对象的创建 */		// 1.字面量形式创建对象		var obj = {};//空对象 		console.log(obj);		// 非空对象（键是字符串，值可以是六种数据类型中任意一种		var obj2 = {			name: "lisi",			age:18,			islike:true,			sayHello:function(){//函数				console.log("hello,你好");			},			cats:['cat1','cat2'],//数组			dogs:{//对象				name:"王二狗",				age:1				}			};		console.log(obj2)
3.11.1.2 通过new Object创建
// var 对象名 = new Object();var obj = new Object();obj.name = 'zs';obj.age = 18;console.log(obj);
3.11.1.3 通过Object对象的create方法创建
// var 对象名 = Object.create(null);var obj = object.create(null);//括号里必须有null,括号中表示以什么为模板来创建对象（可以继承相应的数据obj.name = 'ls';obj.gender = true;console.log(obj);

3.11.2对象的序列化和反序列化

序列化即将JS对象序列化为字符串，反序列化即将字符串反序列化为JS对象。

JS中通过调用JSON方法，可以将对象序列化成字符串，也可以将字符串反序列化成对象。

//序列化对象，将对象转为字符串JSON. stringify(object);//反序列化，将-个Ison字符串转换为对象。JSON.parse(jsonstr);

3.11.3 this

this是JavaScript语言的一一个关键字。
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

3.11.3.1.在函数中使用this

在函数中使用this属于全局性调用，代表全局对象，通过window对象来访问。

/* 在函数中使用this */function test(){    this.x = 1;    console.log(this.x);}test();//调用的对象是，浏览器window对象；相当于定义在全局对象上的属性console.log(x);console.log(this);
3.11.3.2 在对象中使用this
/* 在对象中使用this */var obj2 = {	name: "lisi",	age:18,	sayAge:function(){//函数		console.log(this.age);},};obj2.sayAge();//18//因为是obj2对象调用的函数sayAge()，所以其中的this指代，obj2对象
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/aspiration/p/15422693.html