文章目录
一、JavaScript数据类型之布尔值
JS里面的布尔值关键词Boolean(区别于Python中true和false都是小写)
var a = true;
var b = false; (空字符串)、0、null、undefined、nan 都是false
null表示值是空 一般在需要指定或清空一个变量时才会使用 如 name=null;
undefined表示当声明一个变量但未初始化时 该变量的默认值是undefined 还有就是函数无明确的返回值时 返回的也是undefined
二、JavaScript数据类型之对象
JS里面也是一切皆对象(python也是一切皆对象)
所有事物都是对象：字符串、数值、数组、函数.....允许自定义的对象都是
JavaScript 提供多个内建对象 String、Date、Array 对象只是带有属性和方法的特殊数据类型
var a = [12,31,24,34.5,632];
typeof a; // 输出 'object' console.log(a[1]); //输出结果 31
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift | 头部移除元素 |
| .slice(start,end) | 切片操作 |
| .reverse() | 数据反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val,…) | 链接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素 并向数组添加新元素 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
forEach
语法：forEach(function(currentValue, index, arr), thisValue)
ex: a=[632, 34.5, 24, 31, 12]
a.forEach(function(value,index,arr){console.log(value,index,Array)})
splice
语法 splice(index,howmany,item1,.....,itemX)
ex: a=[632, 34.5, 24, 31, 12]
a.splice(1,1,'love')
输出结果：a=[632, 'love', 24, 31, 12]
三、JavaScript数据类型之自定义对象
自定义对象相当于Python中的字典快速的操作数据值
定义方式1:
let d1 = {'name':'LebronJames','pwd':123}
定义方式2:
let d2 = new object()
自定义对象操作数据值的方式很简单 直接使用句点符就可以直接获取value
四、运算符
Js里面的算数运算符有 + - * / % ++ --(加减乘除取余加加减减)
ex: var x=10;
var res1=X++; # x++会先赋值再进行自增1运算
var res2=++X; # 而++x会先进行自增运算再赋值
console.log(res2)
输出结果：12
JS里面的比较运算符有 > >= < <= != == === !==(大于大于等于小于小于等于不等于判断值是否相等强等于)
ex: 1=='1' # true 判断值是否相等(js里面会自动转换数值与字符串所以相等)
1==='1' # flase 如果想不想相等就需要用到强等于
JS里面的逻辑运算符有 && || ! (等价于python的 and or not)
JS里面的赋值运算符有 = += -= *= /=
五、流程控制
1.分支结构
1.单if分支
if(条件){条件成立之后执行的代码}
2.if...else分支
if(条件){
条件成立之后执行的代码
}else{
条件不成立之后执行的代码
}
3.if...elif...else分支
if(条件1){
条件1成立之后执行的代码
}else if(条件2){
条件1不成立条件2成立执行的代码
}
else{
条件不成立之后执行的代码
}
"""
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
"""
2.循环结构
while(条件){
循环体代码
}
1.循环打印0-100
for(let i=1;i<101;i++){
console.log(i)
}
2.打印数组内所有的数据值
l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'LebronJames']
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}
六、函数
function 函数名(形参){
函数体代码
return 返回值
}
ex:function func(a, b){
console.log(a, b)
} # 调用的时候直接函数名加括号传参就好了
func(1,2) # 但是发现JS里面的传参可以传很多个它不报错
参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字arguments
function func(a, b){
if(arguments.length===2){
console.log(a, b)
}else{
console.log('需要传对应的个数参数哦!!!')
}
}
Js里面的匿名函数
定义格式：
var sum = function(a,b){
return a+b
}
sum(1,2)
除了匿名函数还有立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
(function(a, b){
return a + b;
})(1, 2);
箭头函数
var d = v => v;
var d = function(v){return v}; # 这句话等同于上一句箭头函数
var sum = (num1, num2) => num1 + num2;
var sum = function(num1, num2){return num1+num2} # 这句话等同于上一句箭头函数
函数中的arguments参数
function add(a,b){
console.log(a+b);
console.log(arguments.length);
console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}
七、JavaScript内置对象
类似于python中的内置函数或者内置模块
固定语法
var 变量名 = new 内置对象名();
Date对象方法
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
获取当前时间练习 按照年月日时分星期几格式输出
const WEEKMAP = {
0:"星期天",
1:"星期一",
2:"星期二",
3:"星期三",
4:"星期四",
5:"星期五",
6:"星期六"
}; //定义一个数字与星期的对应关系对象
function showTime() {
var d1 = new Date();
var year = d1.getFullYear();
var month = d1.getMonth() + 1; //注意月份是从0~11
var day = d1.getDate();
var hour = d1.getHours();
var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes(); //三元运算
var week = WEEKMAP[d1.getDay()]; //星期是从0~6
var strTime = `
${year}-${month}-${day} ${hour}:${minute} ${week}
`;
console.log(strTime)
};
Json对象
Js里面Json序列化关键词
Json.stringify()
Json.parse()
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
RegExp正则对象
语法方式1:
var reg1 = new RegExp("正则表达式");
语法方式2:
var reg1 = new 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('Lebron666')
reg2.test('Lebron666')
var s1 = 'meijinisdashuaige';
var s2= /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
s2.test('meijin')
s2.test('mjdashuaige')
八、BOM与DOM操作
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。
| 语法 | 意义 |
|---|---|
| window.open() | 打开新窗口 |
| window.close() | 关闭当前窗口 |
| window.navigator.userAgent() | 获取客户端绝大部分信息 |
| window.history.forward() | 前进一页 |
| window.history.back() | 后退一页 |
| window.location.href | 获取当前URL |
| window.location.href = 新网址 | 跳转到指定页面 |
| window.location.reload() | 重新加载页面 |
| alter() | 警告 |
| confirm() | 确认 |
| 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()
DOM操作
JS操作html和CSS操作html学习套路一致 都是先学如何查找标签
document.getElementById()
根据id值查找标签 结果直接是标签对象本身
document.getElementsByClassName()
根据class值查找标签 结果是数组类型
document.getElementsByTagName()
根据标签名查找标签 结果是数组类型
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
"""
let divEle = document.getElementById('d1')
"""
节点操作
let XXXEle = document.createElement('标签名')
XXXEle.id = 'id值'
XXXEle.innerText = '内部文本'
divEle.append(XXXEle)
ps:动态创建 临时有效 非永久
属性操作
XXXEle.属性 只能是默认属性
XXXEle.setAttribute() 默认属性、自定义属性
文本操作
divEle.innerHTML
divEle.innerText
divEle.innerHTML = '<h1>嘿嘿嘿</h1>'
'<h1>嘿嘿嘿</h1>'
divEle.innerText = '<h1>哈哈哈</h1>'
'<h1>哈哈哈</h1>'
本文含有隐藏内容，请 开通VIP 后查看