小志的前端之路

JS 里的数组

2018-03-20  本文已影响0人  小志1

数组用法

在说数组的用法前先研究下string的用法和加new的用法

var s = String(1)  //  1
var s = new String(1)// { "1" }

由此可见,直接使用和new的区别是:没有new会把内容变成字符串或者数字,后者有new会把传入的内容变成对象。因为numer和boolean也是和string一样是基本类型,用法相同。

var a = Array(3)   //3 , 是长度
var a = Array(3,3)  //不一致性   3是数组的一个数
var a = new Array(3) 
var a = new  Array(3,3)

加不加new对new不影响

var f =  Function('a','b','return a + b')
f(1,2)   // 3
var f = new Function('a','b','return a + b')
f(1,2)   //3

函数加不加也一样

得出总结:在七种数据类型中,分为number string Boolean 基本类型和 object对象(包括array,function)两类。
第一类不加new就是基本类型,加了new就变成对象; 第二类的object加不加new都是对象,不受new影响。

加不加new的影响

循环数组和伪数组的方法

觉得是数组就用

  for( i = 0 ; i < xx.length ; i++ ){ 
    console.log(xxx[i])   
  }  

觉得不是数组就用

  for ( let key in xx){ 
    console.log(key) 
  }

第一个用来循环数组,第二个用来循环伪数组

数组的本质__proto__(原型链)指向Array.prototype的对象 就是数组
伪数组 __proto__(原型链)中没有指向Array.prototype 就是伪数组

API

forEach

forEach 接受函数,函数必须接受两个参数 value和key

var  a = ['a','b','c'];
a.forEach(function(value,key){
    console.log(value,key)
})  
// a 0
// b 1
// c 2

说明:在数组a上面遍历每一项,在每一项上面调用函数,在调用函数的时候传value和key。
a.forEach( function (){})等价于a.forEach.call( a , function(){}) 其实forEach有一个隐含的第一个参数this,但是这个参数不用传,
函数的最后一句永远有一句 return undefined,即使不写浏览器也会自动加上去,这就解释了为什么我们在控制台console.log的时候回在敲完代码出现undefined的原因 (这里提一下,后面函数的文章里有call,arguments),arguments就是函数在执行的时候接收到的参数

sort

sort接受一个函数,函数必须接受两个参数 ,两个参数是左边的数和右边的数,两个数比较的正负来排序
例1

a = [5,6,2,4,7]
a.sort( function(x,y){return x-y}) // [2, 4, 5, 6, 7]  
a.sort( function(x,y){return y-x}) // [7, 6, 5, 4, 2]

例2
排序字符串的数组,可以给这个数组hash一个对应的数组来排序

a = ['马云','马化腾','李彦宏']
hash  = {
    '马云':200.28,
    '马化腾':465.2,
    '李彦宏':262.39
}
a.sort( function(x,y){ return hash[x] - hash[y]} )  // ["马云", "李彦宏", "马化腾"]
a.sort( function(x,y){ return hash[y] - hash[x]} )  // ["马化腾", "李彦宏", "马云"]

只有sort改变了原值
这里用了内置的排序:快排--nlogn,一般都是用快排

join

join默认不传参就以逗号隔开,参数也可自己加

a = [1,2,3]
a.join('xiaozhi')  //"1xiaozhi2xiaozhi3"
a.join()    //  "1,2,3"

join其实是吧数组变字符串,其实是调用了a的toString()方法
a.toString() // "1,2,3"

concat

a = [1,2,3]
b = [4,5,6]
a.concat(b)  //  [1, 2, 3, 4, 5, 6]
a  // [1, 2, 3]
b  // [4, 5, 6]

原数组不变

a = [1,2,3]
var b  = a.concat([])   // [1, 2, 3]
a === b   // false

concat会返回一个新的数组

map

map和forEach差不多,但是forEach没有返回值 ,map把返回的值收集起来

a = [1,2,3]
a.forEach( function(){} )   //undefined
a.map( function(value,key){
    return value*2
} )  //[2, 4, 6]   

map简写成箭头函数 a.map( value => value*2 ) // [2, 4, 6]

filter

function必须接受value和key

a = [1,2,3,4,5,6,7,8,9]
a.filter(function(value,key){
    return value>=5
})  // [5, 6, 7, 8, 9] 
a.filter(function(value,key){
    return value % 2 === 0 
})  // [2, 4, 6, 8] 

filter和map组合

a.filter(function(value,key){
    return value % 2 === 0 
}).map(function(value){
    return value * value
})  // [4, 16, 36, 64]

reduce

第一个参数作为 函数,最后一个参数给一个初始值 ,函数必须接受两个参数 第一个参数是之前传sum,第二个是n

a = [1,2,3,4,5,6,7,8,9]
a.reduce( function(sum , n){
    return sum + n
},0 )   //45

reduce大招

map可以用reduce表示

a = [1,2,3]
a.reduce(function(arr,n){
    arr.push(n*2)
    return arr
},[])    //  [2, 4, 6]

filter可以用reduce表示

a = [1,2,3,4,5,6,7,8,9]
a.reduce(function(arr,n){
    if(n % 2 === 0){
        arr.push(n)
    }
    return arr
},[])   // [2, 4, 6, 8]

reduce调用reduce

a = [1,2,3,4,5]
a.reduce(function(arr,n){
    arr.push(n*2)
    return arr
},[]).reduce(function(arr,n){
    if (n>5){
        arr.push(n)
    }
    return arr
},[])  //[6, 8, 10]

其实会了reduce,map和filter就是reduce的特例而已。

上一篇下一篇

猜你喜欢

热点阅读