JavaScript数组方法--slice、sort、splice

数组常用方法应该只剩下最后这哥仨了,他们都是最早的ECMA-262标准的方法,结果写着写着,居然把他们写到最后了。

  • slice:slice() 方法返回一个新的数组对象,这一对象是一个由 begin和 end(不包括end)决定的原数组的浅拷贝。原始数组不会被改变。

先看定义,其实该方法就是对原数组实现浅拷贝。从定义上也可以看出来,他需要两个参数,决定拷贝原数组当中从begin到end的元素。

简单的看一下使用方法(一定要注意:浅拷贝):

var animals = [‘ant‘, ‘bison‘, ‘camel‘, ‘duck‘, ‘elephant‘];
console.log(animals.slice(2));
console.log(animals.slice(2, 4));
console.log(animals.slice(1, 5));

输出结果呢?

对照一下定义:
  animals.slice(2)输出的是元素当中2、3、4位置的元素,就是说不存在end参数的话,拷贝到最后一个元素;

  animals.slice(2,4)输出的是元素当中2、3位置的元素,不包括end位置;

  animals.slice(1,5)输出的是元素当中1、2、3、4位置的元素,依然不包括end位置。

语法:

arr.slice([begin, [end]]);

  也就是说begin和end两个参数都是可选的,如果值为负数,则相当于倒数。

  既然如此,重构一下吧!

function slice(arr, begin, end) {
  if (!(arr instanceof Array)) throw new Error("请确保第一个参数类型为数组")
  var results = []
  begin = begin || 0
  end = end || arr.length
  if (begin < 0) begin += arr.length      // 如果begin < 0, begin = 数组长度+begin
  if (begin < 0) begin = 0                // 如果还小于0, 则直接修正为0
  if (end < 0) end += arr.length          // 如果end < 0, end = 数组长度+end
  if (end > arr.length) end = arr.length  // 如果end > 数组长度, end = 数组长度
  for (var i = begin; i < end; i++) {
    results[results.length] = arr[i]
  }
  return results
}

其实,任何方法,如果真的理解该方法了,重构也真没什么困难的!

  • sort:sort() 方法用原地算法对数组的元素进行排序,并返回数组。排序算法现在是稳定的。默认排序顺序是根据字符串Unicode码点。

关于算法,这个可真没什么发言权,完全不懂,只能做一个简单的冒泡排序。

先看一下sort的用法吧!

var months = [‘March‘, ‘Jan‘, ‘Feb‘, ‘Dec‘];
months.sort();
console.log(months);
var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);

  结果:

第一个好理解,数组array1的排序结果是不是错了?事实上并没有,因为sort默认顺序是字符串Unicode码点,即使你所有元素是数字,如果不指定排序方法,他也是按照字符串Unicode码点来排序的。这就引出了sort的参数compareFunction

arr.sort([compareFunction])

  

也就是说compareFunction也需要两个参数,firstEl和secondEl,依赖比较函数的返回结果决定是升序还是降序排列。如果compareFunction(firstEl,secondEl)< 0的话升序,反之降序。

直接重构吧!

function sort (arr, fn) {
    if (!(arr instanceof Array)) throw new Error("请传入数组类型的参数")
    if (!fn) {
      // 定义默认
      fn = function (a, b) { return a - b }
    }
    // 判断是否全都为数字
    let isAllNumber = true
    for (let i = 0; i < arr.length; i++) {
      isAllNumber = typeof arr[i] === "number"
      if (!isAllNumber) break
    }
    if (!isAllNumber) {
      // 如果有非数字元素,按Unicode码点升序
      fn = function (a, b) {
        return "" + a > "" + b
      }
    }
    // 冒泡排序
    for (let i = 0; i < arr.length - 1; i++) {
      for (let j = 0; j < arr.length - 1 - i; j++) {
        let bool = isAllNumber ? (fn(arr[j], arr[j + 1]) > 0) : fn(arr[j], arr[j + 1])
        if (bool) {
          let temp = arr[j + 1]
          arr[j + 1] = arr[j]
          arr[j] = temp
        }
      }
    }
    return arr
  }

不多说。

  • splice:splice() 方法通过删除或替换现有元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

数组常用方法当中最后一个,也是非常非常重要的一个方法。

该方法可以添加、删除、替换数组当中的元素,判断的方法,就是传递的参数。

var months = [‘Jan‘, ‘March‘, ‘April‘, ‘June‘];
months.splice(1, 0, ‘Feb‘);
console.log(months);
months.splice(4, 1, ‘May‘);
console.log(months);
var fruits = [‘apple‘, ‘orange‘, ‘pear‘]
fruits.splice(2,1)
console.log(fruits)

结果:

看出什么了?

months.splice(1, 0, ‘Feb‘): 是在months数组的索引为1的位置插入了元素‘Feb‘

months.splice(4, 1, ‘May‘):是将months数组的索引为4的位置的元素替换成了‘May‘

fruits.splice(2,1):是将fruits数组的索引为2的元素删除

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

 参数start,决定了我们的操作从数组当中哪个位置开始。

参数deleteCount,决定了将要从start开始删除几个元素,如果是0,表示不删除元素。

 参数item1……,决定了删除deleteCount个元素后在插入什么元素。

  也就是说从start位置删除deleteCount个元素,再插入item1...等元素,这完全依赖于后续的参数。返回由从start开始到 end = start+deleteCount, 不包含end位置的元素所组成的新的数组。

