Web前端:JavaScript基础篇之数组类型

KJIA首先大家需要明白的是,数组它是一个存储数据的数据结构,同时ECMAScript的数组,跟其他语言的数组不同,ECMAScript中数组的槽位可以是任意类型的数据!

数组创建的方法:

主要常用的有两种:一种是构造函数Array,一种是字面量方法。

构造函数:

使用new关键字加上Array引用类型

类:

        let age = new Array ();

如果知道这个数组的长度可以直接给构造函数传入一个数值,length属性就会自动创建并设置为这个值。

例:

let age = new Array (20);

这个例子就是创建了一个数组长度为二十的数组

也可以给Array构造函数传入要保存的元素。比如以下例子就会创建一个包含3个字符串值的数组

let name = new Array ('xingzai','xingzaizai','xingxingzai');

创建数组时可以给构造函数只传入一个值。这时候就有点问题了,因为如果这个值是数值则会直接创建一个长度为指定数值的数组;而如果这个值是其他类型的,则会创建一个只包含该特定值的数组。

例:

let colors = new Array (3);//创建一个包含3个元素的数组

let name = new Array ('xingzai');//创建一个只包含一个元素,即字符串‘xingzai’的数组

在使用构造函数Array时,也可以省略new关键字

let colors = Array (3);//创建一个包含3个元素的数组

let name =  Array ('xingzai');//创建一个只包含一个元素,即字符串‘xingzai’的数组

字面量创建:

数组字面量是在中括号中包含以逗号分隔的元素列表

例:

        let name = ['xingzai','xingzaizai','xingxingzai'] ;//创建一个包含3个元素的数组

        let age = [];//创建一个空数组

        let values = [1,2,];//创建一个包含两个元素的数组

在这个例子中第一行创建一个包含三个字符串的数组。第二行用一对空中括号创建了一个空数组,第三行展示了在数组最后一个值后面加上逗号的效果:values是一个只包含两个值(1和2)的数组。

Array构造函数两个ES6新增的用于创建数组的静态方法:from()和of()。from()用于将类数组的结构转换为数组实例,而of()用于将一组参数转换为数组实例。

Array.from()的第一个参数是一个类数组对象,即任何可迭代的结构,或者有一个length属性和可索引元素的结构。

例:

        //字符串拆分为单字符数组

        console.log(Array.from("Matt"));//["M","a","t","t"]

        //可以使用from()将集合和映射转换为一个新数组

        let m = new Map().set(1,2).set(3,4);

        let s = new Set().add(1).add(2).add(3).add(4);

        console.log(Array.from(m));//[[1,2],[3,4]]

        console.log(Array.from(s));//[1,2,3,4]

        //Array.from()对现有数组执行浅复制

        const a1 = [1,2,3,4];

        const a2 = Array.from(a1);

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

        console.log(a1===a2);//false

        //可以使用任何可迭代对象

        const iter = {

                *[Symbol.iterator](){

                        yield 1;

                        yield 2;

                        yield 3;

                        yield 4;

                }

        };

        console.log(Array.from(iter));//[1,2,3,4]

        //arguments对象可以被轻松转换为数组

        function getArgsArray(){
                return Array.from(arguments);

        }

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

        //from()也能转换带有必要属性的自定义对象

        const arrayLikeObject = {

                0:1,

                1:2,

                2:3,

                3:4,

                length:4

        };

        console.log(Array.from(arrayLikeObject));//[1,2,3,4]

        Array.from()还接收第二个可选的映射函数参数。这个函数可以直接增强新数组的值,而无需像调用Array.from().map()那样先创建一个中间数组。还可以接收第三个可选参数,用于指定映射函数中this的值。但这个重写的this值在箭头函数中不适用。

例:

        const a1 = [1,2,3,4];

        const a2 = Array.from(a1,x**2);

        const a3 = Array.from(a1,function(x){return x**this.exponent},{exponent:2});

        console.log(a2);//[1,4,9,16]

        console.log(a3);//[1,4,9,16]

        Array.of()可以把一组参数转换为数组。这个方法用于替代在ES6之前常用的Array.prototype.slice.call(arguments)  ,一种异常笨拙的将arguments对象转换为数组的写法:

        console.log(Array.of(1,2,3,4));//[1,2,3,4]

        console.log(Array.of(undefined));//[undefined]

