记录学习的日常(JS基础篇更新中)

长至
619 阅读18分钟
  • JS概述
  • 输出与输入
  • 变量
  • 基础数据类型
  • 运算符
  • 流程控制
  • Math对象
  • 复杂数据类型
  • 数据类型转换

本文就js初级的一些基础知识点做个记录，如有错误之处请指出，谢谢大家

JS概述

组成部分

js由以下部分组成:

  • ECMAScript : 规定语法的组成，以及语法的格式语法上的要求对于任何一门编程语言都是十分苛刻的，不允许有以下错误，例如：大小写、标识符号都不可以出错，特别是JS语言
  • DOM : Document Object Model 文档对象模型 ; Document英文意思为文档 (也就是html文档) ; Object英文意思为对象 (html文档中的任何一个标签，在js中都可以称之为一个对象) ; Model英文意思为模型 (根据html文档中的标签以及标签之间的关系，可以将一个文档画出一种类似于树状的结构，也称之为DOM节点树)我们在编程中，可以使用JS操作标签的方方面面
  • BOM : Browser Object Model 浏览器对象模型 ; Browser 英文意思为浏览器 ; Object 英文意思为对象 ; Model 英文意思为模型 , 浏览器生产商在开发浏览器时，会将浏览器设计成多个组成部分，每个部分就是一个对象。我们在编程中会使用js操作其中的各个组成部分

书写位置

  • 外部 : 将js代码单独写到一个js文件中,再使用script标签的src属性将其引入到当前文件,这种方式即为外部

<script src="引入外部的一个js文件"></script>

  • 内部 : 书写在当前文件(HTML)内，这种方式即为内部

<script type="text/javascript">js代码书写在这里</script>

  • 行内 : 书写在html标签的属性事件中，这种方式即为行内。

<div onxxxx="书写在这里"></div>

  • 注意事项 : 一个script标签要么书写内部js代码，要么引入外部js代码，不可以同时进行。一个script标签如果用于书写内部js代码，那么不允许有src属性。

语言规则

  • 规则1：js是严格区分大小写的语法，初学者要特别注意

  • 规则2：一般一行仅书写一条代码，如果书写多条需要使用分隔开

  • 规则3：js语法中的符号都是英文的(小写的)

注释

  • 单行注释
格式：	双斜杠 双斜杠后空一格

	//	注释内容		仅影响斜杠开始到行尾，

	vscode快捷键：	CTRL + /
  • 多行注释
格式：

	/*

		...  

	注释内容

		...

	 */

注意 : 影响多行，多行注释可以包含单行注释，但多行注释不能嵌套
  • 注释的作用 注释的内容并不会被js当作代码来执行。注释一般是针对当前代码进行解释说明，增加程序的可读性，这样有利于其他人接手，或方便以后对代码进行备查。

输出和输入

为什么要有输入与输出

计算机的作用就是处理数据，数据来源于现实人们的生产数据。要将现实中的数据输入给计算机。所以就要求计算机必须有接收输入的功能。 计算机对我们的数据进行处理后会有一个结果，这个结果要显示给我们。这就要求计算机必须提供输出的功能。

输入

  • prompt('内容')

弹出一个交互信息获取框，并显示提示信息。

  • confirm('内容')

弹出一个，确认交互对话框，仅需要用户进行确认或取消操作即可。

输出

  • alert('内容')

弹出一个提示信息框，这种方式主要是弹出提示信息给普通用户 说明： 虽然是一条语句，但是该语句在内部执行时会有两个动作：

  1. prompt()弹出信息输入窗口，
  2. alert()用于显示prompt()接收到的数据

送给初学者：

在JS中我们虽然写了一条语句，但这个语句是被设计好的，内部如何来执行也是设计好的，这就是代码的逻辑。 例如以上代码从左向右是先写的alert，后面才是prompt，为什么先执行后面的prompt，再执行前面的alert这就是设计好的。我们只需要记住这样的代码就是这样的执行顺序即可。 所以在以后的学习过程中，对于语法中设计好的步骤，或逻辑，是不容置疑的。

  • console.log('内容')

在控制台输出信息，此种方式主要是给程序写使用

