js数组

js中的数组实际上就是一个Array对象的实例,继承来自Array.prototype的属性和方法!

属性

  1. length(Array.prototype.length):返回数组的长度;注意只有数字索引或者能被转换为数字的索引才会被计入!
var arr = [];
arr[0] = 1;
arr[3] = "xxf";
arr["name"] = "xuefeng";

arr.length; // 4
arr[1]; // undefined
arr.name; // xuefeng

js数组的长度是根据索引中最大的数字决定的(?),且中间没有被赋值的索引被访问时的值默认为undefined!且其中的<font color=red>非数字索引或者对象属性</font>不会被计入到length中的,但是可以强制转化为十进制数字的索引是有效的:

var arr = [];
arr["12"] = "cctv"; // 索引"12"可以强制转化为数字12!

arr.length; // 13
  1. constructor(Array.prototype.constructor):返回的就是Array本身!即所有数组实例的构造器都是继承自Array对象!
var arr = [1, 2, 3];
arr.constructor; // [Function: Array]

访问方法

所有的访问方法<font color=red>绝对不会改变调用它们的对象的值</font>,只会返回一个新的数组或者返回一个其它的期望值。

  1. contact方法:用于合并多个数组或多个元素,返回一个新的数组;
/*
接受一个或多个数组或元素
与原数组合并返回到一个新的数组!
*/
Array.prototype.contact(val1[, val2[, ...[, valN]]]);
  1. join方法:连接数组内所有的元素并返回一个字符串;数组中元素值为nullundefined的,该元素则转化为空字符串!
/*
separator为连接字符,可以不填
当不填时separator参数时,默认为","
当连接字符为空字符串""时,元素之间没有连接字符,直接相连
*/
Array.prototype.join(separator);

//Example
var arr = [1, 2, 3];
arr.join(); // "1,2,3"
arr.join(""); // "123"
arr.join("-"); // "1-2-3"
arr.join(", "); // "1, 2, 3"  (最后一个空格自动去除?)
  1. slice方法:返回一个从开始到结束(<font color=red>不包括结束索引的那个元素!</font>)选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。
/*
begin和end参数分别为开始和结束索引,都是可选的
当两个参数都不填时,直接复制整个数组
当end参数不填时,复制从begin开始到最后一个的元素
begin和end的索引可以为负,代表倒数第几个元素!
*/
Array.prototype.slice([begin[, end]]);

//Example

var arr = [1, 2, 3];

arr.slice(); // [1, 2, 3]
arr.slice(1); // [2, 3]
arr.slice(0, 2); // [1, 2]
arr.slice(0, -1); // [1, 2]
  1. toString方法:相当于arr.join(),即直接用,连接所有元素返回一个字符串;

  2. indexOf方法:返回在数组中可以找到一个给定元素的<font color=red>第一个索引</font>,如果不存在,则返回-1;

/*
elem参数为所查找的元素
startIndex为开始查找的索引,可以为负,同上
当startIndex超出数组length时直接返回-1!
*/
Array.prototype.indexOf(elem[, startIndex=0]);

修改器方法

所有的修改器方法<font color=red>会改变调用它们的对象自身的值</font>!

  1. push方法:在数组的末尾添加一个或多个元素,并返回数组的新长度;

  2. pop方法:删除数组的最后一个元素,并返回这个元素;

  3. reserve方法:颠倒数组中所有元素的顺序;

  4. shift方法:删除数组中第一个元素,并返回这个元素;

  5. unshift方法:在数组的开头添加一个或多个元素,并返回数组的新长度;

  6. sort方法:对数组元素进行排序,并返回当前数组;

/*
compareFunction参数为比较函数,是可选的;
若不填参数,默认按Unicode码进行排序;
compareFunction(a, b)若大于0,则b在a之前;
若小于0,则a在b之前;
若等于0,则a与b的相对位置不变!
*/
Array.prototype.sort([compareFunction]);

//MDN Example
var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort(); 
// ['apples', 'bananas', 'cherries']

var scores = [1, 10, 21, 2]; 
scores.sort(); 
// [1, 10, 2, 21]
// 注意10在2之前,
// 因为在 Unicode 指针顺序中"10"在"2"之前

var things = ['word', 'Word', '1 Word', '2 Words'];
things.sort(); 
// ['1 Word', '2 Words', 'Word', 'word']
// 在Unicode中, 数字在大写字母之前,
// 大写字母在小写字母之前.

//要想让数字数组按照数值从小到大排序
//可以自定义一个compareFunction

/*
    当a > b时,返回值大于0
    当a < b时,返回值小于0
    a = b时,返回值为0
*/
function compare(a, b){
    return a - b;
}

var arr = [4, 1, 12, 9];
arr.sort(compare); // [1, 4, 9, 12]
  1. splice方法:通过删除现有元素和/或添加新元素来更改一个数组的内容,并且返回被删除的元素(以数组的形式);
