js简介
# 1.js的全称为javaScript，其与java并无联系
# 2.js作为一款前端编程语言，其本身存在着许多的逻辑错误
# 3.js发展史：
JavaScript >> ECMAScript >> JavaScript
JavaScript 进行了许多版本的迭代，现在最常用的是ECMAScript6
# 4.js基础
-1.注释语法
// 单行注释
/*多行注释*/
-2.引入js的多种方式
1.在head内script标签内编写
2.在head内script标签的src属性引入外部js资源
3.body内最底部通过script标签的src属性引入外部js资源
ps: 页面代码的执行是从上往下的，所以在操作js代码时一定要等待标签加载完毕后，执行js资源才能正常运行
# 5.结束符号 ;
js变量与常量
"""
可以写前端代码的地方！
-1.编译软件创建的js文件或html文件
-2.浏览器提供js的编码环境
"""
# 1.js中的常量
在js中声明常量需要使用关键字 const
const p = 3.14;
# 2.js中的变量
在js中声明变量也需要使用关键字 var/let
var name = 'jason'
let name = 'jason'
ps：let时ECMA6的新语法，可以在局部定义变量不影响全局定义的变量，在js中声明常量也需要关键字
js基本数据类型
"""
python中查看数据类型的方式 type()
js 中查看数据类型的方式 typeof
"""
//1.数值类型(Number)
在JS中整型与浮点型统一称为Number
NaN也属于数值类型，译为：Not A NumBer(不是一个数字)
//2.字符类型(String)
单引号 ''
双引号 ""
模板字符串 ``
使用：
let name = 'jason' //undefined
let desc = `my name is ${name}` //undefined
name //'jason'
desc //'my name is jason'
ps: 字符串的拼接建议使用+，js数据类型也有常见的内置方法
# 常用方法
.length //返回长度
.trim() //移除空白
.trimLeft() //移除左边的空白
.trimRight() //移除右边的空白
.charAt(n) //返回第n个字符
.concat(value, ...) //拼接
.indexOf(substring, start) //子序列位置
.substring(from, to) //根据索引获取子序列
.slice(start, end) //切片
.toLowerCase() //小写
.toUpperCase() //大写
.split(delimiter, limit) //分割
# 使用
// 定义：
var a = ' jerry '
undefined
var b = 'ami'
undefined
var c = 'TOM'
undefined
// 使用：
a.length // 7
a.trim() // 'jerry'
a.trimLeft() // 'jerry '
a.trimRight() // ' jerry'
a.charAt(3) // 'r'
a.concat(b) // ' jerry ami'
a.slice(2,4) // 'er'
a.substring(1,4) // 'jer'
a.indexOf('r') // 3
b.toUpperCase() // 'AMI'
c.toLowerCase() // 'tom'
a.split(delimiter,limit)
// separator 可选,字符串或正则表达式，从该参数指定的地方分割string Object。
// limit 可选,该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
//3.布尔类型(Boolean)
JS里面的布尔值和Python中的不同
python: True/False 首字母大写
js: true/false 全小写
//4.null与undefined
null表示值为空 曾经有过
undefined表示没有被定义 从来没有
//5.对象(object)
数组(Array） >> 类似于python里面的列表
let l1=[] //undefined
l1 //[]
自定义对象(Object) >> 类似于python里面的字典
let d1 = {'name':'tom',} //undefined
let d2 = new Object(); //undefined
d1 //{name: 'tom'}
d2 //{}
# 方法
.length // 数组的大小
.push(ele) // 尾部追加元素
.pop() // 获取尾部的元素
.unshift(ele) // 头部插入元素
.shift() // 头部移除元素
.slice(start, end） // 切片
.reverse() // 反转
.join(seq) // 将数组元素连接成字符串
.concat(val, ...) // 连接数组
.sort() // 排序
.forEach() // 将数组的每个元素传递给回调函数
.splice() // 删除元素，并向数组添加新元素。
.map() // 返回一个数组元素调用函数处理后的值的新数组
运算符
//1.算数运算符
+ - * / % ++(自增1) --(自减1)
var x=10; //undefined //10
var res=x++; 加号在后，先赋值后自增 //undefined
res //10
x //11
var res1=++x; 加号在前，先自增后赋值 //undefined
res1 //11
x //11
//2.比较运算符
!=(弱不等于) ==(弱等于)
!==(强不等于) ===(强等于)
ps:js中使用弱等于，是会自动进行类型的转换的
//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.switch语法 （分支结构中的else if如果多的话可以考虑switch语法）
switch(条件){
case 条件1：
条件1成立执行的代码；
break; //如果没有break会基于某个case一直执行下去
case 条件2：
条件2成立执行的代码；
break;
case 条件3：
条件3成立执行的代码；
break;
default:
条件都不满足执行的代码
}
//5.for循环
for(起始条件;循环条件;条件处理){
循环体代码
}
eg:1. for(let i=0;i<11;i++){
console.log(i)
}
// 0 1 2 3 4 5 6 7 8 9 10
// undefined
2. let a1 = {'name':'jason','age':18}
// undefined
for(let k in a1){
console.log(k)
}
// name
// age
// undefined
//6.while循环
while(循环条件){
循环体代码
}
函数
// 1.对于函数的定义
"""
python中：
def 函数名(形参):
'''函数注释'''
函数体代码
return 返回值
"""
js中：
function 函数名(形参){
// 函数注释
函数体代码
return 返回值
}
"""
js与python的作用域关系查找一模一样，首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。
"""
# 1.匿名函数 : 传入的参数必须匹配够相同的数量，多了取前两个，少了则会出现NaN
例1：
var s1 =function(a,b){
return a+b;
}
eg1:
var s1 =function(a,b){
return a + b
} // undefined
s1(1,3) // 4
s1(1,3,2) // 4
s1(1) // NaN
# 2.箭头函数 : 传入的参数必须匹配够相同的数量，多了取前两个，少了则会出现NaN
例1:
var f = v =>v;
var f = function(v){
return v;
}
eg1:
var f = v => v;
var f = function(v){
return v;
} // undefined
f(4) // 4
例2:
var f = () =>5;
var f = function(){
return 5
};
eg2:
var f = () =>5;
var f = function(){
return 5
}; // undefined
f(2) // 5
f() // 5
例3:
var sum = (num1,num2) => num1 + num2;
var sum = function(num1, num2){
return num1 + num2;
}
eg3:
var sum = (num1,num2) => num1 + num2;
var sum = function(num1, num2){
return num1 + num2;
} // undefined
sum(1,2) // 3
sum() // NaN
sum(3) // NaN
sum(1,2,3) // 3
"""
1.JS中函数的形参可以与实参的个数不对应
传入的参数少了就是undefined，传多了多的就不用
2.函数体代码中有一个关键字 argyments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体
"""
内置对象
// 1.内置对象
var f= new Date(); // undefined
f.getDate() // 5 获取日
f.getDay() // 1 获取星期
f.getMonth() // 11 获取月份
f.getFullYear() // 2022 获取完整年份
f.getYear() // 122 获取1900年到现在的年份
f.getHours() // 18 获取小时
f.getMinutes() // 31 获取分钟
f.getSeconds() // 54 获取秒
f.getMilliseconds() // 850 获取毫秒
f.getTime() // 1670236314850 获取时间戳
// 2.序列化与反序列化
let dd ={name: 'tom', age: 21} // undefined
序列化：
ss = JSON.stringify(dd) // '{"name":"tom","age":21}'
反序列化：
JSON.parse(ss) // {name: 'tom', age: 21}
// 3.正则
定义正则的两种方式
var reg1 =new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}")
// undefined
reg1 结果: /^[a-zA-Z][a-zA-Z0-9]{5,11}/
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
//undefined
reg2 结果: /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
"""
1.全局模式的规律 lastIndex
2.test匹配数据不传默认传入undefined
"""
浙公网安备 33010602011771号