JavaScript教程
目录
js简介
虽然名字叫JavaScript但是与Java一毛钱关系都没有
JavaScript 是脚本语言 是一种轻量级的编程语言。
js基础知识
引入js文件方式
body内最底部通过script标签src属性引入外部js资源(最常用)
<script src="myscript.js"></script>
注意页面的下载是从上往下的 所以操作标签js代码一定要等待标签加载完毕再执行才可以正常运行
注释
// 单行注释
/*
多行注释
多行注释
*/
JavaScript中的语句要以分号;为结束符
变量与常量
声明变量使用 var 变量名; 的格式来进行声明
或者使用 let 变量名 来声明
var name = "moon";
var age = 18;
let name = 'zhangwuji'
let age = 22
注意:
变量名是区分大小写的。
推荐使用驼峰式命名规则
const声明常量
const PI = 3.1415;
声明常量后不可以直接更改
PI = 3
// TypeError: "PI" is read-only
数据类型
数值number
JavaScript不区分整型和浮点型,就只有一种数字类型。
var a = 11
var b =12.22
console.log(typeof(a)) //number
console.log(typeof(b)) //number
字符串string
var a = "Hello"
var b = "world;
var c = a + b;
console.log(c); // 得到Helloworld
拼接字符串一般直接可以使用使用“+”
字符串的诸多方法
方法 | 说明 |
---|---|
.length | 返回字符串长度 |
.trim() | 移除左右两边空格 |
.trimLeft() | 移除左边的空白 |
.trimRight() | 移除右边的空白 |
.charAt(n) | 返回第n个字符 |
.concat(value, ...) | 按照指定字符拼接 |
.indexOf(substring, start) | 子序列位置 索引位置 |
.substring(from, to) | 根据索引获取子序列 |
.slice(start, end) | 切片 start开始为止 end 结束为止 根据索引 |
.toLowerCase() | 小写 |
.toUpperCase() | 大写 |
.split(delimiter, limit) | 按照指定内容分割 limit=分割数量 |
var name = ' moon '
var gender = 'male'
1.name.length // 13 返回字符长度
2.name.trim() // ' moon ' 去除字符串左右两边空格(区别于Python,JS只能去除空格)
3、name.trimLeft() // ' moon ' 去除字符串左边空格
4、name.trimRight() // ' moon ' 去除字符串右边空格
5、name.charAt(5) // 'g' 类似于Python的索引取值
6、name.concat(gender) // ' kang kang male' 拼接,针对字符的拼接还可以用‘+’号
7、name.indexOf('ng') // 4 根据输入的字符获取字符对应索引的位置
8、name.substring(1,5) //' moon ' 类似于Pyhon的切片操作
9、name.slice(1,5) // ' moon ' 类似于Pyhon的切片操作
10、name.toUpperCase() // ' KANG KANG ' 将字符串所有英文字母转大写
11、name.toUpperCase() // ' kang kang ' 将字符串所有英文字母转小写
13、name.split(' ') //(6) ['', '', 'kang', 'kang', '', ''] 按指定字符·分割字符串, 第二个参数可控制获取分割后的字符串的个数
/*
string.slice(start, stop)和string.substring(start, stop):
两者的相同点:
如果start等于end,返回空字符串
如果stop参数省略,则取到字符串末
如果某个参数超过string的长度,这个参数会被替换为string的长度
substirng()的特点:
如果 start > stop ,start和stop将被交换
如果参数是负数或者不是数字,将会被0替换
silce()的特点:
如果 start > stop 不会交换两者
如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
*/
字符串格式化输出
var name = "moon", time = "today";
`Hello ${name}, how are you ${time}`
使用数字1右边的`号包裹 然后${变量名}作为占位符输出
布尔值boolean
区别于Python,在python中是True,False
js代码中true和false都是小写
var a = true;
var b = false;
""(空字符串)、0、null、undefined、NaN都是false。
null和undefined
null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
对象object
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
自定义对象(字典)
创建字典
var d1 = {'name':'moon','age':18}
d1['name']
可以通过中括号取值
d1.name
也可以通过点的方式去值 因为这是一个对象
for (let i in d1){
console.log(i,d1[i])
}
i是字典的每一个键 di[i] 算是通过键去值
通过new创建
var d2 = new object()
//创建了一个空字典
d2.name = 'jason'
//直接可以添加键值对
日期对象
let d3 = new Date()
//创建了一个时间对象
d3.toLocaleString()
// 2020/5/14 下午2:31:05 格式化时间
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月(0-11)正常应该+1处理
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
JSON序列化
在python中序列化
dumps 序列化
loads 反序列化
在js代码中
let d1 = {'name':'moon','age':18 }
JSON.stringify(d1) 序列化 变为json格式
JSON.parse(d1) 反序列化 将json格式转为字典
数组
数组对象的作用是:使用单独的变量名来存储一系列的值。类似于Python中的列表。
var a = [123, "ABC"];
console.log(a[1]); // 输出"ABC"
//也支持索引
方法 | 说明 |
---|---|
.length | 数组内元素的个数 |
.push(ele) | 尾部追加元素 |
.pop() | 获取尾部的元素 |
.unshift(ele) | 头部插入元素 |
.shift() | 头部移除元素 |
.slice(start, end) | 切片 起始位置 结束为止 |
.reverse() | 反转 将数组从右到左显示 |
.join(seq) | 将数组元素按照指定的字符 连接成字符串 |
.concat(val, ...) | 将两个 数组 合并到一起 |
.sort() | 将数组 从小 到大排序 |
.forEach() | 将数组的每个元素传递给回调函数 |
.splice() | 删除元素,并向数组添加新元素。 |
.map() | 返回一个数组元素调用函数处理后的值的新数组 |
let a = [1,2,3]
let b = ['ABC','DEF']
1、a.length // 3 返回数组内部数据的数量
2、a.push(4) // 在数组尾部添加值
3、a.pop() // 弹出数值尾部的值
4、a.unshift(1) // 在数值头部插入数值,可一次插入多个
5、a.shift // 移出数组头部数据,一次只能移除一个
6、a.slice(1,3) // 数组切片取值,设置起始和结束位置的索引
7、a.reverse() // 反转元组内数据
8、a.join() // '3,2,1,1,5' 将数组内数据转成字符类型
9、a.concat(b) //(7) [3, 2, 1, 1, 5, 'ABC', 'DEF'] 拼接数组
10、a.sort() // 将数组内数值由小到大排序
//按照字符编码的顺序进行排序
11 l1.forEach()
l1.forEach(function(value{console.log(value)},l1)
// l1里面的每一个数据 当作行参 传入函数体代码
l1.forEach(function(value,index,arr{console.log(value,index,arr)},l1)
//value = 列表中 每一个数据 index = 每一个数据的索引值 arr= 数据来源
12 a.splice(a,b)
//a索引开始为止 b索引结束为止 移除相关元素
a.splice(a,b,c)
//先把索引a到索引b的位置元素删除,然后在添加c元素
13、a.map(function(value){console.log(value)},a)
// a里面的每一个数据 当作行参 传入函数体代码
a.map(function(value){return value*2},a)
// a里面的每一个数据 当作行参 传入函数体代码
map(lamdba x:x>10,a)
运算符
算数运算符
+ - * / % ++ --
var x=10;
var res1=x++;
//加号在后面就 先做赋值后自增
var res2=++x;
//加号在前面就 先自增在赋值
res1;10
res2;12
++表示自增1
--表示自减1
这里由于的x++和++x在出现赋值运算式,x++会先赋值再进行自增1运算,而++x会先进行自增运算再赋值!
比较运算符
1=='1' true
(值相等 弱等于)
1 === '1' false
(强等 不等于)
!=(值不等 弱) ==(值相等 弱) ===(值相等 强) !==(值不等 强)
逻辑运算符
&&(与) ||(或) !(非)
5&&'5' // '5' 哪个为假显示哪个 都为真显示最后的
0||1 // 1 哪个为真显示哪个
赋值运算符
= += -= *= /=
流程控制
if (a>5)
{console.log('yes')}
else
{console.log('no')}
if a>5:
print('yes')
else:
print('no')
//对比python代码 起始就是把 条件加上了小括号 把:号换成了大括号
var a = 10;
if (a > 5){
console.log("a > 5");
}
else if (a < 5)
{console.log("a < 5");}
else {
console.log("a = 5");
}
switch
var num = 2;
switch (num) {
case 0:
console.log('喝酒')
break
case 1:
console.log('唱歌')
break
case 2:
console.log('洗浴')
break
case 3:
console.log('大保健')
break
default:
console.log('所有条件都不满足时执行')
}
default所有条件都不满足时执行
提前定义好可能出现的条件和解决方式 然后 匹配解决方式
每次出发必须加break 不然会一直执行
for循环
打印0-9数字
for(let i=0;i<10;i++){
console.log(i)
}
for(起始条件;循环条件;循环时执行的操作)
循环打印出数字里面的每一个元素
var l1 = [11,22,33,44,55,66]
for (let i=0;i<l1.length;i++)
{
console.log(l1[i])
}
while(i<100){
console.log(i);
i++;
}
三元运算符 python res = 1 if 1>2 else 3
条件成立取前面的值 条件不成立取后面的值
js中三元运算符 res = 1>2?1:3
条件成立取问号后面的数字
条件不成立取冒号后面的数字
函数
定义函数的关键词 function
语法结构
function 函数名(行参,行参){函数体代码}
function func1 (){
console.log('hello')
}
func1() 调用方法跟python一样
有参函数
function func2 (1,2,3,4,5){
console.log(1,2)
}
如何参数传多了也不会报错 传少了也不会报错
关键字 arguments
function func2 (1,2,3,4,5){
if (arguments.length!==2){
console.log('传参错误')
}
else{
console.log('正常执行')
}
}
可以通过arguments方法来控制传参的数量
因为arguments可以获取到所有的参数
function 函数名(形参){
// 函数注释
函数体代码
return 返回值
}
返回值方法跟python相同也是return
如果返回多个数据,只能拿到最后一个
传少了就是undefined代替
箭头函数
var func1 = v =>v;
等于
var func1 = function(v){
returun v
}
var func1 = 行参 => 返回值;
>箭头左边的是行参 右边是返回值
var func1 = (a,b) => a+b;
主要用于处理简单逻辑
类似于python中的匿名函数
名称空间
函数内的名称空间顺序和python一样
正则表达式
定义正则两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
1.全局模式的规律
lastIndex
2.test匹配数据不传默认传undefined
可以直接使用/正则表达式/
格式化输出时间
var dictday = {
'0':'星期日',
'1':'星期一',
'2':'星期二',
'3':'星期三',
'4':'星期四',
'5':'星期五',
'6':'星期六',
}
// “2017-12-27 11:11
var time = new Date();
function showtime(){
year = time.getFullYear()
month = time.getMonth()
date = time.getDate()
hours = time.getHours()
minutes = time.getMinutes()
day = time.getDay()
showwkke = dictday[day]
console.log(showwkke)
console.log(`${year}-${month+1}-${date} ${hours}:${minutes} ${showwkke}`)
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库