js数组

作者: Snowdream_xxf | 来源:发表于2018-03-01 16:13 被阅读0次

    js中的数组实际上就是一个Array对象的实例,继承来自Array.prototype的属性和方法!

    属性

    1. length(Array.prototype.length):返回数组的长度;注意只有数字索引或者能被转换为数字的索引才会被计入!
    var arr = [];
    arr[0] = 1;
    arr[3] = "xxf";
    arr["name"] = "xuefeng";
    
    arr.length; // 4
    arr[1]; // undefined
    arr.name; // xuefeng
    

    js数组的长度是根据索引中最大的数字决定的(?),且中间没有被赋值的索引被访问时的值默认为undefined!且其中的<font color=red>非数字索引或者对象属性</font>不会被计入到length中的,但是可以强制转化为十进制数字的索引是有效的:

    var arr = [];
    arr["12"] = "cctv"; // 索引"12"可以强制转化为数字12!
    
    arr.length; // 13
    
    1. constructor(Array.prototype.constructor):返回的就是Array本身!即所有数组实例的构造器都是继承自Array对象!
    var arr = [1, 2, 3];
    arr.constructor; // [Function: Array]
    

    访问方法

    所有的访问方法<font color=red>绝对不会改变调用它们的对象的值</font>,只会返回一个新的数组或者返回一个其它的期望值。

    1. contact方法:用于合并多个数组或多个元素,返回一个新的数组;
    /*
    接受一个或多个数组或元素
    与原数组合并返回到一个新的数组!
    */
    Array.prototype.contact(val1[, val2[, ...[, valN]]]);
    
    1. join方法:连接数组内所有的元素并返回一个字符串;数组中元素值为nullundefined的,该元素则转化为空字符串!
    /*
    separator为连接字符,可以不填
    当不填时separator参数时,默认为","
    当连接字符为空字符串""时,元素之间没有连接字符,直接相连
    */
    Array.prototype.join(separator);
    
    //Example
    var arr = [1, 2, 3];
    arr.join(); // "1,2,3"
    arr.join(""); // "123"
    arr.join("-"); // "1-2-3"
    arr.join(", "); // "1, 2, 3"  (最后一个空格自动去除?)
    
    1. slice方法:返回一个从开始到结束(<font color=red>不包括结束索引的那个元素!</font>)选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。
    /*
    begin和end参数分别为开始和结束索引,都是可选的
    当两个参数都不填时,直接复制整个数组
    当end参数不填时,复制从begin开始到最后一个的元素
    begin和end的索引可以为负,代表倒数第几个元素!
    */
    Array.prototype.slice([begin[, end]]);
    
    //Example
    
    var arr = [1, 2, 3];
    
    arr.slice(); // [1, 2, 3]
    arr.slice(1); // [2, 3]
    arr.slice(0, 2); // [1, 2]
    arr.slice(0, -1); // [1, 2]
    
    1. toString方法:相当于arr.join(),即直接用,连接所有元素返回一个字符串;

    2. indexOf方法:返回在数组中可以找到一个给定元素的<font color=red>第一个索引</font>,如果不存在,则返回-1;

    /*
    elem参数为所查找的元素
    startIndex为开始查找的索引,可以为负,同上
    当startIndex超出数组length时直接返回-1!
    */
    Array.prototype.indexOf(elem[, startIndex=0]);
    

    修改器方法

    所有的修改器方法<font color=red>会改变调用它们的对象自身的值</font>!

    1. push方法:在数组的末尾添加一个或多个元素,并返回数组的新长度;

    2. pop方法:删除数组的最后一个元素,并返回这个元素;

    3. reserve方法:颠倒数组中所有元素的顺序;

    4. shift方法:删除数组中第一个元素,并返回这个元素;

    5. unshift方法:在数组的开头添加一个或多个元素,并返回数组的新长度;

    6. sort方法:对数组元素进行排序,并返回当前数组;

    /*
    compareFunction参数为比较函数,是可选的;
    若不填参数,默认按Unicode码进行排序;
    compareFunction(a, b)若大于0,则b在a之前;
    若小于0,则a在b之前;
    若等于0,则a与b的相对位置不变!
    */
    Array.prototype.sort([compareFunction]);
    
    //MDN Example
    var fruit = ['cherries', 'apples', 'bananas'];
    fruit.sort(); 
    // ['apples', 'bananas', 'cherries']
    
    var scores = [1, 10, 21, 2]; 
    scores.sort(); 
    // [1, 10, 2, 21]
    // 注意10在2之前,
    // 因为在 Unicode 指针顺序中"10"在"2"之前
    
    var things = ['word', 'Word', '1 Word', '2 Words'];
    things.sort(); 
    // ['1 Word', '2 Words', 'Word', 'word']
    // 在Unicode中, 数字在大写字母之前,
    // 大写字母在小写字母之前.
    
    //要想让数字数组按照数值从小到大排序
    //可以自定义一个compareFunction
    
    /*
        当a > b时,返回值大于0
        当a < b时,返回值小于0
        a = b时,返回值为0
    */
    function compare(a, b){
        return a - b;
    }
    
    var arr = [4, 1, 12, 9];
    arr.sort(compare); // [1, 4, 9, 12]
    
    1. splice方法:通过删除现有元素和/或添加新元素来更改一个数组的内容,并且返回被删除的元素(以数组的形式);
    array.splice(start)
    // 删除数组从start开始到末尾的所有元素,start可以为负值
    array.splice(start, deleteCount) 
    /* 
    删除数组从start开始的deleteCount个元素;
    deleteCount可以为0,即不删除任何元素;
    当deleteCount大于从start开始到末尾元素的个数,则删除从start开始到末尾的所有元素
    */
    array.splice(start, deleteCount, item1, item2, ...)
    /*
    item1,irem2,...为要添加的元素
    从start开始添加
    */
    
    //示例:删除数组中的某一个元素
    var arr = [1, 2, 3];
    arr.splice(1, 1); // 2 (即删除数组中索引为1的元素)
    
    //MDN示例:从第2位开始删除所有的元素
    var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
    var removed = myFish.splice(2);
    // 运算后的myFish :["angel", "clown"] 
    // 被删除的元素数组: ["mandarin", "sturgeon"]
    

    迭代方法

    在下面的众多遍历方法中,有很多方法都需要指定一个回调函数作为参数。<font color=#39f>在每一个数组元素都分别执行完回调函数之前,数组的length属性会被缓存在某个地方</font>,所以,如果你在回调函数中为当前数组添加了新的元素,那么那些新添加的元素是不会被遍历到的。此外,如果在回调函数中对当前数组进行了其它修改,比如改变某个元素的值或者删掉某个元素,那么随后的遍历操作可能会受到未预期的影响。总之,不要尝试在遍历过程中对原数组进行任何修改,虽然规范对这样的操作进行了详细的定义,但为了可读性和可维护性,请不要这样做。(MDN

    1. forEach方法:为数组中的每个元素执行一次回调函数;该方法没有返回值!
    /*
    callback为回调函数
    thisArg为可选参数,作为callback函数中this对象进行使用
    */
    array.forEach(callback[, thisArg]);
    
    callback = function(currentValue, index, array){
        //do something
    };
    /*
    currentValue为当前遍历的元素值
    index为当前遍历的元素索引
    array为所遍历的数组本身
    */
    
    1. every方法:如果数组中的每个元素都满足测试函数,则返回true,否则返回 false;该方法不会改变原数组!
    /*
    参数同上
    */
    arr.every(callback[, thisArg]);
    

    every方法为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 trueevery 就会返回 truecallback只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。(MDN

    1. some方法:如果数组中至少有一个元素满足测试函数,则返回 true,否则返回 false
    arr.some(callback[, thisArg]);
    
    1. filter方法:将所有在过滤函数中返回true 的数组元素放进一个新数组中并返回
    //语法
    var new_array = arr.filter(callback[, thisArg]);
    
    //MDN Example
    function isBigEnough(value) {
      return value >= 10;
    }
    
    var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    
    // filtered is [12, 130, 44]
    
    1. map方法:返回一个由回调函数的返回值组成的新数组;
    var new_array = arr.map(function callback(currentValue, index, array) { 
        // Return element for new_array 
    }[, thisArg]);
    
    // MDN实例:求每个元素的平方
    var numbers = [1, 4, 9];
    var roots = numbers.map(Math.sqrt);
    // roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]
    
    1. reduce方法:
    /*
    callback为回调函数,有四个参数
    initialValue为可选参数,为累计值的初始值!
    */
    arr.reduce(callback[, initialValue]);
    
    /*
    accumulator:累加器累加回调的返回值;它是上一次调用回调时返回的累积值,或initialValue
    currentValue:数组中正在处理的元素
    currentIndex(可选):数组中正在处理的当前元素的索引。
    如果提供了initialValue,则索引号从0开始,否则为索引从1开始
    array:调用reduce的数组
    */
    callback = function(accumulator, currentValue, currentIndex, array){
        /*
        do something
        */
        return /* some value */;
    }
    

    回调函数第一次执行时,accumulatorcurrentValue的取值有两种情况:调用reduce时提供initialValueaccumulator取值为initialValuecurrentValue取数组中的第一个值;没有提供 initialValueaccumulator取数组中的第一个值,currentValue取数组中的第二个值。(MDN

    参考文档

    1. Array - JavaScript | MDN

    相关文章

      网友评论

          本文标题:js数组

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