JS引用类型 -- Array类型

ECMAScript数组与其他语言中的数组都是数据的有序列表,但与其他语言不同的是,ECMAScript数组的每一项可以保存任何类型的数据。而且ECMAScript数组的大小是可以动态调整的,即可以随着数据的添加自动增长。

创建数组的基本方式有两种:

第一种是使用Array构造函数:

//1. 使用Array构造函数
var colors = new Array();

//2.如果预先知道数组要保存的项目数量,也可以给构造函数传递该数量,改数量会自动变成length的属性值
var colors2 = new Array(20);
alert(colors2.length);    //20

//3.也可以向Array构造函数传递数组中应该包含的项。
var colors3 = new Array("red", "blue", "green");

//4.给构造函数传递一个值时,如果传递的是数值,表示该数组的长度。如果传递的是其他类型,则会创建包含那个值的数组
var colors4 = new Array(3);    // 创建一个包含3项的数组
var colors5 = new Array("Greg");    //创建一个包含1项的数组

//5. 在使用Array构造函数时也可以省略new操作符
var colors6 = Array(3);
var names = Array("Greg");

第二种是使用数组字面量表示法: 数组字面量是由一对包含数组项的方括号表示,多个数组项之间以逗号隔开

var colors = ["red", "blue", "green"];    //创建一个包含三个字符串的数组
var names = [];    //创建一个空数组

//在读取和设置数组的值时,要使用方括号并提供相应值的基于0的数字索引
alert(colors[0]);    //red
colors[2] = "black";
colors[3] = "brown";    //索引大于数组项时,自动增加一个
alert(colors.length);    //4

colors[99] = "black";
alert(colors.length);    //100

1.检测数组

instanceof :

Array.isArray(): 确定某个值是否为数组

if(Array.isArray(colors)){
    alert("yes");
}

2.转换方法

toString() 方法: 返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。

valueOf() 方法: 返回的还是数组。

var colors = ["red", "blue", "green"];    //创建一个包含三个字符串的数组
alert(colors.toString());    //red,blue,green
alert(colors.valueOf());    //red,blue,green
alert(colors);    //red,blue,green

上述代码显示的调用了toString()和valueOf()方法,以便返回数组的字符串表示,每个值的字符串表示拼接成了一个字符串,中间以逗号隔开。最后一行代码直接将数组传递给了alert()。由于alert()要接收字符串参数,所以它会在后台调用toString()方法,由此会得到与直接调用toString()方法相同的结果。

数组继承的toLocaleString()、toString()和valueOf()方法,在默认情况下都会以逗号分隔的字符串形式返回数组项,如果使用join()方法,则可以使用不同的分隔符来构建这个字符串。join()方法只接收一个参数,即分隔符的字符串。

var colors = ["red", "blue", "green"];    //创建一个包含三个字符串的数组
alert(colors.join("||"));    //red||blue||green

3. 栈方法

ECMAScript数组也提供了一种让数组的行为类似其他数据结构的方法。

栈是一种LIFO(Last-In-First-Out)的数据结构。也就是最新添加的项最早被移除。栈中项的插入(推入)和移除(弹出),只发生在一个位置上--- 栈的顶部。

push() 方法: 可以接受任意数量的参数,把它们逐个添加到数组的末尾,并返回修改后数组的长度。

pop() 方法: 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。

var colors = ["red", "blue"];
var count = colors.push("green");
alert(count);    //3

count = colors.push("black");
alert(count);    //4

var item = colors.pop();
alert(item);    //black

4. 队列方法

队列数据结构的访问规则是FIFO(First-In-First-Out)。队列在列表的末端添加项,从列表的前端移除项。

push() 方法: 向数组末尾中添加项。

shift() 方法: 移除数组中的第一项并返回该项。

unshift() 方法: 在数组前端添加任意项并返回新数组的长度。

var colors = new Array();
var count = colors.push("red", "green");
alert(count);    //2

count = colors.push("black");
alert(count);    //3

var item = colors.shift();
alert(item);    //red

count = colors.unshift("summer", "chen");
alert(count);    //4
alert(colors);    //summer,chen,green,black

5.重排序方法

数组中已经存在两个可以直接用来排序的方法:

reverse() 方法: 反转数组项的顺序

sort(): 方法:在默认情况下,按升序排列数组项。sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串。

var values = [0, 1, 3, 15, 5, 10];
values.reverse();
alert(values);    //10,5,15,3,1,0

values.sort();
alert(values);    //0,1,10,15,3,5

sort()方法可以接收一个比较函数作为参数。

比较函数接收两个参数,如果第一个参数应该位于第二个之前——返回一个负数;两个参数相等——返回0;第一个参数该位于第二个之后——返回一个正数。

