JavaScript基础知识解析

最新推荐文章于 2024-06-07 23:26:45 发布

新的算法

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量848

点赞数 24

分类专栏：前端学习文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_54847388/article/details/135417834

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript基础

JavaScript介绍

作为网站三剑客（HTML、CSS、JavaScript）之一，JavaScript用于控制网页行为，是一种运行在客户端（浏览器）的编程语言，由ECMAScript（基础语法）、web APIs（DOM、BOM）组成。

书写位置
一般写到文档末尾</body>的前面

<body>
	<script>
	...
	</script>
</body>

注释

<script>
	//单行注释
</script>

<script>
	/*多行注释
	多行注释*/
</script>

结束符
分号;（可以省略）
输入语句

prompt('请输入您的姓名：')		
//显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

输出语句

document.write('要输出的内容')
//向body内输出内容，如果输入的内容写的是标签，也会被解析成网页元素
alert('要输出的内容')
//页面弹出警告对话框
console.log('控制台打印')
//控制台输出语法，程序员调试使用

字面量
在计算机科学中，字面量是在计算机中描述事/物，比如：1000为数字字面量；‘abcd’为字符串字面量

变量

概念

计算机中用来存储数据的容器

基本使用

声明变量
想要使用变量，首先需要创建（声明或定义）变量

let 变量名	//let关键字（允许、许可）

变量赋值（初始化变量）

变量名 = 数值

数组更新

变量名 = 新值		//注意：同一个变量不能重复声明

声明多个变量（不提倡使用）

let age = 18,uname = 'abc'		//多个变量中间用逗号隔开

命名规则与规范

规则

1.必须遵守的准则，不遵守会报错
2.不能使用关键字
3.只能用下划线、字母、数字、$组成，且不能数字开头
4.字母严格区分大小写

规范

1.建议采用，不遵守不会报错，但不符合业内通识
2.起名要有意义
3.遵守小驼峰命名法——第一个字母首字母小写，后面每个单词首字母大写，如：userName

变量拓展：let和var的区别

在较旧的JavaScript中，使用关键字var来声明变量，而非let。var现在开发中一般不再使用，只是我们可能在老版程序中看到它。let解决了var的一些问题

var的问题

1.可以先使用后声明（不合理）
2.var声明过的变量可以重复声明（不合理）
3.比如变量提升、全局变量、没有块级作用域等等

变量拓展：数组

概念
单个变量存储多个数据

1.元素：数组中保存的每个数据都叫数组元素
2.下标：数组中数据的编号（从0开始）
3.长度：数组中数据的个数，通过数组的length属性获得

语法

let 数组名 = [数据1, 数据2, ..., 数据n]

数组使用

数组名[下标]		//数组下标从0开始

常量

概念
数值永远不变的变量
基本使用-声明赋值

const 常量名 = 数值		//常量不允许重新赋值，因此声明时必须赋值

数据类型

基本数据类型

数字类型（Number）

1.数学中的数字，可以是整数、小数、正数、负数
2.算术运算符：加 +、减 -、乘 *、除 /、取模 %
3.NaN：代表一个计算错误，它是一个不正确的或一个未定义的数学操作所得的结果，比如用一个字符串与数字做算术运算
4.NaN是粘性的，任何对NaN的操作都会返回NaN

字符串类型（String）

1.通过单引号、双引号或反引号包裹的数据都叫字符串
2.字符串拼接

let newString = '字符串1' + '字符串2'

let newString = `***${变量名}***`
//模板字符串，用于拼接字符串和变量，类似于其它编程语言中的格式化字符串

布尔类型（Boolean）
表示肯定或否定，只有true和false两个值
未定义类型（Undefined）
只声明变量，但不赋值，则变量的默认值为undefined

let abc				//声明变量但未赋值
console.log(abc)		//此时打印结果就为undefined

空类型（Null）
代表“无”、“空”、“值未知”的特殊值
如果一个变量里面确定存放的是对象，如果还没准备好对象，可以放个null

let abc = null

检测数据类型

通过typeof关键字检测数据类型

let abc = 123
console.log(typeof abc)		//typeof作为运算符 常用写法
console.log(typeof(abc))		//typeof函数形式

