JavaScirpt(1)
JavaScirpt编程语言
JS简介
全称JavaScirpt虽然名字中含有Java其实与Java一点关系都没有。
主要作用于前端编程语言。
JS基础
1.注释语法
//单行注释
/* 多行注释 */
2.引入js的多种方式
-
head内script标签内编写
-
head内script标签src属性引入外部js资源
-
body内最底部通过script标签src属性引入外部js资源 (最常用)
注意事项： 页面的下载是从上往下的，所以操作js代码一定要等到页面加载完毕在执行才可以正常运行，所以script标签应当放于网页的最底部。
编写js方法
- pycharm 创建js文件或者html文件 (编写较为复杂的js代码)
- 浏览器提供编写js代码的环境 ( 浏览器内按F12 选择Console 在内编写)
变量与常量
js中首次定义一个变量名需要关键字声明
1.var
var 变量名 = 值;
2.let
let 变量名 = 值;
let是ECM6新语法 可以在局部定义变量不影响全局
浏览器内编写js代码 换行方法
Shift+空格
js声明常量也需要关键字
const
const 变量名=值;
基本数据类型
在JS中查看数据类型的方法 typeof
1. 数值类型(Number)
在JS中整型与浮点型都是Number，但是在转换的时候可以控制保存数据是否含有小数点。
parseInt 保留整数
parseFloat 保留整数含有小数
# 在用这两种方法转换字符的时候不会报错，会提示NaN也属于数值类型 意思是 你操作的对象不是一个数字(Not A Number)
parseInt(14.33)
14
parseFloat(14.33)
14.33
2. 字符类型(String)
在JS中定义字符 单引号 双引号 ` 顿号都可以
顿号是可以写多行，支持格式化输出。称为模板字符串
let s1 = 'tank'
let s2 = "tank"
let s3 = `tank`
格式化输出使用${}
`my name is ${s3}`
# 字符串的拼接操作 使用+号
'tank'+'nb'
字符类型的内置方法
通过 . 来调用
| 方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt() | 返回索引位的字符 |
| .concat() | 拼接 |
| .indexOf() | 获取对应的索引值 多个字符返回开头的字符的索引值 |
| .slice() | 切片 顾头不顾尾 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split() | 分割 可以在后面加上需要几个值，不写默认获取全部 |
s4 = ' tank '
' tank '
s4.trim() # 去除两边空白
# 'tank'
s4.length # 统计长度
# 6
s4.trimLeft() # 去除左边空白
# 'tank '
s4.trimRight() # 去除右边空白
# ' tank'
s4.charAt(1) # 返回1索引位的字符
# 't'
s4.concat('nb') # 拼接
#' tank nb'
s4.indexOf('ank') # 获取字符对应的索引值 多个字符返回开头的字符的索引值
# 2
s4.slice(2,4) # 切片操作顾头不顾尾
# 'an'
s4.toUpperCase() # 转大写
# ' TANK '
s4.toLowerCase() # 转小写
s4.split('a') # 分割 可以在后面加上需要几个值，不写默认获取全部
# (2) [' t', 'nk ']
s4.split('a',1)
# [' t']
3.布尔类型(boolean)
JS布尔值 是纯小写的。 python是首字母大写
(空字符串) 0 null undefined NaN 都是False
4. null与undefined
null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;(曾经拥有 但是没了)
undefined 表示根本就没定义(从来没有)
5. 对象(object)
与python中一致 一切皆对象。
对象之数组(Array)
python中的列表
"定义方法"
let obj1 = [11,22,33]
typeof(obj1) # 查看数据类型
# 'object'
数组常用方法：
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push() | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift() | 头部插入元素 |
| .shift() | 头部移除元素 括号内默认移除头部 |
| .slice() | 切片 |
| .reverse() | 反转 颠倒顺序 |
| .join() | 将数组元素连接成字符串 可以指定链接符 |
| .concat() | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数,相当于for循环拿出来交给函数，第二个参数打印索引值，第三个参数 被循环的对象本身(列表) |
| .splice() | 删除元素，并向数组添加新元素。 从第一个参数索引位开始删除至第二参数的个数，第三个参数可以添加 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
l1 = [11,22,33,44,55]
l1.length # 统计长度
# 5
l1.push() # 尾部追加元素
l1.pop() # 获取尾部元素
# 66
l1.unshift() # 头部插入元素
l1.shift() # 移除头部元素
l1.slice(1,3) # 切片 顾头不顾尾
l1.reverse() # 反转 列表顺序
# [55, 44, 33, 22, 11]
l1.join('|') # 将数组元素连接成字符串 可以指定链接符
# '55|44|33|22|11'
l1.concat([9,8]) # 连接数组
# [55, 44, 33, 22, 11, 9, 8]
l1.sort() # 排序
# [11, 22, 33, 44, 55]
"""
forEach
将数组的每个元素传递给回调函数,相当于for循环拿出来交给函数，第二个参数打印索引值，第三个参数 被循环的对象本身(列表)
"""
l1.forEach(function(a){
console.log(a)})
l1.forEach(function(a,b){
console.log(a,b)})
l1.forEach(function(a,b,c){
console.log(a,b,c)})
"""splice
删除元素，并向数组添加新元素。 从第一个参数索引位开始删除至第二参数的个数，第三个参数可以添加"""
l1.splice(0,1)
# [11]
# (4) [22, 33, 44, 55]
l1.splice(0,1,23)
# [22]
# (4) [23, 33, 44, 55]
"""
map 映射 设定一个形参 在内部设置返回值
也可以放三个参数 规律与forEach一致
"""
l1.map(function(a){
return a + 1
})
# (4) [24, 34, 45, 56]
对象之自定义对象(object)
python中的字典
" 产生一个字典语法 "
let d1 = new object();
let d2 = ['name':'tank']
可以使用按键取值
d2['name']
get 无法使用
可以直接通过.的方式获取
d2.name
---------------------------------------------------
let d1 = new Object(); # 产生一个空字典
d1.name = 'tank' # 用对象.的方式添加键值对
# {name: 'tank'}
运算符
1. 算数运算符
+ - * / % ++ --
与python中一样
只有 ++ --不一样
var x=10;
var res1=x++; # 先赋值 后递增
res = 10
var res2=++x; # 先递增 后赋值
res = 12
"因为res1 赋值了10 后 也自增了，此时x=11，所以到了res2里就是 11自增再赋值"
2. 比较运算符
JS里自动会把不同的数据 转换成相同的数据进行比对，不想转换可以使用=== 强等于
!= # 不等于
== # 值等于 弱等于 自动转换
=== # 强等于 不转换
!== # 值不等 强不等于
3. 逻辑运算符
&& # 与
|| # 或
! # 非
4. 赋值运算符
= += -= *= /=
流程控制
1.单if分支
if (条件){
条件成立执行的代码
}
2.if ...else分支
if (条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
3. if...else if ...else分支
if (条件1){
条件成立执行的代码
}else if(条件2){
条件1不成立执行的代码
}else{
条件1和2都不成立执行的代码
}
# 分支结构中else if很多 可以使用switch语法
4. switch语法
提前列好每一个语法 然后去执行
switch(条件){
case 条件1:
条件1成立执行的代码;
break;
case 条件2:
条件2成立执行的代码;
break;
default:
条件都不满足执行的代码
}
# switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
5.for循环
for(起始条件;循环条件;条件处理){
循环体代码
}
for (let i=0;i<10;i++) {
console.log(i)
}
练习题
let l1 = ['tank','tony','jerry','张红','周衍根']
for (let i=0;i<l1.length;i++){
console.log(l1[i])
}
let d1 = {'name':'jason','age':18}
for (let k in d1){
console.log(k)
}
# name
# age
undefined
for (let k in d1){
console.log(d1[k])
}
# jason
# 18
6. while循环
while(循环条件){
循环体代码
}
7.三元运算
python中
值1 if 条件 else 值2 # 条件成立用值1 条件不成立用值2
JS中
条件 ?值1:值2 # # 条件成立用值1 条件不成立用值2
5 =='6'?'我们一样':'我们不一样'
函数
function 函数名(形参){
// 函数注释
函数体代码
return 返回值
}
# 匿名函数
var s1 = function(a, b){
return a + b;
}
# 箭头函数
var f = v => v;
f是名字 =>左边的v是形参，右边的是返回值
全写：
var f = function(v){
return v;
}
# 如果形参不需要参数用括号括起来
var f = () => '我滴哥';
var f = function(){return '我滴哥'};
# 形参需要多个参数
var f = (a,b) => a+b;
var f = function(a,b){
return a + b
}
Js函数特性
1.JS中函数的形参与实参个数可以不对应
传少了就是undefined 传多了不用
2.函数体代码中有一个关键字arguments用来接收所有的实参
function f1(a,b){
console.log(arguments) # 可以接收所有参数
}
我们可以通过代码限制必须传对应个数的参数
function f2(a,b){
if (arguments.length !==2){console.log('我需要两个参数')}
}
- Js函数的返回值问题 如果返回值有多个 那么只会接收最后一个返回值。我们需要提前把返回值组织好 比如弄成元组或者列表。
function hs(){
return 1,2,3
}
hs()
# 3
提前把返回值组织好
function hs1(){
return [1,2,3]
}
hs1()
# [1, 2, 3]
内置对象
1.date对象
# 创建对象
var d1= new Date();
# 获取当前时间 年月日时分秒
console.log(d1.toLocaleString())
2022/12/5 16:33:24
date对象的方法
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
| 方法 | 描述 |
|---|---|
| getFullYear () | 获取完整年份 |
| getDate() | 返回月中的第几天（从 1 到 31）。 |
| getDay() | 返回星期几（0-6）。 |
| getYear() | 返回年份。 距1900年1月1日的年份，这是一个过时而不被推荐的方法 |
| getHours() | 返回小时（从 0-23）。 |
| getMilliseconds() | 返回毫秒（0-999）。 |
| getMinutes() | 返回分钟（从 0-59）。 |
| getMonth() | 返回月份（从 0-11）。 |
| getSeconds() | 返回秒数（从 0-59）。 |
| getTime() | 返回自 1970 年 1 月 1 日午夜以来与指定日期的毫秒数。 |
json
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
RegExp对象
// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}$");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')
/*第一个注意事项，正则表达式中不能有空格*/
// 全局匹配
var s1 = 'tonydsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('tonydsb');
reg2.test('tonydsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/
// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);
var reg3 = /undefined/;
reg3.test();
"""
**全局匹配的bug现象**
就是上述代码中的第二种情况，测试结果一次true、一次false，因为lastIndex属性就是类似于游标的属性，第一次匹配会到字符串尾部停滞，第二次匹配就匹配不到于是回到字符串头部。
"""
