目录
- 1. JS数据类型之布尔值(boolean)
- 2. JS数据类型之对象(object)
- 3. JS数据类型之自定义对象
- 4. 运算符
- 5.流程控制
- 6. JS函数定义
- 7. 函数的全局变量和局部变量
- 8. 内置对象和方法
- 9. BOM和DOM
1. JS数据类型之布尔值(boolean)
| python | js |
|---|---|
| bool | boolean |
| True | true |
| False | false |
| False:0 None 空字符串 空列表 空字典 ... | false:(空字符串)、0、null、undefined、NaN |
null和undefined
1.null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null
2.undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined.还有就是函数无明确的返回值时，返回的也是undefined
3.null表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null),undefined则表示只声明了变量，但还没有赋值(如图)
2. JS数据类型之对象(object)
在JS中也是一切皆对象
提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
对象之数组(相当于python中的列表)
对象之数组
数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表
常用方法
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift | 头部插入元素 |
| .shift | 头部移除元素 |
| .slice(start,end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 讲数组元素连接成字符串 |
| .concat(val) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
forEach() 将数组的每个元素传递给回调函数
splice()删除元素，并向数组添加新元素。
map()返回一个数组元素调用函数处理后的值的新数组
3. JS数据类型之自定义对象
3.1 自定义对象(两种方式）
自定义对象(相当于python中的字典),自定义对象操作数据值的方式更加简单，直接使用句号符
定义方式1：
let d1 = {'name':'jason','pwd':123}
定义方式2：
let d2 = new Object()
3.2 补充
ES6新引入了一种新的原始数据类型（Symbol），表示独一无二的值。它是JavaScript语言的第7种数据类型。typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。
类型查询
typeof "abc" // "string"
typeof null // "object"
typeof true // "boolean"
typeof 123 // "number"
4. 运算符
算数运算符
+ - * / % ++ --
x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值
var x=10;
var res1=x++
var res2=++x
res1;
10
res2;
12
比较运算符
> >= < <= != == === !==
== 弱等于(自动转换成相同数据类型)
=== 强等于(不自动转换)
1 == “1” // true 弱等于
1 === "1" // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误
逻辑运算符
&& || !
&& 等价于python中的and
|| 等价于python中的or
! 等价于python中的not
赋值运算符
= += -= *= /=
5.流程控制
5.1 分支结构
1. 单if分支
if(条件){条件成立之后执行的代码}
2. if...else分支
if(条件){
条件成立之后执行的代码
}else{
条件不成立之后执行的代码
}
3. if...elif if ...else分支
if(条件1){
条件1成立之后执行的代码
}else if(条件2){
条件1不成立条件2成立执行的代码
}else{
条件不成立之后执行的代码
}
switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
5.2 循环结构
for
for (var i=0;i<10;i++){
console.log(i);
}
while
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
var a = 1;
var b = 2;
var c = a > b ? a : b//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用；
var a=10,b=20;var x=a>b ?a:(b=="20")?a:b;x10
6. JS函数定义
JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。
// 普通函数定义
function f1() {
console.log("Hello world!");
}
// 带参数的函数
function f2(a, b){
console.log(arguments); //内置的arguments对象
console.log(arguments.length);
console.log(a, b);
}
// 带返回值的函数
function sum(a, b){
return a + b;
}
sum(1, 2); //调用函数
// 匿名函数方式
var sum = function(a, b){
return a + b;
}
sum(1, 2);
// 立即执行函数，书写立即执行的函数，首先先写两个括号（）（）这样防止书写混乱
(function(a, b){
return a + b;
})(1, 2);
//ES6中允许使用“箭头”（=>）定义函数。
var f = v => v;
// 等同于
var f = function(v){
return v;
}
如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：
var f = () => 5;
// 等同于
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
// 函数中的arguments参数
function add(a,b){
console.log(a+b);
console.log(arguments.length);
console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}
add(1,2)
注意：函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回
7. 函数的全局变量和局部变量
局部变量
在JavaScript函数内部声明的变量（使用var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除
全局变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它
变量生存周期
JavaScript变量的生命期从它们被声明的时间开始
局部变量会在函数运行以后被删除
全局变量会在页面关闭后被删除
作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样
// 1
var city = "beijing";
function f(){
var city = "shanghai";
function inner(){
var city = "shenzhen"
console.log(city);
}
inner();
}
f()
shengzhen
// 2
var city = "beijing";
function bar(){
console.log(city);
}
function f() {
var cuty = "shanghai";
return bar;
}
var ret = f();
ret();
beijing
// 3 闭包
var city = "beijing";
function f(){
var city = "shanghai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret();
shanghai
8. 内置对象和方法
JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。
Date对象 创建Date对象
//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒并不直接显示
Date对象的方法
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
JSON对象
# python
dumps() 将其他数据类型转换成json格式字符串
loads() 将json格式字符串转化成对应的数据类型
dump() 将其他数据数据以json格式字符串写入文件
load() 将文件中的json格式字符串读取出口并转换成对应的数据类型
//js中
var str1 = '{"name": "jason", "age": 18}';
var obj1 = {"name": "jaosn", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
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('jason666')
reg2.test('jason666')
/*第一个注意事项，正则表达式中不能有空格*/
// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/
// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);
var reg3 = /undefined/;
reg3.test();
RegExp
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) 返回角的正切。
Math
9. BOM和DOM
9.1 简介
BOM（Browser Object Model）是指浏览器对象模型，通过写js代码可以跟浏览器交互
DOM（Document Object Model）是指文档对象模型，通过写js代码可以跟html交互
9.2 BOM操作
window对象
常用的window方法
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window的子对象
navigator对象
浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
screen对象
屏幕对象，不常用。
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
history对象
window.history 对象包含浏览器的历史。浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。
history.forward() // 前进一页
history.back() // 后退一页
location对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
常用属性和方法：
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
警告框
alert("你看到了吗？")
确认框
confirm("你确定吗？")
提示框
prompt("输入密码")
计时相关
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
setTimeout定时
<script>
function func1(){
alert('3秒之后在页面显示')
}
setTimeout(func1,3000) // 3秒之后自动执行func1函数
</script>
1. setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
2. setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
3. 第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。
4. setTimeout("JS语句",毫秒)
clearTimeout() 取消任务
<script>
function func1(){
alert('3秒之后在页面显示')
}
let t = setTimeout(func1,3000) // 3秒之后自动执行func1函数
clearTimeout(t) // 取消上面的定时任务
</script>
setInterval()
1. setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
2. setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
3. setInterval("JS语句",时间间隔)
function func1() {
alert('每隔三秒执行一次')
}
setInterval(func1, 3000)
clearInterval()
1. clearInterval() 方法可取消由 setInterval() 设置的 timeout。
2. clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
function func1() {
alert('每隔三秒执行一次')
}
let s1 = setInterval(func1, 3000)
clearInterval(s1)
9.3 DOM操作
HTML DOM树
查找标签
| 方法 | 注释 |
|---|---|
| document.getElementById | 根据ID获取一个标签 |
| document.getElementsByClassName | 根据class属性获取 |
| document.getElementsByTagName | 根据标签名获取标签合集 |
| parentElement | 父节点标签元素 |
| children | 所有子标签 |
| firstElementChild | 第一个子标签元素 |
| lastElementChild | 最后一个子标签元素 |
| nextElementSibling | 下一个兄弟标签元素 |
| previousElementSibling | 上一个兄弟标签元素 |
节点操作(标签操作)
// 动态创建即零时有效 非永久性
// 追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
// 把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);
// 命名 XXXEle规范后缀为Ele
let XXXEle = document.createElement('标签名') //添加节点
XXXEle.id = 'id值' // 为节点添加id值
XXXEle.innerText = '内部文本' // 为节点添加内部文本
divEle.append(XXXEle) // 给div标签里添加XXX节点
// 删除节点
somenode.removeChild(要删除的节点)
// 替换节点
somenode.replaceChild(newnode, 某个节点);
属性节点
XXXEle.属性 // 只能是默认属性
XXXEle.setAttribute() //默认属性、自定义属性
XXXEle.getAttribute() //拿一个属性对应的值
XXXEle.removeAttribute() // 删除属性
//文本操作
XXXEle.innerHTML // 获取标签内部所有的内容
XXXEle.innerText // 只获取文本不获取标签
XXXEle.innerHTML="标签文本内容 eg:<p>2</p>" // 添加值
XXXEle.innerText="文本内容 eg:2" // 添加值