引用数据类型

对象（object）
函数（function）
数字（array）

类型转换

使用表单、prompt获取的数据默认是字符串类型，因此不能直接进行算术运算

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换

规则

1.+号两边只要有一个是字符串，就会把另一个转换成字符串
2.除了+以外的算术运算符，比如 - * / 等都会把数据转成数字类型

let str = 10 + '20'
console.log(str)		//输出结果为字符串1020，而非数字30

let str = 30 * '10'
console.log(str)		//输出结果为数字300
let str1 = 30 * 'abc'
console.log(str1)		//会报错，因为字符串abc无法转换成数字类型

小技巧

1.+号作为正号解析可以转换成数字型
2.任何数字和字符串相加结果都是字符串

let str = +'123'		//将字符串'123'转换成数字123
console.log(typeof str)	//此时str存储的是数字类型

显示转换

自己写代码告诉系统该转成哪种类型

转换为数字型

Number(数据)			//转换为数字类型，如果内容有非数字，则结果为NaN
parseInt(数据)		//只保留整数部分
parseFloat(数据)		//可以保留小数部分

流程控制

运算符

赋值运算符
=、+=、-=、*=、/=、%=

let str = 10
str += 10		//str = str +10
str -= 10		//str = str - 10
str *= 10		//str = str * 10
str /= 10		//str = str / 10
str %= 10		//str = str % 10

一元运算符
JavaScript的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符

1.正负号：+、-
2.自增自减：++、–

let str = 10
str = str++		//str = str + 1
str = str--		//str = str - 1

比较运算符
>、<、>=、<=、==、!==、===
===：两边是否类型和值都相等，推荐使用
逻辑运算符
与 &&、或 ||、非 !
运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ - - !
3	算术运算符	先 * / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先 && 后 \|\|
7	赋值运算符	=
8	逗号运算符	,

语句

表达式和语法

表达式：可被求值，可以写在赋值语句的右侧
语句：不一定有值，比如alert() for 和 break 等语句就不能被用于赋值

分支语句

if语句

单分支语法:if (条件) { 满足条件执行代码 }

if (10 > 5) {
	console.log('10>5')
}

双分支语法:if (条件) { 满足条件执行代码 } else { 不满足条件执行代码 }

if (10 > 20) {
	console.log('10>20')
} 
else {
	console.log('10<=20')
}

多分支语法:if (条件1) { 满足条件1执行代码 } else if (条件2) { 满足条件2执行代码 } else if (条件n) { 满足条件n执行代码 } else {所有条件都不满足执行代码}

if (10 > 20) {
	console.log('10>20')
} 
else if (10 > 15) {
	console.log('10>15')
} 
else if (10 > 10) {
	console.log('10>10')
} 
else {
	console.log('都不满足')
}

三元运算符

使用场景：比if双分支更简单的写法
语法：条件 ? 满足条件执行代码 : 不满足条件执行代码

10 > 20 ? console.log('10>20') : console.log('10<=20')

switch语句

switch(数据) {
	case 值1:
		代码1
		break
	case 值2:
		代码3
		break
	default:
		代码n
		break
}

注意：在switch中只有遇到break语句才会跳出，否则会一直执行下面的代码，直到遇到break为止

循环语句

while循环
适用于在循环次数不确定的场景

语法：while (循环条件) { 要重复执行的代码(循环体) }
三要素：变量起始值、终止条件（没有终止条件会造成死循环）、变量变化量（用自增或自减）

let i = 0
while (i < 5) {
	console.log(i)
	i++
}

构造无限循环：while (true) { 循环体 }

while(true) {
	console.log('无限循环')
}

循环退出

break：退出整个循环
continue：结束本次循环，继续下次循环

let i = 1
while (i < 5) {
	i++
	if(i % 2 === 0) {
		break		//做个判断，当i是偶数时，退出整个循环
	}
	console.log(i)
}

let i = 1
while (i < 5) {
	i++
	if(i % 2 === 0) {
		continue		//做个判断，当i是偶数时，退出当次循环，开始下一次循环
	}
	console.log(i)
}

for循环
适用于在循环次数确定的时候

