学习python-Day47

标签：function 函数 python 标签学习 var 对象 Day47

今日学习内容

JS数据类型

比较我们学过python的数据类型去学习

布尔值

python :  bool  
    True: 数字 
    False: 0 None '' [] {}...
JS: boolen
    true
    false: (空字符串)  0   null undefined NaN
   
null与undefined的区别
	null可以理解为曾经拥有过数据值，现在暂时为空 eg：name=null。
    undefined可以理解为从来没拥有过任何数据值，只声明为被赋值。
    
>let n = null
undefined
>n
null
>let n1
undefined

数组

数值对象的作用：单独的变量名来存储一系列的值。类似于Python的列表。

>var x1 = [11, 22, 33, 44, 55, 'xz'];
undefined
>typeof x1
'object

常用的方法：（类似python中列表的内置方法）

方法	说明
.length	数组的大小
.push(ele)	尾部追加
.pop()	获取尾部元素
.unshift()	头部插入元素
.shift()	头部移除元素
.slice(start,end)	切片
.reserse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val,...)	连接数组

方法	说明
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素并向数组添加新元素
.map()	返回一个数组元素调用函数处理后的新数组

注意：python列表添加元素有三种方式：append 尾部追加、insert 指定位置添加、extend

forEach

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

forEach就是for循环thisValue的一个个数交给前面的function里面的数。

还可以用下面这种方式来遍历数组中的元素：
>>for(var i = 0; i<x2.length;i++){console.log(i)}
0 
1 
2 
3

参数	描述
function(currentValue, index, arr)	必需。数组中每个元素需要调用的函数。函数参数: currentValue当前元素,必需。 index当前元素的索引值,可选。 arr当前元素所属的数组对象,可选。
thisValue	可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值

map在python中相当于映射。

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

>>var x2 = [11, 22, 33, 44]
undefined
>>x2.map(function(a, b, c){return a +10})
Array(4) [ 21, 32, 43, 54 ]
>>x2
Array(4) [ 11, 22, 33, 44 ]

splice

splice(index,howmany,item1,.....,itemX)
删除其中元素，再添加新元素


>>var x1 = ['xz', 'wyb', 'cg', 'bjyx', 11, 22, 33]
undefined
>>x1.splice(3,2,'hahaha')
Array [ "bjyx", 11 ]
>>x1
Array(6) [ "xz", "wyb", "cg", "hahaha", 22, 33 ]

参数	描述
index	必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	必需。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则默认删除从index开始到原数组结尾的所有元素。
item1, ..., itemX	可选。要添加到数组的新元素

自定义对象

js中所有事物都可以是对象：字符串、数组、数值、...js可以自定义对象。

对象是带有属性和功能的特殊数据类型。

js中的自定义对象相当于python字典

自定义对象的方式有两种
	第一种：let d1  = {'name': 'xz', 'pwd': '123'} 
    第二种：let d2 = new Object() 
自定义对象操作数据值的方式更加简单，直接用聚点符。
在python也可以通过聚点符来操作字典的数据值，通过魔法方法。

JS常见运算符

算数运算符

自增与Python有区别的。
```
var z = 10;
var r1 = z++;
var r2 = ++z;
```

比较运算符

> >= < <= != == === !==

==   弱等于，js会自动先转换类型为相同的。
===  强等于，强制js不在类型转换。
!==  强不等于

is 在js中不做运算符。

逻辑运算符

&& 	相当于 and
|| 	相当于 or
 !	相当于 not

赋值运算符

= += -= *= /=  与Python赋值运算符相同

JS流程控制

分支结构

1.单if分支
	if(条件){条件成立后执行的代码}
2.if...else分支
	if(条件){
       条件成立后执行的代码
    }else{
       条件不成立后执行的代码      
     }
3.if...else if...else分支
	if(条件1){
       条件1成立后执行的代码
    }else if(条件2){
      条件1不成立，条件2成立执行的代码      
      }else{
       条件都不成立后执行的代码      
     }

switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

循环结构

for

for (var i=0;i<10;i++) {
  console.log(i);
}
'''
通常将声明和初始化值，多个条件，自增添加到for循环后面的括号内
'''

课堂小练习
打印数组内所有的数据值
l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'xz']
for(let i=0;i<l1.length;i++){
    console.log(l1[i])
}

while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}
'''
通常将现在while前面声明变量，然后在while后括号内写条件，条件成立执行代码并将i变量自增。
循环执行，直到while后面条件不成立为止。
'''

课堂小练习
打印数组内所有的数据值
l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'xz']
var i = 0
while (i<l1.length){
    console.log(l1[i])
    i ++
}

三元运算

var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;

三元运算顺序:
先写判断条件a>b
再写条件成立返回的值为a,
条件不成立返回的值为b;
三元运算可以嵌套使用；

JS函数名称与作用域

函数：

python中函数:
def 函数名(形参){
    注释
    函数体代码
    return 返回值
}
js中函数：
function 函数名(形参){
    函数体代码
    return 返回值
}
j函数中参数的个数不需要一一对应，
如果想要限制参数的个数则需要使用关键字`arguments`   内置关键字
function func(a, b){
    if(arguments.length===2){
        console.log(a,b)
    }else{
        console.log('传入参数的个数不对')
    }
}
arguments相当于将出传入的参数全部包含成数组，通过索引取出传入后参数。

匿名函数：

 function(a, b){
      return a + b;
    }
在js中匿名函数就是将函数名去掉，其他不变。
可以将其函数绑定一个名字
let f1 =  function(a, b){ return a + b;}

箭头函数：

用箭头定义函数ESC6中。

var f = v => v;  (前一个v是参数，后一个v是返回值)
相当于
var f = function(v){
    return v;
}
(省略了function和return)