function compare(value1, value2){
    if(value1 < value2){
        return -1;
    }else if(value1 == value2){
        return 0;
    }else{
        return 1;
    }
}
var values = [0,15,10,5,1];
values.sort(compare);
alert(values);    //0,1,5,10,15

对于数值类型 或 其valueOf()方法会返回数值类型的对象类型,可以使用下列方法:

function compare(value1, value2){
    return value2 - value1;
}
var values = [0,15,10,5,1];
values.sort(compare);
alert(values);    //0,1,5,10,15

6.操作方法

concat() 方法: 基于当前数组中的所有项创建一个新数组。具体来说,这个方法会先创建当前数组的一个副本,然后讲接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给concat()方法传递参数的情况下,它只是复制当前数组并返回副本。如果传递给concat()方法的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的值不是数组,这些值就会简单的添加到结果数组的末尾。

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);

alert(colors);    //red,green,blue
alert(colors2);    //red,green,blue,yellow,black,brown

slice() 方法: 基于当前数组中的一个或多个项创建一个新数组。slice()方法可以接受一个或两个参数,即要返回项的起始和结束的位置。slice方法不会影响原始数组。

var colors = ["red", "green", "blue", "black", "brown"];

//1. 在只有一个参数的情况下,slice方法返回从该参数位置开始到当前数组末尾的所有项
var colors2 = colors.slice(1);
alert(colors2);    //green,blue,black,brown

//2.有两个参数,该方法返回起始位置和结束位置之间的项,不包括结束位置的项
var colors3 = colors.slice(1,3);
alert(colors3);    //green,blue

var colors4 = colors.slice(3,1);
alert(colors4);    //空数组

var colors5 = colors.slice(1,1);
alert(colors5);    //空数组

var colors6 = colors.slice(5);
alert(colors6);    //空数组

var colors7 = colors.slice(3, 15);
alert(colors7);    //black,brown

splice()方法:主要用途是向数组中部插入项。改方法返回被删除的项。

var colors = ["red", "green", "blue", "black", "brown"];

//1. 删除: 可以删除任意数量的项,只需指定第一项的位置和要删除的项数。返回被删除的项
var colors2 = colors.splice(1,3);
alert(colors2);    //green,blue,black
alert(colors);    //red, brown

//2.插入:提供三个参数:起始位置、0(要删除的项数)、要插入的项
var colors3 = colors.splice(1,0, "summer", "holiday");
alert(colors);    //red,summer,holiday,brown

var colors4 = colors.splice(-1,0, "summer", "holiday");//起始位置小于0时,按0计算
alert(colors);    //red,summer,holiday,summer,holiday,brown

var colors5 = colors.splice(10,0, "summer", "holiday");//起始位置大于数组长度时,按数组长度计算
alert(colors);    //red,summer,holiday,summer,holiday,brown,summer,holiday
alert(colors.length);    //8

//3.替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,三个参数:起始位置,要删除的项数,要插入的项
var colors6 = colors.splice(1, 4, "green", "blue", "black");
alert(colors6);    //summer,holiday,summer,holiday
alert(colors);    //red,green,blue,black,brown,summer,holiday

7. 位置方法

ECMAScript提供了两个位置方法,这两个方法都接收两个参数,要查找的项和查找起点位置的索引(可选的)

indexOf() 方法: 从数组的开头(位置0)开始向后查找。

lastIndexOf() 方法:从数组的末尾开始向前查找。

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

alert(numbers.indexOf(4));    //3
alert(numbers.lastIndexOf(4));//5

alert(numbers.indexOf(4,4));//5
alert(numbers.lastIndexOf(4,4));//3

alert(numbers.indexOf(6));//-1
alert(numbers.lastIndexOf(6));//-1

var person = {name: "Nicholas"};
var people = [{name: "Nicholas"}];

var morePeople = [person];

alert(people.indexOf(person));    //-1
alert(morePeople.indexOf(person));//0

8. 迭代方法

ECMAScript为数组定义了5个迭代方法。每个方法都接收两个参数: 每一项上运行的函数和运行该函数的作用域对象(可选的)--影响this值。

传入这些方法中的函数接收三个参数:数组项的值、该项在数组中的位置、数组对象本身

every() 方法:  对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true

filter() 方法: 对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组

forEach() 方法:对数组中的每一项运行给定函数,该函数没有返回值

map() 方法:对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组

some() 方法:  对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true

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

var everyResult = numbers.every(function(item, index, array){
                                  return (item > 2);
                                });
alert(everyResult);    //false

var someResult = numbers.some(function(item, index, array){
                                return (item > 2);
                              });
alert(someResult);    //true

var filterResult = numbers.filter(function(item, index, array){
                                    return (item > 2);
                                 });
alert(filterResult);    // 3,4,5,4,3

var mapResult = numbers.map(function(item, index, array){
                                return (item + 2);
                            });
alert(mapResult);    //3,4,5,6,7,6,5,4,3