数组空位:

        使用数组字面量初始化数组时,可以使用一串逗号来创建空位(hole)。ECMAScript会将逗号之间相应索引位置的值当成空位,ES6规范重新定义了该如何处理这些空位。

        例:

                const arr = [ , , , , ,];//创建包含5个元素的数组

                console.log(arr.length);//5

                console.log(arr);//[ , , , , ,]

        ES6新增的方法和迭代器与早期的ECMAScript版本中存在的方法行为不同。ES6新增方法普遍将这些空位当成存在的元素,只不过值为undefined。

        例:

                const arr = [1, , , , 5];

                for(const arr2 of arr){

                        console.log(arr2===undefined);

                }

                //false

                //true

                //true

                //true

                //false

                const arr3 = Array.from([, , ,]);//使用ES6的Array.from()创建的包含3个空位的数组

                for(const val of arr3){

                        console.log(val===undefined);

                }      

                //true

                //true

                //true

                alert(Array.of(...[, , ,]));//[undefined,undefined,undefined]

                for(const [index,value]of arr.entries()){

                        alert(value);

                }

                //1

                //undefined

                //undefined

                //undefined

                //5

        ES6之前的方法则会忽略这个空位,但具体的行为也会因方法而异。

        例:

                const arr = [1, , , , 5];     

                //map()会跳过这些空位

                console.log(arr.map(()=>6));//[6,undefined,undefined,undefined,6]

                //join()视空位为字符串

                console.log(arr.join('-'));//'1----5'

        注:由于行为不一致和存在性能隐患,因此实践中要避免使用数组空位。如果确实需要空位,则可以显示的使用undefined值来代替。

数组索引:

        要取得或设置数组的值,需要使用中括号并提供响应值的数字索引。

        例:

                let colors = ["red","blue","green"];//定义一个字符串数组

                alert(colors[0]);//显示第一项

                colors[2] = "black";//修改第三项

                colors[3] = "brown";//添加第四项

        在中括号中提供的索引表示要访问的值。如果索引小于数组包含的元素数,则返回存储在相应位置的元素,就像以上示例中colors[0]显示"red"一样。设置数组的值方法也是一样的,就是替换指定位置的值。如果把一个值设置超过数组最大索引的索引,就像以上示例中colors[3],则数组长度会自动扩展该索引值加1(示例中设置的索引3,所以数组长度变成了4)

        数组中元素的数量保存在length属性中,这个属性始终返回0或大于零的值。

        例:          

                let colors = ["red","blue","green"];//创建一个包含3个字符串的数组

                let names = [];//创建一个空数组

                alert(colors.length);//3

                alert(names.length);//0

        数组length属性的独特之处在于,它不是只读的。通过修改length属性,可以从数组末尾删除或添加元素。

        例:

                let colors = ["red","blue","green"];//创建一个包含3个字符串的数组

                colors.length = 2;

                alert(colors[2]);//undefined

        这里,数组colors一开始有三个值。将length设置为2.就删除了最后一个(位置2的)值,因此,colors[2]就没有值了。如果将length设置为大于数组元素数的值,则新添加的元素都将以undefined填充。

        例:

                let colors = ["red","blue","green"];//创建一个包含3个字符串的数组

                colors.length=4;

                alert(colors[3]);//undefined

        这里数组colors的length设置为4,虽然数组只包含三个元素。位置3在数组中不存在,因此访问其值返回特殊值undefined。

        使用length属性可以方便的向数组末尾添加元素。

        例:

                let colors = ["red","blue","green"];//创建一个包含3个字符串的数组

                colors.length = "black";//添加一种颜色位置3

                colors.length = "brown";//再添加一种颜色位置4

        数组中最后一个元素的索引始终是length-1,因此下一个新增槽位的索引就是length。每次在数组最后一个元素后面新增一项,数组的length属性都会自动更新,以反映变化。这意味着第二行的colors[colors.length]会在位置3添加一个新元素,下一行则会在位置4添加一个新元素。新的长度会在新增元素被添加到当前数组外部的位置上时自动更新。换句话说,就是length属性会更新为位置上加1。

        例:

                let colors = ["red","blue","green"];//创建一个包含3个字符串的数组

                colors[99] = "black";//添加一个新颜色(位置99)

                alert(colors.length);//100

        这里,colors数组有一个值被插入到位置99,结果新的length就变成了100(99+1)。这中间所有的元素即3~99,实际上不存在,因此访问为undefined。

        注:数组最多可以包含4294967295个元素,这对于大多数编程任务一个足够了。如果尝试添加更多项,则会导致抛出错误。以这个最大值作为初始值创建数组,可能导致脚本运行时间过长的错误。

