前端之Javascript

js简介

1.js也是一门编程语言，可以写后端代码
2.js主要用5.1和6版本
3.js的注释:
单行
// asdasdsad
多行
/*
1
2
3
*/
4.两种引入方式：
	1.直接书写
	2.通过src引入js文件
5.js的书写格式：
	js是分号作为语句的结束

js定义变量的两种方式

var x = 10;
let x = 10;

两种定义的区分
var不会自动区分局部变量和全局变量，而let会区全局和局部变量	
n = 10
for n in range(5):
  print(n)
print(n)  
# var 5 		let 10
针对python来说 两个n都在一个名称空间里所以n=4
/*"""
var在for循环里面定义也会影响到全局
let在局部定义只会在局部生效
"""*/

常量的定义

对于python来说,没有真正意义上的常量，只有统一规范用全大写书写的常量
const p = 3.14

变量

'''
js的命名规范：
	字母 数字 下划线 $
python的命名规范：
	字母 数字 下划线
js中支持驼峰体的命名方式：
	TypeOfThem;
python支持下划线的命名方式:
	type_of_them

js的书写位置：
	1.直接在文件中书写
	2.在浏览器页面的console书写
		ps:必须重启当前页面，所赋值的变量才会消失
'''
'''
关键字：
abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile
'''

数据类型

js也是一门面向对象的语言，即一切皆对象
js/python都是动态类语言，不用事先声明变量类型

数值类型（number）

//在script中无论是浮点数还是整数都统一称之number类型/
var a = 11
var b = 1.123123
// typeof与python中type用法相似
typeof(a) //number/
typeof(b) //number/

//特殊的数子类型/
NaN //数值类型，表示"不是一个数字" NOT A NUMBER

//类型转换
// 1.parseInt 转换为数值型
var a = '1231231231231414'
parseInt(a)
// 2.parseFloat 转换为浮点类型
var b = '123.123123141'
parseFloat(b)

//特殊的：
/*
相对于python,javascript中只要字符串的前面有符合转换的数字类型就会进行转化，如果真的没有则显示NaN错误	
*/
var aaaa = '123.123141asdasdadad'
/*
parseInt(aaa)
1231
*/
var bbb = '1adasd'
/*
parseInt(bbb)
1
*/
var cccc  = 'asdasdsadadasdas'
/*
parseInt(cccc)
NaN
*/

字符串类型(String)

python中定义字符串的方式：
	1.单引号（''）
	2.双引号（""）
	3.三引号 ("""""")
javascript中定义字符串的方式：
	1.单引号
	2.双引号
	3.模板字符串（``）,同时可以实现字符串的拼接
	通过${}的方式进行拼接,类似与python中3.5版本以后的f'{}'方法
	var all = `
	my name is ${name},my age is ${age}
	`
	"
	my name is json,my age is 18
	"
字符串的拼接方式：
	1.在python中不支持用+号拼接,而使用专门的join方法
	ps:join方法在容器类型中只允许string类型的拼接
	2.在javascript中支持用+号拼接
	name + age
	"json18"
	typeof(name+age)
	"string"

// 字符串方法
/*
方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割
*/
1.length
name.length
4
2.trim()
context = '  enxet  '  
context .trim()
'enxet'
3.trimLeft()
"enxet  "
4.trimRight()
"enxet  "
5.charAt(N) /返回第N个字符/
context.charAt(4)
"x"
5.indexOf() // 根据值找位置以第一个值得位置作为结果
test.indexOf('rt')
3
//索引以0开始
6.substring(n,m) //切片,此方法不识别负数
test.substring(0,6)
"qwerty
7.slice //切片，识别负数 用法与python[]取值一样
test.slice(0,-1)
"qwertyui"
8.toLowerCase()
9.toUpperCase()
test.concat('asdas','asdasd')
"qwertyuigasdasasdasd"
10.split('分隔符','获取分割后的元素个数')
// 指定个数
size.split(':',2)
["asds", "asdasd"]
// 不指定个数
size.split(':')
["asds", "asdasd", "sadasdsad", "asdasd", ""]
11.concat() // 字符串拼接
test.concat('asdas','asdasd')
"qwertyuigasdasasdasd"

