JavaScript一些常用 API整理汇总-技术圈

来源 | https://blog.limeichao.cn/article/9796ce43.html

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

今天跟大家分享的这篇文章中的API也是我们在开发中会经常接触到的一些常用API，希望对你有所帮助。

Array

new Set（）

数组去重

const arr = [3,4,4,5,4,6,5,7];console.log(new Set(arr)); // {3,4,5,6,7}const a = Array.from(new Set(arr)) // [3, 4, 5, 6, 7]//或者const a = [...new Set(arr)]//推荐

sort（）

对数组元素进行排序（改变原数组）。

const arr = [1,2,3,4,5,6];console.log(arr.sort((a,b)=>a-b)) // [1,2,3,4,5,6] 大小正序cosole.log(arr.sort((a,b)=>b-a))// [6,5,4,3,2,1] 大小倒序//不可以进行运算的则比较编码大小  'b' > 'a' => true

reverse（）

反转数组中的元素（改变原数组）。

const arr = [3,4,4,5,4,6,5,7];conosle.log(arr.reverse());  // [7, 6, 5, 5, 4, 4, 4, 3]

delete

删除一个数组成员，会形成空位，并不会影响 length 属性（改变原数组）, 同样适用于对象。

//数组const arr = [0,1,2];delete arr[1];conosle.log(arr); // [0, empty, 2]

//对象const obj = {name: '谢大脚',age: '18',sex: '女'};delete obj.sex;console.log(obj); // {name: "谢大脚", age: "18"}

shift（）

把数组的第一个元素从其中删除，并返回第一个元素的值（改变原数组）。

const arr = [0,1,2];const a = arr.shift(); // 0console.log(arr); // [1, 2]

unshift（）

向数组的起始处添加一个或多个元素，并返回新的长度（改变原数组）。

const arr = [3,4,4,5,4,6,5,7];const a = arr.unshift(8);console.log(a); // 9(a为返回的数组的新长度)console.log(arr); // [8, 3, 4, 4, 5, 4, 6, 5, 7]

push（）

在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度（改变原数组）。

const arr = [3,4,4,5,4,6,5,7];const a = arr.push(8,9);console.log(a); // 10(a为返回的数组的新长度)console.log(arr); // [3, 4, 4, 5, 4, 6, 5, 7, 8, 9]

toString（）

可把值转换成字符串。

const arr = [3,4,4,5,4,6,5,7];console.log(arr.toString()); // 3,4,4,5,4,6,5,7

concat（）

在原始数据尾部添加另外数据组成新数据（字符串也适用）。

不过一般没什么人用了不考虑 ie 的话直接用扩展运算… 就可以了

//数组const a = [1,2,3];const b = [4,5];const c = a.concat(b); // [1, 2, 3, 4, 5]

//字符串const x = 'abc';const y = 'def';const z = x.concat(y); // abcdef

join（）

以参数作为分隔符，将所有参数组成一个字符串返回（默认逗号分隔）。

const arr = [3,4,4,5,4,6,5,7];console.log(arr.join('-')); // 3-4-4-5-4-6-5-7

slice（start, end）

用于提取原来数组的一部分，会返回一个提取的新数组，原数组不变（字符串适用，不包括 end)。

//数组const arr = [3,4,4,5,4,6,5,7];const a = arr.slice(2, 5); // [4, 5, 4]

//字符串const x = 'abcdefgh';const y = x.slice(3, 6); // def

splice（）

用于删除原数组的一部分，并且可以在删除的位置添加新的数组成员，返回值是被删除的数组元素。（改变原数组）

splice（t, v, s）t: 被删除元素的起始位置；v：被删除元素个数；s:s 以及后面的元素为被插入的新元素。

const arr = [3,4,4,5,4,6,5,7];const a = arr.splice(3, 2, 12); // [5, 4]console.log(arr); // [3, 4, 4, 12, 6, 5, 7]

map（）

依次遍历数组成员，根据遍历结果返回一个新数组。（不会改变原始数组）。

const arr = [3,4,4,5,4,6,5,7];const a = arr.map(item => item*2;) // [6, 8, 8, 10, 8, 12, 10, 14]

