JavaScript

最新推荐文章于 2024-05-03 23:30:14 发布

NDW1375898235

最新推荐文章于 2024-05-03 23:30:14 发布

阅读量125

点赞数

文章标签： html javascript web

本文链接：https://blog.csdn.net/NDW1375898235/article/details/113704954

版权

文章目录

一、基础语法
二、函数
三、内置对象

一、基础语法

1. 语法注意事项

JS是由语句组成,语句由关键字,变量,常量,运算符,方法组成.分号可以作为语句结束的标志,也可以省略
JS严格区分大小写
注释语法
单行注释使用 //
多行注释使用 /* */

2. JS的变量与常量

1) 变量

作用 : 用于存储程序运行过程中可动态修改的数据

语法 : 使用关键var声明,自定义变量名

var x;		//变量声明
x = 100;	//变量赋值
var y = 200; //声明并赋值
var m,n,k;	//同时声明多个变量
var j = 10,c = 20; //同时声明并赋值多个变量

命名规范 :
- 变量名,常量名,函数名,方法名自定义,可以由数字,字母,下划线,$组成,禁止以数字开头
- 禁止与关键字冲突
  关键字：var const function if else for while do break case switch return class…
- 变量名严格区分大小写
- 变量名尽量见名知意,多个单词组成采用小驼峰,例如：“userName”
使用注意 :
- 变量如果省略var关键字,并且未赋值,直接访问会报错
- 变量使用var关键字声明但未赋值,变量初始值为undefined
- 变量省略var关键字声明,已被赋值,可正常使用.影响变量作用域

2) 常量

作用 : 存储一经定义就无法修改的数据
语法 : 必须声明的同时赋值
```
const PI = 3.14;
```
注意 :
- 常量一经定义,不能修改,强制修改会报错
- 命名规范同变量,为了区分变量,常量名采用全大写字母

3. 数据类型

1) 基本数据类型（简单数据类型）

number 数值类型

整数

 1.   十进制表示
  var a = 100;

 2. 八进制表示
    以0为前缀
  var b = 021;     //结果为十进制的 17

 3. 十六进制
    以0x为前缀
  var c = 0x35;    //结果为十进制的 53
  
    使用 : 整数可以采用不同进制表示,在控制台输出时一律会按照十进制输出

小数

1. 小数点表示
 var m = 1.2345;
2. 科学计数法
  例 : 1.5e3
   e表示10为底,e后面的数值表示10的次方数
   1.5e3 等价于 1.5 * 10(3)

string 字符串类型
字符串 : 由一个或多个字符组成,使用""或’'表示,每一位字符都有对应的Unicode编码
```
var s = "100";
var s1 = "张三";
```
boolean 布尔类型
只有真和假两个值，布尔值与number值可以互相转换。true 为 1，false 为 0
```
var isSave = true;
var isChecked = false;
```
undefined (程序返回的值)
特殊值,变量声明未赋值时显示undefined
```
var a;
console.log(a);//undefined
```
null 空类型 (主动使用的)
解除对象引用时使用null,表示对象为空

2) 引用数据类型

主要指对象，函数等

3) 检测数据类型

typeof 变量或表达式
typeof (变量或表达式)

var n = "asda";
console.log(typeof n);    //string
console.log(typeof(n));   //string

4. 数据类型转换

不同类型的数据参与运算时,需要转换类型

1) 强制类型转换

转换字符串类型
方法 : toString()
返回转换后的字符串

var a = 100;
a = a.toString(); //"100"
var b = true;
b = b.toString(); //"true"

转换number类型
Number(param)
参数为要进行数据类型转换的变量或值，返回转换后的结果:
如果转换成功,返回number值
如果转换失败,返回NaN,(Not a Number)，只要数据中存在非number字符,一律转换失败，返回 NaN
```
    Number("abc")
    typeof NaN
    Number(undefined)
    Number(null)
```
parseInt(param)
参数为要解析的数据
作用 : 从数据中解析整数值
过程 :
1. 如果参数为非字符串类型,会自动转成字符串
2. 从左向右依次对每一位字符转number,转换失败则停止向后解析,返回结果

