首页 > 编程语言 >【精简笔记】JavaScript基础内容大总结

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

时间：2024-05-26 15:31:02浏览次数：21  
标签：arr console log JavaScript 数据类型 笔记 let 精简 obj

往期文章目录

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

文章目录

前言

本文适用于有一定其他语言基础的程序员快速查找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的进阶内容，尽情期待。

标签：arr,console,log,JavaScript,数据类型,笔记,let,精简,obj
From： https://blog.csdn.net/2302_81331056/article/details/139215244

相关文章

  • JavaScript 新特性：新增声明命令与解构赋值的强大功能
    个人主页：学习前端的小z个人专栏：JavaScript精粹本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！ES5、ES6介绍文章目录......
  • LGV 引理学习笔记
    \(\text{LGV}\)引理学习笔记\(\text{LGV}\)引理一般用于求解有向无环图中多条不相交路径的方案数，引理内容如下。引理定义\(w(P)\)指的是路径\(P\)上所有边权的乘积（在路径计数问题中认为所有边权均为\(1\)即可），\(e(A,B)\)指的是\(A\toB\)的所有路径的\(w\)和。对......
  • JavaScript 系列教程 III JavaScript 代码质量
    ......
  • OOP笔记 —— 多态（Polymorphism）
    多态就是同一个方法的不同实现（即：相同的函数名，不同的函数体）多态的精髓在于父类指针的使用：将子类的地址赋给父类指针，即父类指针指向子类对象注意：用指针去调用成员方法时，通过“->”符号1.虚函数（VirtualFunction）此处的虚函数是指非纯虚函数。定义：非纯虚函数是一个带有virt......
  • JavaScript-数组的增删改查
    数组的操作一共有四种：查询数组数据修改数组中元素的值数组添加新的数据删除数组中的元素数组的初始化有些编程语言的数组初始化是用{}包着的，而JS的数组初始化用[]letnum=[2,6,1,77,52,25,7];数组的查询想要具体查询数组中的某个元素可以用数组名num[i]表示查询数组n......
  • Netty_Redis_Zookeeper高并发实战-读书笔记
    转载自：https://www.cnblogs.com/leihongzhi/p/17381156.html 第1章    高并发时代的必备技能1.nettyNetty是JBOSS提供的一个Java开源框架，基于NIO的客户端/服务器编程框架，能够快速开发高并发、高可用、高可靠的网络服务器程序，也能开发高可用、高可靠的客户端程序。NIO是......
  • FFmpeg开发笔记（二十三）使用OBS Studio开启RTMP直播推流
    ​OBS是一个开源的直播录制软件，英文全称叫做OpenBroadcasterSoftware，广泛用于视频录制、实时直播等领域。OBS不但开源，而且跨平台，兼容Windows、MacOS、Linux等操作系统。OBS的官网是https://obsproject.com/，录制软件名叫OBSStudio，它基于QT+FFmpeg编码。使用OBS实现直播功能的......
  • Vue3实战笔记（45）—VUE3封装一些echarts常用的组件，附源码
    文章目录前言一、柱状图框选二、折线图堆叠总结前言日前使用hooks的方式封装组件，在我使用复杂的图标时候遇到了些问题，预想在onMounted中初始化echarts，在使用hooks的时候，组件没有渲染完，使用实例会出现各种各样的问题，并且在hooks中使用一些外部属性也属实遇到了些麻烦......
  • Html简要笔记
    html在线文档：https://www.w3school.com.cn怎么创建文件我已经会了1，html快速入门<!--文档类型说明注释--><!DOCTYPEhtml><!--使用语言的地区en表示英国美国en-US--><htmllang="en"><!--html头--><head><!--charset文件的字符集--><met......
  • Z 算法 学习笔记
    问题引入寻找字符串\(T\)在字符串\(S\)中的出现位置。暴力算法暴力枚举\(S\)的每一位作为开头，向后匹配，若能将\(T\)匹配完毕就为\(T\)在\(S\)中的一次出现。记\(S\)的长度为\(n\)，\(T\)的长度为\(m\)，则时间复杂度最劣为\(O(nm)\)。优化上面的算法有很多冗......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99