Array 对象是一个复合类型,用于在单个的变量中存储多个值,每个值类型可以不同。

创建数组对象的方法:

new Array();
new Array(size);
new Array(element0, element1, ..., elementn);
1.  当索引值为负数时,会将其看作是对象的一个属性,若为非负的数字字符串,则会隐式转换为数字索引:
      var a= new Array();
a[-1.23]=true;
a[1]="pomelo";
a["100"]="tt";
console.log(a); /// [1: "pomelo", 100: "tt", -1.23: true]
console.log(a.length) /// 101 稀疏数组的长度为最大下标+1

其实数组对象的索引其实就是对象属性名的一种特殊形式,当试图查询任何不存在的对象属性名时,不会报错,而会显示undefined:

console.log(a["hello"]);   //undefined

2.  length属性可以用于置空数组或从前向后截取数组:

    var array1=[1,2,3,4,5];
array1.length=3; ///[1,2,3]
array1.length=0; ///[]
array1.length=5; ///[] 长度为5的空数组
console.log(array1)

可以使用Object.defineProperty(对象,属性名,{设置})方法设置可读可写:

    Object.defineProperty(array1,"length",{writable:false});
array1.length=10;
console.log(array1.length); ///5

3.数组元素的添加和删除:

末尾:添加元素push(),删除元素pop();

首部:添加元素unshift(),删除元素shift();

    var array2=[1,2,3,4,5];
array2.unshift(6); ///[6,1,2,3,4,5]
array2.shift(); //[1,2,3,4,5]
console.log(array2);

4.数组的遍历优化与筛选

当数组容量很大时,length不应在每次循环中都查询;

当需要过滤数组中的无效数据时,用continue跳出本次循环;

var array3=[null,1,0,undefined];
for(var i= 0,len=array3.length;i<len;i++){
if(!array3[i]) continue;
console.log(array3[i]); //1
}

或者利用ES5自带的foreach()方法:

    var array4=[1,2,3,4];
var sum=0;
array4.forEach(function(i){
sum+=i;
});
console.log(sum); ///10

5.js不支持多维数组,但可以通过数组的数组来实现:

    var array5=new Array(10);
for(var i=0;i<array5.length;i++){
array5[i]=new Array(10);
}
for(var i=0;i<array5.length;i++){
for(var j=0;j<array5[i].length;j++){
array5[i][j]=i*j;
}
}
console.log(array5[5][6]); //

6.数组方法

6.1   join()  将数组转化为字符串并连接在一起

    var array6=[1,2,3];
console.log(array6.join("-")); // 1*2*3
console.log(array6.join("")); //
console.log(array6.join()); // 1,2,3
console.log(typeof array6.join()); // String

6.2   reverse() 在原数组本身基础上将元素顺序颠倒

var array7=[1,2,3];
console.log(array7.reverse()) //[3,2,1]

6.3  sort() 数组排序

      var array8=["apple","cherry","cherry"];
console.log(array8.sort()); //["apple", "cherry", "cherry"]
array8.push(undefined);
console.log(array8.sort()); //undefined会被放到最后 ["apple", "cherry", "cherry", undefined]

若想改变排序规则,需要传入一个比较函数:

    var array9=[33,4,11,222];
console.log(array9.sort()); //11,222,33,4 默认以第一个数字比较
console.log(array9.sort(function(a,b){ //从小到大排列
return a-b;
}))

字符排序默认区分大小小,以首字母ASCII编码为根据,从小到达排序:

    var array10=["ant","Boy","cat","Dog"];
console.log(array10.sort()); //["Boy", "Dog", "ant", "cat"]
console.log(
array10.sort(function(s,t){
var a= s.toLowerCase();
var b= t.toLowerCase();
if(a<b) return -1;
if(a>b) return 1;
return 0;
})
); // ["ant", "Boy", "cat", "Dog"]

6.4 concat() 数组连接

     var array11=[1,2,3];
console.log(array11.concat(4,5)); //[1,2,3,4,5]
console.log(array11.concat([4,5])); //[1,2,3,4,5]
console.log(array11.concat("4",[5,[6,[7,8]]])) //[1, 2, 3, "4", 5, Array[2]]

6.5  slice(第一个位置,第二个位置)

返回从第一个位置(包括)到第二个位置的子数组;

如果只制定一个参数,则返回从指定位置到数组结尾的所有元素组成的子数组;

若参数出现负数,则标识从后往前数的位置下标;

    var array12=[1,2,3,4,5];
console.log(array12.slice(0,3)); //[1,2,3]
console.log(array12.slice(3)); //[4,5]
console.log(array12.slice(-1)); //[5]
console.log(array12.slice(1,-1)); //[2,3,4]

6.6  splice(插入或删除的起始位置,删除元素的个数) 在数组中插入、删除或替换元素的通用方法:

    var array13=[1,2,3,4,5,6,7,8];
//删除
console.log(array13.splice(4)); //[5,6,7,8]
console.log(array13); //[1,2,3,4]
console.log(array13.splice(1,2)); //[2,3]
console.log(array13); // [1,4]
//插入
array13.splice(1,0,"pomelo");
console.log(array13); //[1, "pomelo", 4]
//替换
var array14=[1,2,3,4,5];
array14.splice(2,1,"pomelo"); //[1, 2, "pomelo", 4, 5]
console.log(array14)

6.7  map() 将调用此函数的数组的每个元素传递给指定函数:

    var array15=[1,2,3];
var array16=array15.map(function(i){
return i*i;
});
console.log(array16) //[1,4,9]