检测数组:

        一个经典的ECMAScript问题是判断一个对象是不是数组。在只有一个网页(因而只有一个全局作用域)的情况下,使用instanceof操作符就足矣。

        例:

                if(value instanceof Array){

                        //操作数组

                }

        使用instanceof的问题是假定只有一个全局上下文。如果网页里有多个框架,则可能涉及量不同的全局上下文,因此就会有两个不同版本的Array构造函数。如果把数组从一个框架传到另一个框架,则这个数组的构造函数将有别于在第二个框架内本地创建的数组。

        解决方案:ECMAScript提供了Array.isArray()方法。这个方法的目的就是确定一个值是否为数组,而不用管它是在哪个全局上下文中创建的。

        例:

                if(Array.isArray(value)){

                        //操作数组

                }

迭代器方法:

        在ES6中,Array的原型上暴露了三个用于检索数组内容的方法:keys()、values()、和entries()。keys()返回数组索引的迭代器,values()返回数组元素的迭代器,entries()返回索引/值对的迭代器。

        例:

                const a = ["foo","bar","baz","qux"];

                //因为这些方法都返回迭代器,所以可以将它们的内容

                //通过Array.from()直接转换为数组实例

                const aKeys = Array.from(a.keys());

                const aValues = Array.from(a.values());

                const aEntries = Array.from(a.entries());

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

                console.log(aValues);//["foo","bar","baz","qux"]

                console.log(aEntries);//[[0,"foo"],[1,"bar"],[2,"baz"],[3,"qux"]]

        使用ES6的解构可以非常容易地在循环中拆分键/值对。

        例:

                const a = ["foo","bar","baz","qux"];

                for(const [idx,element] of a.entries()){

                        alert(idx);

                        alert(element);

                }

                //0

                //foo

                //1

                //bar

                //2

                //baz

                //3

                //qux

        注:虽然这些方法是ES6规范定义的,但在2017年底的时候仍有浏览器没有实现它们。

复制和填充方法:

        ES6新增了两个方法:批量复制方法copyWithin(),以及填充数组方法fill()。这两个方法的函数签名类似,都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引。使用这个方法不会改变数组的大小。

        使用fill()方法可以向一个已有的数组插入全部或部分相同的值。开始索引用于指定开始填充的位置,它是可选的。如果不提供结束索引,则一直填充到数组末尾。负值索引从数组末尾开始计算。也可以将负索引想象成数组长度加上它得到一个正索引。

        例:

                const zeroes = [0,0,0,0,0];

                //用5填充整个数组

                zeroes.fill(5);

                console.log(zeroes);//[5,5,5,5,5]

                zeroes.fill(0);//重置

                //用6填充索引大于等于三的元素

                zeroes.fill(6,3);

                console.log(zeroes);//[0,0,0,6,6]

                zeroes.fill(0);//重置

                //用7填充索引大于等于1且小于4的元素

                zeroes.fill(6,1,4);

                console.log(zeroes);//[0,7,7,7,0]

                zeroes.fill(0);//重置

                //用8填充索引大于等于1且小于4的元素

                //(-4+zeroes.length = 1)

                //(-1+zeroes.length = 4)

                zeroes.fill(6,-4,-1);

                console.log(zeroes);//[0,8,8,8,0]

        fill()静默忽略超出数组边界、零长度及方向相反的索引范围。

                例:

                        const zeroes = [0,0,0,0,0];

                        //索引过低忽略

                        zeroes.fill(1,-10,-6);

                        console.log(zeroes);//[0,0,0,0,0]

                        //索引过高忽略

                        zeroes.fill(1,10,15);

                        console.log(zeroes);//[0,0,0,0,0]

                        //索引反向忽略

                        zeroes.fill(2,4,2);

                        console.log(zeroes);//[0,0,0,0,0]

                        //索引部分可用,填充可用部分

                        zeroes.fill(4,3,10);

                        console.log(zeroes);//[0,0,0,4,4]

        与fill()不同,copyWithin()会按照指定范围潜复制数组中的部分内容,然后将它们插入到指定索引开始的位置。开始索引和结束索引则与fill()使用同样的计算方法。

        例:

                let ints ,reset  = ()=>ints = [0,1,2,3,4,5,6,7,8,9];

                reset();

                //从ints中复制索引0开始的内容,插入到索引5开始的位置

                //在源索引或目标索引到达数组边界时停止

                ints.copyWithin(5);

                console.log(ints);//[0,1,2,3,4,0,1,2,3,4]

                reset();

                //从ints中复制索引5开始的内容,插入到索引0开始的位置

                ints.copyWithin(0,5);

                console.log(ints);//[5,6,7,8,9,5,6,7,8,9]

                reset();

                //从ints中复制索引0开始的内容,到索引3结束的内容

                //插入到索引4的位置

                ints.copyWithin(4,0,3);

                console.log(ints);//[0,1,2,3,0,1,2,7,8,9]

                reset();

                //JavaScript引擎在插值前会完整复制范围内的值

                //因此复制期间不存在重写的风险

                ints.copyWithin(2,0,6);

                console.log(ints);//[0,1,0,1,2,3,4,5,,8,9]

                reset();   

                //支持负索引值与fill()相对于数组末尾计算正向索引的过程一样的

                ints.copyWithin(-4,-7,-3);

                console.log(ints);//[0,1,2,3,4,5,3,4,5,6]

        copyWithin()静默忽略超出数组边界、零长度及方向相反的索引范围。

        例:

                let ints ,reset  = ()=>ints = [0,1,2,3,4,5,6,7,8,9];

                reset();

                //索引过低忽略

                ints.copyWithin(1,-15,-12);

                console.log(ints);//[0,1,2,3,4,5,6,7,8,9];   

                reset();

                //索引过高忽略

                ints.copyWithin(1,12,15);

                console.log(ints);//[0,1,2,3,4,5,6,7,8,9];

                reset();

                //索引反向忽略

                ints.copyWithin(2,4,2);

                console.log(ints);//[0,1,2,3,4,5,6,7,8,9];

                reset();

                //索引部分可用,复制、填充可用部分

                ints.copyWithin(4,7,10);

                console.log(ints);//[0,1,2,3,7,8,9,7,8,9];