array.splice(start)
// 删除数组从start开始到末尾的所有元素,start可以为负值
array.splice(start, deleteCount) 
/* 
删除数组从start开始的deleteCount个元素;
deleteCount可以为0,即不删除任何元素;
当deleteCount大于从start开始到末尾元素的个数,则删除从start开始到末尾的所有元素
*/
array.splice(start, deleteCount, item1, item2, ...)
/*
item1,irem2,...为要添加的元素
从start开始添加
*/

//示例:删除数组中的某一个元素
var arr = [1, 2, 3];
arr.splice(1, 1); // 2 (即删除数组中索引为1的元素)

//MDN示例:从第2位开始删除所有的元素
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);
// 运算后的myFish :["angel", "clown"] 
// 被删除的元素数组: ["mandarin", "sturgeon"]

迭代方法

在下面的众多遍历方法中,有很多方法都需要指定一个回调函数作为参数。<font color=#39f>在每一个数组元素都分别执行完回调函数之前,数组的length属性会被缓存在某个地方</font>,所以,如果你在回调函数中为当前数组添加了新的元素,那么那些新添加的元素是不会被遍历到的。此外,如果在回调函数中对当前数组进行了其它修改,比如改变某个元素的值或者删掉某个元素,那么随后的遍历操作可能会受到未预期的影响。总之,不要尝试在遍历过程中对原数组进行任何修改,虽然规范对这样的操作进行了详细的定义,但为了可读性和可维护性,请不要这样做。(MDN

  1. forEach方法:为数组中的每个元素执行一次回调函数;该方法没有返回值!
/*
callback为回调函数
thisArg为可选参数,作为callback函数中this对象进行使用
*/
array.forEach(callback[, thisArg]);

callback = function(currentValue, index, array){
    //do something
};
/*
currentValue为当前遍历的元素值
index为当前遍历的元素索引
array为所遍历的数组本身
*/
  1. every方法:如果数组中的每个元素都满足测试函数,则返回true,否则返回 false;该方法不会改变原数组!
/*
参数同上
*/
arr.every(callback[, thisArg]);

every方法为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 trueevery 就会返回 truecallback只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。(MDN

  1. some方法:如果数组中至少有一个元素满足测试函数,则返回 true,否则返回 false
arr.some(callback[, thisArg]);
  1. filter方法:将所有在过滤函数中返回true 的数组元素放进一个新数组中并返回
//语法
var new_array = arr.filter(callback[, thisArg]);

//MDN Example
function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

// filtered is [12, 130, 44]
  1. map方法:返回一个由回调函数的返回值组成的新数组;
var new_array = arr.map(function callback(currentValue, index, array) { 
    // Return element for new_array 
}[, thisArg]);

// MDN实例:求每个元素的平方
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]
  1. reduce方法:
/*
callback为回调函数,有四个参数
initialValue为可选参数,为累计值的初始值!
*/
arr.reduce(callback[, initialValue]);

/*
accumulator:累加器累加回调的返回值;它是上一次调用回调时返回的累积值,或initialValue
currentValue:数组中正在处理的元素
currentIndex(可选):数组中正在处理的当前元素的索引。
如果提供了initialValue,则索引号从0开始,否则为索引从1开始
array:调用reduce的数组
*/
callback = function(accumulator, currentValue, currentIndex, array){
    /*
    do something
    */
    return /* some value */;
}

回调函数第一次执行时,accumulatorcurrentValue的取值有两种情况:调用reduce时提供initialValueaccumulator取值为initialValuecurrentValue取数组中的第一个值;没有提供 initialValueaccumulator取数组中的第一个值,currentValue取数组中的第二个值。(MDN

参考文档

  1. Array - JavaScript | MDN
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,711评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,079评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,194评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,089评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,197评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,306评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,338评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,119评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,541评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,846评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,014评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,694评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,322评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,026评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,257评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,863评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,895评论 2 351

推荐阅读更多精彩内容

  • 创建数组 arr.length--- title: js正则表达式categories: javascriptda...
    angelwgh阅读 1,387评论 0 2
  • Array -MDNwindow.Array 全局对象(也是函数)基本用法:var a = Array(3) /...
    半斋阅读 361评论 0 0
  • 上一篇JS字符串的操作中,介绍了split方法可以将字符串转化为以某种形式分割的数组,然后可以对其采用数组的操作方...
    大春春阅读 5,226评论 1 5
  • 由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaS...
    2bc5f46e925b阅读 1,969评论 0 16
  • 至今还记得9年前的那天…… 小学五年级,地震的时候,正是下午上课前的预备课,当时桌子摇晃的很厉害,我还以为谁...
    天堑星曦阅读 237评论 0 0