parseFloat(param)
作用 : 提取number值，包含整数和小数部分

2) 隐式类型转换（自动转换）

当字符串与其他数据类型进行"+"运算时,表示字符串的拼接，不再是数学运算
转换规则：将非字符串类型的数据转换成字符串之后进行拼接，最终结果为字符串
其他情况下，一律将操作数转number进行数学运算

5. 运算符

1) 赋值运算符

= 将右边的值赋给左边变量

2) 算数运算符

+ - * / %  加 减 乘 除 取余

3) 复合运算符

+= -= *= /= %=

4) 自增或自减运算符

++ -- 变量的自增和自减指的是在自身基础上进行 +1或-1 的操作

注意：

自增或自减运算符在单独与变量结合时，放前和放后没有区别
如果自增或自减运算符与其他运算符结合使用，要区分前缀和后缀,做前缀，那就先++/–,再进行赋值或其他运算，如果做后缀，就先结合其他运算符，再进行++ / –

5) 关系运算符/比较运算符

> <     
>= <=
==(相等) !=(不相等)
===(全等) !==(不全等)

关系运算符用来判断表达式之间的关系,结果永远是布尔值 true/false
使用
- 字符串与字符串之间的比较
  依次比较每位字符的Unicode码,只要某位字符比较出结果,就返回最终结果
- 其他情况
  一律将操作数转换为number进行数值比较，如果某一操作数无法转换number，则变成NaN参与比较运算，结果永远是false
  注意：
  null和其他数据类型做等值比较运算不转换成数字
  null和undefined相等但是 null和undefined不全等
相等与全等
- 相等 : 不考虑数据类型,只做值的比较(包含自动类型转换)
- 全等 : 不会进行数据类型转换,要求数据类型一致并且值相等才判断全等

6) 逻辑运算符

&& 逻辑与条件1&&条件2 (and)
表达式同时成立,最终结果才为true;全1则1
|| 逻辑或条件1||条件2 (or)
表达式中只要有一个成立,最终结果即为true; 有1则1
! 逻辑非 !条件 (not)
对已有表达式的结果取反
注意 : 除零值以外,所有值都为真

7) 三目运算符

语法 :

表达式1 ? 表达式2 : 表达式3;

过程 :
判断表达式1是否成立,返回布尔值
如果表达式1成立,执行表达式2;
如果表达式1不成立,执行表达式3;

a>b?console.log(‘a比b大’):console.log(‘b比a大’)
1 2 3

6. 运算符

1）if语句

简单if结构
```
if(条件表达式){
	表达式成立时执行的代码段
}
```
注意 : 除零值以外，其他值都为真，以下条件为假值false
```
if(0){}
if(0.0){}
if(""){} //空字符串
if(undefined){}
if(NaN){}
if(null){}
```
特殊写法 :
{ }可以省略,一旦省略，if语句只控制其后的第一行代码

if - else结构

if(条件表达式){
//条件成立时执行
}else{
//条件不成立时选择执行
}

多重分支结构

  if(条件1){
  	//条件1成立时执行
  }else if(条件2){
  	//条件2成立时执行
  }else if(条件3){
  	//条件3成立时执行
  }...else{
  	//条件不成立时执行
  }

2）switch语句

语法 :

switch(value){
	 case 值1 :
	 //value与值1匹配全等时,执行的代码段
	 break; //结束匹配
	 case 值2 :
	 //value与值2匹配全等时,执行的代码段
	 break;
	 case 值3 :
     //value与值3匹配全等时,执行的代码段
	 break;
	 default:
 	 //所有case匹配失败后默认执行的语句
 	 break;
}

使用 :

1. switch语句用于值的匹配，case用于列出所有可能的值；
   只有switch()表达式的值与case的值匹配全等时，才会执行case对应的代码段
2. break用于结束匹配，不再向后执行；
   可以省略，break一旦省略，会从当前匹配到的case开始，向后执行所有的代码语句，
   直至结束或碰到break跳出
