JS基础
console.log() 控制台输出
alert() 对话框
confirm() 确认框
prompt("文本",“默认输入文本”) 输入框
parseFloat() 将字符串转换为浮点型
parseInt() 将字符串转换为整型
| number | object | undefined |
|---|---|---|
| NaN | null | undefined |
自定义函数 function 函数名(params) {}
调用函数 事件名=“函数名()”
匿名函数 function(){}
数据类型
- 基本数据类型：字符串（string）、数字（number）、布尔（boolean）、空（null）、未定义（undefined）。
- 引用数据类型：Array、Object、Date、RegExp。
全等（===） 当全等号左右两边的操作数相等且类型相同时，返回 true。
字符串 repeat() 构造并返回一个新字符串
str.repeat(count)
判断对象为空
function isEmptyObject(obj) { for (let o in obj) { return false; } return true; }
- keys() 返回 Map 对象中键的数组。
- values() 返回 Map 对象中值的数组。
对象转换为数组
Object.keys()function isEmptyObject(obj) { return Object.keys(obj).length === 0; } //但是如果传入null或undefined会出问题 isEmptyObject(null); // Uncaught TypeError: Cannot convert undefined or null to object isEmptyObject(undefined); // Uncaught TypeError: Cannot convert undefined or null to object //在实际项目中，如下方式使用 function isEmptyObject(obj) { return Object.keys(obj || []).length === 0; }对象转为
JSON字符串 JSON.stringify()function isEmptyObject(obj) { return JSON.stringify(obj) === "{}"; }
运算符与表达式
- 算术运算符：+、-、*、/、%、++、--
- 比较运算符：>、<、>=、<=、、!=、=、!==
- 赋值运算符：=、+=、-=、*=、/=
- 逻辑运算符：&&、||、!
- 条件运算符：条件表达式 ? 表达式 1 : 表达式 2
DOM文档对象模型
Document Object Model（文档对象模型），它是浏览器为每个窗口内的 HTML 页面创建的一个 document 对象来对页面的元素进行操作。
DOM获取元素对象
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
选第一个 document.getElementsByClassName('xxx')[0]
document.getElementsByName()
document.querySelector()
document.querySelectorAll()
获取到的是一个类数组对象NodeList ，并非数组，所以无法使用indexOf()之类的方法。
[...document.querySelectorAll(".tabs>div")] 将其转换为数组进行处理
document.write()
DOM事件 ! ! !
HTML DOM 事件对象 | 菜鸟教程 (runoob.com)
事件监听与移除
.addEventListener("click",function(){});
.removeEventListener()
鼠标事件
onclick 鼠标点击事件
onmouseover 鼠标移入事件
onmouseout 鼠标移出事件
onmousedown 鼠标按下事件
onmouseup 鼠标松开事件
onmousemove 鼠标移动事件
键盘事件
onkeydown 键盘按下会触发的事件
onkeyup 键盘松开会触发的事件
表单事件
onfocus 表单元素聚焦时触发
onblur 表单元素失焦时触发
DOM元素对象属性和方法
元素的新增，删除
.createTextNode(); 创建文本的节点
.createElement("tr"); 创建元素<tr>
.appendChild() 添加节点
.removeChild() 删除节点
<div id="box">
<input type="text" id="txt">
<button onclick="add()">添加</button>
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
function add() {
var txtName = document.getElementById("txt").value;
let txt = document.createTextNode(txtName);
var para = document.createElement("p");
para.appendChild(txt);
var box = document.getElementById("box");
box.appendChild(para);
}
var parent = document.getElementById("box");
var child = document.getElementById("p1");
parent.removeChild(child); //删除父元素中的子元素
</script>
操作元素内容
.innerHTML 会覆盖掉之前的
.innerText
以上两个以及document.write()的差别
document.write是直接将内容写入页面的内容流，会导致页面全部重绘，innerHTML将内容写入某个DOM节点，不会导致页面全部重绘
操作元素内容属性
.src
.href
.getAttribute()
操作表单属性
.value 更换表单内容
.disabled 表单是否可用，默认false
操作样式属性
.className
.classList.add("样式名")
.classList.remove("样式名")
.style.样式
内置对象
RegExp
// g 全局模式
// i 不区分大小写
// m 多行模式？
//字面量形：由斜杠 (/) 包围
let reg1 = /[bc]at/i;
// 匹配第一个"bat"或"cat"，不区分大小写，这里的元字符是有特殊含义，表示其中可以匹配其中任意的字符
let reg2 = /\[bc\]at/i; // 匹配第一个" [bc]at"，不区分大小写
let reg3 = /.at/gi; // 匹配所有以"at"结尾的 3 个字符的组合，不区分大小写
let reg4 = /\.at/gi; // 匹配所有".at"，不区分大小写
//构造函数
let reg2 = new RegExp("[bc]at", "i");
//test()方法
let reg = new RegExp("e");
reg.test("The best things in life are free");//true
//exec() 方法
var text = "cat, bat, sat, fat";
var pattern2 = /.at/g;
var matches = pattern2.exec(text);
// 返回数组 ["cat", index: 0, input: "cat, bat, sat, fat", groups: undefined]
alert(matches.index); // 0
alert(matches[0]); // cat
alert(pattern2.lastIndex); // 3
var text = "this has been a short summer";
var pattern = /(..)or(.)/g;
if (pattern.test(text)){
alert(RegExp.$1); // sh
alert(RegExp.$2); // t
}
数组对象Array
var 数组名 = new Array(元素1, 元素2,...,元素n);
var 数组名 = [元素1, 元素2,...,元素n];
.length 获取数组长度
new Array(word.length)生成word.length长度的数组，再fill('*')代表将数组内的元素全部设置为symbol的值，再调用join转换为字符串
new Array(长度为五).fill('*').join('') //*****
常用方法：
-
slice(x,y)数组切片下标-
将数组按照置顶个数分割
const splitArray = (oldArr, num) => { oldArr.sort((x, y) => x - y); let res = []; for (let i = 0; i < oldArr.length; i += num) { console.log(i); console.log(i + num); res.push(oldArr.slice(i, num + i)); } return res; }; console.log(splitArray([22, 45, 13, 25, 6, 5, 10, 76, 15, 34, 66, 1], 5));
-
-
unshift()数组头部增加新元素 -
shift()删除数组首元素 -
sort()对元素排序-
是按照ASCII码顺序排序，适用于字母，但不适用于数字，所以不直接使用
sort()进行排序arr1.sort([22, 45, 13, 25, 6, 5, 10, 76, 15, 34, 66, 1])会发现从小到大排序错误reverse()逆序排列对数值进行排序
oldArr.sort((x, y) => x - y);正序排序oldArr.sort((x, y) => y - x);倒序排序
-
-
pop()删除并返回数组的最后一个元素 -
push()像数组末尾添加一个元素，并返回新的长度 -
indexOf()查找元素的下标值 -
splice()置顶下标位置添加或删除元素-
splice(index)从index的位置开始，删除之后的所有元素(包括第index个) -
splice(index,个数)删除从index位置开始的数 -
参数大于三个...
splice(元素下标, 删除元素个数(可以为0), 要添加的元素(可以不写))
-
-
concat()合并多个数组，返回新数组 -
join()把数组的所有元素放入一个字符串并返回该字符串。可以指定间隔符 -
includes(元素)判断该数组中是否包含某个元素 -
数组名.toString()数组转换为字符串并返回结构
var a = new Array();
var b = new Array();
a = [2,9,6]
b = [3,8]
console.log(a)
console.log(a.concat(b))
console.log(a.join("-"))
console.log(a.pop())
console.log(a.push(3))
console.log(a.reverse())
console.log(a.sort())
console.log(a.toString())
array.map()方法
array.map(function(item,index,arr), thisValue)
返回一个新数组，不会改变原有数组
- item:数组每一项 (必须)
- index:每项索引 (可选)
- arr：数组本身 (可选)
- thisValue：修改循环时的this指向，默认全局对象 (可选)
//值 索引 数组本身
let newArr = arr.map((val, index, array) => {
console.log(val);
console.log(index);
console.log(array);
});
结合Array.from使用
定义数组长度,然后自增,就能指定自增或自减
console.log(Array.from({ length: 4 }).map((item, i) => i + 1)); //[1, 2, 3, 4]
console.log(Array.from({ length: 4 }).map((item, i) => 4 - i)); // [4, 3, 2, 1]
遍历该数组，并处理数据
需要返回新数组时使用，否则请用请用forEach或者forof替代
let list = [
{ name: "张三", age: 18 },
{ name: "李四", age: 19 },
{ name: "王五", age: 20 },
{ name: "老六", age: 66 },
];
newArr = list.map((obj) => obj.name).join(",");
console.log(newArr);
array.filter() 方法
array.filter(function(currentValue,index,arr), thisValue)
array.reduce()方法
reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
计算数组中元素出现个数
let names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"];
let countedNames = names.reduce(function (allNames, name) {
if (name in allNames) {
allNames[name]++;
} else {
allNames[name] = 1;
}
return allNames;
}, {});
console.log(countedNames);
根据属性对Obj进行分类
let people = [
{ name: "Alice", age: 21 },
{ name: "Max", age: 20 },
{ name: "Jane", age: 20 },
];
function groupBy(objectArray, property) {
return objectArray.reduce(function (acc, obj) {
let key = obj[property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
}
let groupedPeople = groupBy(people, "age");
JSON对象
JSON.stringify()
JSON.parse()
let data = [
{
id: 1001,
title: "让我们一起写一个前端监控系统吧！",
replayCount: 14,
clickCount: 3612,
},
{
id: 1002,
title: "花了一天的时间，地板式扫盲了vue3所有API盲点",
replayCount: 21,
clickCount: 9812,
},
{
id: 1003,
title: "我被骂了，但我学会了如何构造高性能的树状结构🔥",
replayCount: 8,
clickCount: 973,
},
];
console.log(JSON.stringify(data));
//localStorage/sessionStorage默认只能存储字符串
//json.stringify()对象转为字符串
window.localStorage.setItem("name", JSON.stringify(data));
//json.parse()转回对象
console.log(JSON.parse(window.localStorage.getItem("name")));
字符串对象String
字符串.charAt(下标值) 返回在指定下标的字符
toLowerCase() 把字符串转换为小写
toUpperCasc() 把字符串转换为大写
substring(x,y) 提取字符串中两个指定的下标之间的字符
replace(x,y) 替换字串
str = str.replace(reg, function (word, index) {
//index下标
return symbol.repeat(word.length);
});
split() 使用指定的分隔符将一个字符串分割成子字符串数组
concat() 连接字符串
indexOf() 某个字符在字符串中首次出现的位置
anchor() 创建锚点
lastIndexOf(字符串) 在字符串中寻找指定的子串，并返回子串的终止位置
substr(起始索引,长度) 获取字符串的“起始索引”位置至长度的字符
日期对象Date
getDate() 返回在一一个月中的哪天(1~31)
getDay() 返回在一一个星期中的哪天(0~6),其中星期天为0
getHours() 返回在一天中的哪个小时(0~23 )
getMinutes() 返回在-小时中的哪- 分钟(0~59 )
getMonth() 返回在一年中的哪-月(0~11)
getSeconds() 返回在一分钟中的哪-秒(0~59)
getFullYear() 以4位数字返回年份，如2010
setDate() 设置月中的某一天(1~31)
setHours() 设置小时数(0~23)
setMinutes() 设置分钟数(0~59)
setSeconds() 设置秒数(0~59)
setFullYear() 以4位数字设置年份
扩展：
setInterval("showDate()", 1000);
setTimeout("showDate()", 10000); //间隔多久执行一次
动态显示当前时间
<body onload="showTime()">
<script>
function showTime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1; //因为month属性从0开始所以加1
var day = date.getDate(); // 日
var week = date.getDay(); // 星期几，是个数字
switch (week) {
case 1:
week = "星期一";
break;
case 2:
week = "星期二";
break;
case 3:
week = "星期三";
break;
case 4:
week = "星期四";
break;
case 5:
week = "星期五";
break;
case 6:
week = "星期六";
break;
case 0:
week = "星期日";
break;
}
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var t = "AM";
if (hour > 13) {
hour = date.getHours() - 12;
t = "PM"
} else {
hour = date.getHours();
}
second = second < 10 ? "0" + second : second;
var current = year + "年" + month + "月" + day + "日 " + hour + ":" + minute + ":" + second + " " + t +
" " + week;
document.getElementById("time").innerHTML = current;
}
setInterval("showTime()", 1000); //每隔1000毫秒（即1秒）显示一次当前时间
</script>
<h3>你好，现在是北京时间：</h3>
<h3><span id="time"></span></h3>
</body>
数学对象Math
用于执行常用的数学任务，它包含了若干个数字常量和函数
常用属性：
Math.PI 圆周率
常用方法：
ceil() 返回大于等于数字参数的最小整数，对数字进行上舍入
floor() 返回小于等于数字参数的最小整数，对数字进行下舍入
random() 返回一个[0,1]的随机小数
Math.round(Math.random()); //随机获取0和1
//随机获取 x~y 之间的一个整数
Math.round(Math.random()*(y-x)+x)
// 1～x 之间的一个整数
Math.ceil(Math.random()*x)
abs() 返回一个数的绝对值。
sqrt() 返回一个数的平方根。
round() 返回四舍五入后的整数。
pow(x, y) 返回一个数的 y 次幂。
event对象
type 查看事件类型
<script>
window.onload = function () {
var value = document.getElementById("btn");
value.onclick = function (e) {
console.log("这是一个" + e.type + "事件"); // 控制台打印事件类型
};
};
</script>
原生AJAX
AJAX 的英文全称为 Asynchronous JavaScript And XML，Asynchronous 是异步的意思。何为异步呢？在这里异步是指通过 AJAX 向服务器请求数据，在不刷新整个页面的情况下，更新页面上的部分内容。
用户在浏览器执行一些操作，通过 AJAX 引擎发送 HTTP 请求到服务器请求数据，请求成功后，由服务器把请求的数据拿给 AJAX 引擎，再由 AJAX 拿给浏览器。AJAX 在这个过程中相当于是服务员，用户点好菜，由服务员把菜单交给厨师，厨师做好菜，由服务员把菜送到用户的餐桌上。
同学们可能会想，我直接把菜单交给厨师，省去中间人沟通岂不是更简单？
浏览器如果直接向服务器请求数据的话，在请求过程中，你是不能对页面进行其他操作的，这叫同步请求，而把请求数据这个活外包给 AJAX 后，在请求过程中，用户还是可以对页面进行其他操作，这就是我们的异步请求了，也是 AJAX 的核心特点。
1. 创建 XMLHttpRequest 对象
在 AJAX 中，XMLHttpRequest 对象是用来与服务器进行数据交换的。其创建如下所示：
var httpRequest = new XMLHttpRequest();
为了保证浏览器的兼容性，我们可以用以下方式来创建。
if (window.XMLHttpRequest) {
// Mozilla，Safari，IE7+ 等浏览器适用
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE 6 或者更老的浏览器适用
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
2.向服务器发送请求
在步骤一中我们已经创建了用于服务器交换数据的 XMLHttpRequest 对象，要向服务器发送请求，我们需要调用该对象中的 open 和 send 方法。
其使用如下：
// 规定发送请求的一些要求
httpRequest.open("method", "url", async);
// 将请求发送到服务器
httpRequest.send();
open 方法中的参数说明如下：
method是请求的类型，常见的有GET和POST。url是请求的地址。async是设置同步或者异步请求，其值为布尔类型，当为 true 时，使用异步请求；当为 false 时，使用同步请求，默认为 true。
3.服务器响应状态
我们使用 HTTP 请求数据后，请求是否成功，会反馈给我们相应的请求状态。我们使用 onreadystatechange 去检查响应的状态，当 httpRequest.readyState 为 4 并且 httpRequest.status 等于 200 时，说明数据请求成功，其使用如下：
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
// 请求成功执行的代码
} else {
// 请求失败执行的代码
}
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AJAX 的使用</title>
<script>
window.onload = function () {
if (window.XMLHttpRequest) {
// Mozilla，Safari，IE7+ 等浏览器适用
var httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE 6 或者更老的浏览器适用
var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
// 规定发送请求的一些要求
httpRequest.open(
"GET",
"https://jsonplaceholder.typicode.com/users",
true
);
// 将请求发送到服务器
httpRequest.send();
httpRequest.onreadystatechange = function () {
console.log(httpRequest.readyState);
console.log(httpRequest.status);
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
// 请求成功执行的代码
document.getElementById("item").innerHTML = "请求成功";
} else {
// 请求失败执行的代码
document.getElementById("item").innerHTML = "请求失败";
}
};
};
</script>
</head>
<body>
<div id="item"></div>
</body>
</html>
2、3、4 是 readyState 的值，它的取值有以下几种：
- 0 代表未初始化请求。
- 1 代表已与服务器建立连接。
- 2 代表请求被接受。
- 3 代表请求中。
- 4 代表请求完成。
浙公网安备 33010602011771号