JS基础简介

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;