数组(Array)常用方法;

数组常用的方法:concat(),every(), filter(), forEach(),  indexOf(), join(), lastIndexOf(), map(), pop(), push(), reduce(), reduceRight(),  reverse(), shift(), slice(), some(), sort(), splice(), toLocaleString(), toString(),  unshift(),其中every(),filter(),forEach(), indexOf(), lastIndexOf(),map(), reduce(), reduceRight()和some ECMAScript 5新增的方法。

  1. concat() 方法用于连接两个或多个数组;  (注: 原数组不变,创建一个新的数组)。

    var arr1 = [1,2,3];
    var arr2 = [4,5,6];
    var arr3 = [7,8];
    arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]
    arr1.concat(arr2,arr3); //连接多个数组,[1, 2, 3, 4, 5, 6, 7, 8]
    arr1 // [1,2,3]
  2. join() 方法将数组分割成字符串并连接在一起,返回最后生成的字符串;可以指定一个字符串分隔数组的各个元素; (注:原数组不变,创建一个新数组)。
    var arr = [1,2,3];
    arr.join(); // "1,2,3" 默认为逗号
    arr.join(''); // "123"
    arr.join('|') // "1|2|3"
    arr // [1,2,3]
  3. slice(start,end) 方法用于截取数组指定的一部分,参数start规定选取的开始位置,end规定选取的结束位置(不包含该元素); 如果只有一个参数,则表示选取的开始位置。如果参数中出现负数,表示相对数组中最后一个元素的位置,如-1,表示倒数第一个元素,-3表示倒数第三个元素。(注:原数组不变,创建一个新数组
    var arr = [1,2,3,4,5,6,7,8];
    arr.slice(0,3); // [1, 2, 3]
    arr.slice(3,5); // [4, 5]
    arr.slice(4) // [5, 6, 7, 8]
    arr.slice(3,-1); // [4, 5, 6, 7]
    arr.slice(-3,-2) // [6]
  4. splice(index,howmany,item) 方法在数组中插入或者删除元素,返回删除的元素。参数index,表示规定添加/删除元素的位置(索引),使用负数可从数组结尾处规定位置;参数howmany,表示要删除的数量,0表示不删除元素;参数item,表示向数组添加的元素;(注: 原数组发生改变)
    var arr = [1,2,3,4,5,6,7,8,9]
    arr.splice(8) // [9] 一位参数默认截取到最后
    arr //[1, 2, 3, 4, 5, 6, 7, 8]
    arr.splice(1,0) // [] 第二个参数为0,不会删除数组元素
    arr //  [1, 2, 3, 4, 5, 6, 7, 8]
    arr.splice(-1) // [8] 起始为负数
    arr.splice(6,0,'javaScript') // []
    arr //  [1, 2, 3, 4, 5, 6, "javaScript", 7]
    arr.splice(6,2,'Vue') // 删除项["javaScript", 7] 替换元素
    arr // 原数组[1, 2, 3, 4, 5, 6, "Vue"]
  5. push()和pop() 方法  (注: 原数组发生了改变)
    push()方法在数组的尾部添加一个或者多个元素,并返回数组新的长度。
    var arr = ['javaScript','HTML','Css'];
    arr.push('Vue'); //
    arr // ["javaScript", "HTML", "Css", "Vue"]
    arr.push('Sass','Jq') //
    arr // ["javaScript", "HTML", "Css", "Vue", "Sass", "Jq"]

    pop()方法删除数组的最后一个元素,减少数组长度并返回删除的值。

    var arr = ['JavaScript','Vue','React'];
    arr.pop() // "React"
    arr // ["JavaScript", "Vue"]
  6. shift()与unshift()方法 (注: 原数组发生了改变
    unshift() 方法在数组的头部添加一个或者多个元素,返回数组新的长度;
    var arr = [];
    arr.unshift('Vue','JavaScript'); //
    arr; // ["Vue", "JavaScript"]

    shift() 方法删除数组的第一个元素并返回删除的值;

    var arr = ['JavaScript','Vue','React'];
    arr.shift(); // "JavaScript"
    arr; //["Vue", "React"]
  7. reverse() 和sort()方法 (注: 原数组发生了改变
    reverse() 方法将数组的颠倒顺序,返回逆序的数组。
    var arr = ['JavaScript','Vue','React']
    arr.reverse() // ["React", "Vue", "JavaScript"]
    arr //["React", "Vue", "JavaScript"]

    sort() 方法将数组中的数组排序并返回排序后的数组(升序排列),sort()方法会调用每个数组项的toString()方法转换成字符串,然后比较得到后的字符串,已确定排列顺序;
    (a) 如果数组里面的内容为字母,则以字母表的顺序排列(按照字符编码的顺序进行排序)。

    var arr = ["React", "Vue", "JavaScript"];
    arr.sort(); // ["JavaScript", "React", "Vue"]

    (b) sort(sortFun) 参数sortFun 为一个函数

    var arr = [78,56, 99, 9, 44,123,45,555,678,999,12,123];
    arr.sort(); // [12, 123, 123, 44, 45, 555, 56, 678, 78, 9, 99, 999] 未传入函数参数
    ---------------------------------------------------
    var arr = [78,56, 99, 9, 44,123,45,555,678,999,12,123];
    arr.sort(function(a,b){
    return a - b; // 返回 负数,0, 正数
    }) // [9, 12, 44, 45, 56, 78, 99, 123, 123, 555, 678, 999]
  8. toString() 和 toLocaleString() (注: 原数组不发生改变
    toString()方法 将数组的每个元素转换成字符串,返回用逗号分隔开的字符串
    [1,2,3].toString(); //"1,2,3"
    ['JavaScript','Vue','React'].toString(); //"JavaScript,Vue,React"
    [1,['JavaScript','Vue',{'title':'标题'}],2].toString(); // "1,JavaScript,Vue,[object Object],2"

    toLocaleString()方法 把数组转换为本地字符串;

    [1,2,3].toLocaleString()  // "1,2,3"
    [new Date()].toLocaleString(); // "2018/6/2 上午11:50:12"

ECMAScript 5定义了9个新的数组方法来遍历、映射、过滤、检测、简化和搜索数组;

  1. forEach(function(item,index,list){})方法  从头到尾遍历数组,为每个元素调用指定的函数; 参数function(item,index,list) {}  item,表示数组每一项的值,index,表示元素索引,list,表示为遍历的数组本身;

    var  data = [1,2,3,4,5,6];
    var sum = 0;
    data.forEach((item) => {
    sum += item; // 求和
    });
    sum // // 每个数组元素自加1
    data.forEach((item,index,list) => {
    list[index] = item + 1;
    });
    data /// [2, 3, 4, 5, 6, 7] ------------------------------------
    // 注意: forEach() 对于空数组是不会执行回调函数的
    var data = [];
    data.forEach((item) => {
    console.log(item) // 不执行
    })
    // 注意,非数组调用报错
    var data = '';
    data.forEach((item) => {
    })
  2. map()方法 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

    map() 方法按照原始数组元素顺序依次处理元素。

    注意: map() 不会对空数组进行检测。

    注意: map() 不会改变原始数组。

    var arr = [2,3,4,5,6,7,8];
    var mapArr = arr.map((item) => {
    return Math.pow(item,3); // 返回每一项的的3次幂
    });
    mapArr // [8, 27, 64, 125, 216, 343, 512]
    arr // [2, 3, 4, 5, 6, 7, 8] 原数组不发生改变
  3. filter()方法 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。
    var arr = [2,4,6,8,10,15];
    // 取数组小于 6 或者 大于 12 的数
    arr.filter((item) => {
    return item < 6 || item > 12; // [2, 4, 15]
    })
     // 取数组能整除2的数
    arr.filter((item) => {
    return item%2 == 0; // [2, 4, 6, 8, 10]
    })
  4. every()和some()方法 (注:不改变原数组
    every()方法  用于检测数组所有元素是否都符合指定条件(通过函数提供),返回值为true or false; 当且针对数组中的所有元素调用判定函数都返回true时,才返回true。
    var arr = [1,2,3,4,5,6,7,8];
    // 所有值小于10
    arr.every((item) => {
    return item < 10; // true
    }); arr.every((item) => {
    return item < 4; // false
    })

    some() 方法 当数组中至少存在一个元素调用判定函数返回true,它就返回true。
    some() 方法会依次执行数组的每个元素:

    var arr = [2,4,6,8,10,15];
    arr.some((item) => {
    return item < 2; // false
    }) arr.some((item) => {
    return item < 4; // true
    })
  5. reduce()和reduceRight()方法 用指定的函数将数组进行组合,最终计算为一个值;
    reduce()接收两个参数,第一个参数是执行简化操作的函数(必选),第二参数是传递给函数的初始值(可选)。
    var arr = [1,2,3,4,5,6,7,8];
    // 求和
    arr.reduce((x,y) => {
    return x + y;
    },0);
    // 求最大值
    arr.reduce((x,y) => {
    return x>y ? x : y; //
    })

    reduceRight()原理与reduce()一样,不同的是reduceRight()按照数组从高到低处理数组。

    var arr = [2,3,4];
    //2^(3^4) 乘方从右到左
    arr.reduceRight((x,y) => {
    return Math.pow(y,x); // 2.4178516392292583e+24
    // return Math.pow(x,y); // 4096
    })
  6. indexOf()和lastIndexOf()方法
    indexOf () 方法 用于搜索整个数组中某个字符串在数组中首次出现的位置,并返回该值在数组中的索引。 没有找到返回-1; indexOf(),从头到尾搜索,lastIndexOf()方法从末尾开始搜索。
    var arr = ['javaScript','Vue','React','CSS3'];
    arr.indexOf('vue') // -1
    arr.indexOf('CSS3'); //
    arr.lastIndexOf('CSS3'); //
    arr.lastIndexOf('Vue'); //

JavaScript 数组(Array)方法汇总的更多相关文章

  1. JavaScript 数组去重 方法汇总

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. JavaScript 数组(Array)方法(二)

    forEach ES5新增的方法,Arr.forEach((value, index,array)=>{}); let arr=['a','b','c']; arr.forEach((val,i ...

  3. JavaScript数组去重方法汇总

    1.运用数组的特性 1.遍历数组,也遍历辅助数组,找出两个数组中是否有相同的项,若有则break,没有的话就push进去. //第一版本数组去重 function unique(arr){ var r ...

  4. Javascript数组Array的forEach方法

    Javascript数组Array的forEach扩展方法 forEach是最常用到的数组扩展方法之一,相当于参数化循环数组,它简单的在数组的每一个元素上应用传入的函数,这也意味着只有存在的元素会被访 ...

  5. JavaScript 数组(Array)对象的方法

    JavaScript 数组(Array)对象的方法 concat() 描述:用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 原型:arrayObject.conc ...

  6. JavaScript中Array方法总览

    title: JavaScript中Array方法总览 toc: true date: 2018-10-13 12:48:14 push(x) 将x添加到数组最后,可添加多个值,返回数组长度.改变原数 ...

  7. JavaScript——数组——slice方法

    JavaScript--数组--slice方法 JavaScript中的slice方法类似于字符串的substring方法,作用是对数组进行截取. slice方法有两个参数,indexStart 和 ...

  8. javascript数组原型方法

    1.javascript数组原型方法. <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. JavaScript数组归并方法reduce

    示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

随机推荐

  1. 阅读rocketmq技术内幕、实战与原理杂记 - 设计

    最近正在研究rocketmq,简单记录下设计的不同 互联网系统中Rpc.服务治理.消息中间件基本都是标配,消息中间件能解耦,削峰,高可用并能间接提供达到最终一致性 消息中间件中,消息消费分为最多一次, ...

  2. 转 JVM找出占用CPU最高的线程

    这两天客户这边有一台服务器一到下午3点左右就开始卡住,页面无法访问,服务器CPU占用达到300%多开始以为只是可能只是意外事件,重启一下就好,但是发现重启之后没几分钟服务器马上又反应无法访问,我就开始 ...

  3. JS 中offset 的小bug 与解决方案。

    一.发现bug准备工作,先定义一个div,然后给div加上样式    效果图如图所示: 二.编写正常的代码,同时给div加上一个id     会发现div图会向左缩进...直至消失. 三.添加代码bo ...

  4. 【译】BERT表示的可解释性分析

    目录 从词袋模型到BERT 分析BERT表示 不考虑上下文的方法 考虑语境的方法 结论 本文翻译自Are BERT Features InterBERTible? 从词袋模型到BERT ​ Mikol ...

  5. 初始IP协议

    一.引言 发送一段TCP数据大致需要经过:用户封装 –> TCP封装 –> IP封装 –>帧封装 Note:用户封装没啥好说的,都是客户自己决定的,在一些简单的应用情况下,这个步骤可 ...

  6. TS和C#的差异

    1. TS中let a : () => void; 假设有个class  B,  B里有个方法 c; 不能像C#委托一样, a = B.c;...........如果这样的话方法c里调用的thi ...

  7. Linux seq_printf输出内容不完整的问题

    Linux seq_printf输出内容不完整的问题 写在前面的话:这是多年前在项目中遇到的问题,作为博客的开篇之作,有不足之处,请各位大侠斧正!谢谢! seq_file接口介绍 有许多种方法能够实现 ...

  8. 随select动,将value值显示在后面的input里

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  9. 初识Attention机制(NLP领域)

    Attention 机制. 参考:https://blog.csdn.net/xiewenbo/article/details/79382785 要是关注深度学习在自然语言处理方面的研究进展,我相信你 ...

  10. 每月IT摘录201904

    技术 1.项目,相比数量,规模更重要. 毫无疑问,在实际工作中,积极参与实际工程项目是快速积累经验最好的办法. 相对于项目的数量,项目的规模更加重要.项目的规模是可以比较容易判断的.实际服务用户的数量 ...