js中操作数组的方法

    时隔一个月，一直在忙，今天就抽空总结下js中操作数组的方法。最后几条是重点！

1、锁定数组的长度 Object.defineProperty方法（让数组的长度变成只读）。

  这个属性方法是Vue的核心方法，今天就放在第一个了解，他可以使数组长度只读，数组内容可以修改,但是如果方法改变数组长度，例如push，pop等，就会报：Cannot assign to read only property 'length' of object '[object Array]' [](javascript:;)无法分配对象“对象数组”的只读属性“长度”这个错误。

var a = [1,2,3]  //定义一个数组
Object.defineProperty(a,"length",{
   writable:false
})  //将a数组的长度属性设为只读
a.length = 0  //将a的长度改为0
console.log(a.length);  //打印a数组的长度，还是3

2、Array.join()方法，返回一个字符串

  和分割字符串split方法很像，和String的split()方法是一个相反的操作。join方法可以把数组中的所有元素放入一个字符串，并且不改变原数组。join("#")括号里面#可以写任意字符，作为分割符。

var a = [1,2,3];
var b = a.join("");
var c = a.join("##");
console.log(a); //[1, 2, 3],原数组不改变
console.log(b); //"123",变成字符串
console.log(c); //"1##2##3",变成字符串

3、Array.reverse()方法，返回逆序数组

var a = ['我','是','中','国','人'];
a.reverse();
console.log(a); //直接改变a数组的值 返回的是["人", "国", "中", "是", "我"];

4、Array.sort()方法，返回排序后的数组。如果数组包含undefined，会被排到数组的尾部。如果不带参数的调用sort()，数组元素以字母表顺序排序

// 从大到小
var a = [2,33,1111,444];        
a.sort()             
console.log(a); //返回的结果是[1111, 2, 33, 444]

// 从小到大
var a = [2,33,1111,444];             
a.sort(function (a,b) {
    return a-b
})         
console.log(a); //[2, 33, 444, 1111]

5、Array.concat()连接两个数组,创建并返回一个新数组

var a = [1,2,3];             
var b = a.concat(4,5);             
var c = a.concat([4,5]);
console.log(a); //返回的还是[1,2,3]
console.log(b); //返回[1,2,3,4,5]
console.log(c);  //返回[1,2,3,4,5]

6、Array.slice()方法，返回指定数组的片段或者子数组，不会改变原数组

var a = [1,2,3,4,5];

a.slice(0,3); //返回[1,2,3] 第一个参数是截取开始的位置（包括），第二个参数是截取结束的位置（不包括）
             
a.slice(3); //返回[4,5]
             
a.slice(1,-1); //返回[2,3,4] 负数表示倒数
             
console.log(a); //返回[1,2,3,4,5]

7、Array.splice()方法，用来删除或插入元素，会修改原数组

var a = [1,2,3,4,5,6,7,8];
             
var b = a.splice(1,2); //第一个参数是截取的起始位置（包括），第二个参数是截取的个数，之后的参数就是添加在元数组的新值
             
console.log(a); //返回[1, 4, 5, 6, 7, 8]
             
console.log(b); //返回[2, 3]

8、push()方法与pop()方法

  push()方法在数组的尾部添加一个或者多个元素，并返回数组的新长度。注意的是，改变的是原数组的值，返回的是新数组的长度。

  pop()方法删除数组的最后一个元素，并返回它的删除值。也是改变原数组，返回的是删除的值。

9、unshift()方法与shift()方法

  unshift()方法类似于push()不同的是，他是在数组头部添加，其他都一样

  shift()移除数组中的第一项并返回该项。

10、toString()和toLocaleString()

toString()方法将每个元素转化为字符串，类似于不传参的join()方法。

toLocaleString()方法是toString()的本地化版本。

11、filter（过滤，返回符合条件过滤后的数组）

var a = [1,2,3,4,5];
             
var b = a.filter(function (value) {
    return value > 3
})
             
console.log(b); //返回[4,5]

12、map （返回操作后的数组，和forEach()类似）

var a = [1,2,3,4,5];
             
var b = a.map(function (value) {
    return value+1
})
             
console.log(b); //返回[2,3,4,5,6]

13、includes （判断数组中是否有某个值，返回布尔）

var a = [1,2,3,4,5];
console.log(a.includes(1)) // true

14、find （找到某个值，返回的是找到的值）


/**
array.find(function(currentValue, index, arr),thisValue)
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
thisValue  可选。 传递给函数的值一般用 "this" 值。
如果这个参数为空，“undefined”会传给“this”值
*/

var a = [1,2,3,4,5];
a.find(function(val){
  console.log(val>3)
})

15、every （判断数组是否都符合条件，返回布尔）

只有数组中所有元素都满足某个条件才会返回true；

var a = [1,2,3,4,5];
           
a.every(function (value) {
    return value < 10
}) //true

16、some （找到某个值返回布尔）

只要有满足条件的值，就返回true。

var a = [1,2,3,4,5];

a.every(function (value) {
    return value % 2 === 0
}) //false

17、reduce （参数：prev，next，index，arr原数组）常用于数组求和

callback （执行数组中每个值的函数，包含四个参数）

    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）


// 计算商品中价格
let sum1 = [{price:30,count:2},{price:40,count:3},{price:30,count:4}].reduce(function(prev, next) {
  return prev+next.price*next.count
},0) // 默认指定第一次的prev
console.log(sum1)  // 300

// 将多维数组转化为一维数组
let flat = [[1,2,3],[4,5,6],[7,8,9]].reduce(function(prev, next){
  return prev.concat(next);
})
console.log(flat) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

就总结到这里了。

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