必威体育Betway必威体育官网
当前位置：首页 > IT技术

JavaScript 数组详解

时间:2019-08-14 22:45:18来源:IT技术作者:seo实验室小编阅读:76次「手机版」
　

javascript数组

1.认识数组

  • 1)、内置对象是JS语言自带的对象，提供了一些基本的功能提供开发者使用。常用的内置对象有 Math,String,Array,Date等。

  • 2)、数组就是对象，可以存储多个不同类型的数据。

  • 3)、【对象】属性（变量）和方法（函数）的集合。

2.创建数组

  • 1)、【内存】栈区：基本数据类型保存在栈区，会根据函数的结束而自动释放。 堆区：需要手动开辟，并且需要手动释放。

  • 2)、【new】(1)在堆区开辟内存空间来存储对象。(2)返回堆区的引用。

   var arr = new Array();
   // 栈区   堆区
   // 变量   数组对象
   //通过栈区的引用访问堆区的对象
  • 3)、【构造方法创建数组】

   //(1)创建空数组
   var arr = new Array();

   //(2)创建确定容量的数组
   var arr = new Array(10);

   //(3)创建一个拥有一些数据的数组
   var arr = new Array(1,2,"Tom",true);
  • 4)、【字面量法创建数组】
   //(1)创建空数组
   var array = [];

   //(2)创建一个拥有一些数据的数组
   var array = [1,2,"Tom",true];

3.数组的访问（赋值与取值）

  • 1)、数组元素的访问：直接通过数组下标访问
  • 2)、赋值与取值：通过数组下标取值，并可以对其进行赋值
var array = [1,2,3,4,5];

 //取值
 var val = array[2];
 console.log(val); //3

 //赋值
 array[2] = 6;
 console.log(array[2]); //6

4.数组的遍历

  • 1)、快速遍历for-in

 //in在前面针对于数组来说是数组下标
 var array = [1,2,3,4,5];

 for(var i in array){

     console.log(i);//0,1,2,3,4

     console.log(array[i]);//1,2,3,4,5
 }
  • 2)、for循环遍历

 //for循环按顺序遍历
 var array = [1,2,3,4,5];

 for(var i=0; i<array.length;i++){

     console.log(array[i]);//1,2,3,4,5

 }

var array = [1,2,3,4,5];

array.forEach(function(item,index,array){

    console.log(index+"-"+item);

});

//0-1,1-2,2-3,3-4,4-5

5.数组的长度，元素的更新，增加和删除


//(1)数组元素的个数

//(2)length不计算非正规（数字）下标

//(3)数组最多可以包含4294967295个项，基本上可以满足任何编程的需求。
  • 2)、【数组长度的增加】

//数组长度的增加，默认值为undefined
var array = [1,2,3];

array.length = 5;

console.log(array); //[1,2,3,undefined,undefined]
  • 3)、【数组长度的减少】
//数组长度的减少，多余的删除

var array = [1,2,3,4,5];

array.length = 3;

console.log(array); //[1,2,3]
  • 4)、【添加数组元素】
var array = [1,2,3];

//添加元素的位置小于数组长度，数组元素替换
array[2] = 10;

console.log(array); //[1,2,10]

//添加元素的位置大于数组长度，则数组长度自动补齐，默认赋值undefined
array[5] = 20;

console.log(array); //[1,2,10,undefined,undefined,20]
  • 5)、【删除数组元素】

//注：数组长度不会改边，只是对应的值删除为undefined
var array = [1,2,3,4,5];

delete array[2];

console.log(array); //[1,2,undefined,4,5]

6.数组中常用的方法

  • 1)、【push(item1,item2,…)】
//(1)功能：在数组末尾添加一个或多个元素

//(2)参数：要添加的元素

//(3)返回值：添加元素后数组的长度
var array = [1,2,3];

var ret = array.push(4,5,6);

console.log(ret);//6

console.log(array);//[1,2,3,4,5,6]
  • 2)、【unshift(item1,item2,…)】
//(1)功能：在数组的开头添加一个或多个元素

//(2)参数：要添加的元素

//(3)返回值：添加元素后数组的长度
var array = [1,2,3];

var ret = array.unshift(4,5,6);

console.log(ret);//6

console.log(array);//[4,5,6,1,2,3]
  • 3)、【pop()】
//(1)功能：删除数组末尾一个元素

//(2)参数：无

//(3)返回值：被删除的元素
var array = [1,2,3];

var ret = array.pop();

console.log(ret);//3

console.log(array);//[1,2]
  • 4)、【shift()】