:point_right: console.log('数据1','数据2'...) 将多个数据使用逗号分隔，可以在控制台输出多个数据

  • document.write('内容')

将内容输出到html的body标签内

变量

概念

计算机的作用是用于对数据进行运算，想对数据进行运算，在计算机内部数据就得有个保存的位置。

官方概念：

内存中用于临时存储数据的一个空间，这个空间有一个标识。

变量是空间，空间用于保存东西的。

空间有一个标识，通过这个标识来对这个空间进行读写操作。

这个标识称之为变量名。

类比：

酒店的客房

客房是一个空间，空间用于客人休息。

客房都是有一个房号标识，通过房号找到房间，就可以确认客人。

为什么要使用变量

1.存储数据

存储数据是为了计算

2.方便复用

同一个数据在出现两次及以上时，我们就需要考虑使用变量存储这个数据。并通过变量来显示数据。

这样作的好处是显示时一致、修改后同步。

创建变量

  • 语法
let关键字是用于声明变量

语法：

	let 变量名

	let 变量名=值

注意：

	let对同一个变量声明多次时会报错。
  • 声明变量
声明时不赋值

let age
  • 初始化变量
声明同时赋值

let age=18
  • 变量的命名规则
变量名严格区分大小写

只能包含字母、数字、下划线、$，不能以数字开头

不能是js中的关键字，关键字就是被js赋予了特殊功能的单词。

例如： 

	let这个人类的单词被js赋予了定义变量的功能，而age单词在js中就没有被赋予特殊的功能。

实际开发中的一些规范：

	尽量见名知义

	多个单词组成的变量名采用驼峰法

不建议使用name，name存在一个坑。

访问变量

将某个变量的值读取出来，进行显示或进行其他运算，这种操作行话称之为访问变量。

let a = 10;

// 显示

console.log(a)	

// 读取现变量a的内容，再显示其结果

console.log(a + 20)

修改变量的值

对一个已经存在的变量重新赋值

let sex = '男'

// 再次赋值

sex = '女'

变量操作扩展

变量的默认值

在声明一个变量时，如果仅声明并没有赋值，那么声明后变量的值为。

let i

console.log(i)		//undefined

一次声明多个变量

let a,b,c

一次声明多个变量并赋值

let a=10,b=20,c=30

一个值给多个变量

let a=b=20

两个变量的值同时被初始化为20

变量为变量赋值

在实际开发中，我们经常使用一个变量的值赋值另一个变量。

let a = 10;

let b = a;

交换两个变量的值

编程中频繁涉及的操作，必须记住。

let a = 20;

let b = 30;

借助第3个变量，中间变量，来交换两个变量的值

let c = a;

a = b;

b = c;

const声明的变量

语法

const 常量名=值

特点

const定义常量时，就必须赋值

const定义的常量，一旦定义就不能修改其值。在整个程序运行的过程中const定义的变量的值都不允许被改变，它的值是衡定不变的。

在初级阶段，const使用的比较少。但语法及特点要掌握。

基础数据类型

number(数值类型)

取值

取值就是数字，可以是：

整数

小数

正数

负数

两个特殊的值

  • NaN

在对数值型数据进行非法操作时，最终的结果由于无法使用数值表示，所以js设计了NaN来接收这种操作的结果

  • Infinity
JS设计这个值的目的是为了存储一个无穷大，使用数字表示不完的数。

例如：

	1/0

可以在Infinity前加 正 负号表示正负无穷大

+Infinity		正无穷大

-Infinity		负无穷大

number的取值范围

虽然现实中的我们可以写出天大的一个数字。

但是计算机数据是存储在内存中的。JS为了能满足正常的编程需要，同时又不会过多的浪费内存，对数值的取值范围进行了合理的限制。

JS中所能表示的正数最大值为：1.7976931348623157e+308

负数最大值为：5e-324

对于这么多位数的数字，记忆很难，所以JS将这两个值保存到两个地方：

Number.MAX_VALUE		正数最大值

Number.MIN_VALUE		负数最大值

需要时，我们直接调用即可获得JS所能表示的最大值与最小值

isNaN(字符串)

用于判断一个字符串不是否由纯数字组成

其他进制(了解)

八进制

