数组常用方法

# Array 对象方法

方法 描述
concat() (opens new window) 连接两个或更多的数组,并返回结果。
join() (opens new window) 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() (opens new window) 删除并返回数组的最后一个元素
push() (opens new window) 向数组的末尾添加一个或更多元素,并返回新的长度。
reverse() (opens new window) 颠倒数组中元素的顺序。
shift() (opens new window) 删除并返回数组的第一个元素
slice() (opens new window) 从某个已有的数组返回选定的元素
sort() (opens new window) 对数组的元素进行排序
splice() (opens new window) 删除元素,并向数组添加新元素。
toSource() (opens new window) 返回该对象的源代码。
toString() (opens new window) 把数组转换为字符串,并返回结果。
toLocaleString() (opens new window) 把数组转换为本地数组,并返回结果。
unshift() (opens new window) 向数组的开头添加一个或更多元素,并返回新的长度。
valueOf() (opens new window) 返回数组对象的原始值

# splice的使用

可以用来替换/删除/添加数组内某一个或者几个值(该方法会改变原始数组)

# 参数说明

index:数组开始下标

len: 替换/删除的长度

item:替换的值,删除操作的话 item为空

# 删除

//删除起始下标为1,长度为1的一个值(len设置1,如果为0,则数组不变)
var arr = ['a','b','c','d'];
arr.splice(1,1);
console.log(arr);  
//['a','c','d']; 

//删除起始下标为1,长度为2的一个值(len设置2)
var arr2 = ['a','b','c','d']
arr2.splice(1,2);
console.log(arr2); 
//['a','d']
1
2
3
4
5
6
7
8
9
10
11

# 替换/修改

//替换起始下标为1,长度为1的一个值为‘ttt’,len设置的1
var arr = ['a','b','c','d'];
arr.splice(1,1,'ttt');
console.log(arr);     
//['a','ttt','c','d'] 

//替换起始下标为1,长度为2的两个值为‘ttt’,len设置的1
var arr2 = ['a','b','c','d'];
arr2.splice(1,2,'ttt');
console.log(arr2);    
//['a','ttt','d'] 
1
2
3
4
5
6
7
8
9
10
11

结合vue中的使用;

  sockets: {
    sRoutes: function(value) {
       // this.data = value
      const index = this.data.findIndex( item => value.id === item.id)
      // this.$set(this.data, index, value)
      if (index >= 0) {
        this.data.splice(index, 1, value)
      }
    }
  },
1
2
3
4
5
6
7
8
9
10

# 添加

//在下标为1处添加一项'ttt'
var arr = ['a','b','c','d'];
arr.splice(1,0,'ttt');
console.log(arr);     
//['a','ttt','b','c','d'] 
1
2
3
4
5

# 数组slice, splice的区别

# slice

定义:接收一个或两个参数,它可以创建一个由当前数组中的一项或多项组成的新数组,注意是新数组哦~ 也就是说它不会修改原来数组的值。

用法:slice( para1 ),会截取从para1开始的到原数组最后的部分;slice(para1,para2)会截取原数组的从para1开始的para2-para1个数组。

注意:当两个参数中存在负数时,用原数组的长度加上两个负数的参数作为相应的参数来计算。

# splice

定义:强大的数组操作方法

用法 : splice( para1,para2 ) : 删除数组中任意数量的项,从para1开始的para2项。注意的是用splice删除数组中的值会直接将某几项从数组中完全删除,会导致数组length值的改变,这与delete的删除置为undefined是不一样的。

splice( para1,para2,val1,val2… ):项数组中添加和删除项,para1表示可以添加的项数,para2表示删除的项数,后面的变量表示要添加的项的值,注 意是从para1之后开始删除和添加的。

注意 : 参数为负数的问题,如果para1为负数,则会加上数组的长度作为para1的值,而para2为负数或0的话不会执行删除操作。

请注意,splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。

浅复制的slice方法

var args = new Array("Lucas", "Mia", "Emily");
console.log(args.slice(-1)); //[ 'Emily' ]
console.log(args.slice(-2)); //[ 'Mia', 'Emily' ] 3+(-2) =1; 从1开始计算,包括1;
console.log(Array.isArray(args.slice(-1)));//true
console.log(args); //[ 'Lucas', 'Mia', 'Emily' ]
1
2
3
4
5

当使用负数作为参数时就表示从数组末尾开始计数。而当省略第二个可选参数时,表示一直复制到数组末尾。所以使用才slice(-1)可以获取数组的最后一个元素。

注意:slice方法返回值为array类型,不是string

# 字符串截取slice(),substring(),substr()的区别

slice() (opens new window) 提取字符串的片断,并在新的字符串中返回被提取的部分。
small() (opens new window) 使用小字号来显示字符串。
split() (opens new window) 把字符串分割为字符串数组。
strike() (opens new window) 使用删除线来显示字符串。
sub() (opens new window) 把字符串显示为下标。
substr() (opens new window) 从起始索引号提取字符串中指定数目的字符
substring() (opens new window) 提取字符串中两个指定的索引号之间的字符。

# slice()

slice()方法返回一个索引和另一个索引之间的字符串,语法如下:

str.slice(beginIndex[, endIndex]) 跟substring类似功能,也有不同之处;

下面有三点需要注意:

  • beginIndex为负数,则将该值加上字符串长度后再进行计算(如果加上字符串的长度后还是负数,则从0开始截取)
  • 如果beginIndex大于或等于字符串的长度,则slice()返回一个空字符串。
  • 如果endIndex省略,则将slice()字符提取到字符串的末尾。如果为负,它被视为strLength + endIndex其中strLength是字符串的长度。

