day54——js总体概要

一、变量

变量的命名规范

1. 变量只能是数字、字母、下滑线、$ (python中只能是数字、字母、下划线)
2. js中变量推荐使用驼峰体命名：userName或者UserName，首字母大小写无所谓（py中变量推荐使用数字、字母、下划线的命名方式如：user_name)。
3. 不能用关键字作为变量名，这个规则什么语言都适用。

js代码的书写位置

1. 可以单独开设js文件进行书写

2. 在浏览器提供的console界面也能进行书写

   """
   在用浏览器书写js的时候 左上方的清空按钮只是清空当前页面 代码其实还在
   		如果你想要重新来 最好重新开设一个 页面
   		(在使用浏览器书写 你自己的js代码的时候推荐你在 自己的html页面打开)"""
   

数据类型

js跟python都是面向对象的编程语言，还是那句话，一切皆对象。

ps：js语言类型

"""
跟python一样js也是一门动态的语言
动态语言是在运行时确定数据类型的语言。变量使用之前不需要类型声明，通常变量的类型是被赋值的那个值的类型,多数静态类型语言要求在使用变量之前必须声明数据类型"""
name = 'tom'
name = 123
name = [1,2,3]
# name 在运行前可以赋值任意的类型
# 有一些静态的语言定义的时候必须指定一种数据类型，之后不能更改数据内型

数值类型(number)

var a = 11;  //python：a = 11
var b= 11.11;

// 如何查看当前数据的数据类型
typeof a;  //python：print(type(a))
typeof b;  
// "number"  python：<class 'int'>

// 特殊的NaN:数据类型，表示的意思是：“不是一个数字” NOT A NUMBER

// 类型装换
parseInt()  //python：int()
parseFloat()  //python：float()

parseInt('123')
123
parseFloat('11.11')
11.11
parseInt('11.11')  //小数字符，转整型只取整数部分
11
parseInt('123a.b.c123adc123')  //开头为数字，包含字母或其他字符，只取开头的数字
123
parseInt('abc123abc123')  //开头不为数字，结果为NaN
NaN

字符类型（string）

var s = 'jason'  //python：s = 'jason'
undefined
typeof s;
//"string"

var s1 = "jason"
undefined
typeof s;
//"string"

var s2 = '''jason'''
var s2 = """jason"""
//VM665:1 Uncaught SyntaxError: Unexpected string     不支持三单/双引号


// 模版字符串，
var s3=`
上上下下
左右左右
BABA
我有三十条命`;
 typeof s3
// "string"
// 模版字符串除了可以定义多行文本之外还可以实现格式化字符串操作


// 书写${} 会自动去前面早大括号里面的变量对应的只，括号内的变量没有定义就直接报错 ,python:f'{}'

var name = 'jason';
var age = 78;
var sss = `
my name is ${name} and my age is ${age}
`
sss
// my name is jason and my age is 18

var s4 =`
my name is ${superman}`
// VM1140:1 Uncaught ReferenceError: namemmmmm is not defined
// ps：1 在书写js代码的时候，不要去管向左的箭头
//     2 在python中不推荐使用+做字符串的拼接
//     3 而在js中推荐直接使用+做拼接
name +age;
//"jason18"

字符串类型常用方法

"""
.length	返回数据的长度，元素的个数————python：len()
.trim()	删除字符串两边的空白————python：.strip()
.trimLeft()	只删除字符串左边的空白————python：.lstrip()
.trimRight() 只删除字符串右边的空白————python：.rstrip()
.charAt(1) 返回索引为1的元素————python：str[1]
.concat(value,...)  拼接
	联想：
	MySQL
		concat
		concat.ws
		group_concat
	python
		join
.indexOf(substring,start)  子序列索引位置————python：.index()
.substring(from,to)  根据索引范围获得子序列————python：str[from:to]
.slice(start,end)  切片————python：str[from:to]
.toUpperCase()  字符串字母全大写————python：.upper()
.toLowerCase()  字符串字母全小写————python：.lower()
.split(delimiter,limit)  切分，结果为数组，需要注意的是第二个指的是切完后拿多少个元素，python中指的是切多少次。"""

练习代码

undefinedvar name = 'egon'
undefined

name.length
4

var name1 = '  egon  '
undefined
name1
"  egon  "
name1.trim()
"egon"
name1.trimLeft()
"egon  "
name1.trimRight()
"  egon"

