【精简笔记】JavaScript基础内容大总结

最新推荐文章于 2024-07-01 09:33:19 发布

阳光下的ABC

最新推荐文章于 2024-07-01 09:33:19 发布

阅读量962

点赞数 27

分类专栏： JS 文章标签：笔记 javascript 开发语言

本文链接：https://blog.csdn.net/2302_81331056/article/details/139215244

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

往期文章目录

【精简笔记】JavaScript基础内容第一天
 【精简笔记】JavaScript基础内容第二天
 【精简笔记】JavaScript基础内容第三天
 【精简笔记】JavaScript基础内容第四天
 【精简笔记】JavaScript基础内容第五天

文章目录

往期文章目录
前言
一、JavaScript的书写位置
- 1.内部JS
- 2.外部JS
二、JavaScript的输入输出语句
- 2.1输出语法
- 2.2输入语法
三、JavaScript变量申明
四、数组
4.1声明数组
4.2使用数组
五、数据类型
六、类型转换
- 6.1隐式转换
- 6.2显示转换
七、运算符
八、语句
- 8.1 if分支语句
- 8.2三元运算符
- 8.3 switch语句
- 8.4循环结构
九、for循环
十、数组
- 10.1 数组
- 10.2基础用法
- 10.3遍历数组
- 10.4 数组求和
- 10.5求最大值和最小值
- 10.6增、改、删
十一、冒泡排序
十二、函数
- 12.1 基本语法
- 12.2 函数的调用
- 12.3 函数的参数以及默认参数
- 12.4 返回值
- 12.5 作用域
- 12.6 函数表达式的使用
- 12.7 立即执行函数
- 12.8 逻辑中断
十三、转换为布尔型
十四、对象是什么？
十五、对象的声明
- 15.1 对象声明语法
十六、对象的增删改查
- 16.1 查
- 16.2 改
- 16.3 增
- 16.4 删
- 16.5 特殊用法
十七、对象的方法
- 十八、遍历对象
十九、内置对象
二十、随机数
二十一、拓展
- 21.1基本数据类型（简单数据类型、值类型）和引用数据类型（复杂数据类型）
- 简单数据类型存在栈中、复杂数据类型存在栈、堆中
总结

前言

本文适用于有一定其他语言基础的程序员快速查找JS语法使用

一、JavaScript的书写位置

1.内部JS

<body>
	<script>
	//在此书写代码
	</script>
</body>

2.外部JS

<body>
	<script src = "first.js">
	//中间不要写内容 （会忽略）
	</script>
<body>

二、JavaScript的输入输出语句

2.1输出语法

document.write('hello world!')//直接写在html结构中

console.log('hello world!')//写在控制台中

2.2输入语法

prompt（'请输入XXX：'）//会在窗口显示

三、JavaScript变量申明

let 变量名 //一般用于变量所赋的值会改变的申明
let 变量名 = 值
let name = 'ABC',age = '3'//声明多个变量 可以但是没必要
let name = prompt（'请输入姓名'）

const 变量名 = 值//一般用于声明常量

四、数组

4.1声明数组

let arr = [10,20,30]

4.2使用数组

let arr = [10,20,30]
let data = arr[0]//对数组进行索引
let length = arr.length//获取数组的长度

五、数据类型

数字型、字符串型、布尔型、undefinded 未定义型、null 空类型
NaN代表一个计算错误
\转义符可代表引号
+可用于字符相连

const name = ABC
document.write(`${name},你好！`)

出现undefinded的情况

let num
console.log(num)

let obj = null

检测数据类型

let num = 10
console.log(typeof num)

六、类型转换

6.1隐式转换

console.log(1+1)
console.log('ABC'+1)//自动把1转为字符型
console.log('2'-2)//除+外会转换为数字型
console.log(+'123')//转为数字型

6.2显示转换

let str= = '123'
let strNum = Number(str)//转为数字型
let num = 123
let intNum = parseInt(num)//保留整数 可用于处理像素
let floatNum = parseFloat(num)//保留小数

七、运算符

==//比较数值大小是否相等
===//比较左右两边类型和值是否相等
&& //逻辑与
||//逻辑或
!//逻辑非