以下是一些示例代码:

var str = 'abcdefghij';
console.log('(1, 2): '   + str.slice(1, 2));   // '(1, 2): b'
console.log('(-3, 2): '  + str.slice(-3, 2));  // '(-3, 2): '
console.log('(-3): '     + str.slice(-3));     // '(-3): hij'
console.log('(1): '      + str.slice(1));      // '(1): bcdefghij'
console.log('(-20, 2): ' + str.slice(-20, 2)); // '(-20, 2): ab'
console.log('(-3,-1): ' + str.slice(-3, -1));     // '(-3,-1): hi'
console.log('(0,-1): '  + str.slice(0, -1));     // '(0,-1): abcdefghi'
console.log('(2, 20): '  + str.slice(2, 20));  // '(2, 20): cdefghij'
console.log('(20, 2): '  + str.slice(20, 2));  // '(20, 2): '

console.log('(-3, 9): '  + str.slice(-3, 9));  // '(-3, 9): hi'
1
2
3
4
5
6
7
8
9
10
11
12

# substring()

substring()方法返回一个索引和另一个索引之间的字符串,语法如下:

str.substring(indexStart, [indexEnd])

下面有六点需要注意:

  • substring()从提取的字符indexStart可达但不包括 indexEnd
  • 如果indexStart 等于indexEnd,substring()返回一个空字符串。
  • 如果indexEnd省略,则将substring()字符提取到字符串的末尾。
  • 如果任一参数小于0或是NaN,它被视为为0。 和slice的不同之处;
  • 如果任何一个参数都大于stringName.length,则被视为是stringName.length。
  • 如果indexStart大于indexEnd,那么效果substring()就好像这两个论点被交换了一样; 例如,str.substring(1, 0) == str.substring(0, 1)

以下是一些示例代码:

var str = 'abcdefghij';
console.log('(1, 2): '   + str.substring(1, 2));   // '(1, 2): b'
console.log('(-3, 2): '  + str.substring(-3, 2));  // '(-3, 2): ab'
console.log('(-3): '     + str.substring(-3));     // '(-3): abcdefghij'
console.log('(1): '      + str.substring(1));      // '(1): bcdefghij'
console.log('(-20, 2): ' + str.substring(-20, 2)); // '(-20, 2): ab'
console.log('(2, 20): '  + str.substring(2, 20));  // '(2, 20): cdefghij'
console.log('(20, 2): '  + str.substring(20, 2));  // '(20, 2): cdefghij'
1
2
3
4
5
6
7
8

# substr()

substr()方法返回从指定位置开始的字符串中指定字符数的字符,语法如下:

str.substr(start, [length])

下面有四点需要注意:

  • substr()会从start获取长度为length字符(如果截取到字符串的末尾,则会停止截取)。
  • 如果start是正的并且大于或等于字符串的长度,则substr()返回一个空字符串。
  • start为负数,则将该值加上字符串长度后再进行计算(如果加上字符串的长度后还是负数,则从0开始截取)。
  • 如果length为0或为负数,substr()返回一个空字符串。如果length省略,则将substr()字符提取到字符串的末尾。

以下是一些示例代码:

var str = 'abcdefghij';
console.log('(1, 2): '   + str.substr(1, 2));   // '(1, 2): bc'
console.log('(-3, 2): '  + str.substr(-3, 2));  // '(-3, 2): hi'
console.log('(-3): '     + str.substr(-3));     // '(-3): hij'
console.log('(1): '      + str.substr(1));      // '(1): bcdefghij'
console.log('(-20, 2): ' + str.substr(-20, 2)); // '(-20, 2): ab'
console.log('(20, 2): '  + str.substr(20, 2));  // '(20, 2): '
1
2
3
4
5
6
7

需要注意的是,Microsoft的JScript不支持起始索引的负值。如果要使用此功能,可以使用以下兼容性代码来解决此错误:

// only run when the substr() function is broken
if ('ab'.substr(-1) != 'b') {
  String.prototype.substr = function(substr) {
    return function(start, length) {
      return substr.call(this,start < 0 ? this.length + start : start, length)
    }
  }(String.prototype.substr);
}
1
2
3
4
5
6
7
8

# substring()与substr()的主要区别

  • substring()方法的参数表示起始和结束索引;
  • substr()方法的参数表示起始索引和要包含在生成的字符串中的字符的长度;

示例如下:

var text = 'Mozilla';
console.log(text.substring(2, 5)); // => "zil"
console.log(text.substr(2, 3)); // => "zil"

console.log(text.slice(2, 5)); // => "zil"
console.log(text.slice(2, 3)); // => "z"
// substring 跟 slice 类似操作
1
2
3
4
5
6
7

# 获取数组最后一个元素

javascript获取数组最后一个元素,js获取Array末尾元素

# pop() 方法

pop() 方法用于删除并返回数组的最后一个元素。

var arr = new Array("js","JavaScript","jQuery");
var end = arr.pop()
console.log(end);//jQuery
console.log(arr);//["js", "JavaScript"]
1
2
3
4

注意: pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。

基于解构数组使用pop方法不会改变数组本身。

# 数组的 length 属性

var arr = new Array("js","JavaScript","jQuery");
var end = arr[arr.length-1]
console.log(end);//jQuery
1
2
3

# slice() 方法

var arr = new Array("js","JavaScript","jQuery");
var end = arr.slice(-1);
console.log(end);//["jQuery"]
1
2
3

slice() 方法可从已有的数组中返回选定的元素。

但是返回的数据类型是 array 不是 string 这点要注意一下!

上次更新: 2022/04/15, 05:41:27
×