转换方法:

        所有对象都有,toLocaleString()、toString()、valueOf()方法。其中,valueOf()返回的是数组本身。而toString()返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串。也就是说,对数组的每个值都会调用其toString()方法,以得到最终字符串。

        例:

                let colors = ["red","blue","green"];//创建一个包含3个字符串的数组

                alert(colors.toString());//red,blue,green

                alert(colors.valueOf());//red,blue,green

                alert(colors);//red,blue,green

        首先是被显示的调用toString()、valueOf()方法,他们分别返回了数组的字符串表示,即将所有字符串组合起来,以逗号分隔。最后一行代码直接用alert()显示数组,因为alert()期待字符串,所以会在后台调用数组的tostring()方法,从而得到跟前面一样的结果。

        toLocaleString() 方法也可能返回跟toString()、valueOf()相同的结果,但也不一定,在调用数组的toLocaleString() 方法时,会得到一个逗号分隔的数组值的字符串。它与另外两个方法唯一的区别是,为了得到最终的字符串,会调用数组每个值的toLocaleString()方法,而不是toString()方法。

        例:

                let person1 = {

                        toLocaleString(){

                                return "Nikolaos";

                        }, 

                        toString(){

                                return "Nicholas";

                        }

                };    

                let person2 = {

                        toLocaleString(){

                                return "Grigorios";

                        }, 

                        toString(){

                                return "Greg";

                        }

                }; 

                let people = [person1,person2];

                alert(people);//Nicholas,Greg

                alert(people.toString());//Nicholas,Greg

                alert(people.toLocaleString());//Nikolaos,Grigorios

        这里定义了两个对象,他们都定义了,toString()和toLocaleString()方法,而且返回值不同。然后又创建包含这两个对象的数组people。在将数组传给alert()时,输出的是Nicholas,Greg,这是因为会在数组每一项上调用toString()方法(与下一行显示调用toString()方法结果一样)。而在调用toLocaleString()方法时,结果变成了Nikolaos,Grigorios,这是因为在数组每一项上调用toLocaleString()方法。

        继承的方法 toLocaleString ()以及 toString()都返回数组值的逗号分隔的字符串。如果想使用不同的分隔符,则可以使用join()方法。join ()方法接收一个参数,即字符串分隔符,返回包含所有项的字符串。

        例:

                let colors = ["red", "green","blue"];

                alert(colors.join(","));//red, green,blue

                alert(colors.join("||"));//red || green || blue

        这里在colors 数组上调用了join()方法,得到了与调用 toString()方法相同的结果。传入逗号,结果就是逗号分隔的字符串。最后一行给join()传入了双竖线,得到了字符串"red || green || blue"。如果不给join()传入任何参数,或者传入undefined,则仍然使用逗号作为分隔符。

        注:如果数组中某一项是null 或undefined,则在join()、toLocaleString()、toString()、valueOf()返回的结果会以空字符串表示。

