前端开发JS
-
JavaScript简介
-
JS基础
-
变量与常量
-
基本数据类型
-
运算符
-
流程控制
-
函数
-
内置对象
JavaScript简介
# 1.JavaScript与Java没有半毛钱关系
之所以叫这么个名字纯粹是为了蹭当时Java的热度
# 2.JavaScript简称JS 也是一门前端的编程语言
前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖 由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)>>>:不好用
# 3.JS最初由一个程序员花了七天时间开发的 里面存在很多bug
为了解决这些bug一直在编写相应的补丁 补丁本身又有bug 最后导致了js中有很多不符合逻辑的地方(成了大家墨守成规的东西)
# 4.JavaScript与ECMAScript
JavaScript原先由一家公司开发 希望其他公司都使用 最后被组织改名
# 5.版本问题
ECMA5
ECMA6
JS基础
# 注释语法
// 单行注释
/*多行注释*/
# 引入js的多种方式
1.head内script标签内编写
2.head内script标签src属性引入外部js资源
3.body内最底部通过script标签src属性引入外部js资源(最常用)
ps:注意页面的下载是从上往下的 所以操作标签js代码一定要等待标签加载完毕再执行才可以正常运行
# 结束符号
分号结束 —— console.log('hello world');
console相当于python中的print
'''很多时候不写也没问题'''
变量与常量
"""
1.pycharm创建js文件或者html文件(适合编写较为复杂的js代码)
2.浏览器提供编写js代码环境
"""
# 变量声明
var '声明是全局变量'
var name = 'jason';
let '声明的是局部变量'
let name = 'tony';
ps:let是ECMA6新语法 可以在局部定义变量不影响全局
# 常量声明
const pi = 3.14;
基本数据类型
- 数据类型
"""
查看数据类型————typeof
"""
# 数值类型(相当于Python中的整型int和浮点型float)
在JS中整型与浮点型不分家 都叫Number
js中的NaN:属于数值类型,意思为'不是一个数字'(not a number)
转换为整型 parseInt()
转换为浮点型 parseFloat()
- 字符类型(String)
常用方法：
| 方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
# 默认只能是单引号和双引号(只支持单行文本)
let name1 = 'tony'
let name2 = "tony"
# 格式化字符串小顿号(写长文本)
let name3 = `owen`
# 字符的拼接
推荐使用+号
let l1='wu'
let l2='hu'
let l3=l1+l2
l3
'wuhu'
# 统计长度 length
使用的length相当于Python中的len(),使用点的形式
let l1 = 'abc'
l1.length
# 移除空白(不能通过指定)
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
# 返回第n个字符 .charAt(索引值)
let name = 'jason'
name.charAt(1) 写索引值返回对应的字符
'a'
# 根据索引获取子序列 .substring()
let name = 'jason'
name.substring('a') 返回字母a所对应的索引值
1
# 切片 .slice()
let name = 'jason'
name.slice(1,3) 从索引1开始切到索引3
'ja'
# 小写 .toLowerCase()
let name = 'JASON'
name.toLowerCase()
'jason'
# 大写 .toUpperCase()
let name = 'jason'
name.toUpperCase()
'JASON'
# 分割 .split()
let name = 'jason'
name.split('a') 按照字母a进行切割
(2) ['j','son']
name.split('a',1) 先按照字母a进行切割 后面的数字索引取值列表
['j']
# 字符串的格式化
js中使用格式化字符串(小顿号)
var name = 'owen'
var age = 18
console.log(`
my name is ${name} my age is ${age}
`)
my name is owen my age is 18
python中使用%或者format
- 布尔类型(Boolean)
Boolean
js里面的布尔值全小写
true false
布尔值为false的: 0 空字符串 null undefined NaN
python中布尔值时首字母大写
True False
布尔值为False的 0 None 空字符串 空列表 空字典...
null与undefined
null表示值为空(曾经拥有过) undefined表示没有定义(从来没有过)
"""
let bb = null;
bb
null
let aa
aa
undefined
"""
对象(object)
- 数组
对象之数组(Array)>>>:类似于python中的列表
let l1 = []
常用方法：
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val, ...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素。 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
let l1 = [11,22,33]
# 数组的大小 .length
l1.length
3
# 尾部追加元素 push()
js中使用push() python中使用append()
l1.push(44)
[11,22,33,44]
# 获取尾部的元素 pop()
js和python都用的pop()
l1.pop(44)
[11,22,33]
# 头部插入元素 unshift()
js中使用unshift() python中使用insert()
l1.unshift(0)
[0,11,22,33]
# 头部移除数据 shift()
js中使用shift() python中可以使用pop(0)
l1.shift(0)
[11,22,33]
# 切片 .slice()
l1.slice(1,2) 第一个数字起始位置 第二个终止位置
[22]
# 反转 .reverse()
l1.reverse()
[33,22,11]
# 将数组元素连接成字符串 .join()
l1.join('|')
'11|22|33'
# 连接数组 .concat()
js中使用concat() python中使用extend()
l1.concat([1,2,3])
[11,22,33,1,2,3]
# 排序 .sort()
l1.sort()
[11,22,33]
# 将数组的每个元素传递给回调函数 .forEach()
# 一个参数(类似于for循环)
l1.forEach(function(a){
console.log(a)
})
11
22
33
# 两个参数(类似于枚举)
l1.forEach(function(a,b){
console.log(a,b)
})
11 0
22 1
33 2
# 三个参数 再把这个列表返回出来
l1.forEach(function(a,b,c){
console.log(a,b,c)
})
11 0 (3) [11, 22, 33]
22 1 (3) [11, 22, 33]
33 2 (3) [11, 22, 33]
# 删除元素，并向数组添加新元素 .splice()
splice(起始位置,删除个数,新增的值)
l1.splice(0,2,44)
[44,33] # 在头部新增
# 返回一个数组元素调用函数处理后的值的新数组 .map()
l1.map(function(a){
return a+1
})
[12,23,34] # 类似于映射
- 自定义对象
# 自定义对象(和Python里面的字典)
var d1 = {'name':'owen', 'age':18}
python字典取值操作js中的自定义对象都有， 并且自定义对象还可以直接通过句点符取值，更像一个对象
# 取值
d1.age // 18
# 循环取值
for(var i in d1){
console.log(d1[i])
}
"""
定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)
var d1 = new Object() // 相当于生成了空字典
"""
运算符
1.算术运算符
+ - * / % ++(自增1) --(自减1)
var x=10;
var res1=x++; 加号在后面 先赋值后自增
var res2=++x; 加号在前面 先自增后赋值
2.比较运算符
!=(值不等 弱) ==(值相等 弱) ===(值相等 强) !==(值不等 强)
弱等于:'==' 自动转换类型
'5'==5 '结果为true js会自动转换成相同数据类型 然后再比较值是否一致'
强等于: '===' 不转换类型
'5'===5 '结果为false 强等于就不会转换类型，直接比较'
3.逻辑运算符
&&(与) ||(或) !(非)
流程控制
1.单if分支
if (条件){
条件成立执行的代码
}
2.if...else分支
if(条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
3.if...else if...else分支
if(条件1){
条件1成立执行的代码
}else if(条件2){
条件1不成立条件2执行的代码
}
else{
条件1和2都不成立执行的代码
}
4.如果分支结构中else if很多还可以考虑使用switch语法
switch(条件){
case 条件1:
条件1成立执行的代码;
break; 如果没有break会基于某个case一直执行下去
case 条件2:
条件2成立执行的代码;
break;
case 条件3:
条件3成立执行的代码;
break;
case 条件4:
条件4成立执行的代码;
break;
default:
条件都不满足执行的代码
}
for循环
for(起始条件;循环条件;条件处理){
循环体代码
}
for(let i=0;i<10;i++){
console.log(i)
}
let dd = {'name':'jason','age':18}
for(let k in dd){
console.log(k)
}
while循环
while(循环条件){
循环体代码
}
三元运算符
python中的三元运算:
res = 111 if 1 > 2 else 222
''' if后面的条件成立则使用if前面的值， 不成立则使用else后面的值
'''
js中的三元运算:
res = 1 > 2 ? 111 : 222
'''
问号前面的条件成立则使用冒号左边的值，不成立则使用冒号右边的值
'''
# 三元运算一般情况下不推荐嵌套使用
函数
js函数定义
"""
函数定义:
function 函数名(参数1,参数2){
函数体代码
return 返回值
}
1、function定义函数的关键字，相当于Python中的def
2、函数名的命名和变量名；差不多， 并且js推荐使用驼峰体(大驼峰Myfunc\小驼峰myFunc)
3、参数可以写也可以不写
4、return返回值
函数调用:
函数名加括号, 有参传参就可以了
"""
# 无参函数
function f1(){
console.log(111)
}
# 有参函数
function f1(a, b){console.log(a,b)}
f1() # undefined undefined 相当于传了两个undefined
f1(1) # 1 undefined 一个形参， 一个undefined
f1(1,2) # 1 2
f1(1,2,3,4,5) # 1 2
'''js中的函数提供了有个内置关键字arguments:接收所有参数'''
function f1(){
console.log(arguments)
if (arguments.length === 0){
console.log('没有传参')
}else if(arguments.length === 1){
console.log('传了一个参数')
}else{
console.log('传了多个参数')
}
}
# 返回值参数
return 不支持返回多个数据
# 匿名函数
var ff = function (){
console.log(111)
}
# 箭头函数(drf中vue架构会再次接触)
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只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
'''
1.JS中函数的形参与实参个数可以不对应
传少了就是undefined 传多了不用
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体
'''
内置对象
- 编写日期格式
# 内置对象可以看成Python里面的内置方法和内置模块等 提前写好了直接调用
# Date对象
var d1 = new Date()
d1.toLocaleString() // 获取现在的时间
'2022/4/28 18:45:04
d1.toLocaleDateString() // 获取现在的年月日
'2022/4/28'
d1.toLocaleTimeString() // 获取现在的时分秒
'18:47:25'
# 日期时间关键字
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
- json对象
# python中序列化反序列化
import json # json模块
json.dumps() # 序列化
json.loads() # 反序列化
# js中序列化反序列化
JSON.stringify() # 序列化
JSON.parse() # 反序列化
- 正则对象
# 创建正则表达式的两种方式
# 第一种
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
reg1.test('wuhuwuhu') // true
reg1.test() // true 括号里面没东西就相当于undefined
# 第二种(简写形式)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}$/;
# 全局匹配
在正则表达式的最后一个添加一个字母g
var reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
undefined
reg3.lastIndex
0
reg3.test('bibibibi')
true
reg3.lastIndex
8
reg3.test('bibibibi') // 这次就是从第八位开始校验， 所以为false
false