forEach（）

跟 map 方法类似，遍历数组，区别是无返回值。

const arr = [3,4,4,5,4,6,5,7];arr.forEach(function(item,index,arr){console.log(value)}))  3  4  4  5  4  6  5  7

for in（）

跟 map 方法类似，遍历对象或者数组。

但值得注意的是 for in 循环返回的值都是数据结构的键值名。遍历对象返回的对象的 key 值，遍历数组返回的数组的下标 (key)。

// 对象const obj = {a: 123, b: 12, c: 2 };for (let a in obj) {    console.log(a)}// a   b   c   //数组const arr = [3,4,4,5];for(let a in arr) {    console.log(a)}// 0   1   2   3

filter（）

一个过滤方法，参数是一个函数，所有的数组成员依次执行该函数，返回结果为 true 的成员组成一个新数组返回。（不会改变原始数组）。

const arr = [3,4,4,5,4,6,5,7];const a = arr.filter(item => item % 3 > 1);console.log(a); // [5, 5]

some（）& every（）

这两个方法类似于 “断言”（assert），用来判断数组成员是否符合某种条件。

const arr = [3,4,4,5,4,6,5,7];

console.log( arr.some( function( item, index, array ){     console.log( 'item=' + item + ',index='+index+',array='+array );     return item > 3; }));//  item=3,index=0,array=3,4,4,5,4,6,5,7//   item=4,index=1,array=3,4,4,5,4,6,5,7//   true

console.log( arr.every( function( item, index, array ){     console.log( 'item=' + item + ',index='+index+',array='+array );     return item > 3; }));// item=3,index=0,array=3,4,4,5,4,6,5,7//false

some

some 方法是只要有一个数组成员的返回值为 true，则返回 true，否则 false；

every

every 方法是需要每一个返回值为 true，才能返回 true，否则为 false;

reduce（）

依次处理数组的每个成员，最终累计成一个值。

格式：

reduce（() => (pre, cur, curIndex, arr), initialValue）

pre: 必填，累计变量；cur：必填，当前变量；curIndex: 可选，当前位置；arr: 可选，原数组；initialValue: 传递给函数的初始值。

indexOf（）

返回给定元素在数组中的第一次出现的位置，如果没有则返回 - 1 (同样适用于字符串)。

//数组const arr = [3,4,4,5,4,6,5,7];console.log(arr.indexOf(4)) // 1console.log(arr.indexOf('4'))  // -1

//字符串const string = 'asdfghj';console.log(string.indexOf('a')) // 0lastIndexOf（）

返回给定元素在数组中最后一次出现的位置，没有返回 - 1 (同样适用于字符串)。

const arr = [3,4,4,5,4,6,5,7];console.log(arr.lastIndexOf(4)) // 4(从左到右数最后出现的位置，字符串同理)

flatten（）

简写为 flat（），接收一个数组，无论这个数组里嵌套了多少个数组，flatten 最后都会把其变成一个一维数组 (扁平化)。

const arr = [[1,2,3],[4,5,[6,7]]];const a = arr.flatten(3);console.log(a); // [1, 2, 3, 4, 5, 6, 7]

Array.isArray（）

用来判断是不是数据是不是一个数组，返回值为 true 或 false。

const arr = [3,4,4,5,4,6,5,7];console.log(Array.isArray(arr)) // true

find（）

返回符合传入测试（函数）条件的数组元素。

const arr = [3,4,4,5,4,6,5,7];const a = test.find(item => item > 3);console.log(a); //4(find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。)

const b = test.find(item => item == 0);console.log(b); //undefined(如果没有符合条件的元素返回 undefined)

String

charAt（）

用于返回指定位置的字符。

const str = 'hello guys';console.log(str.charAt(3))  // 1

charCodeAt（）

用于返回指定位置的字符的 Unicode 编码。

const str = 'hello guys';console.log(str.charCodeAt(3))  // 111

match（）

用于在字符串内检索指定的值或找到一个或多个正则表达式的匹配，返回的是值而不是值的位置。

const str = 'hello guys';console.log(str.match('guys'))  // ["guys"]