以0开头，只能出现0-7个数码

十六进制

以0x开头，包含：

0、1、2、3、4、5、6、7、8、9

a(10)

b(11)

c(12)

d(13)

e(14)

f(15)

注意：

	八进制与十六进制，在显示时默认都会转换为十六进制进行显示。

	为什么，为了方便我们解读。因为现实中通行的十六进制。

string(字符串类型)

定义

使用单引号或双引号括起来的0个或多个字符

字符串长度

字符串.length 用于获取字符串的长度(字符串的个数)

转义符 \

用于将被JS赋予给某些符号的特殊功能转义掉。

例如：

	单引号、双引号	被js赋予了定义字符串的功能

	\'		将当前单引号定义字符串的功能转义掉

	\"		将当前双引号定义字符串的功能转义掉

赋予某些字符特殊的功能

例如：

	\t		赋予制表符(tab键)的功能

	\n		赋予换行的功能

	\r		赋予回车的功能		

对于\n \r都可以实现换行，推荐使用\n，因为\n在所有操作系统都支持

\r只有window支持

注意事项

默认情况：

	单引号不能再包含单引号，但可以包含双引号

	双引号不能再包含双引号，但可以包含单引号

注意：

	console.log()输出的字符串的颜色，可以区分是否是字符串

boolean(布尔类型)

作用

让程序具有逻辑判断的能力。现实中我们经常根据某一条件成立 或 不成立 ，作出不同的决定。所以布尔类型主要流程控制语句中。在这里仅需要知识其取值，以及其意义即可。

取值

布尔类型用于表示现实中物事的矛盾状态。

仅有两个取值：

	true

		用于表示成立、是，对

	false

		用于表示不成立、非，错

undefined类型

作用

主要用于表示声明一个变量但并没有赋值，此时变量的值

取值

undefined类型就有一个值，值为：undefined

null类型

取值

null

出现场景

可以为一个变量赋值null

let obj = null

当在prompt()的弹窗中，点击取消或关闭按钮时，返回值为Null

运算符

赋值运算符

功能

将 =右侧的数据 赋值给 =左侧的变量

let obj = 1;

注意点

要与上学期间学习的 = 功能区分开，js中的=，仅有赋值功能，并没有判断功能

算术运算符

数学中学习过的算术运算符

+、-、*、/、>、<、>=、<=,运算规则与数学中的一样

%(求余)

求两个数相除得到的余数,常用于判断一个数是否是另一个数的整数倍。例如,判断奇数还是偶数

++(自增运算符)

作用

简化代码操作,在代码开发中，经常遇到将一个变量的值加1，再赋值给自己的操作。

前自增与后自增

如果++在变量之前则是前自增

let i = 10

++i

console.log(i)

如果++在变量之后则是后自增

let j = 10;

j++

console.log(j)

前自增与后自增的影响

前自增与后自增的影响

  • 对变量最终值没影响 : 无论前自增还是后自增对变量本身是没有影响的
  • 对整个式子的影响 :
如果自增参与其他运算，那么前自增与后自增就有区别了

区别如下：

// 前自增

let a = 10

let ret1 = ++a				// 先自增，再参与其他运算

console.log(ret1, a)		// 11  11

// 后自增

let b = 10

let ret2 = b++				// 先参与其他运算，再自增

console.log(ret2, b)		// 10 11

--(自减运算符)

作用

简化代码操作,在代码开发中，经常遇到将一个变量的值减1，再赋值给自己的操作。

前自减与后自减

如果++在变量之前则是前自增

let i = 10

--i

console.log(i)

如果++在变量之后则是后自增

let j = 10;

j--

console.log(j)

前自减与后自减的影响

自减运算符，只能与变量连用

  • 对变量最终值没影响 : 无论前自减还是后自减对变量本身是没有影响的
  • 对整个式子的影响 :
如果自减参与其他运算，那么前自减与后自减就有区别了

区别如下：

// 前自减

let a = 10

let ret1 = --a					// 先自减，再参与其他运算

console.log(ret1, a)		// 9  9

// 后自减

let b = 10

let ret2 = b--				// 先参与其他运算，再自减

console.log(ret2, b)		// 10 9

自操作运算符

