javascript内置对象API
文章目录
-
- 常用api
- Date
- String
- Math对象
- Array
- 定义对象的几种方法
- JSON对象
- Number对象
- Boolean对象
- Storage 对象分为两类（ sessionStorage 和 localStorage）
-
- sessionStorage&localStorage
- Object 对象;
- Promise 对象;
- File对象||FileReader 对象
- Blob 二进制大对象
- FormData 对象
- 递归函数
- 节流与防抖
-
-
- 防抖
- 节流
-
常用api
clearInterval() //清除定时器
setInterval() //制作定时器
toFixed(N) //保存N位小数
arguments.length; //传参的个数；
arguments对象 //保存实参，类似数组，不是数组。
window.open() //打开新窗口；
obj.hasOwnProperty(key) //判断对象是否包含某个键;
Date
get/setFullYear() //获取/修改年份；//返回年份
get/setMonth() //月份,取值范围为0~11，所以在返回值的基础加一，或者修改日期减一；
get/setDate() //日期（几号）
get/setDay() //星期 //返回0~6，0代表星期天，
get/setHours() //时
get/setMinutes() //分
get/setSeconds() //秒
get/setMilliseconds() //毫秒0~999之间;
get/setTime() //返回从1970年1月1日到日期对象的日期的毫秒数；
valueOf()//同上;
Date.parse(obj) //同上;
Date.now() //同上，可以不实例化对象就可以直接调用
toLocaleString() //日期和时间以字符串形式输出。xxxx/xx/xx上午xx:xx:xx
toLocaleDateString() //把时间对象转换成年月日字符串xxxx/xx/xx
toLocaleTimeString() //把时间对象转换成时间字符串 上午xx:xx:xx。
String
fontcolor("color") //改变字符串的颜色；(相当于添加一个font标签,配合innerHTML使用);
fontsize("size") //改变字体大小； (相当于添加一个font标签,配合innerHTML使用);
bold() //字体加粗； (相当于添加一个font标签,配合innerHTML使用);
italics() //字体斜体； (相当于添加一个font标签,配合innerHTML使用);
indexOf(index) //索引返回位置 两个参 第一个是索引下标 第二个是位置
charAt(char) //索引字节 返回字节的值 索引的是个下标；
charCodeAt(index) //索引字节 返回字节的ASCII码 索引的是下标，超出范围为索引到返回NaN, ;
String.fromCharCode() 将ASCII码转换成字符串;
startsWith(char) //判断字符串是不是以char开头；
endsWith(char) //判断字符串是不是以char结束；
includes(string,index) //判断字符串是不是包含字符串，index是开始查找的位置；
trim() //修剪两端的空格 去除字符串两端的空格 ；
split('char') //分割字符串， 返回一个数组 第一个值是分割的字节 第二个值是分割数组的长度；
slice(starindex,endindex) //(切片 截取字符串)第一次参数是开始，第二个参数结束，开始截取，结束不截取，按照下标截取字符串；
substring(starindex,endindex) //（截取字符串）提取两个字符之间的字符串，与slice不同之处在于负数自动转化为0，开始值与结束值可以互换；
substr( 'index'，'length') //(抽取指定字符的字符串) 同上；不同点在于第二个参数，一个是位置，另一个是长度；
toUpperCase() //来将文本转换为大写；
toLowerCase() //转换成小写；
match() //索引字符串中是否包含此字节，包含返回此字节，不包含返回未定义
replace() //在字符串中用某些字符替换另一些字符，/char/i对大小写敏感，/char/g对全部数组进行替换；(不修改源字符串
repeat(n) //复制字符串n次
Math对象
ceil(x) //向上（大）取整，（天花板）取最接近x上面的值，比如Math.celi(3.2)==4；
floor(x) //向下（小）取整，(地板)取最接近x下面的值，比如Math.floor(3.2)==3;
round() //四舍五入取整；
random() //返回0~1之间的随机数；
max() //最大值；
min() //最小值；
pow(a,n) //幂运算 a的n次方;
abs(-5) //绝对值 //5
max.apply(null, arr) //数组最大值；
Math.abs(x) 返回 x 的绝对值
Math.exp(x) 返回 Math.E 的 x 次幂
Math.expm1(x) 等于 Math.exp(x) - 1
Math.log(x) 返回 x 的自然对数
Math.log1p(x) 等于 1 + Math.log(x)
Math.pow(x, power) 返回 x 的 power 次幂
Math.hypot(...nums) 返回 nums 中每个数平方和的平方根
Math.clz32(x) 返回 32 位整数 x 的前置零的数量
Math.sign(x) 返回表示 x 符号的 1、0、-0 或-1
Math.trunc(x) 返回 x 的整数部分，删除所有小数
Math.sqrt(x) 返回 x 的平方根
Math.cbrt(x) 返回 x 的立方根
Math.acos(x) 返回 x 的反余弦
Math.acosh(x) 返回 x 的反双曲余弦
Math.asin(x) 返回 x 的反正弦
Math.asinh(x) 返回 x 的反双曲正弦
Math.atan(x) 返回 x 的反正切
Math.atanh(x) 返回 x 的反双曲正切
Math.atan2(y, x) 返回 y/x 的反正切
Math.cos(x) 返回 x 的余弦
Math.sin(x) 返回 x 的正弦
Math.tan(x) 返回 x 的正切
Array
includes() //判断数组是否包含此内容,返回布尔值;
concat() //链接两个或者多个数组，返回一个新数组，不会改变原来数组（用法：arrayobject.concat(arrayobject2)(第一个不用加）
join() //分割数组，将数组以字符串的形式进行分割，参数是分割符，每个元素之间都会加上分割符；
reverse() //颠倒数组元素的位置，会改变原数组；
unshift() //往数组头部添加元素； !!!返回值为最后一个元素，原数组会被删除;
push() //往数组尾部添加元素
shift() //删除数组头部元素；!!!返回值为第一个元素，但是原数组也会被删除;
pop() //删除数组尾部元素；
splice(删除元素的开始下标，删除几个元素，替换的元素)//指定删除元素，可以用新元素替换；
(注意：删除元素时，会立即执行，因此下标会改变，在配合for循环时，会造成顺序错乱，记得让i值减一)；
splice() //也可以把元素添加到指定位置，删除的元素为0，会在元素下标元素之前添加;
fill() //充满整个数组;参数是将真个数组数据替换成传入的值， 也可以直接创建一个带长度的数组;
new Array(10) // 创建一个10个长度的数组;
Array.isArray() //判断是不是数组，返回值是布尔类型的 要带父类Array来判断；
slice() //切片 选定元素（不包含选中元素） String.slice() 与 Array.slice() 相似 截取元素；
sort(方法函数) //数组排序，如果有方法，执行方法函数，没有方法执行Unicode码顺序排序；{
该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
function sortNum(a,b){
//若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
return a-b; //升序，降序的话改成b-a；
若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。
}
}
Array.from（Stringobject，function（value(值),key（下标））//转换类数组为数组， 返回值为一个全新的数组。第一个参数必填
//将类数组转换为数组,但是字符串效果是每个字符都是数字的一个元素 ,有时候我们不想这样，可以用字符串的split()方法;
//可以选择使用回调函数，返回值为数组；
forEcach() //遍历数组；
forEach(funxtion(value,index,array){
//方法体，可用于二维多维数组的遍历，没有返回值,不能修改原数组 ；
});
map() //映射，对数组每个元素指定函数，返回值为数组；
map(function(value,index,array){；
//对数组中的每一个元素运行指点的函数，返回每次函数调用的结果，组成新数组。
//return
})
filter() //筛选数组， 返回一个新数组；
fliter(function (value,index,array){
return //判断条件；条件为真，添加到新数组中，条件为假，不添加。
字符串索引可以配合match使用；
});
find(function(vlaue,index,arrray){
return //判断条件，条件为真，返回第一个符合条件的；
})
findIndex(function(value,index,array){
return //判断条件，返回符合条件的第一个索引;
});
some() //查找元素如果由于一个是否有满足条件的元素，如果有，返回true，没有返回false;
some(functioin(value，index，array){
return //判断条件，字符串索引可以配合match使用；返回值为布尔类型；
})
eaery(function(value,index,array){ //判断是否全部满足这个元素，是返回true,不是返回false;
return //判断条件，字符串索引可以配合match使用；返回值为布尔类
})
定义对象的几种方法
1，var obj=new Object({ //通过Object()方法创建对象;
title:'zhang';
});
2, var obj={}; //以字面量方式构建函数;
3, var obj=Object.create({ //以Objext.create()方法定义对象;
title:'zhang ';
});
4,function ClassName(参数){ //通过构造函数实例化对象;
this.参数=参数;
由于我们创建的是 p1 对象，因此构造函数内部的this指的就是 obj对象。
注： 构造函数中的 this 指的是对象，具体指哪个对象，需要看谁访问构造函数中的属性/方法
}
var obj = ClassName(实参);
JSON对象
格式：{ "id":1,"uname":'jon' } //key必须要双引号包裹，值可以用单引号;
JSON.parse() //将json数据转换成对象;
JSON.stringify() //将对象转化成JSON数据;
将字符串转化json对象：
var json = JSON.parse(str);
var json = eval("(" + str + ")"); //不必遵守格式
var json = (new Function("return " + str))(); //不必遵守格式
Number对象
Number() //将其他类转换成数字；
parseInt() //转换为Int类型;
parseFloat() //转换为Float类型;
isNaN() //判断是否为非数字;
Number.isInteger() //判断参数是不是整型; (不可省略Number);
Number.isSafeInteger() //判断参数是不是双精度的整形;
Boolean对象
Boolean() //将其他类转换为Boolean类型, 除了(0,NaN,undefined,null,false,),其余都为真（ture）;
Storage 对象分为两类（ sessionStorage 和 localStorage）
sessionStorage 用来存储与页面相关的数据，它在页面关闭后无法使用。
而 localStorage 则持久存在，在页面关闭后也可以使用；
sessionStorage&localStorage
sessionStorage对象和 cookie 相似；区别是 DOM Storage 提供了更大容量的存储空间
length：返回当前存储在 Storage 对象中的键值对数量。
key(index)：返回列表中第 n 个键的名字。Index 从 0 开始。
getItem(key)：返回指定键对应的值。
setItem(key, value)：存入一个键值对。
removeItem(key) ：删除指定的键值对。
clear()：删除 Storage 对象中的所有键值对。
Object 对象;
Object.assign() 将对象的地址传送给另一个变量,(浅拷贝); 第二个传给第一个，会把第一个覆盖调;
Object.create() //创建一个新对象并赋值（深拷贝）;
Object.keys() //获取对象所有的键值 并返回一个数组;
Object.values() //获取对象所有的值，并返回一个数组;
Object.entries() //将对象的每个键值对转化成一个数组，存放在一个大数组中;
Object.is() //判断两个对象是否一致（值类型判断值是否一直，引用类型判断是否指向同一块内存地址）;
Object.freeze() //冻结对象；对象的所有属性无法进行删除，修改操作，只能进行枚举； ( 如果像对单一属性进行冻结操作，使用下面的definnProperty() 函数);
Object.isFrozen() //判断这个对象是否被冻结;
Object.preventExtensions() //阻止一个对象进行扩展（不能给对象添加属性，打点赋值不会报错，但没有效果.不能使用defineProperty() 给对象添加属性，会报错);
Object.isExtensible() //判断对象是否可以扩展;
Object.seal() //密封对象,对象可以被修改，枚举，但是不能进行删除,添加;
Object.isSealed() //判断对象是被密封;
delete Object.value //删除对象的一个属性;
defineProperty() //为一个对象添加一个属性，并且可以为属性添加一个属性描述：
例如：属性是否可以重写 writeable 、是否可枚举enmuable，set/get访问器等
参数一 //要添加属性的对象; 参数二 //要添加的属性名 参数三 //属性描述对象{}
下面的是参数三的配置键
value //这个属性的属性值;
configurable //配置一个属性是否可以被删除，如果值为true，该属性可以被删除的，如果为false该属性不能被删除，默认值为false
enumerable //该属性是否可以枚举，是否可以通过for...in..来进行遍历，默认值为false,为false的时候不能进行枚举，true的时候可以被枚举;
writable //配置该属性是否可以被重写，该属性为true证明可以被修改，为false不能被修改，默认值为false
set/get // set和get访问器不能和value 和 writeable这个配置连用;
set //设置属性值 set:functioin(value){ window.HeightValue=value}; //为什么使用window.HeightValue 因为这里不能直接是给属性赋值
要找个变量接收下，让下面的get方法ruturn出去; 这样定义不严谨，一般HeightValue 这个值要定义一个全局变量，在严格模式下，就不能够这样写啦;
get //获取属性值 get:functioin(){return HeightValue}; 注意！方法里面不能打点调用这个属性，不然形成死循环;
forof 于forin 的区别 forof只能遍历数组，而forin既可以遍历数组，也可以遍历对象; forof遍历对象，只能使用Object.entries()方法，将对象转换为数组
这样事半功倍，遍历对象推荐使用forin ;
Promise 对象;
promise 承诺的意思;
异步执行：在执行一段代码时，不影响后续代码执行，称之为异步执行，一般这个异步执行函数，都会有回调函数，在代码执行完成之后调用此函数;（不知道什么时候执行完毕）;
同步执行：代码按照顺序执行，下局代码要等到上句代码执行完毕才会执行;(会堵塞代码的执行);
Promise 对象，是es6新增的特性，主要解决异步执行多层嵌套的问题（解决地狱回调，倒金字塔），
promise有三个状态，pending状态，创建promise对象的状态;
resolve状态：异步执行成功的状态，（例如请求数据成功）
reject状态：异步执行失败的状态,(例如请求数据失败)
通过new 关键字创建一个promise对象,参数是一个回调函数，回调函数可以有两个参数，resolve函数和reject()函数用来将据传递出去；
Promise 对象一般写在一个函数中，通过return将promise对象返回出去，配合peomise对象的api，解决地狱回调;
如果异步任务执行完成，例如请求得到数据了，使用resolve();
如果异步任务没有执行完成。例如没有得到数据，使用reject();
functioin add(){
var promise=new Promise((resolve,reject)=>{
resolve("成功数据");
reject("失败数据");
});
return promise;
}
promise.then((data)=>{}) //获取resolve()传递的值;
promise.catch((err)=>{}) //获取reject()传递的值;
promise.finally(()=>{}) //不论成功与否，都会执行;
cook().then(eat).then(wash).then(data=>console.log(data)) //将回调函数替换成函数传递进去然后继续调用使用传递的参数;
在jquery 中，ajax请求后面可以直接填写then,或者catch方法，相当于在配置函数中使用success回调函数和error回调函数;
常用api
Promise.resolve("参数") //可与将promise对象转化成成功状态;
Promise.reject("参数") //将对象转化成失败状态;
Promise.all([]) //参数是一个数据,数组里面包括全部的promise实例的对象,当全部实例对象的状态都是成功时，可以调用then方法,
返回的时由所有对象传递的参数组成的数组,但是如果有一个对象返回失败状态，catch方法就会返回当前失败对象的参数;
Promise.race() //竞赛，数组中那个先确定状态，就返回那个对象所传递的值;
File对象||FileReader 对象
File对象可用让浏览器获取用户的文件的信息，还可以读取这个文件的内用，一般用于input type：file 和做拽事件e.dataTransfer.file 会返回一个file对象;
files //input type为file的文本框都有一个属性 ,用于返回所选文件file对象的集合（fileList）;
集合里面包括：
name //file对象的文件名称;
type //file对象的MIME类型;
size //file对象的大小;(bytes)
lastModified //文件最后被修改的时间戳;
FileReader 对象 文件读取对象
FileReader对象是通过web程序异步访问本地用户的文件的对象（或原始数据缓冲区） （异步执行！）;
创建 使用new关键字 let read=new FileReader();
readAsDataURL() //使用File对象或者Blob对象传入参数读取指定的文件为DataURL;
read.result ||e.target.result || this.result //获取读取元素的DataURL格式的文件内容; 由于是异步执行，在下面是获取不到的 所以改属性在读取完成之后 内容就变成了null 注意需要配合onload方法使用
readAsText() //将文件读取为文本; 参数一，读取的文件 参数二文件编码类型(gb2312)
ArrayBuffer() //将文件转化成ArrayBuffer 对象;
abort() //中断文件操作;
事件
onabort() //中断文件时触发;
onerror() //文件出错的时候触发;
onloadstart() //文件开始的时候触发;
onloadgress() //文件读取中触发;
onload() //文件读取结束触发;
onloadend //不论文件读取成功与否，都会在文件读取结束之后执行;
Blob 二进制大对象
实际上File对象就是Blob更具体的一个版本，File对象继承了Blob对象的type和size属性，其内部存储了大量的二级制数据，
同样FileReader对象也是从Bolb对象中读取;
Blob构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，第二个参数是数据的类型，这两个参数都不是必需的。
数组元素可以是任意多个的ArrayBuffer，ArrayBufferView (typed array)， Blob，或者 DOMString对象。
FormData 对象
用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.
比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件;
创建一个FormData new FormData() //参数可以是form 参数可选，是一个HTML表单元素，可以包含任何形式的表单控件,包括文件输入框。
append() //给当店formData对像添加一个键值对;
递归函数
1.什么是递归函数
如果一个函数在内部可以调用其本身，那么这个函数就称为递归函数。
简单理解：函数内部自己调用自己
递归函数的作用其实跟循环的效果一样
// function fun1(){
// console.log("什么是递归函数");
// fun1();
// };
// fun1();
// 由于递归很容易引起栈溢出错误，因此在使用时，一般需要添加退出条件
// Uncaught RangeError: Maximum call stack size exceeded 栈溢出的错误
节流与防抖
防抖
// 防抖：执行的是某个时间内的最后一次，但在一个周期内定时器会重建。
function debounce(fn, delay) {
var timer; // 维护一个 timer
return function () {
var _this = this; // 取debounce执行作用域的this
var args = arguments;
// 在等待的时间内，如果定义时器存在，会先清除定时器，再重新创建。
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
fn.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.fn(args);
}, delay);
};
}
节流
var throttle = function(func, delay) {
var timer = null;
var startTime = Date.now();
return function() {
var curTime = Date.now();
var remaining = delay - (curTime - startTime);
var context = this;
var args = arguments;
clearTimeout(timer);
if (remaining <= 0) {
func.apply(context, args);
startTime = Date.now();
} else {
timer = setTimeout(func, remaining);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
方法二
/ 方案：单位时间内时间开始的时候执行，第一次
function throttle(fn, delay) {
var lastTime = 0;
return function () {
var nowTime = Date.now();
// 表示等等的时间已经到了，重置lastTime,并且要调用fn
if (nowTime - lastTime > delay) {
lastTime = Date.now();
fn.call(this, arguments)
}
}
}