1.什么是AJAX?
Ajax
的全称是 Asynchronous JavaScript And XML
(异步 JavaScript
和 xml
)
通俗理解:在网页中利用 XMLHttpRequest
对象和服务器进行数据交互的方式,就是Ajax
2.AJAX发生请求,传递参数
get方式:
// 1.创建请求对象
let xhr = new XMLHttpRequest();
// 2.调用open方法,设置请求方式和请求地址
xhr.open( 'get','https://autumnfish.cn/api/joke/lis
?num=10)
// 3.设置请求成功后执行的回调函数
xhr.onload = function()(
// console.log(xhr.response);
// console.log(xhr.response);
let obj = JSON.parse(xhr.response.
console.log(obj);
}
// 4.调用send方法
xhr.send( );
POST方式
// 1.实例化ajax对象
let xhr = new XMLHttpRequest();
// 2.设置请求方法和地址
//(用户注册)
xhr.open( 'post','https://autumnfish.cn/api/user/register')
// 3.设置请求头 (post请求才需要设置)
xhr.setRequestHeader("Content-type","application/x-www-form-urlenco
// 4.注册回调函数
xhr.onload = function(){
console.log(xhr.responseText);
5.发送请求:参数格式key = value
hr.send('username= lyz')
map数组迭代
应用场景:遍历每一个元素,并对每一个元素做响应的处理,返回一个新数组
let arr = [23,31,60,88,108,206];//需求:数组中每一个元素+1let arr1 = arr.map((value,index) => {return value + 1; //让每一个元素的值+1})console.log(arr1); //[24, 32, 61, 89, 109, 207]
注意点:
a.回调函数执行次数 = 数组长度 (数组中有几个元素,回调函数就会执行几次)
b.map函数返回的新数组长度 == 原数组长度
c.回调函数中一定要return,返回的是当前遍历的元素值(如果不return,新数组中的每一个元素都变成了undefined)
filter数组迭代
应用场景:筛选数组中满足条件的元素,返回筛选后的新数组
let arr = [3,31,60,-88,90,-108,260]
// 求数组中大于10的所有元素
let nArr = arr.filter(function(value){// 筛选条件
return value > 10
// nArr里保存的是所有满足条件的元素
console.log(nArr); //[31,60,90,260]
注意点:
a.回调函数执行次数 == 数组长度
b.filter函数返回的新数组长度 ! = 原数组长度
forEach数组迭代
应用场景:遍历数组,相当于for循环另一种写法
let arr = [23,31, 60,88,90,108,260];
// 对数组进行累加
let sum = 0
arr.forEach(function(value){sum += value
})
console.log(sum); //660
注意点:
a.回调函数执行次数 == 数组长度(数组中有多少元素,回调函数就会执行几次)
b.forEach函数没有返回值c.回调函数不需要return(就算手动ruturn,也不会结束循环)
forEach和map方法有什么区别?
forEach()方法不会返回执行结果,也就是说forEach()方法会修改原来的数组,但是没有返回值。 map()方法得到一个新的数组,是map方法修改数组后返回来的新数组。
some:判断数组中是否有元素符合给定条件
应用场景:用于判断数组中是否存在满足条件的元素
let arr = [23,31,60,88,0,90,108,260]
let arr1 = arr.some((item,index)
return item < 0
});
console.log(arr1);
注意点:
a.回调函数执行次数 ! = 数组长度
b.some函数返回一个布尔类型值
c.回调函数返回布尔类型值用于结束遍历
return true; 遍历结束,且some函数返回值为true。
return false; 遍历继续,且some函数返回值为true
every判断是否所有元素符合过滤条件
应用场景:判断数组中是否所有元素都满足条件
let arr = [23,31,60,88,-50,90,108,260];
let arr1 = arr.every((item) =>{
return item > 0;
});
console.log(arr1); //false
注意点:every函数返回一个布尔类型值
findIndex返回第一个匹配的元素位置
应用场景:适合于数组中元素为对象类型,比传统for循环要高效
let arr = [
{ name:张三 ,age:20 },
{name:'李四',age:30 },
{name:'王五',age:25 },
{name:'赵六 ,age:33 },
{name:'小七',age:10 },
]
//查找arr1中第一个未成年在什么位置
let res = arr.findIndex( (item,index) =>{
return item.age < 18;
})
console.log(res); //4
reduce数组操作
应用场景:数组求和/平均数/最大值/最小值
let arr1 = [20,55,80,70,92,35];
let res1 = arr1.reduce((sum,value) =>
return sum + value;
console.log( res1); //352
注意点:最好给一个初始值,避免空数组报错
npm instal 模块名: 本地安装。安装到当前项目的node_modules目录下,只有当前项目可以用此依赖.
npm install 模块名 -g: 全局安装。电脑上的任何项目都可以使用这个依赖。
npm install 模块名 -save: 安装到node modules目录下,一般安装生产环境所用依赖。如vue,element-unpm install 模块名 -save -dev: 安装到node modules目录下,一般安装开发环境所用依赖。如webpack.
四.math对象
1.圆周率: Math.PI
console.og(Math.PI); //3.141592653589793
2.绝对值: Math.abs()
console.log(Math.abs(-2)); //2
3.找最大值/最小值: Math.max() Math.min()console.log(Math.max(1,2,3)); //3
console.log(Math.min(1,2,3)); //1
4.0-1随机小数: Math.random
console.log(Math.random());
5.幂运算: Math.pow(x,y)
console.log(Math.pow(2,3)); //86.向上取整/向下取整: Math.ceil() Math.floor()
console.log(Math.ceil(1.2)); //2
console.log(Math.floor(1.8)); //1
应用场景:记录用户浏览数据,进行商品(广告)推荐
特点:
cookie保存在浏览器端。
单个cookie保存的数据不能超过4KB.
cookie中的数据是以域名的形式进行区分的。
cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除cookie中的数据会随着请求被自动发送到服务器端。
什么是localstorage?
在HTML5中,加入了一个localstorage特性作为本地存储来使用。它解决了cookie存储空间不足的问题,每条cookie的存储空间为4K,localStorage一般为5M。
localstorage的生命周期:
LocalStorage生命周期是永久,这意味着除非用户在显示在浏览器提供的UI上清除LocalStorage信息,否则这些信息将永久存在。
什么是SessionStorage?
为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面的重新加载。关闭浏览器之后就会消失。
SessionStorage的生命周期:
SessionStorage生命周期为当前窗口或标签页
一旦窗口或标签页被永久关闭了,那么所有通过Session存储的数据也就被清空了
七.内置fs模块
fs模块作用: node提供了一个内置模块叫fs(filesystem),专门用来操作文件的。
可以读取一个文件的内容,也可以把内容写入到一个文件。
读取文件内容我们首先需要引入 fs模块:
const fs = require('fs')
注意:fs里面的方法是异步
文件的读取:fs.readFile()
//读取文件
fs.readFile(path[,options],callback)({
//不管是读取成功,还是读取失败,都会调用这个回调函数。
//如果读取失败,err里就会有错误信息。
// 如果读取成功,err为空,data里就会有读取的内容
})
文件的写入:fs.writeFile()
fs.writeFile(filename,data[,options],callback)
追加文件内容:fs.appendFile()
//追加文件内容
fs.appendFile('路径','要追加的内容',err => {
if(!err){
console.log('追加成功');
}
})
拷贝的文件:fs.copyFile()
// 拷贝文件
fs.copyFile('要拷贝的文件路径','目标文件的路径')
文件的创建:fs.mkdir()
function createDirectory(){
fs.mkdir('../files/ff',()=>{
console.log('创建文件夹成功')
})
}
删除文件夹:fs.rmdir()
function deleteDirectory(){
fs.rmdir('../files/ff',()=>{
console.log('删除文件夹成功')
})
}