当前位置: 首页 > news >正文

javascript基本语法(持续补充)

在这里插入图片描述


一、引入javascript

1、行间事件(主要用于事件)
2、页面script标签引入
3、外部引入js文件

<!--方式1-->
<button onclick="alert('你好2')">按钮A</button>
<!--方式2-->
<script>
	alert('你好2')
</script>
<!--方式三-->
<script src="main.js">

二、注释

单行注释:用//
多行注释用:
/*
*/

三、变量

1、变量命名

1、变量可以使用短名称,也可以使用描述性更好的名称,见名知意;
2、推荐使用字母开头
3、变量名区分大小写
4、小驼峰式命名(maxAge)

2、变量声明

var:定义一个普通的变量
let:定义的变量(js中的代码块用{}包起来的)
const:定义常量(定义之后不能修改),只能在定义的代码块内使用

四、常用的数据类型

数字:number类型(小数、整数)
字符串:String类型
数组:Array类型(等同于python中的列表)
布尔值:true和false(python中大写)
空:null(等同于python中的None)

1、数字类型

数字格式化小数位数:toFixed
在这里插入图片描述

2、字符串类型

1、字符串可以使用+进行拼接

2、字符串支持索引取值,但是不支持切片

在这里插入图片描述

3、字符串的格式化输出

<script>		
	//字符串格式化输出
	var name='python'
	//模板字符串:``
	var desc=`study${name}`
</script>	

在这里插入图片描述

4、字符串可以和数字相加

数字自动转化位字符串类型,进行拼接

在这里插入图片描述

3、数组类型

1、数组的定义有2种方式

var arr=[1,2,3,4,5,6]
var arr1=new Array(1,2,3,4,5,6)

2、数组的操作

支持索引取值:arr[索引]
支持切片操作:slice方法
arr.slice(1,3)

3、数组的增删改查操作

splice(参数1,参数2,参数3)
参数1:起始位置索引
参数2:表示删除几个数据
参数3-n:表示往数组中添加的数据

添加数据:

push方法,添加到数组的最后面,可以添加任意类型的数据
splice方法:往指定位置添加数据
arr.splice(3,0,‘数据’):指定位置增加数据,

删除数据

获取数组中的数据(删除):
pop方法,从数组尾部弹出一个数据
splice方法:删除指定位置的数据
arr.splice(2,1)

在这里插入图片描述

替换数据

splice(3,1,‘hello’):将索引为3的数字,替换为hello,只替换1个

4、数组的长度

length属性
arr.length

5、数组的过滤循环和查找的方法

forEach方法:遍历数组

自动遍历数组,接收的参数是一个回调函数,每遍历出来一个数据,执行一次回调函数
回调函数可以接收3个参数
value:遍历出来的数据值
index:遍历出来的数据索引
array:数据本身

var arr=[1,2,3,4,5,6]
arr.forEach(function(value,index,array){
	console.log(`值为${value},索引为${index},array:${array}`)
})

在这里插入图片描述

filter方法:过滤

自动遍历数组,接收的参数是一个回调函数,每遍历出来一个数据,
执行一次回调函数,根据回调函数返回的结果是是true还是false来对数组进行过滤
回调函数可以接收3个参数
value:遍历出来的数据值
index:遍历出来的数据索引
array:数据本身

三种写法

var arr2=[1,2,3,4,5,6]
var arr=arr2.filter(function(value){
	return value>3
})

var arr=arr2.filter((value)=>{
	return value>3
})


var arr=arr2.filter(value=>value>3)

find方法:查找数据

自动遍历数组,接收的参数是一个回调函数,每遍历出来一个数据,
执行一次回调函数,返回第一个符合条件的数据
回调函数可以接收3个参数
value:遍历出来的数据值
index:遍历出来的数据索引
array:数据本身

var arr=[
{id:1,'name':'kobe'},
{id:2,'name':'kobe1'},
{id:3,'name':'kobe2'},
]

//需求查找数组中id为2的数据
var result=arr.find(function(value){
	return value.id===2
})
console.log('结果:',result)


var result=arr.find((value)=>{
	return value.id===2
})
console.log('结果:',result)

在这里插入图片描述

findIndex方法:查找数据的索引