var name2 = '$$jason$$'
undefined
name2.trim('$')  # 不能加括号指定去除的内容
"$$jason$$"

name2.charAt(0)
"$"
name2.indexOf('as')
3

name2.substring(0,5)
"$$jas"
name2.slice(0,5)
"$$jas"
name2.substring(0,-1)  # 不识别负数
""
name2.slice(0,-1)  # 后面推荐就使用slice就可以
"$$jason$"


var name3 = 'eGoN123666HahA'
undefined
name3.toLowerCase()
"egon123666haha"
name3.toUpperCase()
"EGON123666HAHA"
var name = 'tank|hecha|liaomei|mengsao|...'
undefined

name.split('|')
(5) ["tank", "hecha", "liaomei", "mengsao", "..."]
name.split('|',2)
(2) ["tank", "hecha"]0: "tank"1: "hecha"length: 2__proto__: Array(0)
name.split('|',10)  # 第二个参数不是限制切割字符的个数还是获取切割之后元素的个数
(5) ["tank", "hecha", "liaomei", "mengsao", "..."]


name.concat(name1,name2)
"tank|hecha|liaomei|mengsao|...  egonDSB  $$jason$$"
var p = 1111
undefined
name.concat(p)  # js是弱类型(内部会自动转换成相同的数据类型做操作)
"tank|hecha|liaomei|mengsao|...1111"


l = [1,2,3,4,5,6,7]
res = '|'.join(l)  # 直接报错
print(res)

布尔值(boolean)

"""
1. 在python中布尔值是首字母大写的
	True
	False
2. 在js中布尔值是全小写的
	true
	false
3. js中布尔值为false的有如下这些：
	空字符串、0、null、undefined、NaN
"""

null与undefined

"""
null
	表示值为空 一般都是指定或者清空一个变量时使用
	name = 'jason'
	name = null

undefined
	表示声明了一个变量 但是没有做初始化操作（没有给值）
	函数没有指定返回值的时候 返回的也是undefined"""

点下面链接获得一个生动而形象例子，可以帮助记忆null与undefined的区别。

https://www.cnblogs.com/Dominic-Ji/p/9111021.html

对象

数组

(类似于python中的列表 [] )

var l = [11,22,33,44,55]  // python:l = [11,22,33,44,55]

typeof l  // python:type(l)
// "object"

var l1 = [11,'adcd',11,11,true,]  // 和python相同，列表中也支持存放多种类型的数据
// undefined

l1[1]  // 不支持负数索引，python中支持负数索引。
// undefined

var l = [111,222,333,444,555,666]
// undefined

l.length
// 6

l.push(777)  // python:l.append(777)    往末尾追加
// 7

l
// (7) [111, 222, 333, 444, 555, 666, 777]

l.pop()  // python:l.pop()     从末尾删
l
// (6) [111, 222, 333, 444, 555, 666]

l.unshift(123)  // python:l.insert(0)   往头部插入值
l
// (7) [123, 111, 222, 333, 444, 555, 666]

l.shift()  // python:l.pop(0)   从头部删除值
l
// [111, 222, 333, 444, 555, 666]

l.slice(0,3)  // python:l[0:3]    切片两个参数指定开始和结束，顾头不顾尾
// (3) [111, 222, 333]

l.reverse()  //python:l.reverse()   位置反转，第一个变为最后一个，第二个变为倒数第二个 
// (6) [666, 555, 444, 333, 222, 111]

l.join('$')  //python:'$.join(l)'   跟python刚好相反，这里可以做类型转换，python中列表的元素必须是字符串
// "666$555$444$333$222$111"

l.concat([111,222,333])  // python:l.extend([111,222,333])   往末尾扩展多个元素
// (9) [666, 555, 444, 333, 222, 111, 111, 222, 333]

l.sort()  // python:l.sort()   排序
// (6) [111, 222, 333, 444, 555, 666]

三个比较重要的方法

var ll = [111,222,333,444,555,666]
ll.forEach(function(value){console.log(value)},ll)
VM2277:1 111  # 一个参数就是数组里面每一个元素对象
VM2277:1 222
VM2277:1 333
VM2277:1 444
VM2277:1 555
VM2277:1 666