function splice (arr, start, deleteCount) {
    if (!(arr instanceof Array)) throw new Error("请确保第一个参数类型为数组")
    start = start || 0
    var rest = []
    for (var j = 3; j < arguments.length; j++) {
      rest[rest.length] = arguments[j]
    }
    var results = []
    // 修正起始位置   小于0的话,就加上数组长度,如果还小于0,修正为0   大于数组长度的话 就修正为数组长度
    start = start < 0 ?
      (start + arr.length < 0 ? 0 : start + arr.length) :
      (start > arr.length ? arr.length : start)
    // 如果deleteCount数值过大,则修正为从起始位置到数组结尾的长度
    if (deleteCount > (arr.length - start)) { deleteCount = arr.length - start }
    // 获取删除的元素,并组成新的数组实例
    for (var i = start; i < (start + deleteCount); i++) {
      results[results.length] = arr[i]
    }
    // 元素删除之后,将所有数组元素响应的前置
    for (var i = start + deleteCount; i < arr.length; i++) {
      arr[i - deleteCount] = arr[i]
    }
    // 修正数组长度
    arr.length = arr.length - deleteCount
    // 将添加的元素填充到对应位置
    for (var i = rest.length - 1; i >= 0; i--) {
      for (var j = arr.length; j > start; j--) {
        arr[j] = arr[j - 1]
      }
      arr[start] = rest[i]
    }
    return results
  }

有点复杂吧!其实只要理解了splice方法,下面也就是重构的代码实现了,为什么会这么复杂,主要是splice方法可以做的工作有点多了,导致重构的代码量变大。

原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/10696689.html

时间: 2024-10-08 14:52:12

JavaScript数组方法--slice、sort、splice的相关文章

JavaScript数组方法详解

JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中原型上的方法,本文举例介绍了从ES3到ES7几乎所有的数组方法.这大概是最全的数组方法详解了.希望读者能从中有所收获. 一.各版本数组方法一览表 数组方法名 对应版本 功能 原数组是否改变 pop() ES3- 删除最后一位,并返回删除的数据 是 push() ES3- 在最后一位新增一或多个数据,

JavaScript数组方法对比(深度学习数组)

JavaScript数组方法对比 众所周知,JavaScript提供了许多对数组进行改变的方法,但是有些会对原数组进行影响,有些不会.下边就列举出来. 一.新增 影响原数组 array.push()  //向数组的末尾添加一个或更多元素,并返回新的长度. var array =[1,2,3,4,5]; array.push(6); // [1,2,3,4,5,6]; array.unshift() //向数组的开头添加一个或更多元素,并返回新的长度. var array =[1,2,3,4,5]

关于数组的 slice() 和 splice() 方法

slice() 是创建一个新的数组(所以不能 array.slcie(1,4)这样用 必须 var a = array.slice(1,4) 这样赋给一个变量吗? ),并且这个例子的返回值是 数组的 1 到 3(没有4)项 splice() 是在原数组上进行操作,因此可以是 array.splice(1,4) 也可以是 var a = array.splice(1,4) 但是要注意,splice的(1,4) 中的 1 和 slice(1,4) 的 1 含义相同,都表示从 数组索引为1开始,但是

Javascript数组方法探究一二

1. Array.prototype.slice方法 数组的 slice 方法通常用来从一个数组中抽取片断.不过,它还有将“类数组”(比如arguments和?HTMLCollection?)转换为真正数组的本领. 1 var nodesArr = Array.prototype.slice.call(document.forms); 2 3 var argsArr = Array.prototype.slice.call(arguments); 我就好奇了为什么数组的slice方法有这样的本领

JavaScript数组方法总结

由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaScript教程的整理,具体内容如下: 一.普通方法 1.join() 将数组元素连接在一起,并以字符串形式返回参数:可选,指定元素之间的分隔符,没有参数则默认为逗号返回值:字符串对原数组的影响:无2.reverse()将数组的元素顺序变成倒序返回参数:无返回值:数组对原数组的影响:原数组被修改为倒序排列之后的数组3.sort()对数组元素进行排序并返回参数:可选,排序的方法函数,没有

javascript数组方法

javascript有许多数组方法,今天整理了一下: var a=[1,2,3]; a.join();//将数组中所有元素都转化为字符串并连接在一起,参数作为分隔符. a.reverse();//将数组中的元素点到顺序,返回逆序数组. a.sort();//将数组中的元素排序并返回排序后的数组. a.concat();//创建并返回一个新数组,其中返回数组包括a中元素和参数. a.slice();//方法返回制定数组的一个片段或子数组,通过下标作为参数截取. a.splice();//在数组中插

JavaScript中的slice() 和 splice()

slice() 和 splice() 是 JavaScript 中 Array 对象原型的两个方法,由于方法名很相像,经常会记混两者的作用,下面来做一个明确的区分. 1.slice(start[, end]): 从数组中取元素,返回取出的子数组,对原数组无影响.其中,start 参数必填,表示取元素的起始位置:end 参数可选,表示取元素的终止位置,但不包含 array[end] 元素(可以理解为最终取出的数组中元素有 end -start 个),如果 end 为空,则默认为array.leng

JavaScript数组方法整理

原文链接:https://www.cnblogs.com/zyfeng/p/10541133.html 整理了以下数组方法 join() push()和pop() shift() 和 unshift() sort() reverse() concat() slice() splice() indexOf()和 lastIndexOf() (ES5新增) forEach() (ES5新增) map() (ES5新增) filter() (ES5新增) every() (ES5新增) some()

JavaScript - 数组方法应用

数组方法应用 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">