自操作运算符，主要是用于对一个变量进行加、减、乘、除一个数再赋值给自己的操作，本质就是一种代码的简化，没什么复杂性可言。

let i = 10

i +=5	i = i+5

i -=5		i = i-5

i *=5		i = i*5

i /=5		i = i/5

字符串拼接运算符

+

+也可以用于字符串的拼接操作，将两个字符串拼接为一个字符串

+=

  • 拼接后赋值:对一个字符串变量拼接新字符后再赋值给原变量
  • document.write显示+=的拼接效果
  • 字符串与变量的拼接

扩展：模板字符串

  • 定义 : 使用反引号``定义字符串
  • 功能特点 : 可以换行定义字符串，模板字符串内解析变量的语法： ${变量名}

比较运算符

==与===

==用于判断两个数据值是否相同，相同返回true，不同返回false

===用于判断两个数据的值与类型都相同，如果都相同返回true，否则返回false

!=与!==

!=用于判断两个数据值是否不相同，不相同返回true，相同返回false

!==用于判断两个数据的值与类型不完全相同，必须有一方面不相同才返回true，全部相同则返回false

逻辑运算符

比较运算符，主要用于表达单个条件。而逻辑运算符，主要是用于表达多个条件

&&(逻辑与)

参与运算的两个操作数，同时为true，最终结果就为true,换句话说，只要有一个为false，最终结果就为false
口诀：找假

 // &&   逻辑与
        // 运算规则：参与运算的两个操作数都是true，最终结果就是true。
        // 口诀：找假   只要有一个是假结果就是假
        let v1 = true;
        let v2 = false;
        let v3 = true;

        console.log(v1 && v2); // false
        console.log(v2 && v3); // false
        console.log(v1 && v3); // true

||(逻辑或)

参与运算的两个操作数，只要有一个为true，最终结果就为true
口诀：找真

 // 逻辑或 ||
        // 运算规则：参与运算的两个操作数，只要有1个为true，最终结果就为true
        // 口诀：找真   只要有1个为true，最终结果就为true
        let v1 = true;
        let v2 = false;
        let v3 = false;

        console.log(v1 || v2);      // true
        console.log(v3 || v1);      // true
        console.log(v3 || v2);      // false

!(逻辑非)

单目运算符(只需要一个操作数)对于一个布尔值进行取反操作。
口诀：取反

// 逻辑非:      !
        // 运算规则：对操作数进行取反
        let v1 = true;
        let v2 = false;

        console.log(!v1);       // false
        console.log(!v2);       // true

逻辑短路

左侧已决定式子的结果的情况下，右则不会被执行

 /* 
        逻辑短路：
            左侧已经能决定整个式子的结果，右侧不会得到执行(形象称之为短路)

        偷懒原则：
            左侧不能决定整个式子的结果，会直接返回右侧的原数据(不会将右侧的数据转换为布尔值再返回。)
         */
let v1 = true;
        let v2 = false;
        let n = '猫';
        let m = '狗';

        let result1 = v2 || n;
        console.log(result1);

        let result2 = v1 && m;
        console.log(result2);

偷懒原则

左而不能决定式子的结果，要由右侧决定，会直接将右侧返回(不会转换为布尔值返回)

流程控制

顺序结构

顺序结构是按代码的书写顺序自上而下的执行

分支结构

if分支

单分支

语法：

	if(表达式){

		语句体

	}

说明：

	表达式是由数据、变量与运算符组成的一个式子，例如：age == 18

	当表达式成立时，执行语句体

双分支

语法：

	if(表达式){

		语句块

	}else{

		缺省语句块

	}

说明：

	如果表达式成立则执行语句体，否则执行缺省语句块

多分支

语法：

	if(表达式1){

		语句块1

	}else if(表达式2){

		语句块2

	}else{

		缺省语句块

	}

说明：

	自上而下的判断表达式是否成立，当某个表达式成立时就执行相应的语句块。

	当语句块执行结束后，不再来判断其他表达式，直接结束整个if结构，执行if结束后面的代码

	else if结构可以有多个

	else 结构可以省略

switch分支

  • 语法
switch也是一种分支结构。

语法：

