前端基础之JavaScript

JavaScript简介

JavaScript与Java的关系

JavaScript与Java之间没有关系，之所以取名javascript主要是蹭当时Java的热度

JavaScript简称

JavaScript简称JS，也是一门前端的编程语言。前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖，由此开发了一个叫nodejs的工具：支持js跑在后端服务器上。

JS的缺陷

JS最初由一个程序员花了七天时间开发的里面存在很多bug,为了解决这些bug一直在编写相应的补丁，结果补丁本身又有bug。最后导致了js中有很多不符合逻辑的地方。

JavaScript与ECMAScript

JavaScript原先由一家公司开发，希望其他公司都使用，最后为了避免商标问题改名

常用版本

ECMA5
ECMA6

变量与注释

注释语法

// 单行注释
/多行注释/

结束符号

；分号结束
例如:
console.log('hello world');

变量声明

在js中定义变量需要使用关键字声明

var
var name = 'jeyce'
let
let name = 'jeyce'
var声明都是全局变量，let可声明局部变量

常量声明

const pi = 3.141592653

数据类型

数值类型

Number
NaN:属于数值类型意思是'不是一个数字'(not a number)
parseInt('abc') 不报错返回NaN
parseFloat('abc') 不报错返回NaN

字符类型

String
默认只能是单引号和双引号
var name1 = 'jeyce'
var name2 = "jeyce"
格式化字符串小顿号
var name3 = jeyce

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

布尔类型

Boolean
js中布尔值是全小写
true false
布尔值为false的 0 空字符串 null undefined NaN
python中布尔值时首字母大写
True False
布尔值为False的 0 None 空字符串空列表空字典...

对象

相当于python中的列表、字典、对象

数组

常用方法

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

运算符

算术运算符

var x=10;
var res1=x++; 先赋值后自增1
var res2=++x; 先自增1后赋值

比较运算符

弱等于（==）

自动转换类型
'10' == 10 结果是true，js会自动转换成相同数据类型比较值是否一样

强等于（==）

不转换类型
'10' === 10 结果是false

逻辑运算符

python中使用 and、or、not
js中对应使用 &&、||、!

流程控制

if判断

单if分支

if(条件){
条件成立执行的分支代码块
}

if...else分支

if(条件){
条件成立执行的分支代码块
}else{
条件不成立执行的分支代码块
}

if...else if...else分支

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

switch语法

点击查看代码

var n1 = 2;
switch (n1) {
  case 0:
  console.log("吃饭");
  break;
  case 1:
  console.log("睡觉");
  break;
  case 2:
  console.log("发呆")
default:
  console.log("无所事事")
  }

while循环

while(循环条件){
循环体代码
}

for循环

for(初始值;循环条件;每次循环之后的操作){
循环体代码
}
eg：

循环打印0到9的数字

点击查看代码

for (var i=0;i<10;i++) {
  console.log(i);
  }

使用for循环打印出数组内所有的元素

点击查看代码

var l1 = [11, 22, 33, 44, 55,66,77,88,99]
for(var i=0;i<l1.length;i++){
console.log(l1[i])}

三元运算符

python中的三元运算
res = 11 if 1 > 2 else 22
if后面的条件成立则给res赋if前面的值,不成立则给res赋else后面的值
js中的三元运算
res = 1 > 2 ? 11 : 22
问号前面的条件成立则给res赋冒号左边的值，否则给res赋冒号右边的值

点击查看代码

var jeyceNationality='USA'
undefined
var johnsonNationality='UK'
undefined
res = jeyceNationality == 'UK' ? '正确':'错误'

函数

函数定义

语法规则：
函数定义:
function 函数名(参数1,参数2){
函数体代码
return 返回值
}
1.function是定义函数的关键字，相当于python中的def
2.函数名的命名参考变量名，js推荐使用驼峰体(小驼峰myFunc\大驼峰MyFunc)
3.参数可以为空
4.return后面跟返回值

函数调用

函数名加括号既可以调用

无参函数

function f1(){console.log('helloworld')}
f1()

有参函数

function f2(a, b){console.log(a,b)}
f2() 可以调用,相当于传了两个undefined
f2(1) 可以调用
f2(1,2) 可以调用
f2(1,2,3,4,5,6) 可以调用
js中的函数有个内置关键字arguments:用于接收所有参数

点击查看代码

function f2(){
console.log(arguments)
if (arguments.length === 0){
  console.log('一个参数也没传')
}else if(arguments.length === 1){
  console.log('传了一个参数')
}
else if (arguments.length ===2){
  console.log('传了两个参数')
}
else{
  console.log('传了两个以上参数')
}
}