栈方法:

        ECMAScript 给数组提供几个方法。让它看起来像是另外一种数据结构。数组对象可以像栈一样,也就是一种限制插入和删除项的数据结构。栈是一种后进先出(LIFO,Last-In-First-Out)的结构,也就是最近添加的项先被删除。数据项的插入(称为推入, push)和删除(称为弹出,pop)只在栈的一个地方发生,即栈顶。ECMAScript数组提供了push ()和 pop ()方法,以实现类似栈的行为。

        push()方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度。pop()方法则用于删除数组的最后一项,同时减少数组的length值,返回被删除的项。

        例:

                let colors = new Array();

                let count = colors.push( "red", "green ");//推入两项

                alert(count);//2

                Count =colors.push("black");//再推入一项

                alert(count);//3

                let item =colors. pop();//取得最后一项

                alert(item);//black

                alert(colors.length);//2

        这里创建了一个当作栈来使用的数组(注意不需要任何额外的代码,push()和 pop()都是数组的默认方法)。首先,使用 push()方法把两个字符串推入数组末尾,将结果保存在变量count 中(结果为2)。

        然后,再推入另一个值,再把结果保存在count 中。因为现在数组中有3个元素,所以push()返回3。在调用pop()时,会返回数组的最后一项,即字符串"black"。此时数组还有两个元素。

        栈方法可以与数组的其他任何方法一起使用!

        例:

                let colors=["red","blue"];

                colors.push("brown");//再添加一项

                colors[3] = "black";//添加一项

                alert(colors.length);//4

                let item = colors. pop();//取得最后一项

                alert (item);// black

        这里先初始化了包含两个字符串的数组,然后通过 push()添加了第三个值,第四个值是通过直接在位置3上赋值添加的。调用pop()时,返回了字符串"black",也就是最后添加到数组的字符串。

队列方法:

        就像栈是以 LIFO形式限制访问的数据结构一样,队列以先进先出(FIFO, First-In-First-Out)形式限制访问。队列在列表末尾添加数据,但从列表开头获取数据。因为有了在数据末尾添加数据的push()方法,所以要模拟队列就差一个从数组开头取得数据的方法了。这个数组方法叫shift (),它会删除数组的第一项并返回它,然后数组长度减1。使用shift()和push(),可以把数组当成队列来使用:

        例:

                let colors = new Array();

                let count = colors.push("red", "green");//推入两项

                alert(count);//2

                let count = colors.push("black");//再推入一项

                alert(count);//3

                let item = colors.shift();//取得第一项

                alert(item);//red

                alert(colors.length);//2

        这个例子创建了一个数组并用push()方法推入三个值。加粗的那行代码使用shift()方法取得了数组的第一项,即"red"。删除这一项之后,"green"成为第一个元素,"black"成为第二个元素,数组此时就包含两项。

        ECMAScript也为数组提供了unshift ()方法。顾名思义,unshift()就是执行跟 shift()相反的操作。在数组开头添加任意多个值,然后返回新的数组长度。通过使用 unshift()和 pop(),可以在相反方向上模拟队列,即在数组开头添加新数据,在数组末尾取得数据。

        例:

                let colors = new Array();

                let count = colors.unshift("red", "green");//推入两项

                alert(count);//2

                let count = colors.unshift("black");//再推入一项

                alert(count);//3

                let item = colors.pop();//取得最后一项

                alert(item);//green

                alert(colors.length);//2

        这里,先创建一个数组,再通过unshift()填充数组。首先,给数组添加"red"和"green",再添加"black",得到["black " ,"red" , " green"]。调用pop()时,删除最后一项"green"并返回它。

排序方法:

        数组有两个方法可以用来对元素重新排序:reverse()和 sort()。顾名思义,reverse()方法就是将数组元素反向排列。

        例:

                let values =[1,2, 3,4,5];

                values.reverse();

                alert(values);//5,4,3,2,1

        这里,数组values的初始状态为[1,2,3,4,5]。通过调reverse()反向排序,得到了[5,4,3,2,1]。这个方法很直观,但不够灵活,所以才有了sort()方法。

        默认情况下,sort()会按照升序重新排列数组元素,即最小的值在前最大的值在后面、为此,sort()会在每一项上调用 String()转型函数,然后比较字符串来决定顺序。即使数组的元麦都是数值也会先把数组转换为字符串再比较、排序。

        例:

                let values=[0,1, 5, 10,15];

                values.sort();

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

        一开始数组中数值的顺序是正确的,但调用sort()会按照这些数值的字符出形状重新排序、因此,即使5小于10,但字符串"10"在字符串"5"的前头,所以10还是排到5前面,很明显,这在多数情况下都不是最合适的。为此,sort()方法可以接收一个比较函数,用于判断哪个值应该排在前面。

        比较函数接收两个参数,如果第一个参数应该排在第二个参数前面,就返回负值,如果两个参数相等就返回0,如果第一个参教应该排在第二个参教后面,就返回正值。

        例:

                function compare(value1, value2){

                        if(value1<value2){

                                return -1;

                        }else if(value1>value2){

                                return 1;

                        }else{

                                return 0;

                        }

                }

        这个比较函数可以适用于大多数数据类型,可以把它当作参数传给 sort()方法.

        例:

               let values =[0, 1, 5, 10,15];

               values.sort(compare);

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

        在给sort()方法传入比较函数后,数组中的数值在排序后保持了正确的顺序,当然,比较系数也可以产生降序效果,只要把返回值交换一下即可.

        例:

                function compare(value1, value2){

                        if(value1<value2){

                                return 1;

                        }else if(value1>value2){

                                return -1;

                        }else{

                                return 0;

                        }

                }

               let values =[0, 1, 5, 10,15];

               values.sort(compare);

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

        此外,这个比较函数还可简写为一个箭头函数.

        例:

                let values =[0, 1, 5, 10,15];

                values.sort((a,b)=>a<b ?1:a>b?-1:0);

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

        注:reverse()和 sort()都返回调用它们的数组的引用

        如果数组的元素是数值,或者是其valueOf()方法返回数值的对象(如 Date对象)。这个比较函数还可以写得更简单,因为这时可以直接用第二个值减去第一个值。

        例:

                function compare(value1, value2){

                        return value2-value1;

                }

        比较函数就是要返回小于0、0和大于0的数值,因此减法操