switch(){

	case 值1:

		// 语句块1

		break;

	case 值2:

		// 语句块2

		break;

	case 值3:

		// 语句块3

		break;

	default:

		// 缺省语句块

}
  • switch穿透 : 省略break的情况,当执行完某一个语句块后，如果没遇到break，就会继续执行后面的语句块
  • 逻辑 : 根据switch后的变量与case后的值的匹配情况,将程序转向不同的语句块执行
  • switch后的变量与case后的值的比较属于 ===

if与switch区别

if用于表示一个范围,switch用于表示一个具体的值(如果是对具体值的比较，推荐使用switch)

三元运算符

三元运算符可以当做是简单if分支(if分支的语句体内只有1条语句)

  • 语法

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

// 例子
var example = 1 > 0 ? '正确' : '错误'
    alert(example)
    // 表达式1的结果若是true则返回表达式2,否则返回表达式3

循环

主要用于代码重复性的问题

for循环

  • 语法:
       for(初始化; 表达式; 变量的修改){
              循环体
        }
  • 逻辑:

a. 执行初始化(仅执行一次)
b. 判断表达式是否成立，如果不成立就退出
c. 执行循环体
d. 循环体执行结束后，执行变量的修改
e. 往复的执行 b c d，直到表达式不成立。

for (let i = 0; i < 5; i++) {
        console.log(i) // 0 1 2 3 4
      }
      //  let为for循环定义的循环控制变量只能在for循环的花括号内使用，在外面是访问不到的
      //  console.log(i);            // i is not defined

while循环

  • 语法
	while(表达式){
  	    循环体
	}
  • 逻辑:先判断表达式是否成立，如果不成立直接 退出;如果成立执行循环体，循环体执行结束再回来判断表达式
  • 提示：while就是for循环的一个变形,需在循环之外定义变量的初始化,在循环之内对变量进行修改
 let i = 1
      while (i <= 5) {
        console.log(i) // 1 2 3 4 5
        i++
      }

do...while

  • 语法
语法：
	do{
  	    循环体
	}while(表达式)
  • 逻辑:先执行循环体，循环体执行结束再来判断表达式是否成立,不成立直接结束,成立，再执行循环体....
let i = 1
      do {
        console.log(i) // 1 2 3 4 5 
        i++
      } while (i <= 5)

for与while的区别

for主要用于根据次数进行循环(循环次数已知)
while一般用于循环次数未知

while 与 do while的区别

do ... while至少执行一次循环体
while不一定

contine 与 break

continue：跳过本次的循环内其后的代码，继续下一次循环
break：直接退出循环

Math对象

  • Math对象是JS为我们提供的一个辅助对象。

  • Math对象上有数据计算相关的数据以及计算方法。

  • 辅助我们进行数学相关的运算，可以完成除加减乘除之外的复杂运算。

Math.PI属性

获取圆周率

Math.abs()方法

求绝对值

let a = -10
console.log(Math.abs(a))		// 10

console.log(Math.abs(5-20))		// 15

Math.max()方法

求多个数中的最大值

console.log(Math.max(10,5,9,20,4))	// 20

let a=10,b=5,c=9,d=20,e=4
console.log(Math.max(a,b,c,d,e))		// 20

Math.min()方法

求多个数中的最小值

console.log(Math.min(10,5,9,20,4))	// 4

let a=10,b=5,c=9,d=20,e=4
console.log(Math.min(a,b,c,d,e))		// 4

Math.pow()方法

求绝次方

console.log(Math.pow(2,8)) // 256

Math.ceil()方法

向上取整,ceil是天花板的意思，对一个小数向上取整

console.log(Math.ceil(4.001))		// 5
console.log(Math.ceil(4))			// 4

Math.floor()方法

向下取整,floor是地板的意思，对一个小数向下取整

console.log(5.9999)		// 5
console.log(5)			// 5

Math.random()方法

  • 求随机小数 : 基本功能是获取0至1之间的随机小数，包含0，不包含1
  • 求随机整数的公式 : Math.random()默认功能无法产生随机整数，需要我们自己推导出一个通用的求m至n之间公式(包含m与n)：

Math.floor(Math.random()*(n-m+1)+m)

复杂数据类型

Array(数组)

