js数组操作

1、切片 slice()
slice 方法返回一个 Array 对象,参数:start,截取数组开始下标。end截止的下标,但不包括end元素。注意:第二个参数是截止的下标,第一次使用误以为是截取的长度。
用法:一个数组['a','b','c','d','e','f','g','h'],我们需要从d开始节取到最后得到一个新的数组

const arr = ['a','b','c','d','e','f','g','h'];
//注意:第二个元素是截止的下标,不是长度,并且要截取的长度如果超过数组长度的话,会自动截取到数组最后一个元素,
//并不会出现数组越界的情况!!!
newArr = arr.slice(3,8);
console.log(newArr);
// ["d", "e", "f", "g", "h"]

2、splice()

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
// 注释:该方法会改变原始数组。
// arrayObject.splice(index,howmany,item1,.....,itemX)
// 参数说明:
// index    必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
// howmany  必需。要删除的项目数量。如果设置为 0,则不会删除项目。
// item1, ..., itemX    可选。向数组添加的新项目。

const arr2 = ["a", "b", "c", "d", "e", "f"];

2.1、删除第0个元素
// console.log(arr2.splice(0, 1), arr2);  //  ['a'] [  'b', 'c', 'd', 'e', 'f' ]

 2.2、在第0个元素处添加一个新元素,没有删除任何元素
// console.log(arr2.splice(0, 0, 'w'), arr2);  //  [] [ 'w', 'a', 'b', 'c', 'd', 'e', 'f' ]

2.3、在第0个元素处删除元素'a',然后添加一个新元素 'w'
// console.log(arr2.splice(0, 1, 'w'), arr2);  //    [ 'a' ] [ 'w', 'b', 'c', 'd', 'e', 'f' ]

3、split() 用于把一个字符串分割成字符串数组(其实是字符串的方法),与数组的join()方法正好相反

3.1、把字符串分割成字符串数组
const  chars = "abcdefghijklmn".split("");
console.log(chars); // [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n' ]

3.2、取出下面字符串中的code值
const  str = "http://adcfeg.xicp.net:1900/tbid/share.html?#/code=sdedop"
const splitArr = str.split("code=");
console.log(splitArr)
// [ 'http://adcfeg.xicp.net:1900/tbid/share.html?#/', 'sdedop' ]
console.log(splitArr[1])
// 'sdedop'

4、join() 用于把数组中的所有元素放入一个字符串。

// arrayObject.join(separator)
// separator    可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

const arr3 = ["Wind", "Rain", "Fire"];
// console.log(arr3.join('|'));  // Wind|Rain|Fire
// console.log(arr3.join(''));   // WindRainFire
console.log(arr3.join()); // Wind,Rain,Fire

5、map(),基本用法跟forEach()方法类似,即原数组被“映射”成对应新数组,原数组不会被改变,可以对数组对每个元素进行操作,最终返回操作之后对数组。也可以利用每个对象的值创建多个标签元素

5.1 、得到一个数组对每个元素进行平方运算
const data = [1, 2, 3, 4];
const arrayOfSquares = data.map(function (item) {
  return item * item;
});
console.log(arrayOfSquares);
// [ 1, 4, 9, 16 ];

5.2、在实际使用的时候,我们可以利用map方法方便获得对象数组中的特定属性值们,在组装成新的数据格式来使用。
const users = [
    {name: "宁缺", "email": "ningque@email.com"},
    {name: "三师姐",   "email": "shijie@email.com"},
    {name: "叶红鱼",  "email": "yu@email.com"}
  ];
const emails = users.map(user => user.email)
console.log(emails)
//[ 'ningque@email.com', 'shijie@email.com', 'yu@email.com' ]

也可以返回二维数组
const emails = users.map(user => [user.name ,user.email])
console.log(emails)
//  [ [ '宁缺', 'ningque@email.com' ],
//  [ '三师姐', 'shijie@email.com' ],
//  [ '叶红鱼', 'yu@email.com' ] ]

5.3、 返回标签(视图)数组
<View style={styles.container}>
  {
    this.props.data.map(name => {
      return (
        <TouchableOpacity key={name} onPress={() => this.props.onPress(name)}
          style={[isFirst(name) ? first : styles.item, isActive(name) ? styles.itemActive : {}]}>
          <View>
            <Text style={[styles.text, isActive(name) ? {color: '#fff'} : {}]}>{name}</Text>
          </View>
        </TouchableOpacity>
      );
    })
  }
</View>

5.4 、横向打印数组内容,在打印数据的时候比使用循环打印更直观一些,这个是受同事的启发,一时没想起来,其实还是自己掌握的不牢固
let arrA = [10, 3, 4, 12, 2, 6, 11, 9, 33, 15];
console.log(arrA.map(item=>item));
// [ 10, 3, 4, 12, 2, 6, 11, 9, 33, 15 ];

注意: map()函数需要return值,如果没有数组所有项都被映射成undefined。
map() 不会对空数组进行检测
map() 不会改变原始数组。
参考: https://www.cnblogs.com/xuan52rock/p/4460949.html

6 、sort()

let arr1 = [10, 3, 4, 12, 2, 6, 11, 9, 33, 15];
// 使用解构的写法避免原数组arr1被改变
arr2 = [...arr1].sort((data1, data2)=>{
  return data1-data2;
})
console.log("arr1++++", arr1)
console.log("arr2++++", arr2)
// arr1++++ [ 10, 3, 4, 12, 2, 6, 11, 9, 33, 15 ]
// arr2++++ [ 2, 3, 4, 6, 9, 10, 11, 12, 15, 33 ]

假设array.sort((a, b)=>{})
若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。

7、reverse()颠倒数组中元素的顺序

8、pop()删除并返回数组的最后一个元素

9、shift()删除并返回数组的第一个元素

10、unshift()向数组的开头添加一个或更多元素,并返回新的长度

总结: 数组的那些方法会导致原数组改变?push()、pop()、splice()、

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

推荐阅读更多精彩内容

  • 1)concat方法:不会改变原数组,会返回一个拼接后的新数组 2)slice方法:不会改变原数组,会返回一个截取...
    puxiaotaoc阅读 4,762评论 1 14
  • 有空闲时间了, 深入的研究一下js 中的数组方法 js中的数组方法 首先是会改变原数组的方法: shift un...
    淡然7698阅读 315评论 0 0
  • 1.shift() 方法:把数组的第一个元素删除,并返回第一个元素的值 ``` var movePos=[11,2...
    砖头妞妞阅读 189评论 0 2
  • 变异方法:push()、pop()、shift()、unshift()、splice()、sort()、rever...
    笨蛋小明阅读 379评论 0 0
  • 2017-05-08晋瑗紫藤家园2017 从范雨素想到沈从文 育儿嫂范雨素把自己的生命形容为“一本不忍卒读的书”。...
    瑨瑗阅读 1,856评论 0 1