操作方法:

        对于数组中的元素,我们有很多操作方法,比如:concat(),方法可以在现有数组全部无素基础上创建一 个新数组。它首先会创建当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组。如果传入一个或多个数组, 则concat()会把这些数组的每一项都添加到结果数组。如果参数不是数组,则直接把它们添加到结果数组末尾。

        例:

                let colors = ["red", "green","blue"];

                let colors2 = colors.concat("yellow",["black", "brown"]);

                console.log(colors );//["red", "green","blue"]

                console.log(colors2 );//["red", "green","blue","yellow","black", "brown"]

        这里先创建一个包含3个值的数组colors。 然后colors调用concat()方法,传入字符串"yellow",和个包含"black" 和"brown"的数组。保存在colors2 中的结果就是"red”,“green" "bluer","yellow","black", "brown"。原数组colors保持不变。

        打平数组参数的行为可以重写,方法是在参数数组上指定一个特殊的符号: Symbol.isConcat-Spreadable. 这个符号能够阻止concat()打平参数数组。相反,把这个值设置为true可以强制打平类数组对象。

        例:

                let colors = ["red", "green","blue"];

                let newColors = ["black","brown"];

                let moreNewColors = {

                        [Symbol.isConcatSpreadable]:true,

                        length:2,

                        0:'pink',

                        1:'cyan',

                };

                newColors[Symbol.isConcatSpreadable]=false;

                //强制不打平数组

                let colors2 = colors.concat("yellow",newColors );

                //强制打平类数组对象

                let colors3 = colors.concat(moreNewColors );

                console.log(colors );//["red", "green","blue"]

                console.log(colors2 );//["red", "green","blue","yellow",["black", "brown"]]

                console.log(colors );//["red", "green","blue","pink","cyan"]

        接下来,方法slice()用于创建一个包含原有数组中一个或多个元素的新数组。slice()方法可以接收一个或两个参数,返回元素的开始索引和结束索引。如果只有一一个参数,则slice()会返回该索引到数组末尾的所有元素。如果有两个参数,则slice ()返回从开始索引到结束索引对应的所有元素,其中不包含结束索引对应的元素。记住,这个操作不影响原始数组。

        例:

                let colors = ["red", "green", "blue", "yellow", "purple"];

                let colors2 = colors.slice(1);

                let colors3 = colors.slice(1, 4);

                alert(colors2); //green,blue,yellow, purple

                alert(colora3); //green,blue,yellow

        这里,colors数组一开始有5 个元素。调用slice()传入1会得到包含4个元素的新数组。其中不包括"red",这是因为拆分操作要从位置1开始,即从"green "开始。得到的 colors2数组包含"green"、" blue"、"yellow"和 "purple"。colors3数组是通过调用slice()并传入1和4得到的,即从位置1开始复制到位置3。因此colors3包含"green"、 "blue"和"yellow"。

        注:如果slice()的参数有负值,那么就以数值长度加上这个负值的结果确定位置。比如,在包含5个元素的数组上调用 slice(-2,-1),就相当于调用slice(3,4)。如果结束位置小于开始位置,则返回空数组。

       或许最强大的数组方法就属 splice ()了,使用它的方式可以有很多种。Splice()的主要目的是在数组中间插入元索,但有3种不同的方式使用这个方法。  

        删除:需要给splice()传2个参数:要删除的第一个元素的位置和要删除的元素数量。可以从数组中删除任意多个元素,比如splice(0, 2)会删除前两个元素。

        插入:需要给 splice()传3个参数:开始位置、0(要删除的元素数量)和要插入的元素,可以在数组中指定的位置插入元素。第三个参数之后还可以传第四个、第五个参数,乃至任意多个要插入的元素。比如:splice (2,0, "red", " green ")会从数组位置2开始插入字符串"red "和“green"。

        替换:splice ()在删除元素的同时可以在指定位置插人新元素,同样要传入3个参数:开始位置、要删除元素的数量和要插入的任意多个元素。要插入的元素数量不一定跟删除的元素数量一致。比如:splice(2,1, "red", "green")会在位置2删除一个元素,然后从该位置开始向数组中插入"red"和"green"。

        splice()方法始终返回这样一个数组,它包含从数组中被删除的元素(如果没有删除元素,则返回空数组)。以下示例展示了上述3种使用方式。

        例:

                删除:

                        let colors = ["red", "green","blue"];

                        let removed = colors.splice(0,1);//删除第一项

                        alert(colors);// green , blue

                        alert (removed);// red,只有一个元素的数组

                插入:

                        removed = colors.splice(1,0, "yellow" , "orange");//在位置1插入两个元素

                        alert(colors);//green, yellow, orange, blue

                        alert (removed);//空数组

                替换:

                        removed = colors.splice(1,1,"red","purple");//插入两个,删除一个

                        alert(colors);//green, red,purple, orange, blue

                        alert (removed);// yellow,只有一个元素的数组

        这个例子中,colors 数组一开始包含3个元素。第一次调用splice()时,只删际了第一项,colors中还有"green "和"blue"。第二次调用slice()时,在位置1插入两项,然后colors包含"green"、"yellow "、 " orange"和"blue"。这次没删除任何项,因此返回空数组。最后一次调用 splice()时,删除了位罢1上的而同时插入了"red"和"purple "。最后,colors数组包含" green"、 "red"、"purple" "orange"和"blue"。