//(1)功能：在数组的开头删除一个元素

//(2)参数：无

//(3)返回值：被删除的元素
var array = [1,2,3];

var ret = array.shift();

console.log(ret);//1

console.log(array);//[2,3]
  • 5)、【join(str)】
//注：并不会改变原数组
//(1)功能：将数组的元素用参数字符串拼接成一个新的字符串

//(2)参数：一个字符串

//(3)返回值：拼接的结果
var array = [1,2,3];

var ret = array.join("-");

console.log(array);//[1,2,3]

console.log(ret);//1-2-3
  • 6)、【reverse()】
//注：会改变原数组
//(1)功能：倒置数组元素

//(2)参数：无

//(3)返回值：倒置后的数组
var array = [1,2,3];

var ret = array.reverse();

console.log(array);//[1,2,3]

console.log(ret);//[3,2,1]
  • 7)、【slice(startIndex,endIndex)】
//注：不包含endIndex下标出的元素，不会改变原数组
//(1)功能：在数组中，从startIndex下标开始一直截取到endIndex下标之前

//(2)参数：开始和结束下标

//(3)返回值：截取的数据数组
var array = [1,2,3,4,5];

var ret = array.slice(1,3);

console.log(array);//[1,2,3,4,5]

console.log(ret);//[2,3]
  • 8)、【splice(下标,个数,item1,item2,…)】
//注:将会改变原数组
//(1)功能：在数组中间添加或删除一些元素
//1、添加:从下标为1的位置删除0个元素,并添加两个元素8,9  注意:如果下标大于原数组最大的下标,都是在数组最后添加元素
var array = [1,2,3,4,5];

var ret = array.splice(1,2,8,9);

console.log(array);//[1,8,9,4,5]

console.log(ret);//[2,3]

//如果下标大于原数组最大的下标，都是在数组最后添加元素。
var ret1 = array.splice(8,2,8,9);

console.log(array);//[1,8,9,4,5,8,9]

console.log(ret1);//[]

//2、删除:从下标为1的位置删除2个元素(2,3),并添加两个元素8,9,返回含有被删除元素的数组。  注意：如果省略可选参数，则从下标开始删除对应个数的元素，返回删除元素的数组
var array = [1,2,3,4,5];

var ret = array.splice(1,2);

console.log(array);//[1,4,5]

console.log(ret);//[2,3]

//如果省略可选参数，则从下标开始删除对应个数的元素，返回删除元素的数组
var ret1 = array.splice(1,1);

console.log(array);//[1,5]

console.log(ret1);//[4]
//(2)参数：
//1.下标：必需，规定从何处添加/删除元素，该参数是开始插入和（或）删除的数组元素下标，必须是数字。
//2.个数：必需，规定应该删除多少个元素，必须是数字，但可以是"0"。如果未规定此参数，则删除从index开始到原始数组结尾的所有元素。
//3.item1,item2,...:可选，要添加到数组的新元素。

//(3)返回值：含有被删除的元素的数组.
  • 9)、【concat()】
//注：拼接后数组的元素将按照传入参数的顺序排序 ，不改变原数组
//(1)功能：将多个数组拼接成一个数组

//(2)参数：一个或多个数组或元素

//(3)返回值：拼接之后新的数组
var array = [1,2];

var newArray = array.concat([3,4],"a",true);

console.log(array); //[1,2]

console.log(newArray); //[1,2,3,4,"a",true]
//(1)功能：从数组的左侧开始查找对应第一次出现的参数元素的下标

//(2)参数：要查找的元素值

//(3)返回值：如果找到了返回该元素的下标值，否则返回-1
var array = [1,2,3,4,5];

var ret = array.indexOf(4);

console.log(array); //[1,2,3,4,5]

console.log(ret); //3

console.log(array.indexOf(6)); //-1
  • 10)、【lastIndexOf(item)】
//(1)功能：从数组右侧开始查找对应第一次出现的参数元素的下标值

//(2)参数：要查找的元素

//(3)返回值：如果找到了返回该元素的下标值，否则返回-1
var array = [1,2,3,4,5];

var ret = array.indexOf(4);

console.log(array); //[1,2,3,4,5]

console.log(ret); //3

console.log(array.indexOf(6)); //-1

7.数组排序

  • 1)、【冒泡排序】
//(1)原理：冒泡排序的基本思想是，对相邻的元素进行两两比较，顺序相反则进行交换，这样每一趟会将最小或则最大的元素浮到顶端，最终达到完全有序。

