【JavaScript高程总结】array(数组)

1.数组创建

//Array构造函数
var arr = new Array(3)//创建一个lengrh为3的数组但每一项都没有值
var arr = new Array(red,blue,green)//创建一个值为red,blue,green的数组
//字面量方法
var arr = ["red", "blue", "green"]; 
var arr = []; 

Array.length(通过length在数组末尾删除新增项)

数组的length有一个特点他不是只读
因此通过修改这个属性可以从末尾移除
或者向数组添加新的项(新项由于没有值所以是undefined)

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

通过length向数组末尾添加新的项

var arr = ["red", "blue", "green"]
arr[arr.length]=pink
alert(arr[2]) //red, blue,green,pink


2.检测数组(instanceof和Array.isArray(value))

typeof

var s = "Nicholas"; 
var i = 22; 
var b = true; 
var u; 
var n = null; 
var o = new Object();

alert(typeof s);//string 
alert(typeof i);//number 
alert(typeof b);//boolean 
alert(typeof u);//object
alert(typeof n);//object
alert(typeof o);//object

缺点:常有一些无法预知的行为例如正则被判断为函数 null判断为对象)

instanceof

if(value instanceof Array){
    //对数组进行操作
}

缺点:
对一个网页或一个全局作用域能得到满意的结果(instanceof是window下的属性)
由于一切引用类型都是object的事例因此value instanceof Object始终返回true
instanceof检测基本类型始终是false

Array.isArray(value)

ECMAScript5新增(是Array构造函数的方法)

支持的浏览器IE9+,Firefox4+,Safari5+Opera10.5+和Chrome

安全的检测方法(通过原型上的toString方法)

var a=["red","blue","pink"]
//toString方法把数组变为字符串
a.toString()  //"red,blue,pink"
//toString原型的方法返回的结果
Object.prototype.toString.call(a) //[object Array] 

通过原型的方法检测

function isArray(val){
    return Object.prototype.toString.call(val)=="[object Array]"
}
//函数检测
function isFunction(val){
    return Object.prototype.toString.call(val)=="[object Function]"
}
//正则检测
function isRegExp(val){
    return Object.prototype.toString.call(val)=="[object RegExp]"
}


3.转换数组

方法:

valueOf()/toString()/toLocaleString()/join()

var colors = ["red", "blue", "green"]
alert(colors.toString())  // red,blue,gree
alert(colors.valueOf())   // red,blue,green 
alert(colors)              // red,blue,green
alert(colors.toLocaleString()) 

上面三个方法都返回red,blue,green
区别是

alert()

只接受字符串所以后台调用原型中的toString()

.valueOf()

其实valueOf()返回的还是数字alert()帮他调用了 toString()

.toString()

调用原型的toString()方法

.toLocaleString()

结果一样但是他调用的是原型中的toLocaleString()

var colors = ["red", "blue", "green"]
alert(colors.join(",")); //red,green,blue 
alert(colors.join("||")); //red||green||blue

join()

直接通过指定的字符串拼接数字可以是个空格可以什么都没有



4.数组的操作

堆栈队列:

.push()

--在数组后面追加项(可以任意个项);返回改变后数组的length

.pop()

--取数组后面项并删除原数组的项;返回取得的项;

.unshift()

--在数组前面添加项(可以任意个项);返回改变后数组的length

.shift()

--取数组前面项并删除原数组的项;返回取得的项;


image.png

重排序:

.reverse()

--翻转数组顺序(改变原数组)

var values = [1, 2, 3, 4, 5]; 
values.reverse(); 
alert(values); //5,4,3,2,1

.sort()

--排序默认升序可以接受一个比较函数作为参数

var values = [0, 1, 5, 10, 15]; 
values.sort(); 
alert(values); //0,1,10,15,5
//由于默认比较方法的原因10排在了5的前面

这个时候就要用到比较函数

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

function compare(val1,val2){
    if(val1<val2){
        return -1
    } else if(val1>val2){
        return 1
    }else {
        return 0
    }
}

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

 function compare(val1,val2){
    if(val1<val2){
        return 1
    } else if(val1>val2){
        return -1
    }else {
        return 0
    }
}

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

操作方法

.concat()

以数组a为基础同时添加我要加入的值(参数)组成一个新数组

--返回一个新数组
--不改变原始数组;
--参数可以传入多个数组

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()

我要取得数组中的部分内容形成一个新数组且不改变原数组就用这个方法

--返回一个新数组
--不改变原始数组;
--接受两个参数及要返回项的起始和结束位置

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

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

.splice()

强大的数组方法可以删除插入替换
可以实现上面的push、pop、shift、unshift方法

--会修改原数组
--返回删除的项没有则返回空数组

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1);
alert(colors); // green,blue
alert(removed); // red

removed = colors.splice(1, 0, "yellow", "orange");
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

位置方法

查找一个值在数组中的位置
支持的浏览器IE9+,Firefox2+,Safari3+Opera9.5+和Chrome

.indexOf()

--从数组第一个值往后开始顺序查找
--第一个参数要:查找的值
--第二个参数:从数组第几个值开始找(可选)

.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 

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

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

迭代方法(对数组中每一项遍历)

.every()

.some()

上面两个都是返回布尔值

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

上面.every()只有当数组中所有值都大于2才会返回true否则返回false
.some()呢只要有一个值大于2就会返回true

.filter()

例如:想要取数组中所有大于2的值可以用这个方法

--返回符合条件的值
--不修改原数组

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

.map()

例如:想要得到一个新数组;新数组的值是原数组每一项都乘以2;可以用这个
--返回的数组是在原数组上每一项经过传入函数操作的结果
--不修改原数组

var numbers = [1,2,3,4,5,4,3,2,1]; 
var mapResult = numbers.map(function(item, index, array){ 
    return item * 2; 
}); 
alert(mapResult); //[2,4,6,8,10,8,6,4,2]

.forEach()

上面的方法其实都可以用.forEach()得到
--数组的遍历
--没有返回值

var numbers = [1,2,3,4,5,4,3,2,1]; 
numbers.forEach(function(item, index, array){
    //执行操作
});

归并的方法

.reduce()

.reduceRight()

这两个方法都会迭代数组所有项然后构建一个最终返回的值
只是.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 values = [1,2,3,4,5];
 var sum = values.reduceRight(function(prev, cur, index, array){ 
    return prev + cur; 
}); 
alert(sum);//15
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,451评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,172评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,782评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,709评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,733评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,578评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,320评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,241评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,686评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,878评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,992评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,715评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,336评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,912评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,040评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,173评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,947评论 2 355

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,149评论 0 13
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,234评论 0 4
  • The JavaScriptArrayobject is a global object thatis used ...
    skycolor阅读 570评论 0 0
  • 已经过了12点了,现在是凌晨的00:30分,也算夜已深吧。 元宵已过,思绪未平。 2015年的刚开门的工作总是提不...
    我_阿元阅读 237评论 0 1
  • …… 你是否在孩子身上发现了无数问题,并且用了无数种办法去改正孩子? 却发现:结果越来越糟! 结果糟就对了,这个结...
    helenliu258阅读 260评论 0 0