JavaScript 学习随笔之 Array类型

创建数组的常用方式(两种)

第一种方法

//使用Array构造函数
var colors = new Array();
//预先知道保存项目数量,并会自动变成lenght属性的值
var colors = new Array(20);
//向Array构造函数传递数组中应该包含的项
var colors = new Array("red","blue","green");
//可以省略new

第二种方法


var colors = ["red","blue","green"];
var colors = []; //创建一个空数字
//不推荐的方式
var values = [1,2,];
var options = [,,,,,];

读取,修改,新增值的方法

var colors = ["red","blue","green"];
alert(colors[0]); //显示第一项
colors[2]="black";//修改第三项
colors[3]="brown"; //新增第四项

数组的项数保存在lenght属性中

数组的lenght有个特点 它不是只读的
通过设置这个属性,可以从数组末尾移除或向数组中添加新项


末尾移除

var colors = ["red","blue","green"];
colors.lenght = 2;
alert(colors[2]);//undefined

末尾新增

var colors = ["red","blue","green"];
colors.lenght = 4;
alert(colors[3]); //undefined

利用lenght属性可以方便在数组末尾添加新项
数组的最后项索引始终是lenght-1,因为下一个项的位置就是lenght


var colors = ["red","blue","green"];
colors[colors.lenght]="black";//在下标3添加
colors[colors.lenght]="brown";//在下标4添加

栈方法

ECMAScript数组提供了一种让数组行为类似于其他数据结构的方法,数组的表现可以像栈一样,后者可以限制插入和删除项的数据结构,栈是一种(Last-In-First-Out,后进先出)的数据结构,最新添加的项会最早移除,而栈中的插入(叫做推入)和移除 (叫做弹出),只发生在一个位置,栈的顶部,ECMAScript为数组专门提供了push()和pop()方法。

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

var colors = new Array();
var count = color.push("red","green"); //推入两项
alert(count); //2
var count = color.push("black");//推入另一项
alert(count); //3

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

var item = colors.pop(); //取得最后一项
alert(item); //"black"
alert(colors.lenght); //2

队列方法

附:https://baike.baidu.com/item/%E9%98%9F%E5%88%97/14580481?fr=ala0_1_1

栈数据结构访问规则是LIFO(后进先出),队列数据结构访问规则是FIFO(First-In-First-Out,先进先出)
队列在列表的末尾添加项,从列表的前端移除项,push()是向数组的末尾添加项的方法,模拟队里额秩序一个从
前端取得项的方法 shift(),它能够移除数组中的第一项并返回该项,同时将数组的长度减1,结合使用shift(),和push()方法
可以像使用队列一样使用数组。

push() 配合 shift()

var colors = new Array();
colors.push("a","b"); //lenght 2
vat item = colors.shift(); //取得第一项
alert(item); //a
alert(colors.lenght); //1

反向队列

ECMAScript 还为数组提供了 unshift()方法 与shift() 作用相反 它在数组前端添加任意项并返回新的数组长度
使用unshift()和pop()方法,可以使用相反的方向来模拟队列,前端添加项,数组末尾移除项

var colors = new Array();
var count = colors.unshift("red","green"); // 推入两项 lenght 2
var item = colors.pop();// 取得最后一项 item green

排序方法

数组中已经存在两个可以直接重新排序的方法
reverse() sort()

reverse()将数组元素倒置

  var array=new Array();
  array.push(8,6,5,4,1,9,7);
  array.reverse();
  console.log(array); // 7 9 1 4 5 6 8

sort()方法默认是升序

  var array=new Array();
  array.push(8,10,5,4,1,9,7);
  array.sort();
  console.log(array); // 1 10 4 5  7 8 9 
 //sort()方法会根据测试字符串的结果改变原来的顺序,5小于10,但进行比较时则在5的前面 数组的顺序被修改了 sort方法可以
 接收一个比较函数作为参数,以便指定哪个值位于哪个值的前面

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

// 1 和 -1 位置对调则是倒序
function compare(arg1,agr2){
    if(arg1<arg2){
        return -1;
    }else if(arg1>arg2){
        return 1;
    }else{
        return 0;
    }
}
  var array=new Array();
        array.push(8,10,5,4,1,9,7);
        array.sort((arg1,arg2)=>{
            if(arg1<arg2){
                return -1;
            }else if(arg1>arg2){
                return 1;
            }else{
                return 0;
            }
        });
   console.log(array); //1 4 5 7 8 9 10

数值类型或者其valueOf()方法会返回数值类型的对象类型,可以使用更简单的比较函数
倒 第二个值减第一个值 正 第一个值减第二个值

