一、【常用语法】

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. rubymine debug需要安装依赖

    for ruby2.x gem install ruby-debug-ide --pre gem install debase --pregem install debugger2 --pre

  2. 高可用Hadoop平台-实战尾声篇

    1.概述 今天这篇博客就是<高可用Hadoop平台>的尾声篇了,从搭建安装到入门运行 Hadoop 版的 HelloWorld(WordCount 可以称的上是 Hadoop 版的 Hel ...

  3. 文件句柄FileDescriptor的hanle/fd两个字段分析

    对于FileInputStream/FileOutputStream/RandomAccessFile,使用handle来表示底层的文件句柄 对于ServerSocket/Socket,使用fd来表示 ...

  4. LockSupport 阻塞原语

    LockSupport是用来创建锁和其他同步类的基本线程阻塞原语. LockSupport中的park() 和 unpark() 的作用分别是阻塞线程和解除阻塞线程,而且park()和unpark() ...

  5. 装饰器(Decorator)模式

    1  装饰模式能够实现动态的为对象添加功能,是从一个对象外部来给对象添加功能.通常给对象添加功能,要么直接修改对象添加相应的功能,要么派生对应的子类来扩展,抑或是使用对象组合的方式.显然,直接修改对应 ...

  6. windows环境下搭建Java开发环境(二):Tomcat安装和配置

    一.资源下载 官网:http://tomcat.apache.org/ 本人安装的是Tomcat8.5,安装包百度云资源:链接:https://pan.baidu.com/s/17SDFsoS0yAP ...

  7. [Luogu 2656] 采蘑菇

    Description 小胖和ZYR要去ESQMS森林采蘑菇. ESQMS森林间有N个小树丛,M条小径,每条小径都是单向的,连接两个小树丛,上面都有一定数量的蘑菇.小胖和ZYR经过某条小径一次,可以采 ...

  8. jQuery.Form.js 异步提交表单使用总结

    jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js <script ...

  9. 关于项目管理工具 maven

    众所周知,maven是目前很常用的项目管理工具.一般情况下,通过在pom.xml添加相应内容,再maven-->update就会自动把相应的jar包下载.配置好,非常方便. 一般每新建一个wor ...

  10. HDU3359(SummerTrainingDay05-I 高斯消元)

    Kind of a Blur Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...