ll.forEach(function(value,index){console.log(value,index)},ll)
VM2346:1 111 0  # 两个参数就是元素 + 元素索引
VM2346:1 222 1
VM2346:1 333 2
VM2346:1 444 3
VM2346:1 555 4
VM2346:1 666 5
undefined
ll.forEach(function(value,index,arr){console.log(value,index,arr)},ll)  # 元素 + 元素索引 + 元素的数据来源
VM2430:1 111 0 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 222 1 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 333 2 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 444 3 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 555 4 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 666 5 (6) [111, 222, 333, 444, 555, 666]
undefined

ll.forEach(function(value,index,arr,xxx){console.log(value,index,arr,xxx)},ll)  # 最多三个
VM2532:1 111 0 (6) [111, 222, 333, 444, 555, 666] undefined
VM2532:1 222 1 (6) [111, 222, 333, 444, 555, 666] undefined
VM2532:1 333 2 (6) [111, 222, 333, 444, 555, 666] undefined
VM2532:1 444 3 (6) [111, 222, 333, 444, 555, 666] undefined
VM2532:1 555 4 (6) [111, 222, 333, 444, 555, 666] undefined
VM2532:1 666 5 (6) [111, 222, 333, 444, 555, 666] undefined
  
  

ll
(6) [111, 222, 333, 444, 555, 666]
ll.splice(0,3)  # 两个参数 第一个是起始位置 第二个是删除的个数
(3) [111, 222, 333]
ll
(3) [444, 555, 666]
ll.splice(0,1,777)  # 先删除后添加
[444]
ll
(3) [777, 555, 666]
ll.splice(0,1,[111,222,333,444])
[777]
ll
(3) [Array(4), 555, 666]



var l1 = [11,22,33,44,55,66]
undefined
l1.map(function(value){console.log(value)},l1)
VM3115:1 11
VM3115:1 22
VM3115:1 33
VM3115:1 44
VM3115:1 55
VM3115:1 66
l1.map(function(value,index){return value*2},l1)
(6) [22, 44, 66, 88, 110, 132]
l1.map(function(value,index,arr){return value*2},l1)
(6) [22, 44, 66, 88, 110, 132]

运算符

# 算数运算
var x = 10;
var res1 = ++x;
var res2 = x++;
res1 12 
res2 10
# 1 ++表示自增一，类似于python中的+=1增量赋值
# 2 加号在前表示先自增再赋值，加号在后表示先赋值在自增

# 比较运算符
1 == '1'  # 弱等于   内部自动转换成相同额数据类型进行比较了
true

1 === '1'  # 强等于   内部不做类型转换
false

1 != '1' 
false

1 !== '1'
true

# 逻辑运算符
  # python中： and   or  not
  # js中：     &&    ||   !
5 && '5'
'5'

0 || 1
1

!5 && '5'
false

"""
ps：在进行判断的时候才返回的是布尔值
"""

# 赋值运算符
# 跟python相同
= += -= *= ....

流程控制

"""
定义函数需要用到的关键字：
	python：def
	    js: function"""

# js 定义函数个格式
function 函数名 (形参1，形参2，形参3...){函数体代码}

# 无参函数
function func1(){
    console.log('hello world')
}
# 函数调用   和python一样也是加括号调用，触发函数电梯的执行
func1()

# 有参函数
function func2(a,b){
    console.log(a,b)
}
"""
js有参函数传参不严谨，
	传多了只接收形参对应个数的实参
	传少了有几个实参接收几个
	arguments关键字能接收所有传入的实参"""
# 正常传参
func2(1,2)
# 1,2

# 传多了
func2(1,2,3)
# 1,2

# 传少了
func2(1)
# 1

#关键字arguments
function func2(a,b){
    console.log(arguments)
    consloe.log(a,b)
}
func2(1,2,3,4)
"""
Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
1,2
"""

function func2(a,b){
    if(arguments.length<2){
        console.log('传少了')
    }else if (arguments.length>2){
        console.log('传多了')
    }else{
        console.log('正常执行')
    }
}


# 函数的返回值，使用的关键字和python中使用的一样都是return
function index(){
    return 666
}
function index(){
    return 666,777,888,999
}
res = index();
# 999    只能最后一个python中return后面跟多个元素，调用的时候会返回具有多个元素的元组。

# js不支持解压赋值，加压赋值是python的特点。


# 匿名函数 就是没有名字，需要用一个变量名来接收。
function(){
    console.log('哈哈哈')
}

var res = funtion(){
    console.log('嘤嘤嘤')
}


