最新数组方法(含ES6)

  1. arr.push() 从后面添加元素,返回值 为添加完后的数组的长度
let arr = [1,2,3,4,5] 
console.log(arr.push(5))    //6
console.log(arr)            //[1,2,3,4,5,5]
  1. arr.pop() 从后面删除元素,只能删一个,返回值是删除的元素
let arr = [1,2,3,4,0]
console.log(arr.pop())      //0
console.log(arr)            //[1,2,3,4]
  1. arr.shift() 从前面删除元素,只能删除一个, 返回值是删除的元素
let arr = [1,2,3,4,5]
console.log(arr.shift())  // 1
console.log(arr)   // [2,3,4,5]
  1. arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度
let arr = [1,2,3,4,5]
console.log(arr.unshift(2))    // 6
console.log(arr)  //[2,1,2,3,4,5]
  1. arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素
// 参数: i  索引值     n 个数
let arr = [1,2,3,4,5]
console.log(arr.splice(2,2))     //[3,4]
console.log(arr)    // [1,2,5]
  1. arr.concat() 连接两个数组返回值为连接后的新数组
let arr = [1,2,3,4,5]
console.log(arr.concat([1,2]))  // [1,2,3,4,5,1,2]
console.log(arr)   // [1,2,3,4,5]
  1. str.split() 将字符串转化为数组
let str = '123456'
console.log(str.split('')) // ["1", "2", "3", "4", "5", "6"]
  1. arr.sort() 将数组进行排序,返回值是排好的数组,默认是按照最左边的数字进行排序,不是按照数字大小排序的,见例子。
let arr = [2,10,6,1,4,22,3]
console.log(arr.sort())   // [1, 10, 2, 22, 3, 4, 6]
let arr1 = arr.sort((a, b) =>a - b)  
console.log(arr1)   // [1, 2, 3, 4, 6, 10, 22]
let arr2 = arr.sort((a, b) =>b - a)  
console.log(arr2)  // [22, 10, 6, 4, 3, 2, 1]
  1. arr.reverse() 将数组反转,返回值是反转后的数组
let arr = [1,2,3,4,5]
console.log(arr.reverse())    // [5,4,3,2,1]
console.log(arr)    // [5,4,3,2,1]
  1. arr.slice(start,end) 切去索引值start到索引值end的数组,不包含end索引的值,返回值是切出来的数组,原数组arr保持不变
let arr = [1,2,3,4,5]
console.log(arr.slice(1,3))   // [2,3]
console.log(arr)    //  [1,2,3,4,5]
  1. arr.forEach(callback(value,index,array)) 遍历数组,无return。

/* 例1
*callback的参数: 
* value    --当前索引的值
* index    --索引
* array    --原数组
**************************/

let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{
    console.log(`value:${value}    index:${index}     array:${array}`)
})  
     
/*
//value:1    index:0     array:1,2,3,4,5
//value:2    index:1     array:1,2,3,4,5
//value:3    index:2     array:1,2,3,4,5
//value:4    index:3     array:1,2,3,4,5
//value:5    index:4     array:1,2,3,4,5 
*/
/* 例2 */
let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{
    value = value * 2
    console.log(`value:${value}    index:${index}     array:${array}`)
})   
console.log(arr)

// value:2    index:0     array:1,2,3,4,5
// value:4    index:1     array:1,2,3,4,5
// value:6    index:2     array:1,2,3,4,5
// value:8    index:3     array:1,2,3,4,5
// value:10   index:4     array:1,2,3,4,5
// [1, 2, 3, 4, 5]

/* 例3 */
let arr = [1,2,3,4]; 
let res = arr.forEach((value,index,arr)=>{     
 arr[index] = value * 2; 
 return arr 
})
console.log(arr); // [2,4,6,8],原数组发生了改变
console.log(res); // undefined 
  1. arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组
/* callback的参数: 
* value    --当前索引的值
* index    --索引
* array    --原数组
**************************/

let arr = [1,2,3,4,5]
arr.map( (value,index,array)=>{
    value = value * 2
    console.log(`value:${value}    index:${index}     array:${array}`)
})   
console.log(arr)

