js常用API整理

Array

new Set()

数组去重

1
2
3
4
5
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()

对数组元素进行排序(改变原数组)。

1
2
3
4
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()

反转数组中的元素(改变原数组)。

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

delete

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

1
2
3
4
5
6
7
8
9
//数组
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()

把数组的第一个元素从其中删除,并返回第一个元素的值(改变原数组)。

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

unshift()

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

1
2
3
4
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()

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

1
2
3
4
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()

可把值转换成字符串。

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

concat()

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

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

1
2
3
4
5
6
7
8
9
//数组
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()

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

1
2
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)。

1
2
3
4
5
6
7
//数组
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以及后面的元素为被插入的新元素。

1
2
3
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()

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

1
2
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方法类似,遍历数组,区别是无返回值。

1
2
3
4
5
6
7
8
9
10
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)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 对象
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的成员组成一个新数组返回。(不会改变原始数组)。

1
2
3
4
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),用来判断数组成员是否符合某种条件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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()

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

格式:

1
reduce(() => (pre, cur, curIndex, arr), initialValue)

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

indexOf()

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

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

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

lastIndexOf()

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

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

flatten()

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

1
2
3
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。

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

find()

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

1
2
3
4
5
6
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()

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

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

charCodeAt()

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

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

match()

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

1
2
3
4
5
6
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()

替换匹配的字符串。

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

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

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

search()

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

1
2
3
4
5
6
7
8
9
const str = 'hello guys';
console.log(str.search('guys')) // 6
console.log(str.indexOf('guys')) // 6

// 区别

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

split()

将字符串切割成数组。

1
2
3
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()

将字符串转换成小写。

1
2
3
const str = 'hello guys';
console.log(str.toLocaleLowerCase()) // hello guys
console.log(str.toLowerCase()) // hello guys

toLocaleUpperCase() & toUpperCase()

将字符串转换成大写。

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

substr()

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

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

substring()

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

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

.trim()

去掉字符串两端的空格。

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

JSON

JSON.parse()

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

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

JSON.stringify()

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

1
2
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()方法赋予了一个自定义函数:

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

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

1
ObjectrType.valueOf()

valueOf同样适用于stringnumbersymbolbooleandate

Object.Prototype.toString()

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

1
2
3
4
5
6
7
8
9
10
11
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();

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

Object.Prototype.isPrototypeOf()

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

1
2
3
4
5
6
7
8
const arr = [];

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

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

Object.Prototype.hasOwnProperty()

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

语法: Object.prototype.hasOwnProperty(prop)

1
2
3
4
5
6
7
8
9
10
11
12
let obj = {};// 定义一个object实例

obj.prop1 = 'value1'; // prop1是一个自有属性
obj.constructor.prototype.prop2 = 'value2'; // prop2是一个原型链属性

// 无论自有属性还是原型链属性,我们都可以访问到
console.info(obj.prop1); // value1
console.info(obj.prop2); // value2

// 使用`hasOwnProperty()`方法判断属性是否为自有属性
obj.hasOwnProperty('prop1'); // true
obj.hasOwnProperty('prop2'); // false

Object.Prototype.PropertyIsEnumerable()

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

语法: Object.prototype.propertyIsEnumerable(prop)

1
2
3
4
5
6
7
8
9
10
11
12
13
const obj = { name: 'ecmaer'};

Object.getOwnPropertyDescriptor(obj, 'name').enumerable; // true
obj.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无法区分nullArray和 通常意义上的object

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
typeof 123 //number
typeof '123' //string
typeof true // boolean
typeof false //boolean
typeof undefined // undefined
typeof Math.abs // function
typeof function () {} // function

// 当遇上`null`、`Array`和通常意义上的`object`,都会返回 object
typeof null // object
typeof [] // 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 属性是否出现在某个实例对象的原型链

1
2
3
4
5
6
7
8
9
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); // true
console.log(auto instanceof Object); // true

Object.Prototype.toString()(推荐)

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

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

1
2
3
4
const arrs = [1,2,3];
console.log(typeof arrs) // object
console.log(Object.Prototype.toString.call(arrs)) // [object Array]
复制代码

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

用法
  • call

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

    1
    2
    3
    4
    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()则接收参数数组。

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

    //如果apply的第二个参数是个null,会返回-Infinity
    const b = Function.prototype.call.apply(Math.max, null, arr)
    console.log(b) // -Infinity
  • bind

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

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

    格式为: bind(作用域参数,参数1,参数2)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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对象的用法

首先需要定义一个变量:

1
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对象的原始值。