搜索和位置方法

        ECMAScript提供两类搜索数组的方法:按严格相等搜索和按断言函数搜索。

        严格相等:

                ECMAScript提供了3个严格相等的搜索方法:indexof()、lastIndexof()和includes()。其中前两个方法在所有版本中都可以用,第三个方法是ECMAScript7新增的。这些方法都接受两个参数。要查找的元素和一个可选的起始搜索位置。index0f()和includes()方法从数组前头(第一项)开始向后搜素,而lantIndexOf()从数组未尾(最后一项)开始向前搜索。

                lndexOf()和lantIndexOf()都返回要查找的元素在数组中的位置,如果没找到则返回-1。includes()返回布尔值,表示是否至少找到一个与指定元素匹配的项。在比较第一个参数跟数组每一项时,会使用全等(===)比较,也就是说两项必须严格等。

                例:

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

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

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

                        alert (numbers.includes(4));//true

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

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

                        alert (numbers.includes(4,7));//false

                        let person = {nams: “Nicholas"};

                        let people = [{nams: “Nicholas"}];

                        let morePeople = [person];

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

                        alert(morePeople .indexOf(person));//0

                        alert(people.includes(person));//false

                        alert(morePeople .includes(person));//true

        断言函数:

                ECMAScript 也允许按照定义的断言函数搜索数组,每个索引都会调用这个函数。断言函数的返回值决定了相应索引的元素是否被认为匹配。

                断言函数接收3个参数:元素、索引和数组本身。其中元素是数组中当前搜索的元素,索引是当前元素的索引,而数组就是正在搜索的数组。断言函数返回真值,表示是否匹配。

                find()和 indIndex()方法使用了断言函数。这两个方法都从数组的最小索引开始。find()返回第一个匹配的元素,findIndex()返回第一个匹配元素的索引。这两个方法也都接收第二个可选的参数,用于指定断言函数内部this的值。

                例:

                        const people = [

                                {

                                        name: “Matt",

                                        age:27

                                },

                                {

                                        name: “Nicholas",

                                        age:29

                                }

                        ];

                        alert (people.find((element,index,Array) => element.age<28));

                        //{name: "Matt",age:27}

                        alert (people.findIndex((element,index,Array) => element.age<28));

                        //0

                找到匹配项后,这两个方法都不再继续搜索。

                例:

                        const evens = [2,4,6];

                        //找到匹配后,永远不会检查数组的最后一个元素

                        evens. find((element, index, array) => {

                                console. log (element);

                                console. log (index);

                                console. log (array);

                                return element=== 4;

                        };

                        //2

                        //0

                        //[2,4,6]

                        //4

                        //1

                        //[2,4,6]

迭代方法:

        ECMAScript 为数组定义了5个迭代方法。每个方法接收两个参数:以每项为参数运行的函数,以及可选的作为函数运行上下文的作用域对象(影响函数中this 的值)。传给每个方法的函数接收3个参数:数组元素、元素索引和数组本身。因具体方法而异,这个函数的执行结果可能会也可能不会影响方法的返回值。数组的5个迭代方法如下:

        every():对数组每一项都运行传入的函数,如果对每一项函数都返回true,则这个方法返回true。

        some():对数组每一项都运行传入的函数,如果有项函数返回 true,则这个方法返回true。

        filter():对数组每一项都运行传入的函数,函数返回true的项会组成数组之后返回。 

        map():对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组。  

        forEach():对数组每一项都运行传入的函数,没有返回值。  

        这些方法都不改变调用它们的数组。

        在这些方法中,every() 和some()是最相似的,都是从数组中搜索符合某个条件的元素。对every()来说,传入的函数必须对每项都返回true,它才会返回true;否则,它就返回false。而对some ()来说,只要有一项让传入的函数返回true,它就会返回true。

        例:

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

                let everyResult = numbers.every((item, index, aray) => item > 2);

                alert (everyResult); //false

                let someResult = numbers.some((item, index, array) => item>2);

                alert (someResult); //true

        以上代码调用了every()和 some(),传入的函数都是在给定项大于2时返回true。every()返回false是因为并不是每一项都能达到要求。而some()返回true是因为至少有一项满足条件。

        下面再看一看filter()方法。这个方法基于给定的函数来决定某一项是否应该包含在它返回的数组中。比如,要返回一个所有数值都大于2的数组。

        例:    

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

                let filterResult = numbers.filter((item, index, aray) => item > 2);

                alert (filterResult); //3,4,5,4,3

        这里,调用filter()返回的数组包含3,4,5,4,3因为只有对这些项传入的函数才返回true,这个方法非常适合从数组中筛选满足给定条件的元素。

        接下来map()方法也会返回一个数组。 这个数组的每一项都是对原始数组中同样位置的元素运行传入函数而返回的结果。例如,可以将一个数组中的每项都乘以2。并返回包含所有结果的数组。

        例:     

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

                let mapResult = numbers.map((item, index, aray) => item * 2);

                alert (mapResult); //2,4,6,8,10,8,6,4,2

        以上代码返回了一个数组,包含原始数组中每个值乘以2的结果。这个方法非常适合创建一个与原始数组元素一对应的新数组。

        最后,再来看一看forEach()方法。 这个方法只会对每项运行传入的函数,没有返回值。本质上,EorEach()方法相当于使用for循环遍历数组。

        例:  

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

                let forEachResult = numbers.forEach((item, index, aray) => {

                        //执行某些操作

                });

                数组的这些迭代方法通过执行不同操作方便了对数组的处理。

归并方法:

        ECMAScript为数组提供了两个归并方法: reduce() 和reduceRight().这两个方法都会迭代数组的所有项,并在此基础上构建一个最终返回值。 reduce()方法从数组第一项开始遍历到最后一项。而reduceRight ()从最后一项开始遍历至第一项。

        这两个方法都接收两个参数:对每项都会运行的归并函数,以及可选的以之为归并起点的初始值传给reduce()和reduceRight()的函数接收4个参数:上一个归并值、当前项、当前项的素引和数组本身。这个函数返回的任何值都会作为下一次调用同一个函数的第 一个参数。如果没有给这两个方法传入可选的第二个参数(作为归并起点值),则第一次迭代将从数组的第二项开始,因此传给归并函数的第一个参数是数组的第一项, 第二个参数是数组的第二项。

        可以使用reduce ()函数执行累加数组中所有数值的操作。

        例:

                let values =[1,2,3,4, 5];

                let sum= values.reduce((prev, cur, index, array) => prev+cur);

                alert(sum); //15

        第一次执行归并函数时,prev是1, cur是2。第二次执行时,prev是3(1+2). cur是3(数组第三项)。如此递进,直到把所有项都遍历一次, 最后返回归并结果。

        reduceRight()方法与之类似,只是方向相反。

        例:

                let values =[1,2,3,4, 5];

                let sum= values.reduceRight((prev, cur, index, array) => prev+cur);

                alert(sum); //15

        在这里,第一次prev是5, cur是4。最终结果相同,是因为这就是最简单加法。

        在什么时间使用哪个方法,直取决于数组遍历的方法。除此之外这两个方法没有区别。

        


版权声明:本文为XZ85201原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。