一、【常用语法】

1.1、数组的创建
var arrayObj = new Array(); //创建一个数组

var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度

var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并赋值

要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。

1.2、数组的元素的访问

var testGetArrValue=arrayObj[1]; //获取数组的元素值

arrayObj[1]= "这是新值"; //给数组元素赋予新的值

1.3、数组元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组【结尾】,并返回数组新长度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组【头部】,数组中的元素自动后移,返回数组新长度

arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素【插入】到数组的【指定位置】,插入位置的元素自动后移,返回""。

1.4、数组元素的删除

arrayObj.pop(); //移除【结尾】一个元素并返回该元素值

arrayObj.shift(); //移除【头部】一个元素并返回该元素值,数组中元素自动前移

arrayObj.splice(deletePos,deleteCount); //删除从【指定位置】deletePos开始的【指定数量】deleteCount的元素,数组形式返回所移除的元素

1.5、数组的截取和合并

arrayObj.slice(start, [end]); //以数组的形式【返回数组的一部分[start,end)】,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)【连接】为一个数组,返回连接好的新的数组

1.6、数组的拷贝

arrayObj.slice(0); //返回数组的拷贝数组[0,...],注意是一个新的数组,不是指向

arrayObj.concat(); //返回数组的拷贝数组【连接为空】,注意是一个新的数组,不是指向

1.7、数组元素的排序

arrayObj.reverse(); //【颠倒】元素顺序(最前的排到最后、最后的排到最前),返回数组地址

arrayObj.sort(); //对数组元素排序,返回数组地址

1.8、数组元素的字符串化

const separator = '/';

arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。

//提醒:toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用

1.9.数组过滤与循环遍历:

  1. const filtered = [1, 2, 3].filter(element => element > 1);
  2. // filtered: [2, 3];
    【理解】
  1. function callback(element, index, array) {
  2. // callback函数必须返回true或者false,返回true保留该元素,false则不保留。
  3. return true || false;
  4. }
  1. const maped = [{name: 'aa', age: 18}, {name: 'bb', age: 20}];
    maped.map(item => item.name + 'c');
  2. // maped: ['aac', 'bbc'];
  1. 【理解】:forEach map 区分
  2. Array.map(function(item,index,arr){},thisValue);
  1. Array.forEach(function(item,index,arr){},this);//注意:forEach对于空数组是不会调用回调函数的。

var arr = [0,2,4,6,8];
var str = arr.map(function(item,index,arr){
  console.log(this);
  console.log("原数组arr:",arr); //注意这里执行5次
  return item / 2;
},this);
console.log(str);//[0,1,2,3,4]

//******************************************************************

var arr = [0,2,4,6,8];

var sum = 0;

var str = arr.forEach(function(item,index,arr){

  sum += item;

  console.log("sum的值为:",sum); //0 2 6 12 20

})

注意:推荐在循环对象属性的时候,使用for in,在遍历数组的时候推荐使用for of
for…in 循环出来的是key, for…of循环出来的是value
for…in 是ES5 标准,for …of 是ES6标准,兼容性可能存在些问题,请注意使用
for…of 不能遍历普通的对象,需要和Object.keys() 搭配使用

二、【数组对象的3个属性的理解】

2.1、length 属性
Length属性表示数组的长度,即其中元素的个数。因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。
和其他大多数语言不同的是,JavaScript数组的length属性是可变的,这一点需要特别注意。
当length属性被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length属性变大;
当length属性被设置得比原来小时,则原先数组中索引大于或等于length的元素的值全部被丢失。如:

var arr=[12,23,5,3,25,98,76,54,56,76];

alert(arr.length);//10

arr[15]=34;

alert(arr.length);//16,其中arr=[12,23,5,3,25,98,76,54,56,76,,,,,,34]

2.2、prototype 属性

返回对象类型原型的引用。prototype 属性是 object 共有的。

objectName.prototype

objectName 参数是object对象的名称。

//说明:用 prototype 属性提供对象的类的一组基本功能。 对象的新实例【“继承”赋予该对象原型的操作(方法)】。

对于数组对象,以以下例子说明prototype 属性的用途。

给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入 Array.prototype, 并使用它。如:

function array_max(){
  var i,
  max = this[0];
  for (i = 1; i < this.length; i++){
    if (max < this[i])
    max = this[i];
  }
  return max;
}

Array.prototype.max = array_max;//数组prototype‘继承’该方法!!!

var x = new Array(1, 2, 3, 4, 5, 6);

var y = x.max();

2.3、constructor 属性

表示创建对象的函数。
object.constructor //object是对象或函数的名称。
//说明:constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JScript 固有对象。constructor 属性保存了对【构造特定对象实例的函数的引用】。

例如:
x = new String("Hi");
if (x.constructor == String) // 进行处理(条件为true)。

function MyFunc {
  // 钩子函数
}

三、【实际操作】

3.1.替换数组中的部分元素
for (let i = 0; i < tableData.length; i++) {
  tableData[i].begin_time = momenttableData[i].begin_time, 'YYYYMMDDHHmmss').format('YYYY-MM-DD HH:mm:ss');
  tableData[i].end_time = moment(tableData[i].end_time, 'YYYYMMDDHHmmss').format('YYYY-MM-DD HH:mm:ss');
}