如果需要传多个参数或者不需要参数的话就用圆括号来代表参数。

var f = () => 10  相当于 var f = function(){return 10};
var sum = (num1, num2) => num1 + num2; 
相当于 
var sum = function(num1, num2){return num1 + num2;}
return 返回多个值时，需要将他们包成数组或者对象形式。

闭包函数：

定义：定义在函数体内部的函数，内部的函数用到了外部的名称空间里的名字。

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

局部变量：js函数内部声明的变量 var，声明变量就开始直到函数体代码运行完就结束。
全局变量：声明在函数体代码外的变量，网页的所有脚本和函数都能访问它。声明变量就开始直到页面关闭就结束。
与python作用域关系查找一模一样！

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

f();  //输出结果是？


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

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

JS内置对象

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

固定语法
	var 变量名 = new 内置对象名();

1.Date对象
	var obj = new Date();  //创建Date对象
//getDate()                 获取日
	obj.getDate()
//getDay ()                 获取星期
	obj.getDay()
//getMonth ()               获取月（0-11）
	obj.getMonth()
//getFullYear ()            获取完整年份
	obj.getFullYear()
//getYear ()                获取年
	obj.getYear()
//getHours ()               获取小时
	obj.getHours()
//getMinutes ()             获取分钟
	obj.getMinutes()
//getSeconds ()             获取秒
	obj.getSeconds()
//getMilliseconds ()        获取毫秒
	obj.getMilliseconds()
//getTime ()                返回累计毫秒数(从1970/1/1午夜)
	obj.getTime()

详细Date对象方法参照:https://www.w3school.com.cn/jsref/jsref_obj_date.asp

2.JSON序列化对象
python序列化：
		import json
		json.dumps()
		json.loads()
JS中的序列化：
		JSON.stringify()
		JSON.parse()

`序列化`对象转换成JSON字符串
>>let bbb = {'name': 'xz', 'pwd': 123} 
>>let strbJson = JSON.stringify(bbb) //序列化 json
>>strbJson 
"{\"name\":\"xz\",\"pwd\":123}" 

`反序列化` JSON字符串转换成对象
>>let ob = JSON.parse(strbJson)
>>ob 
Object { name: "xz", pwd: 123 }

3.RegExp对象
定义正则表达式有两种方式：一种是对象，一种是直接初始化用两个斜双杆。
//定义正则表达式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
//正则校验
reg1.test('xz2318')
reg2.test('xz2318')

注意：
正则表达式中不能有空格
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
里面的g表示全局匹配，会发现每匹配同样的数据每次的结果不一致
注意：全局匹配时有一个lastIndex属性

BOM操作

BOM：浏览器对象模型。通过写js代码可以跟跟浏览器交互。

需要借助window对象,它表示浏览器窗口。

常见window方法	说明
window.innerHeight	浏览器窗口的内部高度
window.innerWidth	浏览器窗口的内部宽度
window.open()	打开新窗口，括号填某个网址，就可以打开该网址的页面
window.close()	关闭当前窗口，括号填某个网址，就可以打开该网址的页面

window.open('https://www.python.org/','','height=200px,width=200px,left=500px')
后面参数是调整弹出页面的宽高以及移动的方式，位置。

navigator对象

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

history对象

window.history 浏览器历史，包含了用户对当前页面的浏览历史，可以前进或者后退一个界面。

history.forward()  // 前进一页
history.back()  // 后退一页

location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

1.提示框：alter()"AAAAA？")
2.确认框：confrim()"你确定吗？")
3.提示框：prompt('你真好看！！！')

计时相关

setTimeout()
每个一定时间之后来执行代码，而不是函数被调用之后立刻执行，被称之为计时事件


定时器相关操作(重要)
   		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)
        }
        showMsg()
        setTimeout(clearMission, 10000)

DOM操作

DOM：文档对象模型。通过写js代码可以跟html交互。

标签查找

document.getElementById()
根据id值查找标签 结果直接是标签对象本身，如果没有查找到返回null

document.getElementsByClassName()
根据class值查找标签 结果是数组类型，如果没有查找到返回null

document.getElementsByTagName()
根据标签名查找标签 结果是数组类型，如果没有查找到返回null

'''
<div id="d1">div</div>
<div class="c1">div</div>
<div>div</div>
<p class="c1"></p>
<span id="d2">span</span>
'''
document.getElementById('d1');
document.getElementById('xxx');
document.getElementsByClassName('c1');
document.getElementsByClassName('xxx');
document.getElementsByTagName('div');
document.getElementsByTagName('xxx');

间接查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

节点操作

1.创建一个节点
	createElement(标签名)

var divEle = document.createElement("div");

注意：如果有标签对象需要反复使用，可以使用变量存储

2.节点操作
	let XXXEle = document.createElement('标签名')
    XXXEle.id = 'id值'
    XXXEle.innerText = '内部文本'
    divEle.append(XXXEle)

注意：
	这是动态创建出来的，所以文档中没有展示。
    临时往文档添加，不会改变原本代码。
    
3、属性操作
XXXEle.属性
设置标签的默认属性
XXXEle.setAttribute()
既可以设置标签的默认属性也可以设置标签的自定义属性

let imgEla = document.createElement('img')
imgEla.src = '1.png'
imgEla.setAttribute('abc',123)
imgEla

4、文本操作
divEle.innerHTML  
获取标签内部所以的内容，包括标签和内容文本
divEle.innerText  
获取标签内的内容文本

divEle.innerHTML = '<h1>好难</h1>'  
设置标签内容，能够识别标签
divEle.innerText = '<h1>yue了</h1>'  
设置标签内容，不能够识别标签

标签：function,函数,python,标签,学习,var,对象,Day47
From： https://www.cnblogs.com/bjyxxc/p/16626187.html