javascript数组方法&类数组

arr.push(...items) —— 从尾端添加元素,

arr.pop() —— 从尾端提取元素,

arr.shift() —— 从首端提取元素,

arr.unshift(...items) —— 从首端添加元素。

1、删除数组

数组是对象,所以可以使用delete

let arr = ['dd', 'go', 'home']

delete arr[1]

console.log(arr, arr[1]) // ["dd", '', "home"] undefined

delete obj.key 是通过 key 来移除对应的值。对于对象来说是可以的。但是对于数组来说,我们通常希望剩下的元素能够移动并占据被释放的位置。我们希望得到一个更短的数组。

2、splice它可以做所有事情,添加、删除、插入元素

语法:splice(start,[deleteNum, elem1....elemN])

它从索引start开始修改数组,删除deleteNum个元素并在当前位置插入elem1....elemN

let arr = ["I", "study", "JavaScript"];

arr.splice(1,1);// 从索引 1 开始删除 1 个元素

alert( arr ) // ["I", "JavaScript"]

let arr = ["I","study","JavaScript", "right", "now"];

arr.splice(0, 3, "Let's", "dance");

alert( arr ) //  ["Let's", "dance", "right", "now"]

let arr = ["I", "study", "JavaScript"];

// 从索引 2 开始, 删除 0 个元素,然后插入 "complex" 和 "language"

arr.splice(2, 0, "complex", "language");

alert( arr ); // "I", "study", "complex", "language", "JavaScript"

3、arr.slice([start], [end])

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s(复制从位置 1 到位置 3 的元素)

alert( arr.slice(-2) ); // s,t(复制从位置 -2 到尾端的元素)

4、concat数组合并

5、数组搜索

arr.indexOf(item, from) 从索引 from 开始搜索 item,如果找到则返回索引,否则返回 -1。

arr.lastIndexOf(item, from) —— 和上面相同,只是从右向左搜索。

arr.includes(item, from) —— 从索引 from 开始搜索 item,如果找到则返回 true(译注:如果没找到,则返回 false)。

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1

alert( arr.indexOf(false) ); // 2

alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

请注意,这些方法使用的是严格相等 === 比较。所以如果我们搜索 false,会精确到的确是 false 而不是数字 0。

如果我们想检查是否包含某个元素,并且不想知道确切的索引,那么 arr.includes 是首选。

此外,includes 的一个非常小的差别是它能正确处理NaN,而不像 indexOf/lastIndexOf:

const arr = [NaN];

alert( arr.indexOf(NaN) ); // -1(应该为 0,但是严格相等 === equality 对 NaN 无效)

alert( arr.includes(NaN) );// true(这个结果是对的)

find 和 findIndex

let result = arr.find(function(item,index,array) { 

 // 如果返回 true,则返回 item 并停止迭代 

 // 对于假值(falsy)的情况,则返回 undefined

});

如果它返回 true,则搜索停止,并返回 item。如果没有搜索到,则返回 undefined

arr.findIndex 方法(与 arr.find 方法)基本上是一样的,但它返回找到元素的索引,而不是元素本身。并且在未找到任何内容时返回 -1。

6、sort

let arr = [ 1, 2, 15 ];

arr.sort(function(a,b) { return a - b; });

alert(arr); //1, 2, 15

7、arr.reverse 方法用于颠倒 arr 中元素的顺序。

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

arr.reverse();

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

8、split和join

let str = "test";

alert( str.split('') ); // t,e,s,t 字符串拆为字母数组

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // 使用分号 ; 将数组粘合成字符串

alert( str ); // Bilbo;Gandalf;Nazgul

9、reduce/reduceRight 它们用于根据数组计算单个值。

let value = arr.reduce(function(accumulator,item,index,array) { 

 // ...

}, [initial]);

accumulator —— 是上一个函数调用的结果,第一次等于 initial(如果提供了 initial 的话)。

item —— 当前的数组元素。

index —— 当前索引。

arr —— 数组本身。

initial —— 初始值

应用函数时,上一个函数调用的结果将作为第一个参数传递给下一个函数。

因此,第一个参数本质上是累加器,用于存储所有先前执行的组合结果。最后,它成为 reduce 的结果。

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

let result = arr.reduce((sum,current) => sum + current, 0);

alert(result); // 15

arr.reduceRight 和 arr.reduce 方法的功能一样,只是遍历为从右到左。

let arr = [];

// Error: Reduce of empty array with no initial value

// 如果初始值存在,则 reduce 将为空 arr 返回它(即这个初始值)。

arr.reduce((sum, current) => sum + current, 10);

所以建议始终指定初始值。

10、Array.isArray

数组是基于对象的,不构成单独的语言类型。

所以 typeof 不能帮助从数组中区分出普通对象

alert(typeof {}); // object

alert(typeof []); // object

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

11、function camelize(str) {

    return str.split('-').map((item, index) => {

      return index === 0 ? item : item[0].toUpperCase()+item.slice(1)

    }).join('')

  }

  console.log(camelize('background-color')) // backgroundColor

  console.log(camelize('list-style-image')) // listStyleImage

  console.log(camelize('-webkit-transition')) // WebkitTransition

12、类数组array-like有索引和length属性的对象,所以看起来很像数组

let arrayLike = { 

// 有索引和 length 属性 => 类数组对象

 0: "Hello", 

 1: "World", 

 length: 2

};

// Error (no Symbol.iterator)

for(letitemofarrayLike){}

可迭代对象和类数组对象通常都 不是数组,它们没有 push 和 pop 等方法。

13、Array.from

有一个全局方法 Array.from 可以接受一个可迭代或类数组的值,并从中获取一个“真正的”数组。然后我们就可以对其调用数组方法了。

let arrayLike = { 

 0: "Hello", 

 1: "World",

 length: 2};

let arr = Array.from(arrayLike);// (*)

alert(arr.pop()); // World(pop 方法有效)

console.log(arr) // ['Hello', 'World']

let str = 'xy';// 将 str 拆分为字符数组

let chars = Array.from(str);

alert(chars[0]); // x

alert(chars[1]); // y

alert(chars.length); // 2

Array.from与split方法不同,它依赖于字符串的可迭代性,因此就i像for...of一样,可以正确的处理代理对。

其实Array.from就跟下面一些代码做着同样的事:

let str = 'xy'

let chars = []

for (let char of str) {

  chars.push(char)

}

console.log(chars) // ['x','y']

14、可以应用 for..of 的对象被称为 可迭代的,Symbol.iterator 方法会被 for..of 自动调用,但我们也可以直接调用它。

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

推荐阅读更多精彩内容