ps:
// 因为js是弱语言类型所以支持不同数据类型的拼接，因为可以转成同样的类型

null和undefined

1.null表示值为空，但是存在值，一般使用在指定一个变量和清空一个变量的：
	name = 'dmw'
	name = null
2.undefined表示的是值不存在，即没有给值

对象

数组

数组就类似于python中的列表(list)方法,可以存放多种数据的类型

var a = [1,1.1,null,false,'sadasdas']

支持正向索引取值,但不支持反向索引取值
	a[1]
	1.1
	a[-1]
	undefined

/*
方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组
*/
l =[111,222,333,444,555,666,777,888,999]
1.length //获取长度
	l.length
	9
2.push() //尾部追加元素，类似于python中的append
	l.push(101010)
	l =[111,222,333,444,555,666,777,888,999]
3.pop() //删除尾部元素
	l.pop()
	1010
	(9) [111, 222, 333, 444, 555, 666, 777, 888, 999]
4.shift() //删除头部元素
	l.shift()
	111
	(8) [222, 333, 444, 555, 666, 777, 888, 999]
5.unshift() //添加头部元素
	l.unshift('asdas')
	9
	(9) ["asdas", 222, 333, 444, 555, 666, 777, 888, 999]
6.slice() //切片 支持正反
	l.slice(1,-1)
	(7) [222, 333, 444, 555, 666, 777, 888]
7.reverse() //切割
	l.reverse()
	 [999, 888, 777, 666, 555, 444, 333, 222, "asdas"]
8.join() //是添加的在前括号的字符在后与python相反
	l.join(':')
	"999:888:777:666:555:444:333:222:asdas"
	python中
	b = ':'.join(a)
	asd:asd
9.concat() //列表添加，类似于python中extend方法
	l.concat([1,123,12,312,3,23])
	(15) [999, 888, 777, 666, 555, 444, 333, 222, "asdas", 1, 123, 12, 312, 3, 23]
10.sort() //对数组进行排序
	l.sort
	(9) [222, 333, 444, 555, 666, 777, 888, 999, "asdas"]
	ps：js是弱类型可支持不同类型的比较，python中不可以

