标签：function 函数 DOM 对象数据类型 JS python var

一、JS数据类型之布尔值
二、JS数据类型之对象(object)
- 1.对象之数组（相当于python中的列表）
- 2.方法
  - 2.1.forEach
  - 2.2.map
三、JS数据类型之自定义对象（object）
- 1.自定义对象（相当于python中的字典）
四、运算符
五、流程控制
- 1.分支结构
- 2.循环结构
六、函数
七、JS内置对象
八、BOM与DOM操作
- 1.BOM：浏览器对象模型
- 2.DOM：文档对象模型
  - DOM树

一、JS数据类型之布尔值

python中：bool
	True
	False:0/None/''/[]/{}/()
        
JS中：boolean
	true
	false:(空字符串)/0/null/undeffined/NaN
     
null与undefined的区别
	null：可以理解值为空的变量
	undefined：可以理解为变量不存在

二、JS数据类型之对象(object)

1.对象之数组（相当于python中的列表）

使用单独的变量名来存储一系列的值。

'''在JS中也是一切皆对象'''
  let l1 = [1,2,3,'sss']

2.方法

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start,end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val,...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice(index(起始索引位置),howmany（删除数量）,items（添加的新元素）)	删除元素，并向数组添加新元素
.map	返回一个数组元素调用函数处理后的值的新数组

2.1.forEach

forEach(function(currentValue, index, arr), thisValue)

参数	说明
function（currrentValue（必需，当前元素），index（元素的索引值），arr（元素所属数组））	必需。数组中每个元素需要调用的函数
thisValue	可选。传递给函数的值一般用‘this’值如果这个参数为空，‘undefined’会传递给‘this’值

2.2.map

map(function(currentValue,index,arr), thisValue)

参数	说明
function（currrentValue（必需，当前元素），index（元素的索引值），arr（元素所属数组））	必需。数组中每个元素需要调用的函数
thisValue	可选。传递给函数的值一般用‘this’值如果这个参数为空，‘undefined’会传递给‘this’值

三、JS数据类型之自定义对象（object）

1.自定义对象（相当于python中的字典）

定义方式1：
	let d1 = {'name':'zhang','pwd':123}
定义方式2：
	let d2 = new Object()
自定义对象操作数据值的方式更简单，直接使用句点符

'''python中让字典也可以通过句点符操作字典的数据值'''
class MyDict(dict):
    def __getattr__(self, item):
        return self.get(item)

    def __setattr__(self, key, value):
        self[key] = value

d1 = MyDict()
d1.name = 'jason'
print(d1)
d1.name = 'zhang'
print(d1)
# {'name': 'jason'}
# {'name': 'zhang'}

四、运算符

var x=10;
var res1=x++;  # 先赋值后自增
var res2=++x;  # 先自增后赋值

运算符	作用
==	弱等于（自动转换成相同的数据类型，再比较）
===	强等于（不自动转换数据类型）
&&	等价于python的 and
\|\|	等价于python的 or
！	等价于python的 not

五、流程控制

1.分支结构

1.单if分支：
	if(条件){条件成立后执行的代码}
    
2.if...else分支：
	if(条件){
        条件成立执行的代码
    }else{
        条件不成立执行的代码
    }
     
3.if...else if ...else分支：
	if(条件一){
        条件一成立后执行的代码
    }else if(条件二){
        条件二成立后执行的代码
    }else{
        所有条件不成立后执行的代码
    }
'''
day = new Date().getDay()

switch (day) {
  case 0:
  	console.log("Sunday");
  	break;
  case 1:
  	console.log("Monday");
  	break;
  case 4:
    console.log("Turseday");
    break
  default:
  	console.log("不在范围内")
}
'''

2.循环结构

for(let i=1;i<101;i++){
    console.log(i)
}
# for循环小练习
打印数组内所有的数据值
for(let i=0,i<l1.lenth;i++){
    console.log(l1[i])
}

while(条件){
    循环体代码
}
# while循环小练习
let l1 = [456,33,110,11,22]
let num=0;
while(num<l1.length){
    console.log(l1[num]);
    num++;
}

六、函数

1.格式

'''
在python中：
	def 函数名(形参):
		函数体代码
		return 返回值
'''
function 函数名(形参){
    函数体代码
    return 返回值
}

function func1(a,b){
    console.log(a,b)
}
func1()
# undefined undefined

参数的个数不需要一一对应，也能调用函数。
如果要限制参数个数，需要使用内置关键字arguments做判断
（arguments会接收参数）
function func1(a,b){
    if (arguments.length===2){
    console.log(a,b)
    }
    else{
    console.log("没有给参数！！")
    }
}

2.匿名函数

1.在python中：
	格式：lambda 形参：返回值（返回表达式运行后的结果）
	构建的是一个函数对象，需要用一个变量名去接收返回值
	匿名函数通常配合其他函数一起使用，用于减少代码
    res = (lambda x: x + 100)
    print(res(100))  # 200
2.JS中：
	fuction(形参){
        函数体代码
        return 返回值
    }

	function(a,b){
    return a+b
	}
    # 如果要调用匿名函数需要给一个变量名
    res = function(a,b){
        return a+b
    }

3.箭头函数

var f = function(v){
    return v;
}
等同于：var f = v =>v;

# 如果不需要参数，用()代替参数的位置
var f=()=5;
等同于：
function f(){return 5;}

var sum=(a,b)=>a+b
等同于：
    function sum(a,b){
        return a+b;
        # 这里的return只能返回一个值，如果要返回多个值，需要手动包一个数组或对象
    }