3.2.合并相同的元素
mergeArrykey(result,key) {
  let map = {},
  dest = [];
  for (let i = 0; i < result.length; i++) {
    let ai = result[i];
    if (!map[ai.key]) {
      dest.push({
        key: ai.key,//过滤参数key
        id: ai.id,
        data: [ai]
      });
      map[ai.key] = ai;
    } else {
      for (let j = 0; j < dest.length; j++) {
        let dj = dest[j];
        if (dj.key == ai.key) {
          dj.data.push(ai);
          break;
        }
      }
    }
  }
  return dest
}

3.求多维数组极值
//多维数组--单一数组:arr.join(",").split(",");//数组元素都成了字符串!!!
Math.max.apply(Math, arr.join(",").split(",")) //最大值
Math.min.apply(Math, arr.join(",").split(",")) //最小值

4.矩阵转换:key value互换
const arr = [];//需要处理的数据
const arr_new = [];
for (let i = 0; i < arr[0].length; i++) {
  arr_new[i] = [];//1.设置length
}
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr[i].length; j++) {
  arr_new[j][i] = arr[i][j];//2.1.key value互换:读取arr
  }
}
for (let i = 0; i < arr_new.length; i++) {
  for (let j = 0; j < arr_new[i].length; j++) {
  arr_new[i][j];//2.2.key value互换:替换到新数组arr_new
  }
}

5.数组重构:
const arr_new = [];//需要处理的数据
const seriesOptions = [];//重构后的数组
arr_new.map((item, index) => {
  let obj = {};
  obj.value = item.id;//后台接受的值
  obj.lable = item.name;//显示的值
  seriesOptions.push(obj);
});
this.seriesOptions = seriesOptions;

6.计算数组中相同元素的个数:元素名称+数量
//1.只需要获取数量,输出newArr=[1,2,3,4,...]
checkArrayKey(arr) {
  let newArr = [];
  for (let i = 0; i < arr.length;) {
    let count = 0;
    for (let j = i; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        count++;
      }
    }
    newArr.push(count);
    i+=count;
  }
  return newArr
}
//2.得到一个新的数组:元素名称+数量+合并后的分类
checkArray(arr) {
  var newArr = [];
  for (var i = 0; i < arr.length;) {
    var count = 0;
    for (var j = i; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        count++;
      }
    }
    newArr.push({
      date: arr[i],
      count: count
    })
    i+=count;
  }
  for (var k = 0; k < arr.length; k++) {
    return newArr[k]
  }
}

其他常用:

//.1.字符串转数组:str.split(',');

var str = '1,2,3,4,巴德,merge';
var arr = str.split(',');
console.log(arr); // ["1", "2", "3", "4", "巴德", "merge"] 数组
console.log(arr[4]); // 巴德

//2.数组转字符串:arr.join(',');

var arr = [1,2,3,4,'巴德','merge'];
var str = arr.join(',');
console.log(str); // 1,2,3,4,巴德,merge

//3.字符串对象--对象字符串

var str = '1,2,3,4,巴德,merge';
var arr = str.split(',');//["1", "2", "3", "4", "巴德", "merge"]

var strify = JSON.stringify(arr);//json字符串数组:’["1", "2", "3", "4", "巴德", "merge"]‘
var arrParse = JSON.parse(strify);//json数组:["1", "2", "3", "4", "巴德", "merge"]

【json字符串对象】:var str='{ "name": "John" }';
var obj = str.toJSONString() 或 JSON.parse(str);(前端渲染)

【json对象字符串】:var json = {name: "zhangsan", age: 23, email: "chentging@aliyun.com"};
var jsonStr = JSON.stringify(json);(后台接收)

//4.【判断是否为数组、数组是否为空、两个数组是否相等】:

var a=[1,2,3];

Array.isArray(a);//true

注意: Array.isArray是ES5提供的,如果不支持。用下面的方案。

  1. if (!Array.isArray) {
  2. Array.isArray = function(arg) {
  3. return Object.prototype.toString.call(arg) === '[object Array]';
  4. };
  5. }
    //*************************************************************

typeof a === 'object' && !isNaN(a.length);//true,length可能为0

Object.prototype.toString.call(a) === '[object Array]'; // true

  1. //*************************************************************

a.indexOf(1); //如果存在返回值的下标,不存在返回-1,即只要不等于-1,表示存在该元素

  JSON.stringify(arr) === '[]' ;//数组为空

arr.length === 0;

  +arr === 0;

  1. //*************************************************************

!a.length 或 a.length >0;//数组不为空,未判断a是不是数组

注意:arr[-1] = ''时,使用函数判断:

var arr = [];
arr[-1] = '';
function isEmptyObject(e) {
  var t;
  for (t in e)
  return !1;
  return !0;
}
isEmptyObject(arr);

//*****************************************************************************

