Js數組的經常使用的方法概述

學習JS的同窗們,也曾對數組進行學習掌握,因此我也把數組中經常使用的方法列舉下來,相互學習數組

很少廢話,直接上正文 。                 快樂的分割線。。。數據結構


1、對象繼承的方法app

 數組是一種特殊的對象,繼承了對象Object的toString()、toLocaleString()和valueOf()方法
  1.toString()
    toString方法返回由數組中每一個值的字符串形式拼接而成的一個以符號分割的字符串於不使用參數的join()返回的字符串相同dom

[1,2,3].toString()//'1,2,3'
['a','b','c'].toString()//'a,b,c'
[1,[2,3]].toString()//'1,2,3'

  2.toLocaleString()
    toLocaleString()是toString()的本地化版本,在常態下,和toString()返回同樣,在數字到達3位數以上,爲自動格式化、還能夠格式化日期函數

var a = 3333; a.toLocaleString()//3,333
var b = new Date; b.toLocaleString()//2018/7/13 下午3:43:39

  3.valueOf()
    valueOf()在對於數組對象的時候返回自己學習

var a = [1,2,3]; a.valueOf()//[1,2,3];
a.valueOf() instanceOf() Array//true

2、數組轉換法
  1.join()
    Array.join()是Array.split()的逆向操做,前者是將數組以參數單位(默認爲逗號)合併成一個字符串,後者是把字符串切割成數組。支持數組與類數組,不支持對象this

var a = [1,2,3,4,5]; a.join()//'1,2,3,4,5'
var b = [1,undefined,2,null,3]; b.join()//'1,,2,,3'
var c = Array.prototype; c.join.call('hello','-')//'h-e-l-l-o'
var d = {1:'a',2:'b',length:3}; d.join()//'a,b'
var e = {1:'a',2:'b'}; e.join()//''


3、數組數據結構操做方法
 數組的數據結構分爲棧結構(後進後出)和隊列結構(先進先出)
  棧結構(後進後出):
  1.push()
    push()是把任意數量的參數逐個添加在末尾,改變原有數組,修改數組長度並返回spa

var a = [1,2]; a.push('11,22') - a//3 - [1,2,33,44]
var b = [3,4]; a.push([33.44]) - a//2 - [1,2,[33,44]]
Array.prototype.push.apply(a,b)//[1,2,3,4]
Array.prototype.push.call(a,b)//[1,2,[3,4]]

    push()也能夠往對象中添加參數。添加後對象會變成數組對象,新加入的元素的鍵對應數組的索引,而且對象有一個length屬性prototype

var c = {}; Array.prototype.push.call(c,1)//{0:1,length:1}

  2.pop()
    pop()把數組中最後一項移除,返回數組長度、而後修改數組長度改變原有數組code

var a = [1,2,3]; a.pop() - a//3 - [1,2];
//若是數組自己是空數組,則返回undefined
var b = []; b.pop()//undefined

  隊列結構(前進前出):
    1.shift()
      shift()移除數組中第一項,返回移除的元素,而後修改數組長度改變數組

var a = [1,2,3]; a.shift() - a//1 - [2,3];

    2.unshift()
      unshift()在數組的起始位置添加任意參數修改數組長度,返回數組長度改變數組

var a = [1,2,3]; a.unshift(4,5) - a//5 - [1,2,3,4,5]


4、數組排序方法
  1.reverse()
    reverse()用於反轉數組的順序,修改原數組,並返回當前數組

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

  2.sort()
    sort()默認狀況下是改變數組爲升序排序,sort會默認的調用每一個數組項toString()

var a = [1,2,3,4,5]; a.sort() //[1,2,3,4,5]
var b = [1,2,12,13]; c.sort() //[1,12,13,2]
var c = [1,2,'1a','2b']; c.sort() //[1,'1a',2,'2b'];

    若是數組中含有undefined,則undefined會排到尾部

var d = [1,3,undefined,2]; d.sort() //[1,2,3,undefined]

    若是sort有參數的時候(參數必須是一個函數);若是函數return的值是正數或者第一個參數減去第二個參數,則爲正序,不然爲反序。若是存在字符串,則會爲最小。按照順序放到起始位置

function sortNumber(a,b){
  return b-a
}
var e = [1,2,3]; e.sort(sortNumber)//[3,2,1]; 
var f = ['1a',1,'2b',2,3]; f.sort()//['1a','2b',3,2,1];

    若是sort參數是函數返回的是一個隨機正負數,則會隨機數組書序

function sortRandom(a,b){
  return Math.random()-0.5
}
var g = [1,2,3,4,5]; g.sort(sortRandom)//[2,1,5,4,3](此爲隨機順序)

  3.concat()
    concat()方法是基於當前數組建立一個新數組而後把接收的參數放到末尾,不影響原數組