var arr=[
{id:1,'name':'kobe'},
{id:2,'name':'kobe1'},
{id:3,'name':'kobe2'},
]
//需求查找数组中id为2的数据
var result=arr.findIndex((value)=>{
	return value.id===2
})
console.log('结果:',result)

在这里插入图片描述

五、常用的运算类型

1、算术运算符

+、-、*、\、%

2、赋值运算符

=、+=、-=、*=、=、%=、++(用于数值的自增+1)、–(用于数值的自减-1)

3、比较运算符

==(比较数据的值是否相等,不会比较数据的类型)、99==’99‘成立
===(比较数据的值是否相等、数据类型要一致)、 99===’99‘不成立
>=
<=、
>
<
!=

4、逻辑运算符

&&(与)、||(或)、!(非)

六、条件语句

语法:

if(条件1){
	条件1成立执行的代码块
}else if(条件2){
	条件2成立执行的代码块
}else{
	上述条件都不成立执行的代码块
}

案例:

<script>
// 判断成绩等级
	var score=89
	if(score<60){
		console.log('你的成绩:',socre,'不及格')
	}else if(score>=60 && score<80){
		console.log('你的成绩:',score,'良好')
	}else{
		console.log('你的成绩:',score,'优秀')
	}
</script>

七、函数

1、函数的定义和调用