//value:2    index:0     array:1,2,3,4,5
//value:4    index:1     array:1,2,3,4,5
//value:6    index:2     array:1,2,3,4,5
//value:8    index:3     array:1,2,3,4,5
//value:10   index:4     array:1,2,3,4,5
//[1, 2, 3, 4, 5]
let arr1 = [1,2,3,4]; 
let res1 = arr1.map((value,index,arr)=>{ 
 value = value * 3; 
 return value; 
})
console.log(arr1); // [1,2,3,4]
console.log(res1); // [3,6,9,12]为新数组

array.forEach()和array.map()区别

(1) 相同点:

  • 都是数组的方法;
  • 都是用来遍历数组;
  • 匿名函数都有四个参数:value,index,array,this(默认指向window)
  • 不会改变原数组。
  • map中可改变原数组的情况和原理与forEach相同。forEach()的例3采用设值的方式改变了原数组。String,Number,Boolean,Undefined,Null是存在于栈内存中的,在栈内存中储存变量名及相应的值。而Object,Array,Function存在于堆内存中,在堆内存中储存变量名及引用位置。

(2) 不同点

  • forEach()没有返回值,map()返回原数组
  1. arr.filter(callback) 过滤数组,返回一个满足要求的数组
/* callback的参数: 
*value    --当前索引的值
*index    --索引
*array    --原数组
**************************/

let arr = [1,2,3,4,5]
let arr1 = arr.filter( (i, v) => i < 3)
console.log(arr1)    // [1, 2]
  1. arr.every(callback) 依据判断条件,数组的元素是否全满足,若满足则返回ture
let arr = [1,2,3,4,5]
let arr1 = arr.every( (i, v) => i < 3)
console.log(arr1)    // false
let arr2 = arr.every( (i, v) => i < 10)
console.log(arr2)    // true
  1. arr.some() 依据判断条件,数组的元素是否有一个满足,若有一个满足则返回ture
let arr = [1,2,3,4,5]
let arr1 = arr.some( (i, v) => i < 3)
console.log(arr1)    // true
let arr2 = arr.some( (i, v) => i > 10)
console.log(arr2)    // false
  1. arr.reduce(callback, initialValue) 迭代数组的所有项,累加器,数组中的每个值(从左到右)合并,最终计算为一个值
/*
* callback的参数:  
* previousValue:必选--上一次调用回调返回的值,* 或者是提供的初始值(initialValue)
* currentValue:必选 --数组中当前被处理的数组项
* index:可选 --当前数组项在数组中的索引值
* array:  可选 --原数组
* initialValue:  可选 --初始值
* 实行方法:回调函数第一次执行时,preValue 和 curValue 可以是一个值,如果 initialValue 在调用 reduce() 时被提供,那么第一个 preValue 等于 initialValue ,并且curValue 等于数组中的第一个值;如果initialValue 未被提供,那么preValue 等于数组中的第一个值.
*/
let arr = [0,1,2,3,4]
let arr1 = arr.reduce((preValue, curValue) => 
    preValue + curValue )
console.log(arr1)    // 10
let arr2 = arr.reduce((preValue,curValue)=>preValue + curValue,5)
console.log(arr2)    // 15

  1. arr.reduceRight(callback, initialValue)arr.reduce() 功能一样,不同的是,reduceRight()从数组的末尾向前将数组中的数组项做累加。

实行方法:reduceRight()首次调用回调函数callbackfn时,prevValue 和 curValue 可以是两个值之一。如果调用 reduceRight() 时提供了 initialValue 参数,则 prevValue 等于 initialValue,curValue 等于数组中的最后一个值。如果没有提供 initialValue 参数,则 prevValue 等于数组最后一个值, curValue 等于数组中倒数第二个值。

let arr = [0,1,2,3,4]
let arr1 = arr.reduceRight((preValue, curValue) => preValue + curValue )
console.log(arr1)    // 10

let arr2 = arr.reduceRight((preValue,curValue)=>preValue + curValue,5 )
console.log(arr2)    // 15