数组是否全等===?不推荐转换成字符串判断:JSON.stringify(a1) == JSON.stringify(a2) 或a1.sort().toString() == a2.sort().toString()

  1. function equar(a, b) {
  2. // 判断数组的长度
  3. if (a.length !== b.length) {
  4. return false
  5. } else {
  6. // 循环遍历数组的值进行比较
  7. for (let i = 0; i < a.length; i++) {
  8. if (a[i] !== b[i]) {
  9. return false
  10. }
  11. }
  12. return true;
  13. }
  14. }
  15. var s = equar([1, '2', 3], [1, 2, 3]);
  16. var t = equar([1, 2, 3], [1, 2, 3]);
  17. console.log(s); // false
  18. console.log(t); // true

Array常用方法总结的更多相关文章

  1. Javascript语言精粹之Array常用方法分析

    Javascript语言精粹之Array常用方法分析 1.Array常用方法分析 1.1 Array.prototype.sort() Javascript的默认比较函数假定被排序元素都是字符串,所以 ...

  2. JavaScript原生Array常用方法

    JavaScript原生Array常用方法 在入门Vue时, 列表渲染一节中提到数组的变异方法, 其中包括push(), pop(), shift(), unshift(), splice(), so ...

  3. JS数组array常用方法

    JS数组array常用方法 1.检测数组 1)检测对象是否为数组,使用instanceof 操作符 if(value instanceof Array) { //对数组执行某些操作 } 2)获取对象的 ...

  4. Javascript中String、Array常用方法介绍

    string和array作为javascript内置对象,其中许多方法无论是在开发过程中,还是在面试的时候都有机会被面试官问到,这里对经常用到的方法做一个介绍,这些方法都有过很多的实际应用场景,所以对 ...

  5. 007-js中的Array常用方法

    原文:http://www.runoob.com/jsref/jsref-obj-array.html 摘要常用方法 const array=new Array(); // 1 增加元素 // 1.1 ...

  6. javascript中Array常用方法

    一.基本概念 1.什么是数组 数组就是一组数据的集合 其表现形式就是内存中的一段连续的内存地址 数组名称其实就是连续内存地址的首地址 2.关于js中的数组特点 数组定义时无需指定数据类型 数组定义时可 ...

  7. Array常用方法

    定义二维数组: list = [['保密',''],['男',1],['女',0]] 引用 怎么创建与返回值是二维数组形式 不知道你想要怎样的答案 如果是一方法想要返回二维数组,方法的最后一行是那个数 ...

  8. JS Array常用方法indexOf/filter/forEach/map/reduce详解

    Array共有九个方法   Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.protot ...

  9. Js中Array常用方法小结

    说起Array的方法,不免让人皱一下眉头,下面我们从增删改查角度依次来总结. 1.增 push: 将传入的参数 ,插入数组的尾部,并返回新数组的长度.不管传入参数为一个值还是一个数组,都作为插入数组的 ...

随机推荐

  1. 使用 Scrapyd 管理部署 Scrapy 的一些问题

    环境:Ubuntu Xenial (16.04) Scrapy 是一个不错的爬虫框架,但是不支持定时执行,常规的做法是使用 crontab 的方式进行定时执行 shell ,当爬虫数量多的时候,管理起 ...

  2. Gen对于数组Array的处理

    举个例子,如下: public void t() { String[][] a = new String[][] { { "x", "y" } }; Strin ...

  3. [原创]Entity Framework查询原理

    前言 Entity Framework的全称是ADO.NET Entity Framework,是微软开发的基于ADO.NET的ORM(Object/Relational Mapping)框架.Ent ...

  4. Hadoop2源码分析-序列化篇

    1.概述 上一篇我们了解了MapReduce的相关流程,包含MapReduce V2的重构思路,新的设计架构,与MapReduce V1的区别等内容,今天我们在来学习下在Hadoop V2中的序列化的 ...

  5. docker 使用时一些问题点

    1.run 参数 --privileged,默认是关闭的,使用该参数,container 内的 root 拥有真正的 root 权限,否则,container 内的 root 只是外部的一个普通用户权 ...

  6. SHA-1退休:数千万用户通向加密网站之路被阻

    ​ Facebook和Cloudflare警告道:上千万用户将无法访问只使用SHA-2签名证书的HTTPS网站.2016年-2017年是SHA-1算法的缓冲期.2017年开始CA机构将不能颁发含有sh ...

  7. ASP.NET MVC5+EF6+LayUI实战教程,通用后台管理系统框架(6)- 创建数据库

    前言 其实网站就是一座连接用户和数据库的梁桥,数据库通过网站,将信息以不同的方式,展现给客户,客户通过网站,对数据库进行各种操作 下面,我们用一个例子,给大家展示下基本的增删改查操作 创建数据库 创建 ...

  8. webpack4 自学笔记三(提取公用代码)

    全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/commonT ...

  9. ASP.NET 之 EntityFramework实体框架搭建

    前段时间接触了EntityFramework,对ORM框架也是有了初步的认识,现在对其进行一点小总结. 一.ORM简介 对象关系映射(Object Relational Mapping,简称ORM)模 ...

  10. ADO.NET 【属性扩展】性别、年龄、编号

    1.性别属性扩展 private bool _Sex; //成员变量 public bool Sex // 属性 { get { return _Sex; } set { _Sex = value; ...