美文网首页
js数组操作

js数组操作

作者: 四月天__ | 来源:发表于2018-11-21 15:51 被阅读17次

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'] [ '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()、

相关文章

  • js笔记

    js数组 删除某个元素 js数组是否含有某个元素 判断value为undefined cookie操作

  • js基础了解

    js数组常用遍历方法使用: js数组常用操作方法使用: 基本逻辑运算: 基本字符串操作方法:

  • JS jsonArray操作

    JS jsonArray操作 js对数组对象的操作以及方法的使用 如何声明创建一个数组对象:var arr = n...

  • JS对象 & JSON & JS数组操作

    JS对象 & JSON & JS数组操作 JSON 格式(JavaScript Object Notation 的...

  • js对象数组操作 数组操作

    var numbers = [1, 2, 3];var newNumbers1 = numbers.map(fun...

  • JS数组操作

    splice 用于一次性解决数组添加、删除(这两种方法一结合就可以达到替换效果),方法有三个参数 开始索引 删除元...

  • JS数组操作

    1.栈方法 push()和pop() 后入先出 push():末尾追加 pop():末尾弹出 2.队列方法 先入先...

  • js 数组操作

    遍历删除元素: 遍历数组:for循环遍历: forEach遍历:

  • js数组操作

    一、改变原数组的方法 a.reverse() 将数组逆序,会修改原数组 a.sort 对数组进行排序, 需要传入自...

  • [js]数组操作

网友评论

      本文标题:js数组操作

      本文链接:https://www.haomeiwen.com/subject/jahmnxtx.html