// 使用正则匹配字符串const strs = '1.hello guys, 2.are you ok?';console.log(strs.match(/\d+/g)) // ["1", "2"]

replace（）

替换匹配的字符串。

const str = 'hello guys';console.log(str.replace('guys', 'man'))  // hello man

抽出字符串中的某一项指定字符。

const str = 'AA_BB_CC.bin';console.log(str.replace(/[^\_]/g),'')  // __(两个下划线)

search（）

用于检索与字符串匹配的子串，返回的是地址，与 indexOf() 的区别是 search 是强制正则的，而 indexOf 只是按字符串匹配的。

const str = 'hello guys';console.log(str.search('guys'))  // 6console.log(str.indexOf('guys'))  // 6// 区别const string = 'abcdefg.1234';console.log(string.search(/\./)) // 7（转译之后可以匹配到 . 的位置）console.log(string.indexOf(/\./)) // -1 （相当于匹配/\./，找不到则返回-1,只能匹配字符串）

split（）

将字符串切割成数组。

const str = 'hello guys';console.log(str.split('')) // ["h", "e", "l", "l", "o", " ", "g", "u", "y", "s"] console.log(str.split('', 3)) //  ["h", "e", "l"]

toLocaleLowerCase（）& toLowerCase（）

将字符串转换成小写。

const str = 'hello guys';console.log(str.toLocaleLowerCase())  // hello guysconsole.log(str.toLowerCase())  //  hello guys

toLocaleUpperCase（） & toUpperCase（）

将字符串转换成大写。

const str = 'hello guys';console.log(str.toLocaleUpperCase())  // HELLO GUYSconsole.log(str.toUpperCase())  // HELLO GUYS

substr（）

用于从起始索引号提取字符串中指定数目的字符。

const str = 'hello guys';console.log(str.substr(2))  // llo guysconsole.log(str.substr(2, 7))  // llo guy

substring（）

用于提取字符串中两个指定索引号之间的字符。(与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数。)

const str = 'hello guys';console.log(str.substring(2))   // llo guysconsole.log(str.substring(2, 7))  //  llo g

.trim（）

去掉字符串两端的空格。

const str = '    hello guys    ';console.log(str.trim()) // hello guys(不会改变原数组)

JSON

JSON.parse（）

用于把字符串转化为对象。

const str = '{"name": "phoebe", "age": 20}';const obj = JSON.parse(str)  // {name: "phoebe", age: 20}（object类型）

JSON.stringify（）

用于把对象转化为字符串。

const obj = {"name": "Tins", "age": 22};const str = JSON.stringify(obj)  // {"name":"Tins","age":22}(string类型)

Object

Object.Prototype.valueOf（）

返回当前对象对应的值。（Object.valueOf（）相当于 Object.Prototype.ValueOf（））

我们创建一个取代 valueOf() 方法的函数，但是需要注意的是方法必须不能传入参数。假设我们有个对象叫 ObjectrType 而我想为它创建一个 valueOf() 方法。下面的代码为 valueOf() 方法赋予了一个自定义函数:

ObjectrType.prototype.valueOf = function() { return customValue; };

有了这样的一个方法，下一次每当 ObjectrType 要被转换为原始类型值时，JavaScript 在此之前会自动调用自定义的 valueOf() 方法。valueOf() 方法一般都会被 JavaScript 自动调用，但我们也可以像下面代码那样自己调用：

ObjectrType.valueOf()

valueOf 同样适用于 string，number， symbol，boolean，date。

Object.Prototype.toString（）

返回当前对象对应的字符串形式。

function Dog(name) {  this.name = name;}

const dog1 = new Dog('Gabby');

Dog.prototype.toString = function dogToString() {  return '' + this.name;}

console.log(dog1.toString());  // Gabby

Object.Prototype.toLocaleString（）

返回当前对象对应的模块字符串。

语法：obj.toLocaleString();

let foo = {};foo.toLocaleString(); // "[object Object]"

Object.Prototype.isPrototypeOf（）

判断当前对象是否为另一个对象的原型。语法：Object.prototype.isPrototypeOf(targetObj)

const arr = [];

Array.prototype.isPrototypeOf(arr); // true