function sum1(a,b){
    kk=a+b;
    cc=a*b;
    l1 = [kk,cc]  # 包成数组
    return l1;
}

七、JS内置对象

1.描述

类似于python中的内置函数或者内置模块

2.固定语法

var 变量 = new 内置对象名();

3.内置对象

3.1.Date日期对象

var d1 = new Date();
console.log(d1.toLocaleString())
#VM227:1 2022/8/25 21:03:31

var d2 = new Date("2001/1/1 11:20")
console.log(d2.toLocaleString())
#VM465:1 2001/1/1 11:20:00

var d3 = new Date("04/03/02 11:20")
console.log(d3.toLocaleString())
#VM664:1 2002/4/3 11:20:00

var d4=new Date(5000)
console.log(d4.toLocaleString())
#VM844:1 1970/1/1 08:00:05
console.log(d4.toUTCString())
# VM939:1 Thu, 01 Jan 1970 00:00:05 GMT

var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); 
# VM1159:2 2004/3/20 11:12:00

date对象方法

方法	说明
getDate()	获取日
getDay()	获取星期
getMonth()	获取月（0-11）
getFullYear()	获取完整年份
getYear()	获取年
getHours()	获取小时
getMinutes()	获取分钟
getSeconds()	获取秒钟
getMilliseconds()	获取毫秒
getTime	返回累计毫秒数（从1970/1/1午夜）

3.2.JSON序列化对象

            
    python中的序列化：
        import json
        json.dumps()
        json.lodas()
    JS中的序列化：
        JSON.stringify()
        JSON.parse()

3.3.RegExp正则对象

表达方式

var reg1 = new RegExp("^[a-zA-z0-9]")
var reg2 = /^[a-zA-z0-9]{3,6}$/

校验数据

reg1.test('zhang888')
# true
reg2.test('zhang888')
# false

'''
注意事项1：正则表达式不能有空格
'''

全局匹配

var s1 = 'ad werhfh jfjwo';
s1.match(/s/)
# null
s1.match(/h/)
# ['h', index: 6, input: 'ad werhfh jfjwo', groups: undefined]
s1.match(/h/g)
# (2) ['h', 'h']

var reg2 = /^[a-zA-z0-9]{3,6}$/g
reg2.test('dahfi')
# true
reg2.test('dahfi')
# false
reg2.test('dahfi')
# true
reg2.test('dahfi')
# false
reg2.lastIndex;
# 0
reg2.test('dahfi')
# true
reg2.lastIndex;
# 5
'''
注意事项2：
全局匹配有lastIndex属性。
全局匹配，每一次匹配，指针会停在最后，下一次校验会报错，报错后从头校验又会报true。
'''

校验不传参数

var reg2 = /^[a-zA-z0-9]{3,6}$/
reg2.test()
#false
reg2.test(undefined)
#false
var reg3 = /undefined/
reg3.test()
# true

八、BOM与DOM操作

1.BOM：浏览器对象模型

通过写js代码可以跟浏览器交互

window.open()
window.close()
window.navigator.userAgent() 
window.history.forward()
window.history.back()
window.location.href  # 获取URL
window.location.href = "新网址"  # 跳转到新网址
window.location.reload()  # 刷新页面

alter()   警告框
	alert ("hello js!")
	# undefined
confirm()  确认框  # 点确定true 取消false
    confirm("确定吗？")
    # true
    confirm("确定吗？")
    # false
prompt()  提示框  # 输入什么得到什么
	prompt("请输入","答案")  # 第二个值是：默认值
	# '答案'
    
定时器相关操作(重要)
function func1(){
    alert('终于要干饭了')
}
let t = setTimeout(func1,3000)  
# 3秒中之后自动执行func1函数
clearTimeout(t)  # 取消上面的定时任务


var s1 = null
function showMsg() {
    function func1(){
        alert('终于要干饭了')
    }
    s1 = setInterval(func1, 3000)
}
function clearMission(){
    clearInterval(s1)
}
setTimeout(clearMission, 9000)
showMsg()

2.DOM：文档对象模型

通过写js代码可以跟html交互

JS操作html和CSS操作html学习套路一致都是先学如何查找标签

DOM树

document：整个页面
1.查找标签
    document.getElementById()
    # 根据id值查找标签 结果直接是标签对象本身
    document.getElementsByClassName()
    # 根据class值查找标签 结果是数组类型
    document.getElementsByTagName()
    # 根据标签名查找标签 结果是数组类型

2.标签元素
    parentElement            # 父节点标签元素
    children                 # 所有子标签
    firstElementChild        # 第一个子标签元素
    lastElementChild         # 最后一个子标签元素
    nextElementSibling       # 下一个兄弟标签元素
    previousElementSibling   # 上一个兄弟标签元素
"""
	let divEle = document.getElementById('d1')
"""

3.节点操作
    let XXXEle = document.createElement('标签名')
    XXXEle.id = 'id值'
    XXXEle.innerText = '内部文本'
    divEle.append(XXXEle)
    # ps:动态创建 临时有效 非永久
4.属性操作
    XXXEle.属性  # 只能是默认属性
    XXXEle.setAttribute()  # 默认属性、自定义属性
5.文本操作
    divEle.innerHTML
    divEle.innerText

    divEle.innerHTML = '<h1>嘿嘿嘿</h1>'
    '<h1>嘿嘿嘿</h1>'
    divEle.innerText = '<h1>哈哈哈</h1>'
    '<h1>哈哈哈</h1>'

标签：function,函数,DOM,对象,数据类型,JS,python,var
From： https://www.cnblogs.com/Zhang614/p/16625976.html

JS数据类型、流程控制、函数、内置对象、BOM和DOM