一、【常用语法】

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. 计划任务crond服务

    什么是计划任务:后台运行,到了预定的时间就会自动执行的任务,前提是:事先手动将计划任务设定好.这就用到了crond服务 crond服务相关的软件包[root@MiWiFi-R3-srv ~]# rpm ...

  2. AsyncTask实现网络图片的异步加载

    想要实现网络中图片的加载,主线程是不行的,方法有两个,一个是使用线程Tread(),另一个就是使用AsyncTask,AsyncTask其实也是线程.我看过慕课网里边一个叫做<Android必学 ...

  3. Nginx实现tomcat集群进行负载均衡

    一.背景 随着业务量和用户数量的激增,单一的tomcat部署应用已经无法满足性能需求,而且对于每次发布项目期间服务不可用的问题也凸显,既然出现了这个问题,那么我们本文就借助nginx来完美的解决这个问 ...

  4. MVC返回文件

    上一篇 介绍了Action 返回View, 顺便也看到了返回Json的处理, 这一篇并不看文件返回的源码, 此篇是为了应用. 1. Response返回文件 在MVC的项目中, 还是能看到很多同事, ...

  5. GOROOT、GOPATH和project目录说明

    go env环境查看 用go env 可查看当前go环境变量. $ go env GOARCH="amd64" GOBIN="" GOEXE="&qu ...

  6. 第一次项目上Linux服务器(八:——搭建Nginx图片服务器)

    一.准备工作 安装Nginx,参考历史博客 二.搭建Nginx图片服务器 1.效果 例如:图片通过xftp服务上传到/home/java/upload目录下,我想通过访问Nginx服务器来访问xftp ...

  7. elasticSearch6源码分析(11)client

    1.RestClient /** * Client that connects to an Elasticsearch cluster through HTTP. * <p> * Must ...

  8. UVa Dropping Balls

    题目链接: https://cn.vjudge.net/problem/UVA-679 /* 问题 输入完全二叉树的层数D和有几个小球滚落,计算最后一个小球落入的叶子结点的小号. 解题思路 直接模拟超 ...

  9. Js的substring和C#的Substring

    Js的substring 语法: 程序代码String.substring(start, end) 说明:返回一个从start开始到end(不包含end)的子字符串. 示例: 程序代码var str= ...

  10. Nodejs学习事件模块

    1.nodejs 版本为v6.2.0,events是node.js 最重要的模块,events模块只提供了一个对象EventEmitter,EventEmitter 的核心是事件发射与事件监听器.可以 ...