// 修改obj的原型Object.setPrototypeOf(arr, String.prototype);Array.prototype.isPrototypeOf(arr); // falseString.prototype.isPrototypeOf(arr); // true

Object.Prototype.hasOwnProperty（）

判断某个属性是否为当前对象自身的属性，还是继承自原型对象的属性，并返回一个布尔值。

语法：Object.prototype.hasOwnProperty(prop)

let obj = {};// 定义一个object实例obj.prop1 = 'value1'; // prop1是一个自有属性obj.constructor.prototype.prop2 = 'value2'; // prop2是一个原型链属性// 无论自有属性还是原型链属性，我们都可以访问到console.info(obj.prop1); // value1console.info(obj.prop2); // value2// 使用`hasOwnProperty()`方法判断属性是否为自有属性obj.hasOwnProperty('prop1'); // trueobj.hasOwnProperty('prop2'); // false

Object.Prototype.PropertyIsEnumerable（）

判断某个属性是否可枚举。

语法：Object.prototype.propertyIsEnumerable(prop)

const obj = { name: 'ecmaer'};

Object.getOwnPropertyDescriptor(obj, 'name').enumerable; // trueobj.propertyIsEnumerable('name'); // true

// 将属性name设置成不可枚举Object.defineProperty(obj, 'name', {enumerable: false});obj.propertyIsEnumerable('name'); // false



for(let i in obj){    console.info(obj[i]); // 没有遍历出'ecmaer'}

判断一个值的类型的办法

typeOf（）

typeof 可用来检测数据类型：需要注意的是 typeof 无法区分 null、Array 和通常意义上的 object。

typeof 123 //numbertypeof '123' //stringtypeof true // booleantypeof false //booleantypeof undefined // undefinedtypeof Math.abs // functiontypeof function () {} // function

// 当遇上`null`、`Array`和通常意义上的`object`,都会返回 objecttypeof null // objecttypeof [] // object（所以判断数组时可以使用Array.isArray(arr)）typeof {} // object

// 当数据使用了new关键字和包装对象以后，数据都会变成Object类型，不加new关键字时会被当作普通的函数处理。typeof new Number(123); //'object'typeof Number(123); // 'number'
typeof new Boolean(true); //'object'typeof Boolean(true); // 'boolean'
typeof new String(123); // 'object'typeof String(123); // 'string'

instanceOf（）

instanceOf（）运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链。

function Car(make, model, year) {  this.make = make;  this.model = model;  this.year = year;}const auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car); // trueconsole.log(auto instanceof Object); // true

Object.Prototype.toString（）（推荐）

可以精准的判断对象类型。

对于 array、null、object 来说，其关系错综复杂，使用 typeof 都会统一返回 object 字符串，要想区别对象、数组、函数单纯使用 typeof 是不行的，想要准确的判断对象类型，推荐使用 Object.Prototype.toString（）, 它可以判断某个对象值属于哪种内置类型。

const arrs = [1,2,3];console.log(typeof arrs) // objectconsole.log(Object.Prototype.toString.call(arrs))  // [object Array]

call，apply 以及 bind 的用法，区别及相似住处

用法

call

直接调用该执行函数，在执行的时候，将函数内部的作用域绑定到指定的作用域。（call() 方法接受若干个参数的列表）

const arr = [2,5,4,7,6]const a = Function.prototype.apply.call(Math.max, null,arr)console.log(a)  // 7

apply

直接调用该执行函数，在执行的时候，将函数内部的作用域绑定到指定的作用域。

call() 是 apply() 的一颗语法糖，作用和 apply() 一样，同样可实现继承，唯一的区别就在于 call() 接收的是参数列表，而 apply() 则接收参数数组。

const arr = [2,5,4,7,6]const a = Function.prototype.call.apply(Math.max, arr)console.log(a)  // 7
//如果apply的第二个参数是个null，会返回-Infinityconst b = Function.prototype.call.apply(Math.max, null, arr)console.log(b)  // -Infinity

bind

创建一个新的函数的引用，并绑定到一个作用域特定作用域上，同时支持传参。

bind 则和 call 的用法差不多，唯一区别是，call 和 apply 会立刻调用函数，bind 只是绑定 this。

