zoukankan      html  css  js  c++  java
  • 类数组和数组方法

    1. 类数组

    类数组是像数组一样拥有索引(数组下标)和长度(length)的对象,但未拥有数组方法。

    比如,

    var ArrLike = {
        0: 'args1',
        1: 'args2',
        length: 2
    }
    

    常见的类数组有arguments对象和DOM方法的返回结果。

    类数组要使用数组方法,需先转化为数组:

    • Array.from(arguments)
    • Array.prototype.slice.call(arguments)

    2. 数组方法

    • push & pop
    • unshift & shift
    • sort & reverse
    • slice & splice
    • concat
    • join
    • indexOf & lastIndexOf
    • forEach
    • map
    • filter
    • every & some

    2.1 push & pop

    push()方法和pop()方法都是对数组的末尾进行添加和删除元素。

    var arr = [1, 3, 7, 8];
    			
    // push & pop
    // push 可以向数组末尾添加一个或多个元素,返回数组长度
    console.log(arr.push(9) + '---' + arr);
    console.log(arr.push(2, 5) + '---' + arr);
    // pop 移除最后一个元素,并返回该元素
    console.log(arr.pop() + '---' + arr);
    
    // 输出结果
    5---1,3,7,8,9
    7---1,3,7,8,9,2,5
    5---1,3,7,8,9,2
    

    2.2 unshift & shift

    unshift()方法和shift()方法都是对数组的首端进行添加和删除元素。

    var arr = [1, 3, 7, 8];
    // unshift & shift
    // unshift 数组首端添加一个或多个元素,返回数组长度
    console.log(arr.unshift(0) + '---' + arr);
    console.log(arr.unshift(0, 1) + '---' + arr);
    // shift 删除数组第一个元素,并返回该元素
    console.log(arr.shift() + '---' + arr);
    
    5---0,1,3,7,8
    7---0,1,0,1,3,7,8
    0---1,0,1,3,7,8
    

    2.3 sort & reverse

    sort()方法和reverse()方法对原数组进行排序和倒序,并不会产生新的数组。

    var arr = [1, 7, 3, 8];
    // sort & reverse
    // sort 按从小到大对数组进行排序
    arr.sort();
    console.log(arr.toString()); // 1,3,7,8
    // reverse 倒序或倒置,并不是按大小排序,
    // 而是将数组从左到右的顺序颠倒过来,变成从右到左
    var arr2 = [2, 5, 9, 3];
    arr2.reverse();
    console.log(arr2.toString()); // 3,9,5,2
    

    2.4 slice & splice

    slice()方法和splice()方法长得比较接近,就一起拿过来唠唠。

    var arr = [1, 7, 3, 8];
    // slice & splice
    // slice(start,end) 返回数组的一个片段,第一个参数必选
    console.log(arr.slice(1)); // [7, 3, 8]
    console.log(arr.slice(1, 3)); // [7, 3] 不包含结束位置
    // splice(index,howmany,item1,.....,itemX)
    // index	必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
    // howmany	必需。要删除的项目数量。如果设置为 0,则不会删除项目。
    // item1, ..., itemX	可选。向数组添加的新项目。
    // 该方法会改变原始数组,返回的是含有被删除的元素的数组
    var arr2 = [2, 5, 9, 3];
    console.log(arr2.splice(1, 2) +'---'+ arr2); // 5,9---2,3
    var arr3 = [2, 5, 9, 3];
    console.log(arr3.splice(1, 0, 6, 6) +'---'+ arr3); // ---2,6,6,5,9,3
    

    2.5 concat

    concat()方法可以用来拼接数组。

    var arr = [1, 7, 3, 8];
    // concat() 拼接数组,参数可以是单个元素,也可以是数组
    console.log(arr.concat(9, [0, 1])); // [1, 7, 3, 8, 9, 0, 1]
    

    2.6 join

    join()方法通过传入一个连接符将数组元素连接成一个字符串,默认的连接符是逗号。

    var arr = [1, 7, 3, 8];
    // join() 通过连接符连接数组元素
    console.log(arr.join()); 		// 1,7,3,8
    console.log(arr.join('-'));		// 1-7-3-8
    

    2.7 indexOf & lastIndexOf

    indexOf()方法和lastIndexOf()方法都是返回某元素在数组中的索引位置,不同的是,如果该元素在数组中出现多次,indexOf()返回的第一次出现的位置,而lastIndexOf()返回的是最后一次出现的位置。

    var arr = [1, 7, 5, 7, 3, 8];
    // indexOf & lastIndexOf
    console.log(arr.indexOf(7));     // 1
    console.log(arr.lastIndexOf(7)); // 3
    

    2.8 forEach

    三个参数分别为:遍历的数组内容,第对应的数组索引,数组本身。

    var arr = [1, 7, 3, 8];
    arr.forEach(function(x, index, a){
    	console.log(x + '|' + index + '|' + (a === arr));
    });
    // 1|0|true
    // 7|1|true
    // 3|2|true
    // 8|3|true
    

    2.9 map

    var arr = [1, 7, 3, 8];
    var arr2 = arr.map(function(item){
    	return item*item;
    });
    console.log(arr2); //[1, 49, 9, 64]
    

    2.10 filter

    var arr = [1, 7, 3, 8, 9];
    var arr2 = arr.filter(function(x, index) {
    	return index % 2 === 0 || x >= 8;
    }); 
    console.log(arr2);  // [1, 3, 8, 9]
    

    2.11 every & some

    • every() 数组所有元素满足条件返回true
    • some() 只要数组中有一个元素满足条件便返回true
    var arr = [1, 7, 3, 8, 9];
    var res = arr.every(function(x) {
    	return x < 10;
    }); 
    console.log(res); // true
    
    var res = arr.some(function(x) {
    	return x < 3;
    }); 
    console.log(res); // true
    

    参考链接

  • 相关阅读:
    夜神 虚拟机调试 HBuilder 移动端应用
    maven filter 文件分环境打包部署小问题
    fatal: remote error: CAPTCHA required
    程序员今年是这样计划的
    线程池shutdown与shutdownnow 小例子
    JAVA知识点脉络记忆-刻意练习
    日志
    (职员)2015-12-02 星期三 日志
    (职员)2015-12-04 星期五 周志
    (职员)2015-12-04 星期五 日志
  • 原文地址:https://www.cnblogs.com/yezhechenyang/p/14420189.html
Copyright © 2011-2022 走看看