返回值参数

特点：js函数中return不支持返回多个数据

匿名函数

var ff = function (){
console.log(123)
}

点击查看代码

var anomymous_func = function (){
  console.log('我是匿名函数')
  }
anomymous_func()

.箭头函数

var f = v => v;
等同于(箭头左边是形参,右边是返回值)
var f = function(v){
return v;
}
var f = () => 5;
等同于
var f = function(){
return 5;
}
var sum = (num1, num2) => num1 + num2;
等同于
var sum = function(num1, num2){
return num1 + num2; return只能返回一个值，如果要返多个值需要手动把多个值包在一个数组或对象中
}

点击查看代码

var sum = (num1, num2) => num1 + num2
undefined
sum(111,222)
sum(555,666)

对象

自定义对象

自定义对象相当于python里面的字典
var d1 = {'name':'trump','age':74,'nationality':'USA'}
python字典取值操作js中的自定义对象都有,并且自定义对象还可以直接通过句点符取值,跟python字典相比更像一个对象
取值操作
d1.name //trump
循环取值

点击查看代码

var d1 = {'name':'trump','age':74,'nationality':'USA'}
for(var i in d1){
  console.log(d1[i])
  }

定义自定义对象还有一种标准格式(自定义对象,内置对象,第三方对象)
var d2 = new Object() 相当于生成了空字典

点击查看代码

var dict = new Object()
dict

点击查看效果图片

内置对象

内置对象可以看成是python中的内置方法，内置模块等。提前定义好可直接调用

Date对象

var d1 = new Date()
d1.toLocaleString()			'2022/4/28 10:47:01'
d1.toLocaleDateString()	'2022/4/28'
d1.toLocaleTimeString()	'10:47:01'

//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

练习

编写代码，将当前日期按“2022-01-01 00:00 星期六”格式输出

点击查看代码

const WEEKMAP = {  
  0:"礼拜天",
  1:"礼拜一",
  2:"礼拜二",
  3:"礼拜三",
  4:"礼拜四",
  5:"礼拜五",
  6:"礼拜六"
};  //定义一个数字与周几的对应关系对象


function showTime() {
    var d1 = new Date();
    var year = d1.getFullYear();
    var month = d1.getMonth() + 1;  //注意月份是从0~11
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元运算，分钟数小于10就在前面加个0

    var week = WEEKMAP[d1.getDay()];  //星期是从0~6

    var strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week}
    `;
    console.log(strTime)
};

showTime();

json对象

python中如何序列化反序列

import json
json.dumps()
json.loads()

js中如何序列化反序列化

JSON.stringify()
JSON.parse()

正则表达式对象

创建正则表达式的两种方式

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  //推荐使用

使用正则

reg2.test('jeyce789') true
括号内不传参数，就相当于传了undefined
reg2.test() true

验证

var reg3 = /undefined/
reg3.test('jeyce789') false
reg3.test('undefined') true
reg3.test() true

点击查看代码

var reg3 = /undefined/
reg3.test('jeyce789');
reg3.test('undefined');
reg3.test();

全局匹配

在正则表达式的最后添加一个字母g

点击查看代码

var reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg3.lastIndex
reg3.test('jeyce789')
reg3.lastIndex
reg3.test('jeyce789')

posted @ 2022-04-28 00:21 一梦便是数千载阅读(189) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端之JQuery

· 前端基础之HTML

· 前端开发JS

· 前端基础之JavaScript

· 前端(js部分讲解)

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

公告

昵称：一梦便是数千载
园龄： 3年
粉丝： 8
关注： 21

+加关注

2025年3月

日

一

二

三

四

五

六

一梦便是数千载

前端基础之JavaScript

JavaScript简介

JavaScript与Java的关系

JavaScript简称

JS的缺陷

JavaScript与ECMAScript

常用版本

变量与注释

注释语法

结束符号

变量声明

常量声明

数据类型

数值类型

字符类型

布尔类型

对象

数组

运算符

算术运算符

比较运算符

弱等于（==）

强等于（==）

逻辑运算符

流程控制

if判断

单if分支

if...else分支

if...else if...else分支

switch语法

while循环

for循环

循环打印0到9的数字

使用for循环打印出数组内所有的元素

三元运算符

函数

函数定义

函数调用

无参函数

有参函数

返回值参数

匿名函数

.箭头函数

对象

自定义对象

内置对象

Date对象

练习

json对象

python中如何序列化反序列

js中如何序列化反序列化

正则表达式对象

创建正则表达式的两种方式

使用正则

验证

全局匹配

公告

搜索

随笔分类

随笔档案

阅读排行榜

推荐排行榜

最新评论