语法：for (变量起始值; 终止条件; 变量变化量) { 循环体 }

for (let i = 0; i < 5; i++) {
	console.log(i)
}

构造无限循环：for ( ;; ) { 循环体 }

for (;;) {
	console.log('无限循环')
}

循环嵌套：一个循环里面再套一个循环，一般用在for循环里

for (外部声明记录循环次数的变量; 循环条件; 变化值) {
	for (内部声明记录循环次数的变量; 循环条件; 变化值) {
		循环体
	}
}

数组

数组（Array）：一种可以按顺序保存数据的数据类型

基本使用

声明语法：
let 数组名 = [数据1, 数据2, …, 数据n]
let arr = new Array(数据1, 数据2, … 数据n)

let arr = [1, 2, 4, 55, 342]
let arr1 = new Array(1, 2, 4, 55, 342)	//作为了解即可，不常用

取值语法：数组名[下标]

let arr = [1, 2, 4, 55, 342]
console.log(arr[0])		//数组下标从0开始

遍历数组：for (let i = 0; i < 数组名.length; i++) { 数组名[i]}

let arr = [1, 2, 4, 55, 342]
for (let i = 0; i < arr.length; i++) {
	console.log(arr[i])
}

操作数组-增删改查

数组操作-改：数组名[下标] = 新值

arr[1] = 15

数组操作-增：
1.数组.push(元素1, …, 元素n)
将一个或多个元素添加倒数组的末尾，并返回该数组的新长度（重点）
2.数组.unshift(新增的内容)
将一个或多个元素添加到数组的开头，并返回该数组的新长度

arr.push(32, 324,9, 2)
arr.unshift(25, 65, 10)

数组操作-删
1.数组.pop()
删除数组最后一个元素，并返回该元素值
2.数组.shift()
删除数组第一个元素，并返回该元素值
3.数组.splice(起始位置, 删除几个元素)
删除指定元素

arr.pop()			//删除数组最后一个元素
arr.shift()			//删除数组第一个元素
arr.splice(0,2)		//从索引号0的位置开始，删除2个元素

数组操作-排序
数组.sort()

arr.sort()			//升序排列数组

数组中map方法-迭代数组

map可以遍历数组处理数据，并且返回新的数组
map也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。
map重点在于有返回值，forEach没有返回值

const arr = ['red', 'blue', 'green']
const newArr = arr.map(function (ele, index) {
	console.log(ele)		//数组元素
	console.log(index)		//数组索引号
	return ele + '颜色'
})
console.log(newArr)		//输出['red颜色', 'blue颜色', 'green颜色']

数组中forEach方法-迭代数组

forEach()方法用于调用数组的每个元素，并将元素传递给回调函数，不会返回新的数组
适合于遍历数组对象

被遍历的数组.forEach(function (当前数组元素, 当前元素索引号) {
	//函数体
})

函数

function，是被设计为执行特定任务的代码块

函数基本使用

声明语法

function 函数名() { 函数体 }
函数名命名规范:和变量名基本一致；尽量小驼峰式命名法；前缀应该为动词

function func() {
	console.log('函数体')
}

调用语法

函数名()

func()

函数传参

声明语法

function 函数名(参数列表) { 函数体 }
参数列表中，多个数据用逗号隔开

function func(x, y) {
	console.log(x + y)
}

调用语法

函数名(参数1, 参数2, …)

func(1, 2)

实参

函数调用时实际传入函数中的参数

形参

函数声明时写在函数名括号内的参数

参数默认值

如果用户不输入实参，则变量值为undefined
可以给形参默认值，这样程序更严谨
默认值只会在缺失实参参数传递时才会被执行
语法：function 函数名(x = 1, y = 2) { 函数体 }

function func(x = 1, y = 2) {
	console.log(x + y)
}

函数返回值

语法：return 数据
返回多个数据（返回一个数组）：return [数据1, 数据2]

function func() {
	return 2
}
console.log(func())

函数细节补充

1.两个相同的函数，后面的会覆盖前面的函数
2.在JavaScript中实参的个数和形参的个数可以不一致；如果形参过多，会自动填上undefined；如果实参过多，那么多余的实参会被忽略
3.函数一旦碰到return就不会再往下执行了