格式为：bind(作用域参数，参数 1，参数 2)

const fruits = {    "name": "apple",    getOtherFriut: function() {        return this.name;    }}
const color = {   "name": " is red" }
const fruitColor = fruits.getOtherFriut.bind(this, color)console.log(fruitColor()) //is red

相似之处

都是用来改变函数的 this 对象；
第一个参数都是 this 要指向的对象；
都可利用后继参数传参；

区别

都可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
bind() 是返回一个新函数，供以后调用，而 apply() 和 call() 是立即调用。
call() 和 apply() 唯一区别是参数不一样，call() 是 apply() 的语法糖；

选择使用

如果不需要关心具体有多少参数被传入函数，选用 apply()；
如果确定函数可接收多少个参数，并且想一目了然表达形参和实参的对应关系，用 call()；
如果想要将来再调用方法，不需立即得到函数返回结果，则使用 bind();

Date 对象的用法

首先需要定义一个变量：

const date = new Date();

接下来就可以直接使用常见的 Date 对象方法。

Date (): 返回当日的日期和时间；
getDate (): 从 Date 对象返回一个月中的某一天（1～31）console.log(date.getDate())；
getDay (): 从 Date 对象返回一周中的某一天（0～6）；
getMonth (): 从 Date 对象返回月份（0～11）；
getFullYear (): 从 Date 对象以四位数字返回年份；
getYear ()：可以使用 getFullYear () 代替；
getHours (): 返回 Date () 对象的小时（0～23）;
getMinutes (): 返回 Date () 对象的分钟（0～59）;
getSeconds (): 返回 Date () 对象的分钟（0～59）;
getMillseconds (): 返回 Date () 对象的毫秒（0～999）;
getTime (): 返回 1970 年 1 月 1 日至今的时间；
getTimezoneOffset (): 返回本地时间与格林威治标准时间（GMT）的分钟差；
getUTCDate (): 根据世界时从 Date 对象返回月中的一天（1～31）；
getUTCDay (): 根据世界时从 Date 对象返回周中的一天（1～6）；
getUTCMonth (): 根据世界时从 Date 对象返回月份（0～11）；
getUTCFullYear (): 根据世界时从 Date 对象返回四位数的年份；
getUTCHours (): 根据世界时从 Date 对象返回对象的小时（0～23）；
getUTCMinutes (): 根据世界时从 Date 对象返回对象的分钟（0～59）；
getUTCSeconds (): 根据世界时从 Date 对象返回对象的秒钟（0～59）；
getUTCMillseconds (): 根据世界时从 Date 对象返回对象的毫秒（0～999）；
parse (): 返回 1970 年 1 月 1 日午夜到指定日期（字符串）的毫秒数；
setDate (): 设置 Date 对象中月的某一天（1～31）；
setMonth (): 设置 Date 对象中月份（0～11）；
setFullYear (): 设置 Date 对象中的年份（四位数字）；

Math.xx 开头的方法

Math.ceil (): 对数进行上舍入（天花板函数）

大于等于 x，并且与它最接近的整数。

Math.floor (): 对数进行下舍入（地板函数）。
Math.max (x,y): 返回 x,y 中的最大值。
Math.min (x,y): 返回 x,y 中的最小值。
Math.pow (x,y): 返回 x 的 y 次方。
Math.random () : 返回 0-1 之间的随机数。
Math.round (x): 四舍五入。
Math.abs (x): 返回数的绝对值。
Math.acos (x): 返回数的反余弦值。
Math.asin (x): 返回数的反正弦值。
Math.atan (x): 返回数的反正切值。
Math.atan2 (y,x): 返回由 x 轴到点（x，y）的角度（以弧度为单位）。
Math.cos (x): 返回数的余弦值。
Math.exp (e): 返回 e 的指数。
Math.log (x): 返回数的自然对数（以 e 为底数）。
Math.sin (x): 返回数的正弦值。
Math.sqrt (x): 返回数的平方根。
Math.tan (x): 返回角的正切值。
Math.toSource (): 返回该对象的源代码。
Math.valueOf (): 返回 Math 对象的原始值。

本文完〜