4. default用来表示所有case都匹配失败的情况，一般写在末尾，做默认操作
5. 多个case共用代码段
  		case 值1:
  		case 值2:
  		case 值3:
//以上任意一个值匹配全等都会执行的代码段

3）循环结构

作用
根据条件，重复执行某段代码
分类

while循环

定义循环变量;
   while(循环条件){
   条件满足时执行的代码段
   更新循环变量;
}

do-while循环

do{
	循环体;
	更新循环变量
}while(循环条件);

与 while 循环的区别 :

while 循环先判断循环条件，条件成立才执行循环体
do-while 循环不管条件是否成立，先执行一次循环体

for 循环

for(定义循环变量;循环条件;更新循环变量){
	循环体;
}

循环控制 :

break 强制结束循环
continue 结束当次循环，开始下一次循环
循环嵌套 :
在循环中嵌套添加其他循环

二、函数

1. 作用

封装一段待执行的代码

2. 语法

  //函数声明
  function 函数名(参数列表){
  	函数体
  	return 返回值;
  }
  //函数调用
  函数名(参数列表);

3. 使用

函数名自定义，见名知意，命名规范参照变量的命名规范。普通函数以小写字母开头，用于区分构造函数(构造函数使用大写字母开头，定义类)

4. 匿名函数

匿名函数：省略函数名的函数。语法为：

匿名函数自执行

 (function (形参){
  
 })(实参);

定义变量接收匿名函数

 var fn = function (){};
 fn(); //函数调用

5. 作用域

JavaScript 中作用域分为全局作用域和函数作用域，以函数的{ }作为划分作用域的依据

全局变量和全局函数
- 只要在函数外部使用 var 关键字定义的变量，或函数都是全局变量和全局函数，在任何地方都可以访问
- 所有省略 var 关键字定义的变量，一律是全局变量
局部变量/局部函数
- 在函数内部使用 var 关键字定义的变量为局部变量，函数内部定义的函数也为局部函数，只能在当前作用域中使用，外界无法访问
作用域链
局部作用域中访问变量或函数，首先从当前作用域中查找，当前作用域中没有的话，向上级作用域中查找，直至全局作用域

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1hNAep7v-1612535483719)(assets/变量的作用域.png)]

6. 获取多个DOM元素和控制属性

根据标签名获取元素节点列表

var elems = document.getElementsByTagName("");
/*
参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。
*/

根据 class 属性值获取元素节点列表

var elems = document.getElementsByClassName("");
/*
参数 : 类名(class属性值)
返回值 : 节点列表
*/

元素节点对象提供了以下属性来操作元素内容

innerHTML : 读取或设置元素文本内容,可识别标签语法
innerText : 设置元素文本内容,不能识别标签语法
value : 读取或设置表单控件的值

获取 DOM 树中的属性值

document.getElementById("Name");         //根据元素的id获取当前的标签

设置 DOM 树中的属性值：

elem.getAttribute("attrname");          //根据指定的属性名返回对应属性值
elem.setAttribute("attrname","value");  //为元素添加属性,参数为属性名和属性值
elem.removeAttribute("attrname");//移除指定属性

三、内置对象

1. 特点

数组用于存储若干数据,自动为每位数据分配下标,从0开始
数组中的元素不限数据类型,长度可以动态调整
动态操作数组元素：根据元素下标读取或修改数组元素，arr[index]

2. 属性和方法

属性 : length 表示数组长度,可读可写
方法 :
- push(data)
  在数组的末尾添加一个或多个元素,多个元素之间使用逗号隔开
  返回添加之后的数组长度
- pop()
  移除末尾元素
  返回被移除的元素
- unshift(data)
  在数组的头部添加一个或多个元素
  返回添加之后的数组长度
- shift()
  移除数组的第一个元素
  返回被移除的元素
- splice(index,num)
  
  从数组中添加/删除项目
  
  返回被删除的项目
- toString()
  将数组转换成字符串类型
  返回字符串结果
- join(param)
  将数组转换成字符串,可以指定元素之间的连接符,如果参数省略,默认按照逗号连接
  返回字符串
