定时器
- setTimeout( )是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。
setTimeout()方法设置一个定时器,该定时器在定时器到期后执行一个函数或指定的一段代码
setTimeout(
function(arg1,arg2,arg3){
console.log(arg1*arg2-arg3) // -1
},
2000,
1,2,3
)
- 间隔性定时器setInterval () : 每隔一定的时间就触发一次
计时器setInterval():在执行时,从载入页面后每隔指定的时间执行代码。
- 创建延迟定时器
window.setTimeout(函数类型,延迟时间)
var timer1=window.setTimeout(function (){
console.log("你好啊!!!");
},3000);
- 清除延迟定时器
window.clearTimeout(定时器名称)
function func(){
//清除延时器
window.clearTimeout(timer1);
}
- 创建循环定时器
setInterval(function(){
console.log(111);
},1000) //每隔一秒钟打印出111
- 重置循环定时器
function reset1(){
//重置定时器,重新给定参数,清除定时器,重新创建定时器
i=0;
window.clearInterval(timer);
timer=window.setInterval(func,2000);
}
变量的命名规范
- 首字母必须是字母、下划线(-)或者美元符号($)。
- 其他字母可以是下划线(_)、美元符号($)、字母或者数字
- 一般采用驼峰法:一个单词所有小写,多个单词从第2个单词开始首字母大写。。
- 变量名是区分大小写的,不能是关键字或保留字。
字符串定义
- 判断一个字符串在不在某个字符串里面
let index1 = str.indexOf('宇宙')
console.log(index1);//0
- 截取字符串
let str2 = str.substr(7,2)
console.log(str2); // 江西
- 修改字符串
let str3 = str.replace("宇宙","互联网")
console.log(str3); // 互联网的中心——江西软件职业技术大学
- 分割字符串
let str ='1-2-3-4-5!
let str1 = str.split('-!
console.log(str); //1-2-3-4-5
console.log(str1); //['1','2,3 ,4',5']
- 大小写转换
console.log('ABCDEFG'.toLowerCase()); //abcdefg
console.log('abcdefg'.toUpperCase()); //ABCDEFG
数组的增删改查
1.数组新增
数组新增数组名.push('元素'):添加到末尾。
array.push('柯震东')
console.log(array); //[柯震东']
数组名.unshift('元素'):添加到开头。
array.unshift('翟天临')
console.log(array); //['翟天临’]
2.数组删除
数组名.pop( ): 删除最后一个元素
array.pop()
console.log(array);
数组名.shift( ): 删除第一个元素
array.shift()
console.log(array);
3.数组删除/添加指定元素
数组名.splice(start,deleteCount,add)
array.splice(3,2)
console.log(array);
ES6set数据结构
Set函数可以接收一个数组作为参数,用来初始化。
const s = new Set([1,2,3,3,4,4])
console.log(s); //Set(4) (1,2,3,4)
console.log(s.size); //4
利用Set进行数组去重
let arr = [1,22,33,33,44,44]
let set = new Set(arr)
console.log(set); //Set(4) {1,22,33,44]
HTTP请求方法
GET请求: 用来获取数据,不对服务器的数据做任何的修改、新增、删除等操作。
POST请求:数据发送到服务器以创建或更新资源,侧重于更新数据.
PUT请求: 数据发送到服务器以创建或更新资源,侧重于创建数据。
DELETE请求:删除指定的资源。
HEAD请求: HEAD方法与GET方法相同,是从服务器获取信息。服务器不会返回请求的实体数据,只会传回相应头可以用在很多并不真正需要资源的场合,避免传输body数据的浪费。
PATCH(布丁)请求: 用于上传数据并更新“部分”资源。
HTTP状态码
1开头的状态码 (信息类)
100,接收的请求正在处理
2开头的状态码 (成功类)
200,服务器已成功处理了请求。
3开头的状态码 (重定向)
301,永久性重定向。302,临时重定向。
4开头的状态码 (客户端错误)
400,错误请求,服务器不理解请求的语法。403,服务器拒绝请求
5开头的状态码 (服务器错误)
500,服务器内部错误,无法完成请求。503,服务器停机维护,无法处理请求
AjAX发送get请求
AjAX发送get请求,如何传递参数?
拼接在url地址上
格式: url地址?key=value
url地?key1=value2&key2=value2
实现AJAX的基本步骤
要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:
- 创建XMLHttpRequest对象,即创建一个异步调用对象.
- 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
- 设置响应HTTP请求状态变化的函数.
- 发送HTTP请求.
- 获取异步调用返回的数据.
- 使用JavaScript和DOM实现局部刷新.
1、创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
2、创建HTTP请求
创建HTTP请求可以使用XMLHttpRequest对象的open()方法,其语法代码如下所示:
XMLHttpRequest.open(method,URL,flag,name,password);
代码中的参数解释如下所示:
- method:该参数用于指定HTTP的请求方法,一共有get、post、head、put、delete五种方法,常用的方法为get和post。
- URL:该参数用于指定HTTP请求的URL地址,可以是绝对URL,也可以是相对URL。
- flag:该参数为可选,参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步、false表示同步,默认为true。
- name:该参数为可选参数,用于输入用户名。如果服务器需要验证,则必须使用该参数。
- password:该参数为可选,用于输入密码。若服务器需要验证,则必须使用该参数。
3、设置响应HTTP请求状态变化的函数
创建完HTTP请求之后,应该就可以将HTTP请求发送给Web服务器了。然而,发送HTTP请求的目的是为了接收从服务器中返回的数据。从创建XMLHttpRequest对象开始,到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态。
- 未初始化状态。在创建完XMLHttpRequest对象时,该对象处于未初始化状态,此时XMLHttpRequest对象的readyState属性值为0。
- 初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时,该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。
- 发送数据状态。在初始化XMLHttpRequest对象后,使用send()方法发送数据时,该对象处于发送数据状态,此时XMLHttpRequest对象的readyState属性值为2。
- 接收数据状态。Web服务器接收完数据并进行处理完毕之后,向客户端传送返回的结果。此时,XMLHttpRequest对象处于接收数据状态,XMLHttpRequest对象的readyState属性值为3。
- 完成状态。XMLHttpRequest对象接收数据完毕后,进入完成状态,此时XMLHttpRequest对象的readyState属性值为4。此时接收完毕后的数据存入在客户端计算机的内存中,可以使用responseText属性或responseXml属性来获取数据。
xhr.onload = function()(
?num=10
// console.log(xhr.response);
// console.log(xhr.response);
let obj = JSON.parse(xhr.response.
console.log(obj);
}
4、设置获取服务器返回数据的语句
// 4.调用send方法
xhr.send( );
ajax发生post请求:
1.创建请求对象。
2.调用open方法,设置请求方式和请求地址
3.设置请求头。
4.设置请求后的回调函数
5.调用send()方法。
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= 小智')
map遍历数组
- map的使用方法和forEach类似。
- 和forEach不同的是,map有返回值
基础写法:
var num = [1,2,3,4,5,6];
//把原数组的内容都乘以2,然后返回给一个新数组
var _num = num.map(item=>{
return item *2
})
console.log(_num); //[2, 4, 6, 8, 10, 12]
详细写法
var num = [1,2,3,4,5,6];
var _num = num.map((item,index,arr)=>{
console.log(item,index,arr);
})
参数:
item:【必填】数组中正在处理的当前元素。
index:【可选】数组中正在处理的当前元素的索引。
arr:【可选】方法被调用的数组。也就是当前元素属于的数组对象。
filter 过滤器
filter应用场景: 用于筛选数组中满足条件的元素,返回筛选后的新数组
例: 找出数组中的偶数;求数组中大于10的所有元素。
语法:
数组.filter(function(value,index,arr){
return 筛选条件
})
forEach和map方法有什么区别?
- forEach()方法不会返回执行结果,也就是说forEach()方法会修改原来的数组,但是没有返回值
- map()方法得到一个新的数组,是map方法修改数组后返回回来的新数组
some()方法
some 用于判断数组中是否存在满足条件的元素
some函数返回一个布尔类型值
let arr = [23,31,60,88,0,90,108,260]
let arr1 = arr.some((item,index)return item < @
1;
console.log(arr1);
every方法
every数组方法的作用
判断数组中是否所有元素都满足条件
语法:array.every( function ( item, index,arr) {} )
第一个参数: item,必须,当前元素的值
第二个参数 : index,可选,当前元素在数组中的索引值
第三个参数 : arr,当前元素所处的数组对象
every方法特点
(1)循环次数 !== 数组长度
(2)函数内部的return
return true : 循环继续 当前元素满足条件,继续判断,如果循环执行完毕还是true,则every的返回值就是true
return false : 循环结束,当前元素不满足条件,every的返回值也是false
(3)every方法的返回值
return true : 全部元素都满足条件
return false : 有元素不满足条件
注意点:
(1)every()方法不会对空数组进行检测
(2)every()方法不会改变原始数组
// 需求: 判断数组中没有负数
let arr = [23,31,60,88,-50,90,108,260];
let arr1 = arr.every((item)
return item > 0;
1;console.log(arr1); //false
数组findIndex()方法
findIndex()方法 返回传入一个测试条件(函数)符合条件的数组第一个元素位置
findIndex()方法为数组中的每个元素都调用一次函数执行:
当数组中的元素在测试条件时返回true时,findIndex()返回符合条件的元素的索引位置,
之后的值不会再调用执行函数
如果没有符合条件的元素返回-1
参数
- currentValue 必需,当前元素
- index 可选 当前元素的索引
- arr 可选 当前元素所属的数组对象
- thisValue 可选 传递给函数的值一般用this值。如果这个参数为空,undefined会传递给this值
let arr = [
{ name:张三 ,age:20
name:'李四',age:30
name: 王五',age:25
name:'赵六 ,age:33
name:'小七',age:10
// 数组findIndex方法: 获取符合条件的第一个元素位置(下标)
// 需求: 查找arr1中第一个未成年在什么位置let res = arr.findIndex( (item,index)
return item.age < 18;
})
console.log(res); //4
数组reduce()方法
语法:
arr.reduce(callback,[initialValue])
reduce 为数组中的每一个元素依次执行,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。
callback (执行数组中每个值的函数,包含四个参数)
1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
2、currentValue (数组中当前被处理的元素)
3、index (当前元素在数组中的索引)
4、array (调用 reduce 的数组)
initialValue (作为第一次调用 callback 的第一个参数。)
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)); 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)); //8
6.向上取整/向下取整: Math.ceil()
Math.floor
console.log(Math.ceil(1.2)); //2
console.log(Math.ceil(-1.2)); //-1
console.log(Math.floor(1.8)); //1
console.log(Math.floor(-1.8)); //-2
cookie
使用场景:
- 记住密码,下次自动登录。
- 记录用户浏览数据,进行商品(广告)推荐
特点:
- cookie保存在浏览器端。
- 单个cookie保存的数据不能超过4KB.
- cookie中的数据是以域名的形式进行区分的。
- cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除5: cookie中的数据会随着请求被自动发送到服务器端。