一、【常用语法】

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.数组过滤与循环遍历:

const filtered = [1, 2, 3].filter(element => element > 1);
// filtered: [2, 3];
【理解】
function callback(element, index, array) {
// callback函数必须返回true或者false,返回true保留该元素,false则不保留。
return true || false;
}
const maped = [{name: 'aa', age: 18}, {name: 'bb', age: 20}];
maped.map(item => item.name + 'c');
// maped: ['aac', 'bbc'];
【理解】:forEach 与 map 区分

Array.map(function(item,index,arr){},thisValue);
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提供的,如果不支持。用下面的方案。

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

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

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

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

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

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

arr.length === 0;

  +arr === 0;

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

!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()

function equar(a, b) {
// 判断数组的长度
if (a.length !== b.length) {
return false
} else {
// 循环遍历数组的值进行比较
for (let i = 0; i < a.length; i++) {
if (a[i] !== b[i]) {
return false
}
}
return true;
}
}
var s = equar([1, '2', 3], [1, 2, 3]);
var t = equar([1, 2, 3], [1, 2, 3]);
console.log(s); // false
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. 如何自定义Tomcat Realm实现我们的用户认证需求

    导读 Tomcat对于J2EE或Java web开发者而言绝不陌生,但说到Realm,可能有些人不太清楚甚至没有听说过,那么到底什么是Realm?简单一句话就是:Realm是Tomcat中为web应用 ...

  2. MVC源码分析 - Action/Result 过滤器执行时机

    前面 的篇章, 解析了Action方法的查找, 以及 Authorize, Action, Result, Error 过滤器的加载时机. 也花了两篇去看授权和错误过滤器的使用. 但是对于 Actio ...

  3. vuex数据管理-数据共享

    应用场景 提供一个地址省市区地址联动操作的应用场景:在地址管理的地址修改.地址添加.选择送货区域等逻辑中,会用到该联动picker.在地址picker操作中,需要请求省份列表,下面以省份列表的操作为例 ...

  4. java中变量使用的总结

    java中整数默认为int,小数默认为double. float n5=1.3; 这个句子就会报错,应该修改成这样float n5=1.3f; 八大基本类型 变量类型 位数 范围 备注 Byte 8位 ...

  5. Netty 启动过程源码分析 (本文超长慎读)(基于4.1.23)

    前言 作为一个 Java 程序员,必须知道Java社区最强网络框架-------Netty,且必须看过源码,才能说是了解这个框架,否则都是无稽之谈.今天楼主不会讲什么理论和概念,而是使用debug 的 ...

  6. 并发编程之 Java 内存模型 + volatile 关键字 + Happen-Before 规则

    前言 楼主这个标题其实有一种作死的味道,为什么呢,这三个东西其实可以分开为三篇文章来写,但是,楼主认为这三个东西又都是高度相关的,应当在一个知识点中.在一次学习中去理解这些东西.才能更好的理解 Jav ...

  7. winform窗体 小程序【进程】

    进程 一个应用程序就是一个进程,我的理解是,只要是打开应用程序,就会创建进程. 在.NET框架在using.System.Diagnostics名称空间中,有一个类Process,用来创建一个新的进程 ...

  8. JS DOM 操作 项目总结 【超链接】【数列】【span】

      超链接   每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母). “爱恨原则”(Lo ...

  9. [javascript] 看知乎学习js闭包

    知乎:到底什么是闭包? 寸志: JavaScript 闭包的本质源自两点,词法作用域和函数当作值传递. 词法作用域,就是,按照代码书写时的样子,内部函数可以访问函数外面的变量.引擎通过数据结构和算法表 ...

  10. mybatis-generator-maven逆向工程

    在idea 中使用 mybatis的  mybatis-generator-maven-plugin  可以根据数据库 生成 dao层,pojo类,Mapper文件. 一:  在  pom.xml  ...