9.缩小方法

ECMAScript有两个缩小数组的方法。这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。这两个方法都接收两个参数,在每一项上调用的函数和作为缩小基础的初始值。

传入这些方法的函数接收四个参数:前一个值、当前值、项的索引、数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。

reduce() 方法: 从数组的第一项开始,逐个遍历

reduceRight() 方法: 从数组的最后一项开始,向前遍历到第一项

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
                            return prev + cur;
                        });
alert(sum);    //15                    

var sum2 = values.reduceRight(function(prev, cur, index, array){
                                return prev + cur;
                             });
alert(sum2);    //15
时间: 2024-12-22 11:39:45

JS引用类型 -- Array类型的相关文章

引用类型-Array类型~ 前端学习之路

今天开始记录每天所学的重点,为了加深印象也为了今后的复习. 今天学习的重点是引用类型中Array类型,Array类型中的栈方法,队列方法,重排序方法,操作方法,位置方法,迭代方法,归并方法.这几个方法我感觉尤为重要,因此记录下来,以便忘记了可以回顾. (一)栈方法 首先要知道的是栈是一种后进先出的数据结构,也就是最先添加的项最先移除.在JS中提供有两种方法,push()和pop()方法是实现类似于栈的行为. push()方法可以接受任意数量的参数,并且把它们放在数组的末尾,最后返回修改后数组的长

JS引用类型 -- Object类型

Object是ECMAScript中使用最多的一个类型,虽然Object的实例不具备多少功能,但对于在应用程序中存储和传输数据而言,它们是非常理想的选择. 创建Object实例有两种方式: 1.new操作符后跟Object构造函数 var person = new Object(); person.name = "Nicholas"; person.age = 29; 2.字面量表示法 对象字面量是对象定义的一种简写形式,目的在于简化创建包含大量属性的对象过程. var person

JS引用类型(2)——Array类型

[2]Array类型ECMAScript数组的每一项可以保存任何类型的数据,并且大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据. (1)创建数组 1>使用Array构造函数 var colors = new Array(); var colors = new Array(20); var colors = new Array("red","blue","green"); var colors = Array(3); var

JavaScript基础——引用类型(一)Object类型、Array类型

引用类型简介 引用类型的值(对象)是引用类型的一个实例.在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起.它也常被称为类,但这种称呼并不妥当(虽然不妥当,在别人提起的时候,就是指ECMAScript中的引用类型,在一次面试的时候,有人就和面试官争论说"JS中没有'类'这个概念,结果可想而知--").尽管ECMAScript从技术上讲是一门面向对象的语言,但它不举杯传统的面向对象语言所支持的类和接口等基本结构.引用类型有时候也被称为对象定义,因为它们描述的是一

JavaScript的进阶之路(三)引用类型之Object类型和Array类型

引用类型 Object类型 function a(num){ if(num>3){ a(--num); } console.log(num); } a(5); //如何创建对象的实例 var obj1= new Object(); console.log(obj1); obj1.name="吴琼"; obj1.age=28; console.log(obj1.name+" "+obj1.age); //对象字面量语法 ,有点封装的感觉 var obj2 = {

【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型

前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法6.操作方法 7.位置方法 8.迭代方法 9.归并方法 在实例中介绍,实例如下 /* Array类型 js数组中的每一项可以用来保存任何类型的数据:js数组的大小是可以动态调整的 */ var colors = ["red", "blue", "green"];

引用类型--Object类型、Array类型

引用类型的值(对象)是引用类型的一个实例.在ECMAScript中,引用类型是一种数据结构,它描述的是一类对象具有的属性和方法. 对象是某个特定引用类型的实例,新对象是使用new操作符后跟一个构造函数来创建的. Object类型 大多数引用类型值都是Object类型的实例,Object是ECMAScript中使用最多的一个类型.Object的实例不具备多少功能,但对于在应用程序中存储和传输数据而言,是非常理想的选择. 创建Object实例的方式有两种: 第一种是使用new操作符后跟Object构

引用类型之Array类型

Array类型 ECMAScript数组与其它语言数组一样,都是数据的有序列表.但是ECMAScript数组的每一项可以保存任何类型的数据.而且,ECMAScript数组是可以动态调整的. 1.创建和修改数组 ·创建数组 1 var colors=new Array(20); //创建长度位20的数组 2 var colors=Array(20); //可以省略new操作符 3 var colors=Array("red","blue","green&qu

Object类型与Array类型

总结--JS中的引用类型: Object类型,Array类型,Boolean类型,Number类型,String类型,Date类型, Function类型,RegExp类型,单体内置对象(Global对象,Math对象) 1.Object类型:我们看到的大多数其他对象都可以称为是Object对象 1)创建Object对象的方式有两种:  第一种是使用new操作符后跟Object构造函数    var person =new Object();   //var person ={};    per