JS

最新推荐文章于 2023-08-28 10:43:51 发布

Yuan_Xiao_Mu

最新推荐文章于 2023-08-28 10:43:51 发布

阅读量325

点赞数

分类专栏： JS的基础语法掌握文章标签： js

本文链接：https://blog.csdn.net/Yuan_Xiao_Mu/article/details/107745901

版权

JS的基础语法掌握专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS

JavaScript

JavaScript 是⼀种具有⾯向对象能⼒的、解释型的程序设计语⾔。更具体⼀点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语⾔。它的主要⽬的是，验证发往服务器端的数据、增加 Web 互动、加强⽤户体验度等。

ECMAScript(基础语法)

JavaScript的核⼼语法ECMAScript描述了该语⾔的语法和基本对象

DOM(⽂档对象模型)

⽂档对象模型（DOM）—— 描述了处理⽹⻚内容的⽅法和接⼝

BOM(浏览器对象模型)

浏览器对象模型（BOM）—— 描述了与浏览器进⾏交互的⽅法和接⼝

基本用法

JS需要和HTML⼀起使⽤才有效果，我们可以通过直接或间接的⽅式将JS代码嵌⼊在HTML⻚⾯中。

⾏内JS : 写在标签内部的js代码

内部JS : 定义在script标签内部的js代码

外部JS : 单独的js⽂件，在HTML中通过script标签引⼊

行内JS:

<button onclick="alert('you clicked hered!!!')">click here</button>

内部 JS：

<script type="text/javascript" charset="utf-8">

 alert('this is inner js code')

</script>

外部 JS ⽂件：

js文件代码:

alert('this is a outter js document');

html代码:

<!-- 在需要使⽤js的html⻚⾯中引⼊ -->
<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>

基础语法

注释:

单⾏注释：⽤//起头；

多⾏注释：放在/* 和 */之间。

兼容html注释⽅式：

标识符

规则:

由Unicode字⺟、_、$、数字组成、中⽂组成

（1）不能以数字开头

（2）不能是关键字和保留字

（3）严格区分⼤⼩写

规范:

（1）⻅名知意

（2）驼峰命名或下划线规则

变量

声明

JavaScript是⼀种弱类型语⾔，在声明变量时不需要指明数据类型，直接⽤var修饰符进⾏声明。

// 先声明再赋值 

var a ;  

a = 10; 

// 声明同时赋值 

var b = 20;

注意:

1.若只声明⽽没有赋值，则该变量的值为undefined。

2.变量要有定义才能使⽤，若变量未声明就使⽤，JavaScript会报错，告诉你变量未定义。

3.可以在同⼀条var命令中声明多个变量。

4.若使⽤var重新声明⼀个已经存在的变量，是⽆效的。

5.若使⽤var重新声明⼀个已经存在的变量且赋值，则会覆盖掉前⾯的值

6.JavaScript是⼀种动态类型、弱类型语⾔，也就是说，变量的类型没有限制，可以赋予各种类型的值。

变量提升

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

console.log(msg); 

var msg = "so easy"; 

// 变量提升，相当于下⾯的代码 

var msg; 

console.log(msg); 

msg = "so easy"; 

// 说明： 最后的结果是显示undefined，表示变量msg已声明，但还未赋值

注意：变量提升只对 var 命令声明的变量有效，如果变量不是⽤ var 命令声明的，就不会发⽣变量提升。

数据类型

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

函数转换

JS 提供了 **parseInt()**和 **parseFloat()**两个全局转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对 String 类型调⽤这些⽅法，这两个函数才能正确运⾏；对其他类型返回的都是 NaN(非数字)。

显示转换

每个数对象都提供了**toString()**函数将内容转换为字符串形式，其中Number提供的toString()函数可以将数字转换为字符串。

Number还提供了**toFixed()**函数将根据⼩数点后指定位数将数字转为字符串，四舍五⼊

// 将内容转换为字符串形式 

var data = 10 

console.log(data.toString()) 

// 根据⼩数点后指定位数将数字转为字符串，四舍五⼊ 

data = 1.4; 

console.log(data.toFixed(0)); 

data = 1.49; 

console.log(data.toFixed(1)); 
  
