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];
//需求:数组中每一个元素+1
let 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('删除文件夹成功')
})
}
八.数据类型
JavaScript主要数据类型共有7种,有string、number、boolean、undefined、null、symbol、object。其余7种可以笼统的分为两大类:基本数据类型和引用数据类型。
基本数据类型:string(字符串)、number(数字)、boolean(布尔)、null(空)、undefined(未定义)、symbol(符号)
引用数据类型:object(对象,除了基本数据类型其他都是对象。数组是对象、函数是对象、正则表达式也是对象)
基本数据类型:
基本数据类型的主要特点是赋值方式是传值,并且值存在栈中。
引用数据类型:
引用数据类型的主要特点是赋值方式是传址,并且值存在堆中。(因为引用数据的值的大小无法确定,要根据情况进行特定的配置)
基本数据类型和引用数据类型有什么区别?
1.在方法中定义的非全局基本数据类型的具体内容是存储在栈中的。
2.引用数据类型变量,其具体内容都是存放在堆中的,而栈中存放的是其具体内容所在的内存地址。
同步操作和异步操作
同步,可以理解为在执行完一个函数或方法之后,一直等待系统返回值或消息,这时程序是出于阻塞的,只有接收到返回的值或消息后才往下执行其他的命令。
异步,执行完函数或方法后,不必阻塞性地等待返回值或消息,只需要向系统委托一个异步过程,那么当系统接收到返回值或消息时,系统会自动触发委托的异步过程,从而完成一个完整的流程。
同步操作和异步操作的区别:
同步在一定程度上可以看做是单线程,这个线程请求一个方法后就待这个方法给他回复,否则他不往下执行(死心眼)。
异步在一定程度上可以看做是多线程的,请求一个方法后,就不管了,继续执行其他的方法。
九.变量声明
let是es6中出的标准 let定义的变量是块级作用域,只在let所在行数内有效,函数外无法使用变量。
// 声明并设置初始值
let y = 10
console.log(y);
// 重新赋值
y = "感觉自己萌萌哒"
// 打印结果
console.log(y); //感觉自己萌萌哒
const定义的js变量是一个常量。不可以修改(相当于只读不可写入),而且必须初始化(给const一个初始值,不能为空)
笔记:
1.让外部访问函数内部变量变成可能
2.变量会常驻在内存中
3.可以避免使用全局变量,防止全局变量污染
好处:可以读取其他函数内部的变量,并将其一直保存在内存中。
坏处:可能会造成内存泄漏或溢出。
闭包的第一个用途是使我们在函数外部能够访问到函数内部的变量。通过使用闭包,可以通过在外部调用闭包函数,从而在外部访问到函数内部的变量,可以使用这种方法来创建私有变量。
闭包的另一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中,因为闭包函数保留了这个变量对象的引用,所以这个变量对象不会被回收。