JS基础简介
一、JS简介
JavaScript(简称'js')是一种具有函数优先的轻量级、解释型或及时编译型的编程语言。虽然它是作为开发web页面的脚本语言而出名，但是它也被用到了很多的非浏览器环境中，JS基于原型编程，多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。
主要功能：
嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。控制cookies，包括创建和修改等。
基于Node.js技术进行服务器端编程。
语言组成：
ECMAScript，描述了该语言的语法和基本对象。
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
# 图JavaScript生成器和迭代器(了解)
二、JS基础
1.js的引入方式
1.在head内script标签内编写
<script> js代码</script>
2.在head内script属性引入外部的js属性
<script src='my.js'> </script>
3.body内最底部通过script标签src属性引入外部js属性(最常用)
ps:注意页面的下载是从上往下的 所以操作标签js代码一定要等待标签加载完毕再执行才可以正常运行
2.基本语法
1.注释语法
// 单行注释
/**/ 多行注释
2.结束符号
分号(;) 很多时候不写也可以
3.变量与常量
js的变量名可以使用数字，字母，下划线，$等组成，不能以数字开头
1.var:声明是全局变量，全局有效
var name = 'jason'
2.let:声明是局部的，只在局部名称空间有效
let name = 'jia'
3.常量声明：常量时不可以重新绑定数据值
const pi = 3.14
# 注意：
1.变量名是区分大小写的
2.推荐使用驼峰式命名规则
3.保留字不能用作变量名
4.js是动态类型，变量名绑定的数据值类型不固定
三、基本数据类型
1.数值类型(包括了整型和浮点型)
js不分整型和浮点型，就只有一种数字类型，即所有的数值都是数字类型
在js中查看数据类型的方法：typeof
1.js中只有数字一种类型
var a = 12.33 # typeof(a) ---> 'number'
var b = 12 # typeof(b) ---> 'number'
var c = 12e4 # typeof(c) ---> 'number'
var d = 12e-4 # typeof(d) ---> 'number'
2.NaN是一个特殊的数字，表示Not A Number,不是一个数字
parseInt("12") # 12
parseInt("12.33") # 12
parseFloat('12.35') # 12.35
parseInt("ABC") # NaN
2.字符串类型
默认是使用单引号和双引号，模板字符串是增强版的字符串，用反引号(``)标识，它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
1.字符串拼接(使用+号拼接)
var h1 = '今天吃到了娟带的大虾，很好吃，也很开心'
var h2 = '今天和好几天没见的薇薇抱了一下，真开心，有这些朋友在身边，是最幸福的事情'
var h3 = h1 + h2
'今天吃到了娟带的大虾，很好吃，也很开心今天和好几天没见的薇薇抱了一下，真开心，有这些朋友在身边，是最幸福的事情'
2.统计长度(length)
h3.length -----> 55
3.移除空白
var h4 = ' 以后有什么事情自己消化，不要全部倾诉给他，他也会烦的，记住！ '
h4.trim() # 移除两边的空白字符
'以后有什么事情自己消化，不要全部倾诉给他，他也会烦的，记住！'
h4.trimLeft() # 移除左边的空白字符
'以后有什么事情自己消化，不要全部倾诉给他，他也会烦的，记住！ '
h4.trimRight() # 移除右边的空白字符
' 以后有什么事情自己消化，不要全部倾诉给他，他也会烦的，记住！'
4.切片操作
js中使用substring(start,stop),slice(start,stop)切片，前者不支持负数索引，后者支持
var h5 = '好好努力，精神独立，经济独立，改掉对别人的依赖，独立，自强。'
h5.substring(1,10)
'好努力，精神独立，'
h5.slice(4,19)
'，精神独立，经济独立，改掉对别'
h5.slice(1,-17)
'好努力，精神独立，经济独'
h5.slice(-1,10)
'' # 支持负数索引，但是不支持倒着切
5.大小写转换
js中使用toLowerCase(),toUpperCase()转大小写
var s1 = 'abCD'
undefined
s1.toUpperCase()
'ABCD'
s1.toLocaleUpperCase()
'ABCD'
6.切割字符串
js 中使用split对字符串进行切割
h6.split('')
(6) ['1', '2', '3', '4', '5', '6']
.split(splitter,limit)-->(splitter；按照什么分割，limit:分割后返回完成后的列表中的几个数据(从左往右))
7.字符串的格式化
js中使用格式化字符串(小顿号esc下面的那个键搭配${}使用)
var h7 = '现在就只有一件事，好好学习，每天做好预习复习，充实每一天，别再把心思放在无关的事情上啦！'
var h8 = 'ヾ(◍°∇°◍)ﾉﾞ'
console.log(`my target is ${h7} and ${h8}`);
VM3675:1 my target is 现在就只有一件事，好好学习，每天做好预习复习，充实每一天，别再把心思放在无关的事情上啦！ and ヾ(◍°∇°◍)ﾉﾞ
8.布尔类型(boolean)
js --->布尔值:true,false
false ---> ""(空字符串),0,null,NaN,underfined
Python --->布尔值:True,False
false ---> ""(空字符串),0,None,空字符串，空列表，空字典
var h9 = 123
var h10
Boolean(h9) ----> true
Boolean(h10) ----> false
9.null和undefined
null表示值为空(就是曾经拥有过)
undefined表示没有定义(从来没有过)
10.数组(array)
在python中叫列表，在其它编程语言里几乎都叫数组。
11.对象(object)
js中一切皆对象
对象之自定义对象(Object)>>>:类似于python的字典
let h11 = {'name' : 'jia','pwd' : 123}
typeof h11 ---> 'object'
let d2 = new Object()
typeof d2 ---> 'object'
h11['name']
'jia'
h11.name
'jia'
h11.name = 'jason'
'jason'
| js中的方法 | js中的说明 | VS | Python中的方法 | Python中的说明 |
|---|---|---|---|---|
| .length() | 数组大小 | .len() | 统计列表中数据值的个数 | |
| .push(ele)() | 尾部追加元素 | .append() | 尾部追加元素(insert：指定位置插入，extend:扩展列表) | |
| .pop() | 获取尾部的元素 | .pop() | 删除尾部的数据值 | |
| .unshift(ele)() | 头部插入元素 | .insert() | 指定位置插入(可以利用索引在头部插入元素) | |
| .shift() | 头部移除元素 | .remove() | 利用索引移除头部元素 | |
| .slice() | 切片 | [,] | 索引切片 | |
| .reverse() | 反转 | .reverse() | 将列表中的数据从右往左反转 | |
| .join() | 将数组元素拼接成字符串 | .join() | 拼接列表的元素 | |
| .concat() | 连接数组 | .extend() | 扩展列表 | |
| .sort() | 排序 | .sort() | 默认升序 | |
| .forEach() | 将数组的每个元素传递给回调函数 | |||
| .splice() | 删除元素，并向数组添加新元素 | |||
| .map() | 返回一个数组元素调用函数处理后的值的新数组 | map映射 | 内置函数，老数据值变成新的数据值 |
四、常见运算符
1.算术运算符
+ - * / % ++(递加) --(递减) **(幂)
var s = 10
var s1 = s++; # 先赋值再自增1 10
var s2 = ++s # 先自增1再赋值 12
2.赋值运算符
= += -= *= /= %=
3.比较运算符
==(等于，弱) ===(等值等型，强) ！==(值不等 弱) ！===(值不等 强)
'5' == 5 ----> true 'js会自动转换成相同的数据类型比较值是否一样'
'5' === 5 ----> false
# 上面这种情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误。
4.逻辑运算符
&&(与) ||(或) ！(非)
5.类型运算符
typeof() # 返回变量的类型
五、流程控制
1.单if分支
if(条件){
条件成立执行的代码
}
2.if....else分支
if(条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
3.if....else if...else分支
if(条件1){
条件1成立执行的代码
}else if(条件2){
条件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:
条件都不满足执行的代码
}
5.for循环：
for(起始条件;循环条件;条件处理){
循环体代码
}
6.while循环：
while(循环条件){
循环体代码
}
7.三元运算
python ： 值1 if 条件 else 值2
js： 条件?值1:值2
eg:
2 > 3 ? '你好':'侬好'
'侬好'
六、函数
语法：
function 函数名(形参){
//函数注释
函数体代码
return 返回值
}
# 匿名函数
var l1 = function(a,b){
return a+b
}
# 箭头函数
var f = v =>v;
var f=function(v){
return v
}
'''
python 中函数的定义：
def 函数名(形参):
'''函数注释'''
函数体代码
return 返回值
'''
1.js函数体代码中的形参与实参可以不对应
传少了就是undefined 传多了不用
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体
七、内置函数
var d = new Date()
Mon Dec 05 2022 20:37:27 GMT+0800 (中国标准时间)
console.log(d.toDateString())
VM4784:1 Mon Dec 05 2022
d.getDate() # 获取日
5
d.getDay() #获取星期
1
d.getMonth() # 获取月（0-11）
11
d.getFullYear() # 获取完整年份
2022
d.getYear() # 获取年
122
d.getHours() # 获取小时
20
d.getMinutes() # 获取分钟
37
d.getSeconds() # 获取秒
27
d.getMilliseconds() # 获取毫秒
755
d.getTime() # 返回累计毫秒数(从1970/1/1午夜)
1670243847755
八、序列化与反序列化
在JSON中序列化：
JSON.stringify() # 将数值转换为JSON格式
JSON.parse() # 将JSON格式转换为原来的格式
eg:
let d9 = {name:'jia',age:18}
undefined
JSON.stringify(d9)
'{"name":"jia","age":18}'
let ss = '{"name":"jia","age":18}'
undefined
JSON.parse(ss)
{name: 'jia', age: 18}
九、正则表达式
# 创建正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; # 推荐使用(简化)
全局匹配：在正则表达式的最后添加一个字母g
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;