八、语句

8.1 if分支语句

单分支语句

if（条件）{
	满足条件要执行的代码
}

双分支语句

if（条件）{
	满足条件要执行的语句
}else{
	不满足条件要执行的语句
}

多分支语句

if（条件1）{
	代码1
}else if（条件2）{
	代码2
}else if（条件3）{
	代码3
}else {
	代码4
}

8.2三元运算符

语法：条件 ? 满足条件执行的代码 : 不满足条件执行的代码

5 > 9 ? alert('5 > 9') : alert('5 < 9')//5 < 9

应用案例：时间补零

//当num是字符型时
num = num < 10 ? 0+num : num

8.3 switch语句

1.若数据与值匹配，将会执行相应代码
2.break如果不写会穿透
3.匹配是===

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

8.4循环结构

while （循环条件）{
	要重复执行的代码
}

循环的退出
break

while（循环条件）{
	if （另一条件）{
		break
	}
	要重复执行的代码	
}

continue

while （条件）{
	if（另一条件）{
		continue 
	}
	要重复执行的代码
}

九、for循环

9.1基础语法

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

十、数组

10.1 数组

直接声明数组

let arr = [1,2,3,'ABC',true,false]

用函数声明

let arr = new Array(数据1，数据2，...)

10.2基础用法

let arr = [1905,1147,'李华' , 'ABC' , true , false]
console.log(arr[0])//对数组进行索引
console.log(arr.length)//获得数组长度

10.3遍历数组

let nums = [1,2,3,4,5,6]
for (let i = 0 ; i < nums.length; i++){
	document.write(nums[i])
}

10.4 数组求和

注意：如果不给初始值赋值，结果将会是NaN

let arr = [1,2,3,4,5,6]
let sum = 0
for (let i =0 ; i < arr.length ; i++){
	sum+=arr[i]
}

10.5求最大值和最小值

let arr = [1,3,4,9,5,7,8,2,6]
let max = arr[0]
let min = arr[0]
for (let i =1 ; i < arr.length;i++){
	if (max<arr[i]){
		max = arr[i]
	}else{
		min=arr[i]
	}
}
console.log(`最大值：${max}`)
console.log(`最小值：${min}`)

10.6增、改、删

在数组为空的基础上添值

let arr = []
arr[0] = 1
arr[1] = 2

改

let arr = [1,2,3]
arr[0] = 5

增

let arr = [1,2,3]
arr.push(4)//在末尾加
arr.unshift(0)//在开头加

删

let arr = [1,2,3，4,5，6]
arr.pop()//在末尾删除 
arr.shift()//删除第一元素
arr.splice(起始位置，删除几个元素)//索引号从1开始

十一、冒泡排序