function 函数名(参数1,参数2{
	函数体
	return 返回值			}
work()

案例

function work(){
	console.log('---执行了work方法---')
	return 666
}
work()		

2、函数的参数:js中函数定义的参数和调用的参数可以不一致

function work1(a,b){
	console.log('---执行了work1方法---')
	console.log('参数a',a)
	console.log('参数b',b)
}
work1(1,2)

function work2(a,b=66){
	console.log('---执行了work1方法---')
	console.log('参数a',a)
	console.log('参数b',b)
}
work2()

在这里插入图片描述

3、函数种的内置变量

arguments:保存函数调用时传入的所有参数
this:类似于python中实例方法中的self(代表的是对象)

function work3(){
	console.log('---执行了work3方法---')
	console.log('arguments:',arguments)
	console.log('this:',this)
	return 666
}
work3(11,22)

在这里插入图片描述

4、箭头函数,没有函数名

箭头函数(作为参数,或者类里面定义的方法)

(参数1,参数2)=>{
	函数体
}


如果函数只有1个参数,才可以省略参数定义的括号()
	参数=>{
		函数体
	}


如果函数体里面只有1个返回值的表达式,可以把函数体{}去掉
	参数=>返回值

注意点:箭头函数中定义this代表的是最外层作用域的this

在这里插入图片描述

八、对象

1.对象的定义

方式一:
var obj1={a:100,name:“kobe”}
方式二:
var obj2=new Object()

2、对象中属性的获取

方式一:对象.属性
方式二:对象[‘属性’]

var obj={
	a:100,
	name:'kobe'
}

在这里插入图片描述

3、对象中方法的获取

var obj={
	a:100,
	name:'kobe',
	//标准函数定义
	work:function(){
		console.log('---这个是work方法---')
	},
	
	work2(){
		console.log('---work2方法---')
	},
	//箭头函数
	work1:()=>{
		console.log('---work1方法---')
	},
}

在这里插入图片描述

4.对象中普通函数和箭头函数的区别

箭头函数中定义this代表的是最外层作用域的this
普通函数中定义的this代表的是对象本身

var obj={
	a:100,
	name:'kobe',
	//标准函数定义
	work:function(){
		console.log('---这个是work方法---')
		console.log('---work中的this:',this)
	},
	
	work1(){
		console.log('---work1方法---')
		console.log('---work1中的this:',this)
	},
	//箭头函数
	work2:()=>{
		console.log('---work2方法---')
		console.log('---work2中的this:',this)
	},
}

在这里插入图片描述

九、while循环

1、语法:

while(条件){
	循环体
}

案例

var i=0
while (i<10){
	console.log(`你好js 第${i}`)
	i+=1
}

十、for循环

1、for(语句1;语句2;语句3):条件循环

语法

for(语句1;语句2;语句3){
	语句1:循环开始之前执行
	语句2:是否执行循环体的条件
	语句3:循环体每执行一轮最后都会执行一次语句3
}

案例

for (var i=0;i<10;i++){
	console.log(`你好js 第${i}`)
}

2、for-in:遍历数组得到索引

语法

arr=[1,2,3,4,5,6]
for (i in arr){
	遍历出来的i是数据的索引
}

案例

var arr=[11,22,33,44,55,66]
for (i in arr){
	console.log(i)
}

3、for -of:遍历数组得到值

语法

arr=[1,2,3,4,5,6]
for (i of arr){
	遍历出来的i是数据的值
}

案例

var arr=[11,22,33,44,55,66]
for (i of arr){
	console.log(i)
}

4、遍历对象

语法

var objA={
	name:"kobe",
	age:18
}
for (i in objA){
	遍历出来的i是对象的属性名(key)
}

案例

var objA={
	name:"kobe",
	age:18
}
for (i in objA){
	console.log(i)
}

在这里插入图片描述

相关文章:

  • Spring Boot开发之Mybatis
  • 卷王杯 easy unserialize
  • 常见Web安全漏洞深入解析
  • 如何从一款单片机移植到另一款单片机
  • linux创建用户和组、授权、禁止root远程登录、限制SSH的IP登录
  • 10大开源的快速开发平台—架构师必看
  • 3399-9.0 驱动根据vid和pid获取摄像头数量
  • Pandas DataFrame 保存到HTML文件(附炫酷 HTML Table 模板网站)
  • java过滤器(Filter)
  • 概率 | 考研 —— 复习知识点及方法 大总结
  • 【OPC UA】C# 通过OpcUaHelper建立OPC客户端访问KEPServerEx6 OPC服务器数据
  • 大数据算法系列4:二叉树,红黑树和B树
  • 想知道图片转表格用什么软件?不妨试试这些软件
  • 作为一名测试人员,如何拾开发者牙慧,开启兼职赚钱之路
  • Web自动化测试(二)—— Selenium-API操作
  • 4个实用的微服务测试策略
  • Apache的80端口被占用以及访问时报错403
  • echarts花样作死的坑
  • JavaSE小实践1:Java爬取斗图网站的所有表情包
  • vue:响应原理
  • 半理解系列--Promise的进化史
  • 从零开始的webpack生活-0x009:FilesLoader装载文件
  • 得到一个数组中任意X个元素的所有组合 即C(n,m)
  • 规范化安全开发 KOA 手脚架
  • 开发了一款写作软件(OSX,Windows),附带Electron开发指南
  • 跨域
  • 通过获取异步加载JS文件进度实现一个canvas环形loading图
  • 再次简单明了总结flex布局,一看就懂...
  • Linux权限管理(week1_day5)--技术流ken
  • 如何在招聘中考核.NET架构师
  • ​​​【收录 Hello 算法】9.4 小结
  • ​​快速排序(四)——挖坑法,前后指针法与非递归
  • ​Java基础复习笔记 第16章:网络编程
  • #if #elif #endif
  • #Spring-boot高级
  • (11)MSP430F5529 定时器B
  • (4)(4.6) Triducer
  • (4)事件处理——(6)给.ready()回调函数传递一个参数(Passing an argument to the .ready() callback)...
  • (9)目标检测_SSD的原理
  • (a /b)*c的值
  • (LNMP) How To Install Linux, nginx, MySQL, PHP
  • (M)unity2D敌人的创建、人物属性设置,遇敌掉血
  • (附源码)springboot掌上博客系统 毕业设计063131
  • (附源码)计算机毕业设计ssm-Java网名推荐系统
  • (已更新)关于Visual Studio 2019安装时VS installer无法下载文件,进度条为0,显示网络有问题的解决办法
  • ****** 二十三 ******、软设笔记【数据库】-数据操作-常用关系操作、关系运算
  • .NET 的程序集加载上下文
  • .Net 基于MiniExcel的导入功能接口示例
  • .NET 漏洞分析 | 某ERP系统存在SQL注入
  • .net8.0与halcon编程环境构建
  • .NET之C#编程:懒汉模式的终结,单例模式的正确打开方式
  • @ 代码随想录算法训练营第8周(C语言)|Day53(动态规划)
  • @31省区市高考时间表来了,祝考试成功
  • @require_PUTNameError: name ‘require_PUT‘ is not defined 解决方法
  • @Transient注解