var array=new Array();
array.push(8,10,5,4,1,9,7);
array.sort((arg1,arg2)=>{
  return arg1-arg2;
});
console.log(array); //1 4 5 7 8 9 10

操作方法

concat()方法可以基于当前数组中的所有项创建一个新数组 相当于副本
concat具有一个参数 如果给定参数则添加到新数组的末尾元素中

var colors=["red","green","blue"];
var colors2 = colors.concat("yellow",["black","brown"]);
console.log(colors); //lenght 3
console.log(colors2);// lenght 6

slice() 两个参数 开始和结束的位置 返回中间值生成新的数组
不包含结束的位置

var colors = ["red","green",blue","yellow","purple"];
var colors2 = colors.slice(1);//green,blue,yellow,purple
var colors3 = colors.slice(1,4);//green,blue,yellow

slice()主要用途是向数组的中部插入项,使用的方式有三种:

删除:可以删除任意数量的项,两个参数 要删除的第一项位置和项数 splice(0,2) 会删除数组的前两项
插入:向指定位置插入任意数量的项,三个参数:起始位置 、删除的项数(0)、插入的项 插入多项可以传递多个参数
splice(2,0,”red”,”green”)会从当前数组的位置2开始插入字符串red和green
替换:*向指定位置插入任意数量的项,同时删除任意数量的项,三个参数:起始位置、删除和插入任意数量的项,插入项目
不必与删除的项相等 splice(2,1,”red”,”green”) 会产出当前数组位置2的项,然后再从位置2开始插入字符串red和green

splice()方法始终会返回一个数组,该数组中包含从原始数组中删除的项目,如果没有删除任何项目,则会返回一个空数组

数组位置方法

ECMAScritp5 为数组实例添加了两个位置方法:indexOf() 和 lastIndexOf() 两个方法都接收两个参数:要查找的项(可选)、表示查找起点位置的索引,indexOf()方法从数组的开头位置 0 开始向后查找,lastIndexOf则从数组的末尾开始向前查找。
没找到返回-1

var nums=[1,2,3,4,5,4,3,2,1];
console.log(nums.indexOf(4)); //3
console.log(nums.lastIndexOf(4)); //5
console.log(nums.indexOf(4,4)); //5
console.log(nums.lastIndexOf(4,4)); //3
var person = { name:"Nicholas" };
var people = [{ name:"Nicholas"}];
var morePeople=[person];
console.log(people.indexOf(person)); //-1
console.log(morePeople.indexOf(person)); //0

迭代方法

ES5为数组定义了5个迭代方法每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象 影响this的值,传入这些方法中的函数会接收三个参数:
数组项的值、该项在数组中的位置 、 数组对象的本身
every():对数组中的每一项运行给定函数,如果该函数的每一项都返回true,则返回true
filter():对数组中的每一项运行给定函数。这个方法没有返回值。
map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成数组。
some():对数组中的每一项运行给定函数,如果该函数任一项返回true,则返回true

        var colors=[1,2,3,4,5,6,7,8];
        var everyResult=colors.every((item,index,array)=>{
             return (item>2);
         });

        var someResult=colors.some((item,index,array)=>{
            return (item>2);
        });

        var filterResult=colors.filter((item,index,array)=>{
           return(item>2);
        });
        var mapResult=colors.map((item,index,array)=>{
            return item*2;
        });
        console.log(everyResult);//false 每一项都必须满足条件 一项不满足返回false
        console.log(someResult);//true 如果有一项满足条件就返回 true
        console.log(filterResult);//迭代过滤数组 满足条件的值组成新数组返回
        console.log(mapResult);//map()都是在原始数组上运行传入参数的结果,返回组成的新数组

        colors.forEach((item,index,array)=>{
           //执行的操作
          console.log(item+" "+index +" "+array);
        });//跟for循环差不多

缩小方法

> ES5增加了两个缩小数组的方法 reduce()和reduceRight();

两个方法都接收两个参数:一个在每一项调用函数的和(可选的)、传递给方法的函数
四个参数: 前一个值、当前值、项的索引值、和数组对象
这个函数返回的任何值都会作为第一个参数传递给下一项
第一次迭代的发生在数组的第二项,因此第一个参数是数组的第一项, 第二个参数就是数组的第二项
所有值求和

var values=[1,2,3,4,5];
//1
var sum = values.reduce((pre,cur,index,array)=>{
    return pre+cur;
});
//2
var sum = values.readuce((a,b)=>{
    return a+b;
});
console.log(sum);

reduceRight(): 见名知意从右往左累加


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值