美文网首页
JS里的Array对象笔记

JS里的Array对象笔记

作者: JianQiang_Ye | 来源:发表于2019-03-12 21:16 被阅读0次

    JS标准库

    Object对象

    // 把1包装成对象
    Object(1)
    // 把字符串包装成对象
    Object('sss')
    // 空对象
    Object()
    // 和new创建对象一样
    new Object()
    

    对于StringNumberBoolean来讲,加new和不加new是有区别的

    // 仅仅是字符串 
    String(1) // '1'
    String(true) // 'true'
    String(null) // 'null'
    
    // 创建一个字符串对象,要用new
    new String(1)
    new String('sss')
    
    Number('sss') // NaN
    Number(123) // 123
    //创建一个Number对象
    new Number(123)
    

    Array对象

    1. 下面这两种写法等价

    let f = ['a','b']
    let f2 = new Array('a','b')
    

    2. Array加不加new都一样

    var a = Array(3) // 声明了一个长度为3的数组
    a[0] // undefined
    a.length // 3
    a.__proto__ === Array.prototype // true
    

    但是,当Array有两个参数时,情况就不一样了,此时的第一个参数不再是length的值

    var a = Array(3,4)
    a.length // 2;此时长度变为2
    a[0] // 3
    a[1] // 4
    

    由于Array属于对象,因此加不加new,最终创建的还是对象

    var a = Array(3) 
    var a = new Array(3)
    // 这两种写法等价
    

    NumberStringBoolean这三种基本类型不同,这三种加了new之后相当于创建了对象,但对于ArrayFunction来讲,它们属于Object,因此加不加new对它们来说还是对象

    3.没有Array.prototype就是伪数组

    1. 例如arguments

    4. 数组的API

    1. forEach

    用来遍历属性名和属性;
    该函数接受一个函数,函数的第一个参数是value,第二参数是key,第三个参数是自己。

    var a = ['a','b','c','d']
    a.forEach(function(x,y){
        console.log('value',x)
        console.log('key',y)
    })
    // 输出结果
    value a
    key 0
    ["a", "b", "c", "d"]
    
    value b
    key 1
    ["a", "b", "c", "d"]
    
    value c
    key 2
    ["a", "b", "c", "d"]
    
    value d
    key 3
    ["a", "b", "c", "d"]
    

    自己造了一个forEach函数

    var obj = {
        0: 'a',
        1: 'b',
        2: 'c',
        'length': 3
    }
    obj.forEach = function(x){
        for(let i=0;i<this.length;i++){
            x(this[i],i)
        }
    }//这里的this就是obj
    

    2. sort()

    采用快排,只有sort()会改变自己,其他都不会改变。

    var a = [6,8,5,1,4,9,7]
    a.sort() // [1, 4, 5, 6, 7, 8, 9]
    a // [1, 4, 5, 6, 7, 8, 9]
    

    从大到小排列,必须接受一个函数,函数里面必须接受两个参数

    a.sort(function(x,y){return y-x}) //  [9, 8, 7, 6, 5, 4, 1] 从大到小
    

    当数组里面的值是字符串时,怎么排序?

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

    3. join()

    把数组变成字符串,默认在中间插入逗号。数组本身不会改变。

    var a = [1,2,3]
    a.join() // "1,2,3"
    a.join('和')// "1和2和3"
    a // [1,2,3]
    
    1. concat()。把两个数组拼起来,并返回一个新的数组
    var a = [1,2,3]
    var b = [4,5,6]
    var c = a.concat(b)
    c // [1,2,3,4,5,6]
    

    由此衍生出一个复制数组的套路:

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

    4. map

    映射。map方法和forEach方法几乎相同,唯一的不同之处在于map可以返回一个数组,原来的数组不改变。比如我们现在想把数组里的元素都乘于2

    var a = [1,2,3]
    a.map(function(value,key){
        return value * 2
    }) // [2,4,6]
    // 也可以简写为
    a.map(value => value * 2)
    

    5. filter

    过滤。与map用法类似,也是返回一个数组,只不过这次只返回符合条件的值。

    var a = [1,2,3,4,5,6,7,8,9]
    a.filter(function(value){return value >=5})
    // 只返回大于等于5的值
    // [5,6,7,8,9]
    a.filter(function(value){return value % 2===0})
    // [2,4,6,8]
    a.filter(function(value){return value % 2===0}).map(function(value){return value * value})
    //[4,16,36,64]
    

    6.reduce

    简化。遍历数组,把数组的每一项求得的值累加。以求和为例

    var a = [1,2,3,4,5,6,7,8,9]
    var sum = 0 
    for(let n=0;n<a.length;n++){
        sum = sum + n
    }
    

    以上代码可以用reduce来实现

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

    reduce的第一个参数必须是一个函数,第二个参数相当于上面是var sum = 0

    map可以用reduce表示:
    var a = [1,2,3]
    a.reduce(function(array,value){
        array.push(value*2)
        return array
    },[])
    // [2,4,6]
    // 先定义一个空数组array,把a[0]值乘于2后放入数组,返回array
    // 把a[1]乘于2后放入array,再返回array
    ... ...
    
    filter可以用reduce表示:
    a.reduce(function(array,value){
        if(value>=5) array.push(value) 
        return array
    },[])
    

    Function对象

    下面两种写法等价,加不加new等价

    var f = function(a,b){
        return a + b
    }
    var f = new Function('a','b','return a + b') 
    // 前面可以填0个或多个参数,最后一个参数为函数体
    // 加不加new都一样
    

    function和Function的区别

    1. 前者是关键字后者是一个全局对象
    2. 声明函数的两种方式
    // 具名函数
    function f(){
        
    }
    // 匿名函数
    function (){
        
    }
    
    1. 用typeof可以检查一个对象是不是函数
    function y(){}
    typeof y === 'function' // true
    
    1. 用call()也可以调用函数
    function y (){
        console.log(1)
    }
    y // 这样子不是调用函数
    y() // 2
    y.call() // 2
    

    课后小作业

    1. Array(3) 和 new Array(3) 的返回结果有区别吗?
    2. function f(x,y){return x+y} 和 f = new Function('x','y','return x+y') 的值有区别吗?
    3. var a = [1,2,3]
      请问 a.proto 指向哪个对象?
    4. var a = [1,2,3]
      请问 a.push 指向哪个函数?

    相关文章

      网友评论

          本文标题:JS里的Array对象笔记

          本文链接:https://www.haomeiwen.com/subject/bpyopqtx.html