// 不能对null和undefined使⽤ 

data = null 

console.log(data.toString()) 

data = undefined 

console.log(data.toString())

JS 为 Number、Boolean、String 对象提供了构造⽅法，⽤于强制转换其他类型的数据。此时操作的是整个数据，⽽不是部分。

Number(false) 0 

Number(true) 1 

Number(undefined) NaN 

Number(null) 0 

Number("5.5") 5.5 

Number("56") 56 

Number("5.6.7") NaN 

Number(new Object()) NaN 

Number(100) 100 

Boolean(""); // false – empty string 

Boolean("hi"); // true – non-empty string 

Boolean(100); // true – non-zero number 

Boolean(null); // false - null 

Boolean(0); // false - zero

Boolean(new Object()); // true – object

最后⼀种强制类型转换⽅法 String() 是最简单的，因为它可把任何值转换成字符串。

var s1 = String(null); // "null" 

var oNull = null; 

var s2 = oNull.toString(); // won’t work, causes anerror

最为简单的⼀种转换为字符串的⽅式，直接在任意数据后⾯ + “” 即可。

运算符

算数运算符: + - * / % ++ –

赋值和扩展运算符: = += -= *= /= %=

比较运算符: == === != > < >= <=

逻辑运算符: && || !

三目运算符: 判断语句? 值一:值二

控制语句

流程控制语句⼀共有三种：

流程执⾏:从上到下，从左到右
选择执⾏:分⽀选择
循环执⾏:重复执⾏

选择: if(条件){语句体;}

if(条件){语句体1}else{语句体2}

if(){}

else if(){}

…

else{}

		switch采⽤的是严格相等运算符（===）

			switch(表达式) { 

                       case 值1: 

                                语句体1; 

                                 break; 

                       case 值2: 

                                语句体2; 

                                break; 

                                  ... 

                         default: 

								 语句体n+1; 

								 [break;] 

					}

循环: 基本格式

 while(判断条件语句) { 

 						循环体语句; 

				 }   

	扩展格式： 

				 初始化语句; 

 	while(判断条件语句){ 

 			循环体语句; 	

 					控制条件语句; // 少了它很容易形成死循环 

 				}

do…while

基本格式

	do { 

 				循环体语句; 

		 }while(判断条件语句);  

			扩展格式： 

		 初始化语句; 

				 do { 

 					循环体语句; 

 						控制条件语句; 

				 } while(判断条件语句);

for

for(初始化语句;判断条件语句;控制条件语句){ 

 循环体语句; 

}

死循环

while(true){} 

for(;;){}

break 与 continue

break: 停⽌本层循环

continue:暂停本次循环，继续下⼀次

数组

JS中数组的三种定义方式

var arr = [值1,值2,值3]; // 隐式创建 

var arr = new Array(值1,值2,值3); // 直接实例化 

var arr = new Array(size); // 创建数组并指定⻓度

与java中数组不同在js中

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

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

数组的遍历方式

1.for遍历:

for(var i=0; i<=数组.length-1; i++){   

} 

如： 

for(var idx=0;idx<arr.length;idx++){ 

 console.log(arr[idx]); 

} 
2.for...in遍历:

for(var 下标(名称任意) in 数组名){
 数组名[下标]是获取元素
} // 下标(名称任意)
如：
for(var idx in arr){
 console.log(arr[idx]);
}
3.forEach遍历
数组名.forEach(function(element,index){
 // element(名称任意)：元素，index(名称任意)：下标
}) 
如：
arr.forEach(function(elem,idx){
 console.log(idx + "-->" + elem);
});

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

函数

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

函数的定义:

函数声明语句

function 函数名([参数列表]){   }  //该种⽅式定义的函数具有声明提升的效果

函数定义表达式

var 变量名 = function ([参数列表]) {  } 

变量名();

 Function构造函数

var add = new Function('x','y','return (x + y)'); 

// 等同于 

function add(x, y) { 

return (x + y); 

} 

add();

注意:

js中的函数没有重载，同名的函数，会被后⾯的函数覆盖。
js中允许有不定数⽬的参数.

函数的调用:

常用调用模式:

函数名([实参]);   //存在返回值可以变量接收，若接收⽆返回值函数则为undefined。