一组数据的有序集合(数组就是一个变量保存一组数)
元素：数组中的每一个数据即为元素
下标(索引)：数组中元素的序号即为下标

数组操作

创建数组

// 创建空数组，最简单的方式是使用 []

let arr1 = []

console.log(arr1)

// 初始化一个数组

let arr2 =[10,20,30]

console.log(arr2)

数组元素的类型

数组的元素可以是任何类型

添加\修改数组元素

语法: 数组名[下标] = 数据
说明:
将数据保存到数组的某个下标对应的位置上，就是向数组中添加元素;
如果指定的下标已存在则是修改数组元素的值

// 示例:
// ① 添加元素
// 下标    0    1    2
let arr = [10, 20, 30];

// 向不存在的下标位置保存数据
arr[3] = 40;

console.log(arr);		//[10, 20, 30, 40]

// ② 修改元素
// 下标    0    1    2
let arr = [10, 20, 30];

// 向已存在的下标位置保存数据
arr[1] = 2000;

console.log(arr);		//[10, 2000, 30]

访问数组元素

语法:数组名[下标]
说明:
[]方括号，即可以定义一个数组，也可以访问数组中的元素
下标 就是数组中元素的索引(序号)

// 示例1:
// 下标(序号)   0       1       2
let stu = ['zhangsan',20];
console.log(stu[0]);    // zhangsan
console.log(stu[1]);    // 20

// 示例2:下标不存在的情况下
// 下标(序号)   0       1       2
let stu = ['zhangsan',20];

console.log(stu[5]);        // undefined	下标不存在并不会报错，而是返回undefined

删除数组中的元素

使用splice()方法
语法:
数组名.splice(参数1,参数2)
参数1表示删除元素对应的下标,参数2表示从参数1开始计算删除的元素个数
注:参数1是必填项,参数1和参数2都必须是正整数;参数2为可选填类型,参数2不填则表示删除参数1及其后面的元素,splice方法还有其他用法,后续涉及再作详解

// 示例:
var arr = ['zhangsan', 2, 3, 4, 5]
    arr.splice(1, 1) // 从下标为1的元素开始计算,删除一个元素
    console.log(arr)  //  ["zhangsan", 3, 4, 5]

数组的长度

语法:数组.length
说明:通过 .length即可获取到数组的长度(元素的个数)

  • 数组最大下标与数组长度的关系--->数组长度=数组最大下标+1
// 示例:
let arr1 = [10,20,30];
console.log(arr1.length);       // 3

let arr2 = [];
console.log(arr2.length);       // 0

遍历数组

遍历数组就是由于某个需求，需要将数组中的每一个元素都读取一遍历，这种操作即为遍历数组。
例如对数组中的所有元素求和、查找数组中是否有某个元素存在等等。遍历数组是非常作用的操作。

  • 语法
for(let i=0;i<`数组长度`;i++){

​	arr[i]

}

// 示例: 遍历数组
// 下标     0  1   2  3  4
let arr = [10,20,30,40,50];
// 最后一个元素的下标
last = 4;
// 设计循环，使用循环控制变量模拟下标
for(let i=0;i<=last;i++){

// 将循环控制变量作为下标进行动态读取
console.log(arr[i]); // 10 20 30 40 50
}

Function(函数)

  • 为什么需要函数

为了代码复用,函数就是将一段功能性的代码进行封装,在实际开发中，一个项目由很多小的功能组成，每一个小的功能是由多行代码完成的。而这些功能在很多地方都可以被重复使用。

  • 什么是函数

函数:用于存储代码的，把一段代码存到一个名字中，然后通过这个名字调用这段代码,以达到代码复用的效果。
如果非为给函数一个函数概念,那么函数就是将某一段代码进行封装，并为这段代码起个名字(这个名字就代表了这段代码)，通过这个名字就可以调用这段代码。

函数的定义

  • 语法
function 函数名(){

​	// 函数体(一段功能性的代码)

}
  • 说明
function	是用于定义一个函数，类似于let 声明一个变量一样。

{}		表示的是表示被封装的代码的起点与终点

当通过以上语法，将某一功能性的代码封装(括起来)，并定义了一个名字，以后这个名字就代表这段代码。