let arr = [5,4,9,8,1]
for (let i = 0 ; i < arr.length-1;i++){
	for(let j = 0; j<arr.length-i-1 ; j++){
	 	if (arr[j]>arr[j+1]){
	 		let temp = arr[j]
	 		arr[j] = arr[j+1]
	 		arr[j + 1] = temp
		}
}

排序的简单实现

let arr = [5,4,9,8,1]
arr.sort()
arr.sort(function(a,b){
	return a-b
	})//实现升序 降序反之

十二、函数

12.1 基本语法

function 函数名（）{
	函数体
}

12.2 函数的调用

函数名（）//加上小括号就是调用函数

12.3 函数的参数以及默认参数

function 函数名（参数列表）{
	//函数体
}
//传入数组的方法
function getArrValue(arr=[]){
	//函数体
}
getArrValue([1,2,3,4,5,6])

举例说明：

function Sum(start,end){
	let sum = 0
	for (let i = start ; i <= end ; i++){
		sum+=i
	}
	console.log(sum)
}
Sum(1,100)

默认参数

function Sum（start=0 , end = 100）{
	let sum = 0
	for (let i = start ; i <= end ; i++){
		sum+=i
	}
	console.log(sum)
}
Sum()//5050

12.4 返回值

function fn(){
	return 1
}
let a = fn()
console.log(a)//1

//返回多个值的方法
function compare(first,second){
	let max = first
	let min = second
	if (first<second){
		max = second
		min = first
		}
	return [max,min]		
}
let arr =  compare(5,6)
console.log(arr)//[6,5]

12.5 作用域

function fn(){
	num =10//会被当做是全局变量来看
}
fn()
console.log(num)//10

12.6 函数表达式的使用

let fn = function(){
	//函数体
}
fn()

12.7 立即执行函数

重点多用于避免全局变量之间的污染

//方法一
(function () { console.log(1)})();
//方法二
(function () { console.log(1)}());

12.8 逻辑中断

该方法类似于传递默认参数

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

十三、转换为布尔型

‘’,undefined,null,false,NaN 转换为布尔型之后都是false，其余则为true

console.log('' - 1)//-1
console.log('ABC' - 1)//NaN
console.log(null + 1)//1
console.log(undefinded + 1)//NaN
console.log(NaN + 1)//NaN
console.log(null == undefined)//true
console.log(null === undefined)//false

十四、对象是什么？

1、对象是一种数据类型
2、无序的数据的集合
3、可以详细的描述某个事物

十五、对象的声明

15.1 对象声明语法

let 对象名 = {}//第一种方法
let 对象名 = new Object()//第二种方法

let 对象名 = {
	属性名:属性值,
	方法名:函数
}
let obj = null //该情况也为对象

十六、对象的增删改查

16.1 查

let obj ={
	name:'ABC',
	age:18,
	address:'中国大陆'
}
console.log(obj.address)//中国大陆

16.2 改

let obj ={
	name:'ABC',
	age:18,
	address:'中国大陆'
}
obj.age = 19
/* address : "中国大陆"
age: 19
gender: "男"
name: "ABC" */

16.3 增

let obj ={
	name:'ABC',
	age:18,
	address:'中国大陆'
}
obj.gender = '男'
console.log(obj)
/* address : "中国大陆"
age: 18
gender: "男"
name: "ABC" */

16.4 删

let obj ={
	name:'ABC',
	age:18,
	address:'中国大陆'
}
delete obj.age
console.log(obj)
/* address : "中国大陆",
gender: "男",
name: "ABC" */

16.5 特殊用法

一般情况下对象里都不用name，因为会与其他发生冲突，一般用以下方法声明属性名

let obj = {
	'book-name':'《活着》'
	'author':'余华'
}
console.log(obj['book-name'])//《活着》

十七、对象的方法

let obj = {
	uname：'ABC',
	write:function(){
	console.log('写代码')
	}
}
obj.write()//调用函数

十八、遍历对象

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

十九、内置对象

常用的数学属性、方法

console.log(Math.PI)//3.141592653589793

console.log(Math.ceil(1.1))//2 向上取整

console.log(Math.floor(1.1))//1 向下取整

console.log(Math.round(1.5)//2 四舍五入
console.log(Math.round(-1.5)//-1
console.log(Math.round(-1.51)//-2

console.log(Math.parseInt('12px')//12 其他的取整与floor一致

console.log(Math.max(1,2,3,4,5,6))//6
console.log(Math.min(1,2,3,4,5,6))//1

console.log(Math.pow(4,2))//求4的2次方
console.log(Math.sqrt(16)) //4 开平方

二十、随机数

console.log(Math.random())//0~1 左闭右开

生成0-10的随机数

Math.floor(Math.random()*(10+1))//0~10 都可以取到

实例：

let arr = ['A','B','C']
let random = Math.floor(Math.random()*arr.length)
console.log(arr[random])

生成6-10的随机数

console.log(Math.random()*(4+1)+6

生成N-M之间的随机数

console.log(Math.random()*(M-N+1))+N

二十一、拓展

21.1基本数据类型（简单数据类型、值类型）和引用数据类型（复杂数据类型）

简单数据类型：string、number、boolean、undefined、null
复杂数据类型：对象、数组、函数

简单数据类型存在栈中、复杂数据类型存在栈、堆中

总结

以上是JS的基础内容的大总结，接下来将会出JS的进阶内容，尽情期待。