比较重要的三个方法：
1.forEach() /将数组的每一个元素给回调函数，最多传入三个参数,value,index,arr/
	l.forEache(function(value){console.log(value),l)
		/一个参数的话就是元素/
		VM3111:1 222
		VM3111:1 333
		VM3111:1 444
		VM3111:1 555
		VM3111:1 666
		VM3111:1 777
		VM3111:1 888
		VM3111:1 999
		VM3111:1 asdas
	2.l.forEach(function(value,index){console.log(value,index)},l)
		/将值和索引传入/
		VM3134:1 222 0
		VM3134:1 333 1
		VM3134:1 444 2
		VM3134:1 555 3
		VM3134:1 666 4
		VM3134:1 777 5
		VM3134:1 888 6
		VM3134:1 999 7
		VM3134:1 asdas 8
	3.l.forEach(function(value,index,arr){console.log(value,index,arr)},l)
		/返回元素,索引以及来源给回调函数使用/
		VM3139:1 222 0 (9) [222, 333, 444, 555, 666, 777, 888, 999, "asdas"]
		VM3139:1 333 1 (9) [222, 333, 444, 555, 666, 777, 888, 999, "asdas"]
		VM3139:1 444 2 (9) [222, 333, 444, 555, 666, 777, 888, 999, "asdas"]
		VM3139:1 555 3 (9) [222, 333, 444, 555, 666, 777, 888, 999, "asdas"]
		VM3139:1 666 4 (9) [222, 333, 444, 555, 666, 777, 888, 999, "asdas"]
		VM3139:1 777 5 (9) [222, 333, 444, 555, 666, 777, 888, 999, "asdas"]
		VM3139:1 888 6 (9) [222, 333, 444, 555, 666, 777, 888, 999, "asdas"]
		VM3139:1 999 7 (9) [222, 333, 444, 555, 666, 777, 888, 999, "asdas"]
		VM3139:1 asdas 8 (9) [222, 333, 444, 555, 666, 777, 888, 999, "asdas"]

2.splice() /删除元素，并且向列表中添加元素/
	l.splice(start,count,ele) // 起始位,删除个数,添加元素
	使用一 ：
	l.splice(0,2)
	(2) [222, 333]
	使用二：
	l.splice(0,2,111,222,333,444)
	(2) [444, 555]
	(9) [111, 222, 333, 444, 666, 777, 888, 999, "asdas"]
	/有几个元素就添加几个元素,从start定位开始增加/
	使用三：
	l.splice(0,2,[111,222,333,444])
	(2) [111, 222]
	l
	(8) [Array(4), 333, 444, 666, 777, 888, 999, "asdas"]
	/添加列表/
3.map() //映射，返回映射值,共有三个参数,value,index,arr
	l.map(function(value){return values*2},l)
	l1.map(function(value){return value*2},l)
	(8) [2, 462, 46, 246, 246, 26, 24, 6]

运算符

1.++a 与 a++
var a = 10;
// 先让a=10传给b,再让a+1
var b = a++; 
// 先让a+1，再让C绑定a
var c = ++a;
// b=10 c = 12

2.弱比较符与强比较符
==表示的是弱等于会将两边的数据类型不同的进行转换，从而结果可能相同
===表示强比较，不会自动转换数据
1 == '1';
true
1 === '1';
false
1 != '1';
false
1 !=='1';
true

3.逻辑符
&&=and ||=nor ！=not
python中的短路运算可能返回隐形布尔值,js一样
5 && '5'
"5"
5 || '5'
5
!5 && 5;
false

流程控制

if判断条件

1.if(){}
a = 10
if(a=10){console.log('cc')}
cc
2.if(){}else(){}
a=11
if(a=10){console.log('a')}else{console.log('b')}
b
3.if(){}else if(){}else{}
a=12
if(a=10){console.log('a')}else if(a=11){console.log('c')}else{consolo.log('c')}
c

while循环

a = 1
while(i>100){console.log(i);i++}

for循环

for(定义变量,判断条件,变量自增){函数体代码};
for(let i=0;i<11;i++){console.log(i)}
案例：打印列表中的元素
a = [1,123,123,123,123,1,312,]
for(let i=0;i<a.length,i++){console.log(a[i])}

switch

swith将处理不同的结果储存在一个控制流程内部，当触发条件时候运行,r

switch(条件){
	case 条件:
		体代码;
		break;
	case 条件:
		体代码;	
		break;
	...
	default:
		体代码 /当都不符合以上条件时候,默认走个流程/
}	

var a =10
switch(a){
	case 1:
		console.log('1');
		break;
	case 2:
		console.log('2');
		break;
	default:
		console.log('sb')
}
switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

三元表达式

// 条件1 判断条件 条件2？结果一：结果二
 var x = 1>2?33:44
/*
x
44
*/
// python中的三元表达式
a if 判断条件 else b;

函数

在python中声明函数的关键字是def
在js中声明函数的关键字是function 
格式如下function(形参){函数体代码}
1.无参装饰器
function func1(){console.log('i am father')}
2.有参装饰器
function func(x,y){console.log(x,y)}

3.参数多与少的问题
	3.1参数多了怎么办
	func(1,23,3,213,1,312,3)
	1 23 // 参数多了没关系,他默认只接受前两个
	3.2参数少了怎么办
	func(1)
	1 undefined // 参数少了也没有关系,不会报错，而是会显示形参没有被定义

4.arguments
// 可以通过argument关键字来拿到传入的参数个数
//因此可以通过在内部用if判断arguments个数来控制函数
function func(x,y)
	{
	if (arguments.length <2){console.log('传入参数过少')
	}
	else if(arguments.length>2){console.log('传入参入过多')
	}
	else{conslo.log('函数体代码正在执行')
	}
}

5.函数的返回值
关键字与python一致都是return
function func5(x,y){let z=x+y;return z}
如果返回值有过个怎么办？
python会自动将多个元素统合成一个元组返回
JavaScript中只会返回最后一个元素
function func7(x,y){return 111,222,333}
let res = func7(1,2)
res = 333

函数的名称空间查找顺序

函数的名称空间查找顺序与python一致,在定义阶段函数体内的变量名的查找顺序就已经决定好了


var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}
res = 'shenzhen'