- reverse()
  反转数组,倒序重排
  返回重排的数组,注意该方法直接修改原数组的结构
- sort()
  对数组中元素排序,默认按照Unicode编码升序排列
  返回重排后的数组,直接修改原有数组
  参数 : 可选,自定义排序算法
  例：
```
//自定义升序
function sortASC(a,b){
  return a-b;
}
```
  作用：作为参数传递到sort()中,会自动传入两个元素进行比较,如果a-b>0,交换元素的值,自定义升序排列
```
//自定义降序
function sortDESC(a,b){
	return b-a;
}
//如果返回值>0,交换元素的值,b-a表示降序排列
```

3. 二维数组

数组中的每个元素又是数组

 var arr1 = [1,2,3];
 var arr2 = [[1,2],[3,4],[5,6,7]];
 //操作数组元素
 var r1 = arr2[0]      //内层数组
 var num = r1[0];      //值 1
 //简写
 var num2 = arr2[1][0];

4. String 对象

1).创建

    var str = "100";
    var str2 = new String("hello word!");

2). 特点

字符串采用数组结构存储每位字符,自动为字符分配下标,从0开始

3). 属性

length ：获取字符串长度

4). 方法

转换字母大小写
toUpperCase() 转大写字母
toLowerCase() 转小写字母
返回转换后的字符串,不影响原始字符串
获取字符或字符编码
charAt(index) 获取指定下标的字符
charCodeAt(index) 获取指定下标的字符编码
参数为指定的下标,可以省略,默认为0
获取指定字符的下标
- indexOf(str,fromIndex)
  作用 : 获取指定字符的下标,从前向后查询,找到即返回
  参数 :
  str 表示要查找的字符串,必填
  fromIndex 表示起始下标,默认为0
  返回 :
  返回指定字符的下标,查找失败返回-1
截取字符串
substring(startIndex,endIndex)
作用 : 根据指定的下标范围截取字符串,startIndex ~ endIndex-1
参数 :
startIndex 表示起始下标
endIndex 表示结束下标,可以省略,省略表示截止末尾
substr(startIndex,len)

作用：根据下标截取指定的字符串
分割字符串
split(param)
作用 : 将字符串按照指定的字符进行分割,以数组形式返回分割结果
参数 : 指定分隔符,必须是字符串中存在的字符,如果字符串中不存在,分割失败,仍然返回数组
模式匹配
正则表达式对象 RegExp

RegExp : Regualr Expression
1. 语法：
  var reg1 = /赵丽颖/ig;
  var reg2 = new RegExp(‘匹配模式’,‘修饰符’);
  正则表达式对象可以接收一个变量。
2. 属性：
  
  lastIndex : 可读可写，表示下一次匹配的起始索引
  注意：
  1. 默认情况下，正则表达式对象不能重复调用方法，
    如果重复调用，结果会出错：
    由于 lastIndex 保存再一次匹配的起始下标，
    重复调用时，不能保证每次都从下标0开始
    验证，可以手动调整 lastIndex 为 0。
  2. 只有正则对象设置全局匹配 g ，该属性才起作用。
3. 方法：
  
  test(str) :验证字符串中是否存在满足正则匹配模式的内容，存在则返回true，
  
  不存在返回false参数为要验证的字符串。
作用 : 借助正则表达式实现字符串中固定格式内容的查找和替换
正则表达式 :
var reg1 = /字符模式/修饰符;
修饰符 :
i : ignorecase 忽略大小写
g : global 全局范围
字符串方法 :
- match(regExp/subStr)
  作用 : 查找字符串中满足正则格式或满足指定字符串的内容
  返回 : 数组,存放查找结果
- replace(regExp/subStr,newStr)
  作用 : 根据正则表达式或字符串查找相关内容并进行替换
  返回 : 替换后的字符串,不影响原始字符串。

5. Math 对象

1). 定义

Math对象主要提供一些列数学运算的方法

2). 属性

圆周率 : Math.PI
自然对数 : Math.E

3). 方法

