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代码中truefalse都是小写

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}`)
}

posted @   Python-moon  阅读(1065)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示