zoukankan      html  css  js  c++  java
  • 超详细的JS数组方法

    数组是js中最常用到的数据集合,其内置的方法也很多,熟练掌握这些方法,可以有效的提高我们的工作效率,也对我们的代码质量有很大影响。

    一、创建数组

    1、使用数组字面量方法

    var arr1 = [];       // 创建一个数组
    var arr2 = [20];   // 创建一个包含1项数据为20的数组
    var arr3 = ['lily','lucy','Tom'];     // 创建一个包含3个字符串的数组

    2、使用Array构造函数

    无参构造

    var arr1 = new Array();   // 创建一个空数组

    带参构造

    如果只传一个数值参数,则表示创建一个初始长度为指定数组的空数组

    var arr2 = new Array(10);     // 创建一个包含10项的数组

    如果传入一个非数值的参数或者参数大于1,则表示创建一个包含指定元素的数组

    var arr3 = new Array('lily','lucy','Tom');     // 创建一个包含3个字符串的数组

    3、Array.of方法创建数组(es6新增)

    Array.of()方法会创建一个包含所有传入参数的数组,而不管参数的数量与类型

    let arr1 = Array.of(1,2);
    console.log(arr1.length);   // 2
    
    let arr2 = Array.of(3);
    console.log(arr2.length);   // 1
    console.log(arr2[0]);   // 3

    4、Array.from方法创建数组(es6新增)

    在js中将非数组对象转换为真正的数组是非常麻烦的。在es6中,将可迭代对象或者类数组对象作为第一个参数传入,Array.from()就能返回一个数组

    function arga(...args){            // ...args剩余参数数组,由传递给函数的实际参数提供
         let arg = Array.from(args);
         console.log(arg);
    }
    
    arga(arr1,26,from);     // [arr1,26,from]

    二、数组方法

    数组原型方法主要有以下这些:

    • join():用指定的分隔符将数组每一项拼接为字符串
    • push():向数组的末尾添加新元素
    • pop():删除数组的最后一项
    • unshift():向数组首位添加新元素
    • shift():删除数组的第一项
    • slice():按照条件查找出其中的部分元素
    • splice():对数组进行增删改
    • filter():过滤功能
    • concat():用于连接两个或多个数组
    • indexOf():检测当前值在数组中第一次出现的位置索引
    • lastIndexOf():检测当前值在数组中最后一次出现的位置索引
    • every():判断数组中每一项都是否满足条件
    • some():判断数组中是否存在满足条件的项
    • includes():判断一个数组是否包含一个指定的值
    • sort():对数组的元素进行排序
    • reverse():对数组进行倒序
    • forEach():es5及以下循环遍历数组每一项
    • map():es6循环遍历数组每一项
    • find():返回匹配的项
    • findIndex():返回匹配位置的索引
    • reduce():从数组的第一项开始遍历到最后一项,返回一个最终的值
    • reduceRight():从数组的最后一项开始遍历到第一项,返回一个最终的值
    • toLocaleString()、toString():将数组转换为字符串
    • entries()、keys()、values():遍历数组

    各个方法的基本功能详解

    1、join()

    join()方法用于把数组中的所有元素转换一个字符串,默认使用逗号作为分隔符

    var arr1 = [1,2,3];
    console.log(arr1.join());   // 1,2,3
    console.log(arr.join('-'));   // 1-2-3
    console.log(arr);   // [1,2,3](原数组不变)

    2、push()和pop()

    push()方法从数组末尾向数组添加元素,可以添加一个或多个元素

    pop()方法用于删除数组的最后一个元素并返回删除的元素

    var arr1 = ['lily','lucy','Tom'];
    var count = arr1.push('Jack','Sean');
    console.log(count);   // 5
    console.log(arr1);   // ['lily','lucy','Tom','Jack','Sean']
    
    var item = arr1.pop();
    console.log(item);   // Sean
    console.log(arr1);   // ['lily','lucy','Tom','Jack']

    3、unshift()和shift()

    unshift()方法可向数组的开头添加一个或更多元素,并返回新的长度

    shift()方法用于把数组的第一个元素从其中删除,并返回第一个元素的值

    var arr1 = ['lily','lucy','Tom'];
    var count = arr1.unshift('Jack','Sean');
    console.log(count);   // 5
    console.log(arr1);   // ['Jack','Sean','lily','lucy','Tom']
    
    var item = arr1.shift();
    console.log(item);   // Jack
    console.log(arr1);   // [''Sean','lily','lucy','Tom']

    4、sort():用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序,默认排序顺序为按字母升序

    var arr1 = ['a','d','c','b'];
    console.log(arr1.sort());   // ['a','b','c','d']
    
    function compare(value1,value2){
         if(value1 < value2){
              return -1;
         }else if(value1 > value2){
              return 1;
         }else{
              return 0;
         }
    }
    
    var arr2 = [13,24,51,3];
    console.log(arr2.sort(compare));   // [3,13,24,51]
    
    // 如果需要通过比较函数产生降序排序的结果,只要交后比较函数返回的值即可

    5、reverse():用于颠倒数组中元素的顺序

    var arr1 = [13,24,51,3];
    console.log(arr1.reverse());   // [3,51,24,13]
    console.log(arr1);   // [3,51,24,13](原数组改变)

    6、concat():用于连接两个或多个数组,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本

    var arr1 = [1,3,5,7];
    var arrCopy = arr1.concat(9,[11,13]);
    console.log(arrCopy);   // [1,3,5,7,9,11,13]
    console.log(arr1);   // [1,3,5,7](原数组未被修改)

    7、slice():返回从原数组中指定开始下标到结束下标之间的项组成的新数组,可以接受一或两个参数,即要返回项的起始和结束位置(不包括结束位置的项)

    var arr1 = [1,3,5,7,9,11];
    var arrCopy = arr1.slice(1);
    var arrCopy2 = arr1.slice(1,4);
    var arrCopy3 = arr1.slice(1,-2);   // 相当于arr1.slice(1,4);
    var arrCopy4 = arr1.slice(-4,-1);   // 相当于arr1.slice(2,5);
    console.log(arr1);   // [1,3,5,7,9,11](原数组没变)
    console.log(arrCopy);   // [3,5,7,9,11]
    console.log(arrCopy2);   // [3,5,7]
    console.log(arrCopy3);   // [3,5,7]
    console.log(arrCopy4);   // [5,7,9]

    8、splice():可以实现删除、插入和替换

    8-1、删除元素,并返回删除的元素,2个参数:起始位置和要删除的项数

    var arr1 = [1,3,5,7,9,11];
    var arrRemoved = arr1.splice(0,2);
    console.log(arr1);   // [5,7,9,11]
    console.log(arrRemoved);   // [1,3]

    8-2、向指定索引处添加或替换元素,3个参数:起始位置、0(要删除的项数)和要插入的项

    // 添加元素
    var arr1 = [22,3,31,12];
    arr1.splice(1,0,12,35);
    console.log(arr1);   // [22,12,35,3,31,12]
    
    // 替换元素
    var arr2 = [22,3,8,58];
    arr2.splice(1,1,6);   // [3]
    console.log(arr2);   // [22,6,8,58]

    9、forEach():3个参数:遍历的数组的项,索引、数组本身

    10、map():返回一个新数组,会按照原始数组元素顺序依次处理元素

    11、every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true

    var arr1 = [1,2,3,4,5];
    var arr2 = arr1.every.every(x => {
         return x < 10;
    });
    console.log(arr2);   // true
    
    var arr3 = arr1.every(x => {
         return x < 3;
    });
    console.log(arr3);   // false

    12、some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true

    var arr1 = [1,2,3,4,5];
    var arr2 = arr1.some(x => {
         return x < 3;
    });
    console.log(arr2);   // true
    
    var arr3 = arr1.some(x => {
         return x < 1;
    });
    console.log(arr3);   // false

    13、includes():es7新增,用来判断一个数组是否包含一个指定的值,使用===运算符来进行值比较,如果是返回true,否则false,参数有两个,第一个是(必填)需要查找的元素值,第二个是(可选)开始查找元素的位置

    var arr1 = [22,3,31,12,58];
    var includes = arr1.includes(31);
    console.log(includes);   // true
    
    var includes2 = arr1.includes(31,3);   // 从索引3开始查找31是否存在
    console.log(includes2);   // false

    14、reduce()和reduceRight():都会实现迭代数组的所有项(即累加器),然后构建一个最终返回的值

    reduce()方法从数组的第一项开始,逐个遍历到最后

    reduceRight()方法从数组的最后一项开始。向前遍历到第一项

    4个参数:前一个值、当前值、项的索引和数组对象

    var arr1 = [1,2,3,4,5];
    var sum = arr1.reduce((prev,cur,index,array) => {
         return prev + cur;
    },10);   // 数组一开始加了一个初始值10,可以不设默认0
    console.log(sum);   // 25

    15、toLocaleString()和toString():都是将数组转换为字符串

    var arr1 = [22,3,31,12];
    let str = arr1.toLocaleString();
    var str2 = arr1.toString();
    
    console.log(str);   // 22,3,31,12
    console.log(str2);   // 22,3,31,12

    16、find()和findIndex():都接受两个参数:一个回调函数,一个可选值用于指定回调函数内部的this

    该回调函数可接受3个参数:数组的某个元素、该元素对应的索引位置、数组本身,在回调函数第一次返回true时停止查找。

    二者的区别是:find()方法返回匹配的值,而findIndex()方法返回匹配位置的索引

    17、entries()、keys()和values():es6新增

    entries()、keys()和values()--用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历

    区别是keys()是对键名的遍历、values()是对键值的遍历、entries()是对键值对的遍历

    for(let index of [a,b],keys()){
         console.log(index);
    }
    // 0
    // 1
    
    for(let elem of [a,b].values()){
         console.log(elem);
    }
    // a
    // b
    
    for(let [index,elem] of [a,b].entries()){
         console.log(index,elem);
    }
    // 0 'a'
    // 1 'b'

    如果不使用for...of循环,可以手动调用遍历器对象的next方法,进行遍历

    let arr1 = [a,b,c];
    let entries = arrr1.entries();
    console.log(entries.next().value);   // [0,a]
    console.log(entries.next().value);   // [1,b]
    console.log(entries.next().value);   // [2,c]
  • 相关阅读:
    176. Second Highest Salary
    175. Combine Two Tables
    172. Factorial Trailing Zeroes
    171. Excel Sheet Column Number
    169. Majority Element
    168. Excel Sheet Column Title
    167. Two Sum II
    160. Intersection of Two Linked Lists
    个人博客记录
    <meta>标签
  • 原文地址:https://www.cnblogs.com/coolsboy/p/14329522.html
Copyright © 2011-2022 走看看