zoukankan      html  css  js  c++  java
  • JavaScript常用数组方法

    JavaScript数组方法有以下这些:

    forEach() 方法对数组的每一个元素执行一次提供的函数。

    map() 方法创建一个新数组,其结果是该数组都执行一次函数,原函数保持不变。

    filter() 方法使指定函数测试数组的每一个元素,并放回一个通过元素的新数组。

    some() 方法测试该数组有元素通过了指定函数的测试,如果有返回true,否则,返回false。

    every() 方法测试该数组是否全部通过指定函数测试,全部通过返回true,否则,返回false。

    Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

    Array.isArray() 方法适用于确定传递的值是否为Array

    slice() 方法将数组的一部分浅拷贝,返回到从开始到结束(不包括结束)选择的新数组对象。原始数组不会被修改。

    splice() 方法通过删除现有元素或添加新元素来更改数组的内容,第一个参数索引位置,第二个参数删除的个数,第三个参数添加新内容

     

    find() 方法返回数组中满足提供的测试函数的第一个元素的值。

    语法: arr.find(callback[, thisArg])

     

    findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

    语法: arr.findIndex(callback[, thisArg])

     

    indexOf()方法返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回-1。

    语法: arr.indexOf(searchElement)

                arr.indexOf(searchElement[, fromIndex = 0])

     

    lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。

    语法: arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])

     

    includes() 方法用来判断当前数组是否包含某指定的值,如果是,则返回 true,否则返回 false。

    语法: arr.includes(searchElement)

     

                arr.includes(searchElement, fromIndex)

     

     

     

    forEach 遍历数组

    1
    2
    3
    4
    5
    var arr = ["a""b""c"];
     
    arr.forEach(function(element,index) {
        console.log(element,index);      
    });

     

    map 返回新数组,为当前元素加字符串m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var arr = ["a""b""c"];
     
    arr.map(function(element,index) {
        return element += "m";
    });
     
    // 将给定数组的元素转成整数
     
    ["1""2""3"].map(parseInt);         // [1, NaN, NaN]
    // 等价于
    ["1""2""3"].map(function(value,index,array){
        return parseInt(value,index);
    });
    parseInt(3,1);                         // NaN   parseInt(string, radix) 函数将给定的字符串以指定基数解析成为整数。
     
     1 var arr = ["郭靖","黄蓉","洪七公","黄药师","欧阳锋","杨康","穆念慈"];
     2 
     3 function arrayToJson(arr){
     4     var narr = null,
     5         json=null;
     6 
     7     narr = arr.map(function(currentValue,index){
     8              
     9         return """+index+"":""+currentValue+""";10 
    11     });
    12 
    13     json = "{"+narr.join(",")+"}";
    14     return JSON.parse(json);
    15 }  //{0: "郭靖", 1: "黄蓉", 2: "洪七公", 3: "黄药师", 4: "欧阳锋", 5: "杨康", 6: "穆念慈"}

     

    filter 返回大于10的元素

    1
    2
    3
    4
    5
    6
    7
    // 12, 130, 44
    var arr = [12, 5, 8, 130, 44];
    arr.filter(function(value){
        return value>10
    });
    // 等价于
    arr.filter((value)=>value>10);

     

    some 判断当前数组有元素大于10的元素

    1
    2
    3
    4
    var arr = [12, 5, 8, 130, 44];
    arr.some(function(value){                  // true
        return value>10
    });

     

    every 判断当前数组所有元素是否都大于10

    1
    2
    3
    4
    var arr = [12, 5, 8, 130, 44];
    arr.every(function(value){                 // false
        return value>10
    });

    创建数组

    Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    Array.of(3);                    // [7]
    Array(3);                       // Array(3) 创建一个包含 3 个 undefined 元素的数组
     
     
    if(!Array.of){
        Array.of = function(){
            return Array.prototype.slice.call(arguments);
        }
    }

     

    判断是否数组

    Array.isArray() 方法适用于确定传递的值是否为Array

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    Array.isArray([]);                      // true
    Array.isArray(new Array());             // true
    Array.isArray(Array.prototype);         // true
    Array.isArray(Array.of(undefined));     // true
     
    Array.isArray(null);                    // false
    Array.isArray(undefined);               // false
     
    if(!Array.isArray){
        Array.isArray = function(){   
            return Object.prototype.toString.call(arguments) === "[object Array]";
        }
    }

     

    slice() 方法将数组的一部分浅拷贝,返回到从开始到结束(不包括结束)选择的新数组对象。原始数组不会被修改。

    1
    2
    3
    4
    5
    var arr = ["zero""one""two""three"];
    var sliced = arr.slice(1,3);
     
    console.log(arr);                //  ["zero", "one", "two", "three"]
    console.log(sliced);             //  ["one", "two"]

     

    splice() 方法通过删除现有元素或添加新元素来更改数组的内容,第一个参数索引位置,第二个参数删除的个数,第三个参数添加新内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var arr = ["aaa","bbb","ccc"];
    // 在索引1的位置添加一个新元素ddd
    arr.splice(1,0,"ddd");        // ["aaa", "ddd", "bbb", "ccc"]
     
    // 在索引2的位置删除一个元素
    arr.splice(2,1);              // ["aaa", "ddd", "ccc"]
     
    // 在索引1的位置删除一个元素并添加两个元素
    arr.splice(1,1,"eee","fff");  // ["aaa", "eee", "fff", "ccc"]

    例一、find()方法 查找数组中第一个大于等于15的元素

    1
    2
    3
    4
    var num = [10,3,5,15,100,1].find(function(elem, index){    
        return elem>=15;
    });
    console.log(num)     // 15

     

    例二、findIndex() 查找数组中第一个大于等于15的元素的位置(索引)

    1
    2
    3
    4
    var num = [10,3,5,15,100,1].findIndex(function(elem, index){    // 15
        return elem>=15;
    });
    console.log(num)     // 3

     

    例三、indexOf () 查找5所在的位置,默认索引位置从零开始

    1
    2
    3
    [0,1,2,3,4,5,6].indexOf(5);    // 5    从索引0的位置往后查找
    [0,1,2,3,4,5,6].indexOf(5,5);  // 5
    [0,1,2,3,4,5,6].indexOf(5,10); // -1   从索引10的位置往后查找

     

    例四、lastIndexOf() 查找5所在的位置,默认索引位置当前数组长度减一

    1
    2
    3
    4
    [0,1,2,3,4,5,6].lastIndexOf(5);       // 5   从索引位置数组长度减一向前查找
    [0,1,2,3,4,5,6].lastIndexOf(5, 6);    // 5
    [0,1,2,3,4,5,6].lastIndexOf(5, 10);   // 5
    [0,1,2,3,4,5,6].lastIndexOf(5, 1);    // -1   从索引1的位置向前查找

     

    例五、includes

    1
    2
    3
    [0,1,2,3,4,5,6].includes(5);                 // true     从索引0位置往后查找是否存在5元素,是
    [0,1,2,3,4,5,6].includes(10);                // false
    [0,1,2,3,4,5,6].includes(5,10);              // false    从索引10位置往后查找是否存在10元素,否

    forEach() 方法对数组的每一个元素执行一次提供的函数。

    map() 方法创建一个新数组,其结果是该数组都执行一次函数,原函数保持不变。

    filter() 方法使指定函数测试数组的每一个元素,并放回一个通过元素的新数组。

    some() 方法测试该数组有元素通过了指定函数的测试,如果有返回true,否则,返回false。

    every() 方法测试该数组是否全部通过指定函数测试,全部通过返回true,否则,返回false。

     

    forEach 遍历数组

    1
    2
    3
    4
    5
    var arr = ["a""b""c"];
     
    arr.forEach(function(element,index) {
        console.log(element,index);      
    });

     

    map 返回新数组,为当前元素加字符串m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var arr = ["a""b""c"];
     
    arr.map(function(element,index) {
        return element += "m";
    });
     
    // 将给定数组的元素转成整数
     
    ["1""2""3"].map(parseInt);         // [1, NaN, NaN]
    // 等价于
    ["1""2""3"].map(function(value,index,array){
        return parseInt(value,index);
    });
    parseInt(3,1);                         // NaN   parseInt(string, radix) 函数将给定的字符串以指定基数解析成为整数。

     

    filter 返回大于10的元素

    1
    2
    3
    4
    5
    6
    7
    // 12, 130, 44
    var arr = [12, 5, 8, 130, 44];
    arr.filter(function(value){
        return value>10
    });
    // 等价于
    arr.filter((value)=>value>10);

     

    some 判断当前数组有元素大于10的元素

    1
    2
    3
    4
    var arr = [12, 5, 8, 130, 44];
    arr.some(function(value){                  // true
        return value>10
    });

     

    every 判断当前数组所有元素是否都大于10

    1
    2
    3
    4
    var arr = [12, 5, 8, 130, 44];
    arr.every(function(value){                 // false
        return value>10
    });
  • 相关阅读:
    css实现文字渐变
    js 模拟window.open 打开新窗口
    在centos上安装nodejs
    css多行省略
    Vue 中渲染字符串形式的组件标签
    vue 中结合百度地图获取当前城市
    vue-cli 项目实现路由懒加载
    JavaScript学习-2循环
    早期自学jQuery-一入门
    JavaScript学习-1
  • 原文地址:https://www.cnblogs.com/macliu/p/6549773.html
Copyright © 2011-2022 走看看