Math.random(); 生成0-1之间的随机数
Math.ceil(x); 对x向上取整,忽略小数位,整数位+1
Math.floor(x); 对x向下取整,舍弃小数位,保留整数位
Math.round(x); 对x四舍五入取整数

6.日期对象

1). 创建日期对象

      1. var date2 = new Date("2021/2/11");
      2. var date3 = new Date("2021/2/11 00:00:01");

2). 日期对象方法

读取或设置当前时间的毫秒数：getTime()
获取时间分量

 - getFullYear()
 - getMonth()
1. var date2 = new Date("2021/2/11");
2. var date3 = new Date("2021/2/11 00:00:01");

3). 获取日期对象方法

读取或设置当前时间的毫秒数：

getTime()

获取时间分量

   - getFullYear()
   - getMonth()
   - getDate()

6.BOM 对象

1). BOM 介绍

BOM全称为“Browser Object Model”，浏览器对象模型。提供一系列操作浏览器的属性和方法。核心对象为window对象，不需要手动创建，跟随网页运行自动产生，直接使用，在使用时可以省略书写。

2). 对象方法

网页弹框

alert()	      	//警告框
confirm()	    //确认框

定时器方法

周期性定时器
作用：每隔一段时间就执行一次代码

//开启定时器:
var timerID = setInterval(function,interval);
/*
参数 :
 function : 需要执行的代码,可以传入函数名;或匿名函数
 interval : 时间间隔,默认以毫秒为单位 1s = 1000ms
返回值 : 返回定时器的ID,用于关闭定时器
*/

关闭定时器 :

//关闭指定id对应的定时器
clearInterval(timerID);

一次性定时器
作用：等待多久之后执行一次代码

//开启超时调用:
var timerId = setTimeout(function,timeout);
//关闭超时调用:
clearTimeout(timerId);

3). 属性

window的大部分属性又是对象类型

history

作用：保存当前窗口所访问过的URL
属性 : length 表示当前窗口访问过的URL数量
方法 :

back()        //对应浏览器窗口的后退按钮，访问前一个记录
forward()     //对应前进按钮，访问记录中的下一个URL

location

作用：保存当前窗口的地址栏信息(URL)
属性 : href 设置或读取当前窗口的地址栏信息
方法 :

reload(param)      //重载页面(刷新)
参数为布尔值，默认为 false，表示从缓存中加载，设置为true,强制从服务器根目录加载

4). DOM节点操作

DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）

节点对象

JavaScript 会对 html 文档中的元素、属性、文本甚至注释进行封装，称为节点对象，提供相关的属性和方法。

访问节点

元素节点 ( 操作标签）
属性节点（操作标签属性）
文本节点（操作标签的文本内容）

标签属性都是元素节点对象的属性,可以使用点语法访问，例如：

h1.id = "d1"; 		 //set 方法
console.log(h1.id);  //get 方法
h1.id = null;		//remove 方法

注意 :

属性值以字符串表示
class属性需要更名为 className，避免与关键字冲突，例如：
h1.className = “c1 c2 c3”；

5). 操作元素样式

为元素添加 id、class属性，对应选择器样式
操作元素的行内样式，访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。

p.style.color = "white";
p.style.width = "300px";
p.style.fontSize = "20px";

注意 :

属性值以字符串形式给出，单位不能省略
如果css属性名包含连接符，使用JS访问时，一律去掉连接符,改为驼峰， font-size -> fontSize

NDW1375898235

关注

0
点赞
踩
0

收藏

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

JavaScript基础语法1. 语法注意事项JS是由语句组成,语句由关键字,变量,常量,运算符,方法组成.分号可以作为语句结束的标志,也可以省略JS严格区分大小写注释语法单行注释使用 //多行注释使用 /* */2. JS的变量与常量1) 变量作用 : 用于存储程序运行过程中可动态修改的数据语法 : 使用关键var声明,自定义变量名var a; //变量声明a = 100; //变量赋值var b = 200; //声明并赋值var m,n,k; //同时声明多个变量
复制链接

扫一扫