函数调用模式:

function add(a,b){ 

 return a+b; 

} 

var sum = add(1,2) 

console.log(sum);

方法调用模式:

var o = { 

 m: function(){ 

 console.log(1); 

 } 

}; 

o.m();

return

作⽤：

在没有返回值的⽅法中，⽤来结束⽅法。
有返回值的⽅法中，⼀个是⽤来结束⽅法，⼀个是将值带给调⽤者。

函数的作用域

函数作⽤域：全局 (global variable) 和局部 (local variable)

局部变量在方法结束时失效

全局变量与局部变量同名

在函数中定义变量时，若没有加var关键字，使⽤之后⾃动变为全局变量

内置对象

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

Array 数组对象

Date ⽇期对象，⽤来创建和获取⽇期

Math 数学对象

String 字符串对象，提供对字符串的⼀系列操作

String

charAt(idx) 返回指定位置处的字符

◦ indexOf(Chr) 返回指定⼦字符串的位置，从左到右。找不到返回-1

◦ substr(m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。

◦ substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。

◦ toLowerCase() 将字符串中的字符全部转化成⼩写。

◦ toUpperCase() 将字符串中的字符全部转化成⼤写。

◦ length 属性，不是⽅法，返回字符串的⻓度。

Math

◦ Math.random() 随机数

◦ Math.ceil() 向上取整，⼤于最⼤整数

◦ Math.floor() 向⼩取整，⼩于最⼩整数String

Date

// 获取⽇期
◦ getFullYear() 年

◦ getMonth() ⽉

◦ getDate() ⽇

◦ getHours() 时

◦ getMinutes() 分

◦ getSeconds() 秒
// 设置⽇期
◦ setYear()
◦ setMonth()
◦ setDate()
◦ setHours()
◦ setMinutes()
◦ setSeconds()
◦ toLoacaleString() 转换成本地时间字符串

注意:

getMonth()：得到的值：0_11（1⽉12⽉）
setMonth()：设置值时0~11
toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。

对象

对象（object）是 JavaScript 的核⼼概念，也是最重要的数据类型。

简单说，所谓对象，就是⼀种⽆序的数据集合，由若⼲个"键值对"（key-value）构成。

对象的创建

字⾯量形式创建:

	var 对象名 = {};//创建⼀个空的对象 

	var 对象名 = {键:值,键2:值2,...}

通过new Object创建

	var 对象名 = new Object(); // 创建⼀个空的对象 

	var obj = new Object();

 通过Object对象的create⽅法创建

	var 对象名 = Object.create(null); 

	var obj = Object.create(null); 

	obj.name = 'ls'; 

	obj.gender = true 

	console.log(obj);

对象的序列化和反序列化

// 序列化对象，将对象转为字符串 

JSON.stringify(object);

// 反序列化，将⼀个Json字符串转换为对象。 

JSON.parse(jsonStr);

this关键字

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

function test () { 

 this.x = 1; 

 console.log(this.x); 

} 

test(); 

console.log(x); // 相当于定义在全局对象上的属性 

var x = 10; 

console.log(x) // 10 

function test (){ 

 console.log(this.x) // 10 

 this.x = 1; 

 console.log(this.x) // 1 

 console.log(this) 

} 

test(); 

console.log(x); // 1 

console.log(this);

在对象中的函数使⽤this，代表当前的上级对象。

var obj = { 

 name : '张三', 

 age : 20, 

 sayHello : function () { 

 console.log(this.name) 

 console.log(this) 

	 } 

} 

obj.sayHello();

Yuan_Xiao_Mu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS

JSJavaScript JavaScript 是⼀种具有⾯向对象能⼒的、解释型的程序设计语⾔。更具体⼀点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语⾔。它的主要⽬的是，验证发往服务器端的数据、增加 Web 互动、加强⽤户体验度等。ECMAScript(基础语法)JavaScript的核⼼语法ECMAScript描述了该语⾔的语法和基本对象DOM(⽂档对象模型)⽂档对象模型（DOM）—— 描述了处理⽹⻚内容的⽅法和接⼝BOM(浏览器对象模型)浏览器对象模型（BOM）—— 描述了与
复制链接

扫一扫

专栏目录