(如果对这两个方法不明白,可以查看大漠老师的实例 http://www.w3cplus.com/javascript/array-part-8.html)

  1. arr.indexOf() 查找某个元素的索引值,若有重复的,则返回第一个查到的索引值若不存在,则返回 -1
let arr = [1,2,3,4,5,2]
let arr1 = arr.indexOf(2)
console.log(arr1)  // 1

let arr2 = arr.indexOf(9)
console.log(arr2)  // -1
  1. arr.lastIndexOfarr.indexOf() 的功能一样,不同的是从后往前查找
let arr = [1,2,3,4,5,2]
let arr1 = arr.lastIndexOf(2)
console.log(arr1)  // 5

let arr2 = arr.lastIndexOf(9)
console.log(arr2)  // -1
  1. Array.from() 将伪数组变成数组,就是只要有length的就可以转成数组。
let str = '12345'
console.log(Array.from(str))    // ["1", "2", "3", "4", "5"]

let obj = {0:'a',1:'b',length:2}
console.log(Array.from(obj))   // ["a", "b"]
  1. Array.of() 将一组值转换成数组,类似于声明数组
let str = '11'
console.log(Array.of(str))   // ['11']

// 等价于 

console.log(new Array('11'))  // ['11]

// 但是new Array()有缺点,就是参数问题引起的重载
console.log(new Array(2))   //[empty × 2]  是个空数组
console.log(Array.of(2))    // [2]

22 arr.copyWithin() 在当前数组内部,将制定位置的数组复制到其他位置,会覆盖原数组项,返回当前数组

参数:    target  --必选   索引从该位置开始替换数组项   
start   --可选   索引从该位置开始读取数组项,默认为0.如果为负值,则从右往左读。
end   --可选   索引到该位置停止读取的数组项,默认是Array.length,如果是负值,表示倒数
let arr = [1,2,3,4,5,6,7]
let arr1 = arr.copyWithin(1)
console.log(arr1)   // [1, 1, 2, 3, 4, 5, 6]

let arr2 = arr.copyWithin(1,2)
console.log(arr2)   // [1, 3, 4, 5, 6, 7, 7]

let arr3 = arr.copyWithin(1,2,4)
console.log(arr3)   // [1, 3, 4, 4, 5, 6, 7]
  1. arr.find(callback) 找到第一个符合条件的数组成员
let arr = [1,2,3,4,5,2,4]
let arr1 = arr.find((value, index, array) =>value > 2)
console.log(arr1)   // 3
  1. arr.findIndex(callback) 找到第一个符合条件的数组成员的索引值
let arr = [1,2,3,4,5]
let arr1 = arr.findIndex((value, index, array) => value > 3)
console.log(arr1)  // 3
  1. arr.fill(target, start, end) 使用给定的值,填充一个数组,ps:填充完后会改变原数组

参数: target -- 待填充的元素
start -- 开始填充的位置-索引
end -- 终止填充的位置-索引(不包括该位置)

let arr = [1,2,3,4,5]
let arr1 = arr.fill(5)
console.log(arr1)  // [5, 5, 5, 5, 5]
console.log(arr)   // [5, 5, 5, 5, 5]

let arr2 = arr.fill(5,2)
console.log(arr2)

let arr3 = arr.fill(5,1,3)
console.log(arr3)

26 arr.includes() 判断数中是否包含给定的值

let arr = [1,2,3,4,5]
let arr1 = arr.includes(2)  
console.log(arr1)   // ture

let arr2 = arr.includes(9) 
console.log(arr2)    // false

let arr3 = [1,2,3,NaN].includes(NaN)
console.log(arr3)  // true

ps:与indexOf()的区别:
indexOf()返回的是数值,而includes()返回的是布尔值
indexOf() 不能判断NaN,返回为-1 ,includes()则可以判断

  1. arr.keys() 遍历数组的键名
let arr = [1,2,3,4]
let arr2 = arr.keys()
for (let key of arr2) {
   console.log(key);   // 0,1,2,3
}

28 arr.values() 遍历数组键值

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

推荐阅读更多精彩内容