目录
JavaScript的简介
# JavaScript简称js
ECMAScript的历史
ECMAScript 5.1
ECMAScript 6
一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
● 核心（ECMAScript）
● 文档对象模型（DOM） Document object model (整合js，css，html)
● 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
JavaScript语言基础
1. 书写位置
"""
1. pycharm 直接创建js文件
2. 在html文档中得script标签内书写
3. 在浏览器的控制台中也可以写
"""
浏览器内编写js代码 换行方法：Shift+空格
2. 引入方式
1.head内script标签内编写
2.head内script标签src属性引入外部js资源
<script src="myjs.js"></script>
3.body内最底部通过script标签src属性引入外部js资源 (最常用)
注意事项： 页面的下载是从上往下的，所以操作js代码一定要等到页面加载完毕在执行才可以正常运行，所以script标签应当放于网页的最底部。
3. 注释
// 单行注释
/*
多行注释
多行注释
多行注释
*/
4. 结束符
js的每一行代码都是使用;结尾
# 注意：;不是必须写的，你也可以不写，但是推荐你都写上
5. 变量
# 声明变量两种方式
# es5的语法
var 变量名 = 值;
var name='kevin';
# es6的语法
let 变量名 = 值;
let name='kevin';
'''我们在写js代码的时候，都选择es6版本，因为es6兼容es5'''
6. 变量名的命名规范
# 1. python中推荐的是下划线
# 2. js中其实我也推荐你使用下划线，驼峰法也是可以
# 3. 通过字母下划线数字$
# 4. 其余的命名规范参照python的命名规范
7. 常量
const 变量名=值;
const pi = 3.1415926;
# 1.python中没有真正的常量，默认全大写就是常量
# 2. js中有真正的常量，定义常量后不能修改
8. 类型转换
var a=1;
var b='123';
console.log(parseInt(b))#转为int类型
9.js中查看变量的类型
var name='hello';
var b=1.11;
console.log(typeof name) #string
consloe.log(typeof b); #number
10. NaN的介绍
NaN: not a number
数据类型
js也是一门基于面向对象的语言，即一切皆对象!!!
1. js和python是一门拥有动态类型的语言
username='kevin'
username='jack'
username---->jack
var name='a';
var name='b';
name---->b
2. 数值(Number)
#js中不区分整型和浮点型，统称为数值类型(Number)
数据类型：
1. 整型
2. 浮点型
3. NaN#not a number不是一个数字
3. 字符串(String)
var str = 'kevin';
var str = "kevin";
var str = `kevin`;
var str = '''kevin'''; # 三引号不行
字符串拼接
# js中拼接字符串用+
var name='hello';
var name1='word';
console.log(name+name1)
>>>helloword
console.log(name+1)
>>>hello1
4.布尔值
# 1. python中的布尔值是首字母大写
True
False
# 2. js中的布尔值是全小写
true
false
# 布尔值就是代码的真和假，在js中以下为假
0 空字符串 NaN null undefined
模板语法（es6的语法）
模板语法（es6的语法）
var name ='jack';
var age = 19;
var str = `my name is ${name}, my age is ${age}`;
console.log(str)
>>my name is jack,my age is 19
null和undefined的区别
# 1. null表示值是空，一般在需要指定或清空一个变量时才会使用(曾经拥有 但是没了)
var name = 'kevin';
var name = null;
# 2. undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined(从来没有)
var a;
var b=1;
console.log(a); //undefined
console.log(b); //1
# 3. 就是函数无明确的返回值时，返回的也是undefined
function f1(a,b){
console.log(a+b);
}
ret=f1(1,2) //3
console.log(ret) //undefined
字符类型内置方法
字符串
var s = ' tank '
console.log(s.trim()) # 去除两边空白
// 'tank'
console.log(s.length) # 统计长度
// 6
console.log(s.trimLeft())# 去除左边空白
// 'tank '
console.log(s.trimRight())# 去除右边空白
// ' tank'
console.log(s.charAt(1)) # 返回1索引位的字符
// 't'
console.log(s.concat('nb')) # 拼接
//' tank nb'
console.log(s.indexOf('ank')) # 获取字符对应的索引值 多个字符返回开头的字符的索引值,不存在的字符返回-1
// 3
console.log(s.slice(2,4)) # 切片操作顾头不顾尾
// 'ta'
console.log(s.toUpperCase()) # 转大写
//' TANK '
s4.toLowerCase() # 转小写
console.log(s.split('a')) # 分割 可以在后面加上需要几个值，不写默认获取全部
// [' t', 'nk ']
console.log(s.split('a',1))
// [' t']
#常用方法
.length 返回长度
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.charAt() 返回索引位的字符
.concat() 拼接
.indexOf() 获取对应的索引值 多个字符返回开头的字符的索引值
.slice() 切片 顾头不顾尾
.toLowerCase() 小写
.toUpperCase() 大写
.split() 分割 可以在后面加上需要几个值，不写默认获取全部
数组
var l = [1, 2, 3, 4]; # 一维数组
typeof l;
# 数组中可以存放任意的数据类型
# 取值
'''通过索引取值，索引从0开始，其他都跟python中得列表一样'''
# 多维数组
var lll = [1, 2, [3, 4,[5, 6]]]; # 三维数组
var l=[1,2,3,4];
console.log(l.length)//4
l.push(66)
console.log(l)//[1, 2, 3, 4, 66]
console.log(l.pop())//4
console.log(l)//[1, 2, 3]
l.unshift(77)
console.log(l)//[77, 1, 2, 3, 4]
console.log(l.shift())//1
console.log(l)//[2, 3, 4]
console.log(l.slice(0,3))//[1, 2, 3]
console.log(l.reverse())//[4, 3, 2, 1]
console.log(l.join('|'))// 1|2|3|4
console.log(l.concat([9,8,7]))//[1, 2, 3, 4, 9, 8, 7]
var l1=l.concat([9,8,7])
console.log(l1.sort())//[1, 2, 3, 4, 7, 8, 9]
# 常用方法：
.length 数组的长度
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素
.slice(start, end) 切片
.reverse() 反转
.join(seq) 将数组元素连接成字符串
.concat(val, ...) 连接数组
.sort() 排序
forEach的用法
- 格式
语法：
forEach(function(currentValue, index, arr), thisValue)
| 参数 | 描述 |
|---|---|
| function(currentValue, index, arr) | 必需。 数组中每个元素需要调用的函数。 函数参数: |
| 参数 | 描述 |
| currentValue | 必需。当前元素 |
| index | 可选。当前元素的索引值。 |
| arr | 可选。当前元素所属的数组对象。 |
| thisValue | 可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值 |
- 例
var arr = ['kevin', 'tank', 'jerry', 'tony'];
arr.forEach(function (value){
console.log(value);
})
// kevin
// tank
// jerry
// jerry
arr.forEach(function (value, index) {
console.log(value, index);
})
// kevin 0
// tank 1
// jerry 2
// jerry 3
arr.forEach(function (value, index, array) {
console.log(value, index, array);
})
// kevin 0 ['kevin', 'tank', 'jerry', 'tony']
// tank 1 ['kevin', 'tank', 'jerry', 'tony']
// jerry 2 ['kevin', 'tank', 'jerry', 'tony']
// jerry 3 ['kevin', 'tank', 'jerry', 'tony']
map
语法：
map(function(currentValue,index,arr), thisValue)
| 参数 | 描述 |
|---|---|
| function(currentValue, index,arr) | 必须。函数，数组中的每个元素都会执行这个函数 函数参数: |
| 参数 | 描述 |
| currentValue | 必须。当前元素的值 |
| index | 可选。当期元素的索引值 |
| arr | 可选。当期元素属于的数组对象 |
| thisValue | 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined" |
var arr=[11,22,33,44];
arr1=arr.map(function (value,index,array){
return value+1;
});
console.log(arr1)//[12, 23, 34, 45]
运算符
算数运算符
+ - * / % ++ --
#与python中一样，只有 ++ --不一样
var x=10;
var res1=x++; # 先赋值 后递增
var res2=++x; # 先递增 后赋值
console.log(res1)#10
console.log(res2)#12
"这里由于的x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值！"
比较运算符
> >= < <= != == === !==
!== # 值不等 强不等于
1 == "1" // true 弱等于
1 === "1" // false 强等于,既比较数值也比较类型
"上面情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误"
逻辑运算符
and ================> &&
or =================> ||
not=================> !
流程控制
if
1.单if分支
if (条件){
条件成立执行的代码
}
2.if ...else分支
if (条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
var a = 10;
if (a > 5) {
console.log("yes");
console.log(("no"))
} else {
console.log("no");
}
3. if...else if ...else分支
if (条件1){
条件成立执行的代码
}else if(条件2){
条件1不成立执行的代码
}else{
条件1和2都不成立执行的代码
}
# 分支结构中else if很多 可以使用switch语法
var a = 10;
if (a > 5) {
console.log("a > 5");
} else if (a < 5) {
console.log("a < 5");
} else if (a < 5) {
console.log("a < 5");
} else {
console.log("a = 5");
}
switch
switch语法:
提前列好每一个语法 然后去执行
switch(条件){
case 条件1:
条件1成立执行的代码;
break;
case 条件2:
条件2成立执行的代码;
break;
default:
条件都不满足执行的代码
}
# switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
var day = 10;
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
console.log("Monday");
console.log("Monday");
console.log("Monday");
console.log("Monday");
case 2:
break
case 3:
case 4:
break
case 5:
case 6:
case 7:
console.log(123)
break
default:
console.log("...")
}
for循环
语法：
for(起始条件;循环条件;条件处理){
循环体代码
}
var arr = [11, 22, 33, 44];
for (var i=1; i<arr.length;i++) {
console.log(arr[i]);
}
// 22
// 33
// 44
let d1 = {'name':'jason','age':18}
for (let k in d1){
console.log(k)
}
// name
// age
for (let k in d1){
console.log(d1[k])
}
// jason
// 18
while循环
语法：
while(循环条件){
循环体代码
}
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
三元运算符
var a = 1;
var b = 2;
var c = a > b ? a : b //2
"这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用"
# 嵌套
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;
console.log(x) //10
函数
//定义函数
function 函数名(形参){
// 函数注释
函数体代码
return 返回值
}
// 1.普通函数无参
function f1() {
console.log("Hello world!");
}
f1();// 调用函数：函数名加括号
//2.带参数的函数
function sum(a,b){
console.log(a,b);/// b参数如果不传就是undefined
}
sum(1,2);//sum(1,2,3);少传参数或多传参数都可以，不会报错
// 3.带返回值的函数
function sum(a,b){
return a+b;
}
var res=sum(1,2)
console.log(res);//3
//关键字arguments
function sum(a, b) {
console.log(a, b);//1 2
console.log(arguments)//Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
console.log(arguments[0]) //1,可通过索引取值
}
ret=sum(1,2,3,4,5)
console.log(ret)//3
// 4.匿名函数方式
var sum = function(a, b){
return a + b;
}
ret=sum(1,2);
console.log(ret) //3
// 5.箭头函数（主要用于 处理简单的业务逻辑 类似于python中匿名函数）
var func1=v =>v;//func1为函数名，箭头左边的是形参，右边的是返回值
//等同于
var func1= function(v){
return v
}
//如果形参不需要参数用括号括起来
var f = () => '我滴哥';
//等同于
var f = function(){return '我滴哥'};
//形参需要多个参数
var func2 =(arg1,arg2) =>arg1+arg2
//等同于
var func2 = function(arg1,arg2){
return arg1+arg2
}
全局变量和局部变量
全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它
局部变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它,只要函数运行完毕，本地变量就会被删除
作用域:
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！
//eg1:
var city='beijing';
function f(){
var city='shanghai';
function inner(){
var city='nanjing';
console.log(city);
}
inner();
}
f();//主要看console.log(city);的名称空间打印位置
//>>nanjing
// eg2:
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar; // 函数名就是函数bar的内存地址
}
var ret = f(); // 把f的返回值也就是bar的内存地址赋值给ret
ret(); //相当于bar()
//>>BeiJing
// eg3:
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;//返回inner的内存地址
}
var ret = f();//把f的返回值也就是inner的内存地址赋值给ret
ret();//相当于inner()
//>>ShangHai
内置对象
自定义对象
JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键，js中得对象你就看成是python中的字典，kv键值对的形式。
// 定义一个对象出来
var obj ={'name':'kevin','age':18};
console.log(typeof obj);//object
console.log(obj);//{name: 'kevin', age: 18}
//取值
console.log(a.name)//kevin
//增值
obj.salary=2000;
console.log(obj)//{name: 'kevin', age: 18, salary: 2000}
//改值,key存在改值，key不存在增加值
obj.name='tank';
console.log(obj);//{age: 18, salary: 2000, name: 'tank'}
//删除关键字delete
delete obj.name
console.log(obj)//{age: 18, salary: 2000}
创建新对象:
var person=new Object(); // 创建一个person对象
person.name="Alex"; // person对象的name属性
person.age=18; // person对象的age属性
console.log(person) //{name: 'Alex', age: 18}
Date对象
# 在js中处理时间对象
var d1 =new Date();// 得到一个日期对象
console.log(d1.toLocaleString());//获取当前时间:2023/4/17 17:08:03
console.log(d1.toUTCString());//获取utc当前时间:Mon, 17 Apr 2023 09:12:36 GMT
console.log(d1.getDate());//获取日17
console.log(d1.getDay());//获取星期1
console.log(d1.getMonth());//获取月（0-11）3
console.log(d1.getFullYear());//获取完整年份2023
console.log(d1.getYear());//获取年 从1900年至今123
d1.getHours () // 获取小时
d1.getMinutes () // 获取分钟
d1.getSeconds () // 获取秒
d1.getMilliseconds () // 获取毫秒
console.log(d1.getTime()) // 返回累计毫秒数(从1970/1/1午夜)
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();// 02 03 04 05 15
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();
//>>2023-4-17 17:27 星期一
JSON对象
# 在python中进行序列化和反序列化
import json
json.dumps() # 序列化
json.loads() # 反序列化
# 在js中，它也有相对于的序列化和反序列化
JSON.stringify() # 序列化
JSON.parse() # 反序列化
var str1={'name':'alex','age':18};
var obj =JSON.stringify(str1);//序列化
console.log(obj);//{"name":"alex","age":18}
var obj1=JSON.parse(obj);//反序列化
console.log(obj1);//{name: 'alex', age: 18}
RegExp对象
'''正则表达式是一门独立的语言，跟语言没有关系，好多地方都可以用的
在python中如果要使用正则 需要借助于re模块
在js中需要创建正则对象
'''
#定义正则表达式的两种方式
第一种：#new RegExp
var res = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
第二种：#//
var res1 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/;
#正则校验数据
var res = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var res1 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/;
console.log(res.test('jason666'));//true
console.log(res1.test('jason666'));//true
var s1 = 'egondsb dSb dsb';
res=s1.match(/s/) // 默认情况下，找到一个目标元素就停止查找
console.log(res) //['s', index: 5, input: 'egondsb dSb dsb', groups: undefined]
#全局匹配
var s1= 'egondsb dSb dsb';
res=s1.match(/s/g)//(2) ['s', 's']，后面小g可获取所有s，g====>global----->全局的------->全部匹配
res=s1.match(/s/gi)//(3) ['s', 'S', 's'] 后面i可获取不分大小写字母s，i: ignore（忽略）
console.log(res)
Math对象
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
console.log(Math.abs(-10));//10
console.log(Math.random());//0.3228368611814363
console.log(Math.max(1,10));//10