var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？
res = 'beijing'

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();
res = 'shanghai'

自定义对象

自定义对象与python中的字典基本一致

1.定义对象的两种方式
方法一：
	let l = {'name':'ww','age':18}
方法二：
	let dict = new object() //空对象
2.操作自定义对象的两种方式
方法一 ：
	dict[keys值]
	// 与python字典一致
方法二：
	dict.name 
	// 与python类对象调用属性一致
3.暴露在外界的值
与dict一样都是keys,通过dict我们可以取出values值

date时间对象

1.date的创建方式
var time=new Date()
// 可以传入参数,传入的时间也可以格式化
var time1 = new Date(2021/1/17 11:11)
// ps：在javascript里,月份是从0-11索引计算的,即输入11其实拿到的是第12个值
let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString()  # 月份从0开始0-11月
"1111/12/11 上午11:11:11"
2.date的一些基本内置函数
d.toLocaleString() // 转为给人看的格式化时间
d.toLocaleDateString() //获取年份
d.toLocaleTimeString() //获取时间
d.getDay() //获取周 Friday等
d.getDate() //获取日
d.getMonth() //获取月份 0-11
d.getFullYear() //获取年份
d.getHours() //获取小时
d.getMinutes() //获取分钟
d.getSeconds() //获取秒
d.getMilliseconds() //获取毫秒
d.getTime() // 获取时间戳

编写代码，将当前日期按“2017-12-27 11:11 星期三”格式输出switch(values){
    case values:
    if(values.getDay==0){
        console.log(values.getFullYear()+'-'+values.getMonth()+'-'+values.getDate()+' '+values.getHours()+':'+values.getMinutes()+' '+'Sunday')}else if(...){...};
        break;
}

json格式

1.在python中序列化与反序列化的方法：
	dumps loads
2.在javascript序列化与反序列化的方法：
	JSON.stringfy()
	JSON.parse()
3.测试：
var a = {'name':'dsb','age'=18,'hobbies':null}
var b = JSON.Stringfy(a)
"{"name":"dsb","age":18,"hobbies":null}"
var c = JSON.parse(b)
{name: "dsb", age: 18, hobbies: null}

RegExp正则表达式

1.正则的创建方式
方法1：
	var re = new RegExp('nbpp')
方法2：
	var re1 = /^[A-Za-z][0-9]{3,9}/
	var re1 = /^[A-Za-z][0-9]{3,9}/g //全局
方法3：
	对于一个字符串文本来说默认自带有match属性，相当于python中的search属性,匹配到一次成功就停止,如果要变成全局就要加在匹配条件后加g
	var sss= 'dsb sb s'
	sss.match(/s/)
	// ["s", index: 1, input: "dsb sb s", groups: undefined]
	sss.match(/s/g)
	 // ["s", "s", "s"]
2.正则全局查找（findall）的LastIndex属性
在js中会对于能够找的的出现一次成功一次失败的现象是因为存在，LastIndex机制，当成功拿到数据时候,索引会到最后一位,而失败以后索引又从新计数为零
	验证：
	re2.test('mcc')
	true
	re2.lastIndex
	3
	re2.test('mcc')
	false
	re2.lastIndex
	3
3.如果对于一个正则什么都不传入,会默认传入undefined	
	验证: 
	var re666 = /undefined/
	
		re666.test(undefined)
		true
		re666.test()
		true
		re666.test('undefined')
		true
		re666.test('zzzz')
		false

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)      返回角的正切。

var x = Math.max(1,2,3,4,5)
...