6.8   filter() 返回调用此函数的数组的一个子集,传递的参数为返回布尔值的一个函数,该函数过滤并留下返回true的数组元素。

    var array17=[1,2,3,4,5];
console.log(
array17.filter(function(i){
return i<3
})
); //[1,2]

6.9  forEach()   用于遍历数组

    var array18=[1,2,3];
var sum=0;
array18.forEach(function(i){
sum+=i*i;
});
console.log(sum); //

6.10 every(),some() 这两个函数用于对数组进行逻辑判定,返回true或false

      var array19=[1,2,3,4,5];
console.log(array19.some(function(i){
return i>3;
})); ///true
console.log(array19.every(function(i){
return i>3;
})); ///false

6.11  reduce(化简操作的函数,传递给函数的初始值)和reduceRight(化简操作的函数,传递给函数的初始值) 化简函数

    var array20=[1,2,3,4,5];
var sum= array20.reduce(function(x,y){return x+y},0);// 15 函数求和
var mult=array20.reduce(function(x,y){return x*y}); //120 求积
var max=array20.reduce(function(x,y){return x>y?x:y}); //5 最大值

reduceRight()与reduce()一样,只是按照数组索引从大到小的顺序

    var array21=[2,3,2];
var result=array21.reduceRight(function(x,y){return Math.pow(y,x)});
console.log(result); //512 求2^(3^2)

6.12 indexOf()和lastIndexOf()正向和反向搜索是否存在指定值,若存在返回索引下标,不存在则返回-1;

    var array21=[1,2,3,"pomelo",2,4,6];
console.log(array21.indexOf(3)); //
console.log(array21.indexOf(5)); //-1
console.log(array21.lastIndexOf(2)); //

喜欢请点击右下角推荐,如有疑问可以留言,转载请标明出处。

javascript数组详解(js数组深度解析)【forEach(),every(),map(),filter(),reduce()】的更多相关文章

  1. JavaScript进阶(十)Array 数组详解

    JS array 数组详解 数组的声明方法 arrayObj = new Array(); 的数组 ,并且第一位是5 数组的运算(传地址) var t2=new Array(); t2[0]=1; t ...

  2. 3.awk数组详解及企业实战案例

    awk数组详解及企业实战案例 3.打印数组: [root@nfs-server test]# awk 'BEGIN{array[1]="zhurui";array[2]=" ...

  3. (转)awk数组详解及企业实战案例

    awk数组详解及企业实战案例 原文:http://www.cnblogs.com/hackerer/p/5365967.html#_label03.打印数组:1. [root@nfs-server t ...

  4. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  5. Java基础之 数组详解

    前言:Java内功心法之数组详解,看完这篇你向Java大神的路上又迈出了一步(有什么问题或者需要资料可以联系我的扣扣:734999078) 数组概念 同一种类型数据的集合.其实数组就是一个容器. 数组 ...

  6. “全栈2019”Java第三十一章:二维数组和多维数组详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  7. “全栈2019”Java第三十章:数组详解(下篇)

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  8. “全栈2019”Java第二十九章:数组详解(中篇)

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  9. “全栈2019”Java第二十八章:数组详解(上篇)

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

随机推荐

  1. 服务器部署项目出现问题:Unsupported major.minor version 52.0

    问题描述: 编写一个web 前置服务,使用ant编译项目,将项目部署到服务器上,启动时报此错误:Unsupported major.minor version 52.0 网上给出错误原因是服务器安装的 ...

  2. HTML5学习之语义化标签(一)

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  3. DB2_自动生成值

    生成数字序列的两种方法 在 DB2 中可以用两种方法自动生成一个数字序列: 定义带有 IDENTITY 属性的列. 创建 SEQUENCE 对象. IDENTITY 列 当用 IDENTITY 属性定 ...

  4. unity 双面shader

    Shader "Custom/DoubleFace" { Properties {         _Color ("Main Color", Color) = ...

  5. 网站SEO,HTTP请求的关键数字----6

    客户端浏览器向服务器请求一个网页素材. 那么网页素材是通过什么方式,什么顺序被下载下来的呢. 我今天做了个简单的测试. 首先,准备测试文件 写一个网页,网页中引用若干的资源文件. 同一文件的不同的参数 ...

  6. Bootstrap框架的要点--栅格系统

    不同的公司要求使用框架有所不同,而Bootstrap框架在工作中使用频次较高,其中栅格系统在这一框架中的地位不容小觑,下面我们开始聊聊它吧. 简单介绍: Bootstrap提供了一套响应式.移动设备优 ...

  7. BZOJ 1834: [ZJOI2010]network 网络扩容(网络流+费用流)

    一看就知道是模板题= = ,不说什么了= = PS:回去搞期末了,暑假再来刷题了 CODE: #include<cstdio> #include<iostream> #incl ...

  8. 关于C语言中变量类型转换

    今天在工作中遇到一个问题,而在解决问题的过程中,发现一段关于int 型变量(a)和char型(b)变量间类型转换的代码存在问题:一个值为255的int型变量a,强制类型转换并赋值给char型变量b后, ...

  9. Linux实战教学笔记17:精简shell基础

    第十七节 精简shell基础 标签(空格分隔): Linux实战教学笔记 1,前言 1.1 为什么学习shell编程 Shell脚本语言是实现Linux/UNIX系统管理及自动化运维所必备的重要工具, ...

  10. 自行搭建私有云ownCloud,启用SSL,其他配置

    ownCloud简介 ownCloud(官网)是一款开源的私有云框架,可以通过它实现个人网盘的功能,如果拥有一个性能不错的VPS,那么就可以摆脱奇慢无比的百度云等网盘啦!我花了大约一天的时间总算搭好了 ...