作用域

限定一个变量名的可用的范围

全局作用域

作用于所有代码执行的环境（整个script标签内部）或者一个独立的js文件

局部作用域

作用于函数内的代码环境，也称函数作用域

特殊情况

如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
函数内部的形参，可以看作是局部变量

匿名函数

没有名字的函数

function () {}

使用方式

函数表达式：将匿名函数赋值给一个变量，并且通过变量名进行调用

let fn = function () {}

立即执行函数：无需额外调用，立即执行，防止变量污染

(function (x, y) { 函数体 })(1, 2);	//多个立即执行函数之间必须用分号 ‘;’ 隔开
(function (x, y) { 函数体 }(1, 2));

逻辑中断

function getSum(x, y) {
	x = x || 0
	y = y || 0
	console.log(x + y)
}
getSum(1, 2)

x && y
左边为false则中断，右边不会再执行
两边都为真，返回后面一个值

x || y
左边为true则中断，右边不会再执行
两边都为真，返回前面一个值

转换为布尔型

‘’、0、undefined、null、false、NaN 转换为布尔值后都是false，其余则为true

对象

概念

object：JavaScript里的一种数据类型，可以理解为是一种无序的数据集合（数组是有序的数据集合）

声明语法

//let 对象名 = {}
let person = {}

对象由属性和方法组成
属性：信息或特征（名词）
方法：功能或行为（动词）

//let 对象名 = { 属性名: 属性值, 方法名: 函数 }
let person = {
	name: 'andy',
	sayHi: function () {
		document.write('hi~~')
	}
}

属性和值之间用冒号隔开，多个属性之间用逗号隔开

对象使用-增删改查

属性-查
属性访问：获得对象中属性对应的值
语法：
对象名.属性
对象名[‘属性’]——适合于属性名中有短横线之类的字符串情况

console.log(person.name)
console.log(person['name'])

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

person.name = 'jack'

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

person.age = 18

属性-删（了解）
语法：delete 对象名.属性

delete person.age

对象中的方法
本质就是函数

let person = {
	name: 'andy',
	sayHi: function () {
		document.write('hi~~')
	}
}
// 对象名.方法名()
person.sayHi()

遍历对象

对象里面是无序的键值对，没有规律，不像数组里面有规律的下标

let obj = {
	uname: 'andy',
	age: 18,
	sex: '男'
}
for (let k in obj) {
	console.log(k)			//打印属性名
	console.log(obj[k])		//打印属性值
}

注意：遍历对象时，不能使用（对象名.k）这种方式，只能使用（对象名[k]）方法；因为 k 实际上等于 ‘uname’，是带引号的属性名

内置对象

JavaScript内部提供的对象，包含各种属性和方法给开发者使用
例如：
document.write()
console.log()

Math对象
提供了一系列做数学运算的方法

方法名	作用
Math.random()	生成0-1之间的随机数（包含0不含1）
Math.ceil()	向上取整
Math.floor()	向下取整
Math.max()	找最大数
Math.min()	找最小数
Math.pow()	幂运算
Math.abs()	绝对值

Math.random()
//生成0-1之间的随机数（包含0不含1）
Math.floor(Math.random() * (10 + 1))
//生成0-10的随机数
Math.floor(Math.random() * (M - N + 1)) + N
//生成N-M之间的随机数

总结

本文仅仅简单介绍了JavaScript的基本使用。

新的算法

关注

24
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
JavaScript基础知识解析

JavaScript基础知识解析
复制链接

扫一扫

专栏目录

JavaScript基础知识解析

JavaScript基础知识解析

JavaScript基础

JavaScript介绍

变量

概念

基本使用

命名规则与规范

变量拓展：let和var的区别

变量拓展：数组

常量

数据类型

基本数据类型

检测数据类型

引用数据类型

类型转换

隐式转换

显示转换

流程控制

运算符

语句

分支语句

循环语句

数组

函数

函数基本使用

函数传参

函数返回值

函数细节补充

作用域

匿名函数

逻辑中断

转换为布尔型

对象

总结

“相关推荐”对你有帮助么？