//(2)公式：
var array = [4,5,2,8,6];

for(var i = 0; i<array.length; i++){
    for(var j =0;j<array.length-1-i;j++){
        if(array[j]<=array[j+1]){
            var tmp = array[j];
            array[j] = array[j+1];
            array[j+1] = tmp;
        }
    }
}
console.log(array); //[8,6,5,4,2]
  • 2)、【sort()】
//默认升序排序：
var array = [4,5,2,3,1];

array.sort();

console.log(array); //[1,2,3,4,5]

//sort()调用每一项的toString()方法，然后比较得到的字符串，确定如何排序

//排降序，需要给出排序的标准，排序的标准是一个函数。
var array = [4,5,2,3,1];

//降序排序
array.sort(function(v1,v2){
    if(v1 < v2 ){
        return 1;
    }
    return -1;
});
console.log(array); //[5,4,3,2,1]

8.迭代方法

//ECMAScript5为数组定义了5个迭代方法，每个方法接收两个参数，一个是每一项运行的函数，一个是运行该函数的作用域对象，
//传入这些方法的函数会接受3个参数：数组项的值，该项在数组中的位置，数组对象本身。
  • 1)【every()】
//对数组中的每一项给定函数，如果该数组中的每一项都返回true,则返回true
var array = [1,2,3,4,5];

var retVal = array.every(function(item,index,array){
return item>2; //false
//return item<6; //true
});
console.log(retVal);
  • 2)【filter()】
//对数组中的每一项运行给定函数，返回该函数返回true的项组成的数组。
var array = [1,2,3,4,5];

var retVal = array.filter(function(item,index,array){
return item>2;
});
console.log(retVal); //[3,4,5]
  • 3)【forEach()】
//对数组中的每一项运行给定函数，这个方法没有返回值
var array = [1,2,3,4,5];

var retVal = array.filter(function(item,index,array){
//执行某些操作

});
  • 4)【map()】
//对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
var array = [1,2,3,4,5];

var retVal = array.map(function(item,index,array){
return item * 2;
});
console.log(retVal); //[2,4,6,8,10]
  • 5)【some()】
//对数组中的每一项运行给定函数，只要其中有一项返回true，则返回true，与every()相反。
var array = [1,2,3,4,5];

var retVal = array.some(function(item,index,array){
return item>2;
});
console.log(retVal); //true

9.归并方法

ECMAScript5还新增了两个归并方法，这两个方法都会迭代数组的所有项，然后构成一个最终返回的值
  • 1)【reduce()】
//语法 arr.reduce([callback,initalValue])
//callback(previousValue,currentValue,currentIndex,array)
/*
 * 这个函数返回的任何值都会作为第一个参数自动传递给下一项
 * previousValue：上一次调用回调函数返回的值，或者是提供的初始值(initalValue)
 * currentValue:数组中当前被处理的元素
 * currentIndex：当前被处理元素在数组中的索引，即currentValue的索引，如果有initalValue初始值，从0开始，否则从1开始
 * array:调用reduce()函数的数组
 */

initalValue 可选参数，作为第一次调用callback的第一个参数
var array = [1,2,3,4,5];

var retVal = array.reduce(function(prev,cur,index,array){
    //实现数组累加求和
    return prev + cur;
});
console.log(retVal); //15
  • 2)【reduceRight()】
//从数组的最后一项开始，向前遍历到第一项
//eg:reduce()一样，方向相反。

这里写图片描述

相关阅读

数组的三种初始化方式

1.静态初始化   除了用new关键字来产生数组以外，还可以直接在定义数组的同时就为数组元素分配空间并赋值。            例

javascript 判断参数是否为非0整数数字或者整数数字字

javascript 判断参数是否为非0整数数字或者整数数字字符串的简单方法（小装逼） 我们来判断一个值是否为数字，可以把它转化为数字，看是

JS中的数组学习（数组的申明，数组的长度，数组便利的两种类

<html> <head> <title>js的数组</title> <meta charset="UTF-8"/> <!-- js的数组学习： 问题： 变量在程序中是用

JSON操作数组数据

在JSON数据结构之中会包含数组数据内容,对于数组的内容一定要使用"[]"中括号声明,但是数组分为两种情况,一种是普通的内容文本数

数组合并

package com.china.hc; import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class Hello {

赞()
分享到:

猜你喜欢

栏目导航

推荐阅读

热门阅读

seo实验室提供seo优化服务，有网站优化、网站建设、运营推广等需求请联系我们!
Copyright © 2001-2017 .seo实验室 版权所有 网站地图