# 箭头函数(要了解一下)  主要用来处理简单的业务逻辑 类似于python中的匿名函数
var func1 = v => v;  """箭头左边的是形参 右边的是返回值"""
等价于
var func1 = function(v){
  return v
}

var func2 = (arg1,arg2) => arg1+arg2
等价于
var func1 = function(arg1,arg2){
  return arg1+arg2
}

函数的全局变量和局部变量

# 名称空间的查找顺序跟python一样，先在函数体自己的名称空间里找，找不到在一层层往外层找。
var city = "BeiJing";
function f(){
    var city = 'ShanHai';
    function inner(){
        var city = "ShenZhen";
      	console.log(city);
    }
    inner();
}

f();
# ShenZhen


var city = "BeiJing";
function Bar(){
    console.log(city);
}
function f() {
    var city = "ShangHai";
    return Bar;
}
var ret = f();

ret();
# BeiJing    和python一样，名称空间的查找顺序，在函数定义的时候就已经确认了


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

自定义对象

自定义对象可以看成是python中的字典，但是js中的自定义对象要比python里面的字典操作起来更加的方便。

# 创建自定义对象 {}
"""第一种创建自定义对象的方式"""
var d = {'name':'jason','age':18}
typeof d
"object"

d['name']
"jason"
d.name  # 比python从字典获取值更加的方便，python：d['name']  d.get('name')
"jason"
d.age
18

for(let i in d){
  console.log(i,d[i])
}  # 支持for循环 暴露给外界可以直接获取的也是键
"""
name jason
VM971:2 age 78
"""

"""第二种创建自定义对象的方式  需要使用关键字 new"""
var d2 = new Object()  # {}

d2.name = 'jason'
{name: "jason"}

d2['age'] = 18
{name: "jason", age: 18}

Date对象

let d3 = new Date();
d3;
# Sat May 16 2020 19:35:40 GMT+0800 (中国标准时间)

d3.toLocaleString();
# "2020/5/16 下午7:35:40" 

# 也支持自己手动输入时间
let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()

let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString()  # 月份从0开始0-11月
"1111/12/11 上午11:11:11"

# 时间对象具体方法
let d6 = new Date();
d6.getDate()  获取日
d6.getDay()		获取星期
d6.getMonth()		获取月份(0-11)
d6.getFullYear()		获取完整的年份
d6.getHours()			获取小时
d6.getMinutes()		获取分钟
d6.getSeconds()		获取秒
d6.getMilliseconds()  获取毫秒
d6.getTime()					时间戳

json对象

"""
python中序列化与反序列化：
	dumps()	序列化
	loads()	反序列化
在js中也有序列化和反序列化：
	JSON.stringify()	序列化
	JSON.parse()	    反序列化
"""
let d7 = {'name':'jason','age':78}
let res = JSON.stringify(d7);
res;
"{"name":"jason","age":78}"

JSON.parse(res);
{name: "jason", age: 78}

RegExp对象（正则）

"""
在python中如果需要使用正则，需借助于re模块
而在js中则需要你创建正则对象"""

# 第一种
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9][5,11]')
# 第二种（推荐）
let reg2 = /^[a-zA-Z][a-zA-Z0-9][5,11]/

# 匹配内容
reg1.test('egondbs')
reg2.test('egondbs')

# 题目 获取字符串里面所有的字母s
let sss = 'egondsb dbs dbs'
sss.match(/s/)  # 拿到一个就停止了
sss.match(/s/g)	# 全局匹配  g就表示全局模式

sss.match(/s/)
["s", index: 5, input: "egondbs dbs dbs", groups: undefined]
sss.match(/s/g)
(3) ["s", "s", "s"]

# 全局匹配模式吐槽点
let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg2.test('egondbs')

reg3.test('egondbs')  # 全局模式有一个lastIndex属性
true
reg3.test('egondbs')
false
reg3.test('egondbs')
true
reg3.test('egondbs')
false

reg3.lastIndex
0
reg3.test('egondbs')
true
reg3.lastIndex
7

# 吐槽点二 
let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()

reg4.test()  # 什么都不传 默认传的是undefined
true
reg4.test()
true

reg4.test(undefined)
true
let reg5 = /undefined/
undefined
reg5.test('jason')
false
reg5.test()
true

"""
总结 你在用js书写正则的时候一定要注意上述问题
一般情况下你后续也不会解除到了
"""

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