var a = [1,2]; b = [3,4]; a.concat - a//[1,2,3,4] - [1,2];五.建立子數組方法

  1.slice()
    slice()方法截取參數第一位起始位置,和第二位終止位數。並建立一個新的數組。若是沒有參數,那就是所有截取

var a = [1,2,3,4,5];a.slice(2,4)//[3,4,5]
var a = [1,2,3,4,5];a.slice(2)//[3,4,5]
var a = [1,2,3,4,5];a.slice(-3)//[3,4,5] 
var a = [3,4,5];a.slice()//[3,4,5] 


六.數組刪改方法
  1.splice()
    splice()接收三個參數,第一個參數是位置必填的,第二個參數是要刪除的數量必填,若是隻有一個參數,則所有刪除數組、第二個參數之後都是是新增項目選填。返回的是被刪除的數組

var a = [1,2,3]; a.splice(2,0,1)-a//[]-[1,2,1,3];
var b = [1,2,3]; a.splice(2,1,1)-a//[3]-[1,2,1];
var c = [1,2,3]; a.splice(2)-a//[1,2,3]-[]
var d = [1,2,3]; a.splice(2,1,4,5)-a//[3]-[1,2,4,5]

  2.indexOf()
    indexOf()返回是第一個參數首次出現的位置,當有第二個參數n的出現的時候,返回的是,從第n個元素以前的元素不計算是否首次出現

var a = ['a','b','c',a,2,3]; a.indexOf('a')//0
var a = ['a','b','c',a,2,3]; a.indexOf('a',1)//4
var a = ['a','b','c',1,2,3]; a.indexOf('a',-5)//0

  3.lastIndexOf()
    lastIndexOf()於indexOf()不一樣的就是:從右往左查

var a = ['a','b','c',a,2,3]; a.indexOf('a')//4
var a = ['a','b','c',a,2,3]; a.indexOf('a',1)//0
var a = ['a','b','c',a,2,3]; a.indexOf('a',-1)//0

七.數組歸併的方法
  1.reduce()
    reduce()方法第一個參數是將指定的函數數組進行循環遍歷以自定義的形式組合,生成單個值。參數接收四個(初始變量,當前變量,當前索引,原數組對象),reduce的第二個參數是指定一個參入的初始值。

var a = [1,2,3,4,5];
a.reduce(function(x,y){return x+y}) // 15
a.reduce(function(x,y){return x+y},3)//18

  2.reduceRight()

   reduceRight()於reduce()不一樣在於索引值由高到低的


a.reduce(function(x,y){console.log(x,y);return x+y},0)
// 5,4 9,3 12,2 14,1 15,0

八.數組迭代方法
  1.map()
    map()給函數數組的每一項運行指定的的函數,並返回每次函數調用的結果組成數組

var a = [1,2,3]; a.map(function(item,index,arr){return item*2})
//[2,4,6]
var b = ['aa','bb','cc'];
a.map(function(item,index,b){return this[item]})
//['aa','bb','cc'];

   map()平常中多用於去解析對象中的屬性

var c = {[name:1,value:2],[name:11,value:22]}
c.map(function(item){return item.name})//[1,11]

  2.forEach()
forEach()給函數數組的每一項運行指定的函數(於map()對比不一樣於沒有返回值)。forEach()可接受第二參數,用來改變this的指向。

var a = {
    name:'111',
    arr:[1,2,3],
    value:function(){
        console.log(this);
        this.arr.forEach(function(){
        console.log(this);
        })
    }
}
//循環外this指向value方法,循環內指向a對象
var b = {
  name:'111',
  arr:[1,2,3],
  value:function(){
    console.log(this);
    this.arr.forEach(function(){
      console.log(this);
    },this)
  }
}//全文的this所有都指向對象a


  3.filter()
    filter()給函數數組的每一項運行指定的函數,並返回制定規則返回True的項的數組。該方法多用於查詢,第二個參數值指定this指向

var a = [1,2,3];a.filter(function(item){return item>1)//[2,3];

  4.some()
    filter()給函數數組的每一項運行指定的函數進行篩選,若是都返回false,則返回false。反之則返回true

a = [1,2,3,4,5];
a.some(function(item){return item === 3;})//true
a.some(function(item){return item === 6;})//false

  5.every()
    every()給函數數組的每一項運行指定的函數進行篩選,若是有返回false,則返回false。反之若是所有返回true,則返回true;空數組會返回true

a = [1,2,3,4,5];
a.every(function(item){return item === 3;})//false
a.every(function(item){return item < 6;})//true

終於打完了。不容易。哈哈

本身總結完,也算複習了下。

繼續加油把~

相關文章
相關標籤/搜索