不得不知道的JS常用方法

今天就来说说JS中常用的一些方法，这些方法在日常的开发中是必不可少的，而且这些方法也是一个基础，我们来一起回顾一下。

1. 检测数组

if (value instanceof Array){
    alert("我是数组")
}
if(Array.isArray(value)){
    
}

2. 转换方法

toString()

valueOf()

toLocaleString()

var colors = ["red","blue","green",null,undefined];
alert(colors.toString());//red,blue,green
alert(colors.valueOf());//red,blue,green
alert(colors);//red,blue,green(此处会在后台调用toString()方法)
alert(colors.join("|"))//red|blue|green

3. 栈方法(栈数据结构的方法是LIFO（后进先出)也就是最先添加的最先被移除)
发生在栈的顶部

push()将任意数量添加到数组末尾,返回新的的数组长度.

pop()从数组末尾移除最后一项,减少数组的length,然后返回一次得项.

]

var colors = new Array();//创建一个数组
var count = colors.push("red","green");//推入两项
alert(count);//2
count = colors.push("black");//推入另一项
alert(count);//3
var item = colors.pop();//取得最后一项
alert(item);//"black"
alert(colors.length)//2

4. 队列方法(栈数据结构的方法是后进先出，而队列数据结构的访问规则是FIFO (先进先出)队列在列表的添加项，从列表的前端移除项)

push()和shift()方法结合

var colors = new Array();//创建一个数组
var count = colors.push("red","blue");//推入两项
alert(count);//2
count = colors.push("black");//推入另一项
alert(count);//3
var item = colors.shift();//取得第一项
alert(item);//red
alert(colors.length)//2

pop()和unshift()方法结合

var colors = new Array();//创建一个数组
var count = colors.unshift("red","blue");//推入两项
alert(count);//2
count = colors.unshift("black");//推入另一项
alert(count);//3
var item = colors.pop();//取得第一项
alert(item);//blue
alert(colors.length)//2

5. 重排序方法

reverse()反转数组的顺序

sort()升序降序 此方法会调用toString()方法进行对比

var values = [1,2,3,4,5];
values.reverse();
alert(values)//5,4,3,2,1

升序
function compare(value1,value2){
    if (value1 < value2){
        return -1;//如果第一个参数应该位与第二个之前返回负数
    } else if (value1 > value2){
        return 1;//如果第一个参数应该位与第二个之后返回正数
    }else {
        return  0;//如果相等返回0
    }
}
var values = [10,100,23,-1,1232,56,87]
values.sort(compare);
alert(values)// -1,10,23,56,87,100,1232

降序
function compare(value1,value2){
    if (value1 < value2){
        return 1;//如果第一个参数应该位与第二个之后返回负数
    } else if (value1 > value2){
        return -1;//如果第一个参数应该位与第二个之前返回负数
    }else {
        return  0;//如果相等返回0
    }
}
var values = [10,100,23,-1,1232,56,87]
values.sort(compare);
alert(values)// 1232,100,87,56,23,10,-1


//推荐使用
升序
var values = [100,19,23,4,5,89,9,20];
values.sort(function(a,b){
    return a-b
})
alert(values)//4,5,9,19,20,23,89,100

降序
values.sort(function(a,b){
    return b-a
})
alert(values)//100,89,23,20,19,9,5,4

6. 操作方法

concat()往数组末尾添加一个或多个数组

var colors = ["red","green","blue"];
var colors1 = colors.concat("yellow",["black","brown"]);
alert(colors);//red,green,blue
alert(colors1);//red,green,blue,yellow,black,brown

slice()基于当前数组中的一个或多个项创建一个新数组,它接收一个或两个参数,即要返回项的起始和结束位置不包括结束位置，不会影响原始数组.

var colors = ["red","green","blue","yellow","black"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2)//green,blue,yellow,black
alert(colors3)//green,blue,yellow

splice()最强大的方法(删除，插入，替换)

增
var colors = ["red","green","blue","yellow","black"];
var colors2 = colors.splice(1,0,"green","blue");//从第一位开始插入三位
alert(colors)//red,green,blue,green,blue,yellow,black
alert(colors2)//

删
var colors = ["red","green","blue","yellow","black"];
var colors2 = colors.splice(0,3);//从第一位开始删除三位
alert(colors)//yellow,black
alert(colors2)//red,green,blue

替换
var colors = ["red","green","blue","yellow","black"];
var colors2 = colors.splice(1,2,"greensss","hjh");//从第一位之后删除一位插入三位
alert(colors)//red,greensss,hjh,yellow,black
alert(colors2)//green,blue

7. 位置方法

indexOf()从头开始查找第一次出现的位置
lastIndexOf()从末尾查找最后一次出现的位置
两者在未找到时返回-1,在比较时用全等===

var numbers = [1,3,5,7,9,2,4,6,8,10]
alert(numbers.indexOf(5))//2
alert(numbers.indexOf(5,3))//-1
alert(numbers.indexOf(5,1))//2   
alert(numbers.lastIndexOf(4))//6

8. 迭代方法

接收两个参数,传入这些方法中的函数会接收三个参数(数组项的值，该项在数组中的位置，数组对象本身).

every()
some()
filter()
forEach()
map()

这些方法都不会修改数组中的包含值(item表数组项的值，index表该项在数组中的位置，array表数组对象本身)

var numbers = [1,2,3,4,5,6,5,4,3,2,1,0];

every()
//对于该函数来说,传入的函数必须对每一项都返回true,这个方法才返回true,反之.
//该函数对每一项都返回true,则返回true.

var everyResult = numbers.every(function(item, index, array){
    console.log(item,index,array)
    return (item > 2)
})
alert(everyResult)//false

some()
//该函数只要传入的函数对数组之后得某一项返回true,就会返回true.

var someResult = numbers.some(function(item, index, array){
    console.log(item,index,array)
    return (item > 2)
})

filter
//如果函数对任一项返回true,则返回true.

alert(someResult)//true
var filterResult = numbers.filter(function(item, index, array){
    console.log(item,index,array)
    return (item > 2)
})

map()
//返回true的项组成的数组

alert(filterResult)// 3,4,5,6,5,4,3
var mapResult = numbers.map(function(item, index, array){
    console.log(item,index,array)
    //return (item * 2)
    return (item > 2)
})
返回每次函数调用结果组成的数组
alert(mapResult)//2,4,6,8,10,12,10,8,6,4,2,0
//alert(mapResult)//false,false,true,true,true,true,true,true,true,false,false,false

forEach()
//无返回值类似for循环迭代数组一样
var mapResult = numbers.forEach(function(item, index, array){
    console.log(item,index,array)
    //return (item * 2)
    return (item > 2)
})

alert(mapResult)//undefined

9. 归并方法
reduce()从头开始遍历
reduceRight()从末尾开始遍历
两者都接收两个参数:一个在每一项上调用的函数和(可选)作为归并基础的初始值，函数接收四个参数:前一个值/当前值/项的索引值/数组对象 这个函数返回的任何值都会作为第一个参数自动传给下一项，两者都会迭代数组所有项,然后构建一个最终返回的值.

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
return prev + cur
})
var sum = values.reduce((prev, cur, index, array)=>{
return prev + cur
})
alert(sum)//15
var sum = values.reduceRight((prev, cur, index, array)=>{
return prev + cur
})
alert(sum)//15