// 示例:
// 定义函数
function demo(){
 alert('hello');
}

函数的调用

  • 语法

函数名()

  • 说明

函数的调用就是为了让函数内部的代码被运行。想让函数内部的代码运行就必须调用。
通过函数名，直接调用函数名代码的那段代码。

// 示例:
// 定义函数
function demo(){
 alert('hello');
}

// 调用函数
demo();

行内调用函数

行内的书写方式: <button onclick='函数()'>按钮</button>
行内调用JS，一般需要浏览者的触发，例如：onclick,当用户点击当前按钮时调用这个函数。

// 示例:
<html>
 <head></head>
     <script>
   function clk(){
     alert('你点击了button')
   }
 </script>
</head>

<body>
 <button onclick="clk()">点击</button>
</body>
</html>

函数的参数

函数将代码进行封装后，函数内部与外部就进行了隔离。而函数的参数用于从函数外部向函数内部传递数据。

  • 语法

function fn(形参1,形参2...){
​ // 函数体
}
fn(实参1,实参2...)

  • 说明

形参：

在函数声明时的参数称之为形式上的参数。
形参的本质就是一个变量，只在函数内部有效。 实参: 在函数调用时的参数称之为实参
形参用于接收实参传递的数据，实参用于向形参传递数据。
形参与实参一同作用，将外部的数据传递到函数内部。

// 示例:
function sayHi(uname,uage){
 let word = `Hi,我的名字是：${uname}
 我的年龄是：${uage}
 `
 console.log(word);  //Hi,我的名字是：zhangsan 我的年龄是：20
}

sayHi('zhangsan',20);

函数作用域/局部变量

函数作用域

函数是对代码进行封装这一点大家都了解了，但函数在使用 {} 封装代码时，还有另外影响。它主要影响在函数外访问函数内的变量。首先了解一下作用域，再看具体影响。

  • 作用域

就是变量的访问范围，主要影响变量。
a.函数作用域(局部作用域)：函数作用域也称之为局部作用域，函数的 { } 括起来的范围就是函数的作用域。
b.全局作用域: 函数之外就是全局作用域

当我们定义一个函数时，封装用的 {} 会划分出一个新作用域。如下图示:

局部变量

在函数内部声明的变量，称之为局部变量，影响是：只能在函数内部访问。

// 示例:
function fn(){
   // 局部作用域，定义一个局部变量
   let a = 100;
}

fn();

// 处在全局作用域访
// 问局部变量：
console.log(a);  //Uncaught ReferenceError: a is not defined(报错：变量a未定义)
全局变量

声明在任何函数外部的变量，称之为全局变量，影响是：可以在任何位置访问。

// 示例:
 // 全局作用域，定义一个全局变量
 let b = 200;

 function fn(){
     // 处在局部作用域，
     // 访问全局部变量
     console.log(b);	//200	局部作用域可以访问全局变量
 }

 fn();

Object(对象)

用于封装数据与函数 let obj = new Object()

数据类型转换

强制转换

通过系统提供的方法，程序员人为的对数据进行了明显的转换

转字符串

  • String(非字符串数据)
  • xxx.toString()

转数值

  • Number(非数值数据)
  • parseInt()
  • parseFloat()

转布尔

  • Boolean(非布尔数据)

隐式转换

没有进行强制转换，js自己进行的转换

隐式转换为字符串

  • +拼接字符串触发隐式转换:参与运算的两个操作数，只要有一个是字符串，那么另外一个就必须转换为字符串进行拼接操作。 在这个过程中，虽然我们没有使用强制转换手段，JS运行时自己转换的

隐式转换为数值

  • 数学运算触发隐式转换 : 在使用算术运算符进行数学运算时，如果数据不是数值类型，则会转换为数值类型。在这个过程中，虽然我们没有使用强制转换手段，JS运行时自己转换的。注意：+、+=优先进行字符串拼接运算

隐式转换为布尔

  • 条件表达式触发隐式转换 : 当将一个数据作为条件表达式时，js会将这个表达式转换为布尔类型。在这个过程中，虽然我们没有使用强制转换手段，JS运行时自己转换的。
avatar
文章
阅读
粉丝