JavaScript Array原型方法整理(一)

其他 2018-12-23 09:41:06 阅读次数: 0

数组原型方法的分类：

  一、会改变调用它们的对象自身的值

  二、不会改变调用它们的对象自身的值

  三、遍历方法

一、9个会改变调用它们的对象自身的值的方法

pop()：删除数组的最后一个元素，并返回该元素。

var array = ["cat", "dog", "cow", "chicken", "mouse"];
var item = array.pop();
console.log(array); // ["cat", "dog", "cow", "chicken"]
console.log(item); // mouse

[].pop(); // undefined，空数组调用返回undefined

  pop方法可用在类数组对象的处理上，即鸭式辨型。

var o = {0:"cat", 1:"dog", 2:"cow", 3:"chicken", 4:"mouse", length:5}
var item = Array.prototype.pop.call(o);
console.log(o);//{0: "cat", 1: "dog", 2: "cow", 3: "chicken", length: 4}
console.log(item); // mouse


//如果不包含length属性或length属性不能被转成一个数值的话,
//那么会给该对象创建length属性且值为0，但是返回值为undefined，不会进行删除。
var o = {0:"cat", 1:"dog", 2:"cow", 3:"chicken"}
var item = Array.prototype.pop.call(o);
console.log(o); //{0: "cat", 1: "dog", 2: "cow", 3: "chicken", length: 0}
console.log(item); // undefined


//pop方法根据length属性来确定最后一个元素的位置。
var o = {0:"cat", 1:"dog", 2:"cow", 3:"chicken", 4:"mouse", length:3}
var item = Array.prototype.pop.call(o); // cow
console.log(o); // {0: "cat", 1: "dog", 3: "chicken", 4: "mouse", length: 2}

shift()：删除数组的第一个元素，并返回该元素。

var array = [1,2,3,4,5];
var item = array.shift();
console.log(array); // [2,3,4,5]
console.log(item); // 1

[].shift()；// undefined

splice(startIndex, deleteCount, addItem1, addItem2, ...addItemN)

  作用：在任意的位置给数组添加或删除任意元素，返回被删除的元素组成的数组；没有删除时，返回空数组。
  参数：startIndex -> 必选参数，要删除或是添加元素的起始索引位置
             deleteCount -> 可选参数， 要删除的元素个数
             addItemN -> 可选参数，要添加的元素。

var array = ["apple","orange"];
var splices = array.splice(1,1);
console.log(array); // ["apple"]
//由于addItemN缺省,故此时该方法只删除元素
console.log(splices); // ["orange"] 

array = ["apple","orange"];
splices = array.splice(2,1,"cat");
console.log(array); // ["apple", "orange", "cat"]
//由于start超过数组长度,此时从数组末尾开始添加元素,并且原数组不会发生删除行为
console.log(splices); // []

array = ["apple","orange"];
splices = array.splice(-2,1,"cat");
console.log(array); // ["cat", "orange"]
//当start为负值时,是从数组末尾开始的第-start位开始删除一个元素,并在此处插入了一个元素
console.log(splices); // ["apple"]

array = ["apple","orange"];
splices = array.splice(-3,1,"cat");
console.log(array); // ["cat", "orange"]
//即使-start超出数组长度,数组默认从首位开始删除
console.log(splices); // ["apple"]

array = ["apple","orange"];
splices = array.splice(0,3,"cat");
console.log(array); // ["cat"]
//当deleteCount大于数组start之后的元素总和时,start及之后的元素都将被删除
console.log(splices); // ["apple", "orange"]

  删除数组中一个已存在的元素。

var array = ['a','b','c'];
array.splice(array.indexOf('b'),1); //['b']

push(element1, ..., elementN)

  作用：向数组的末尾添加一个或更多元素，并返回数组的新长度。
  参数：elementN -> 被添加到数组末尾的元素，可忽略，则不添加元素。

var array = ["football", "basketball", "volleyball", "Table tennis", "badminton"];
var len = array.push("golfball");
console.log(array); // ["football", "basketball", "volleyball", "Table tennis", "badminton", "golfball"]
console.log(len ); // 6

  push处理类数组对象。

var o = {0:"football", 1:"basketball",length:2};
var len = Array.prototype.push.call(o, "golfball");
console.log(o); // {0: "football", 1: "basketball", 2: "golfball", length: 3}
   

//如果length属性或length属性不能被转成一个数值的话，
//那么会给该对象创建length属性，插入元素索引为0，并会覆盖掉索引上原来的值，
//而length值最终为添加的元素个数。
var o = {0:"football", 1:"basketball"};
var len = Array.prototype.push.call(o, "golfball");
console.log(o); // {0: "golfball", 1: "basketball", length: 1}
   

//实际上，push方法是根据length属性来决定从哪里开始插入给定的值。
var o = {0:"football", 1:"basketball",length:3};
var len = Array.prototype.push.call(o,"golfball");
console.log(o); // {0: "football", 1: "basketball",3:"golfball", length: 4}

   
//利用push根据length属性插入元素这个特点，可以实现数组的合并。
var array = ["football", "basketball"];
var array2 = ["volleyball", "golfball"];
var len = Array.prototype.push.apply(array,array2);
console.log(array); // ["football", "basketball", "volleyball", "golfball"]
console.log(len ); // 4

unshift(element1, ..., elementN)

  定义：向数组的开头添加一个或更多元素，并返回数组的新长度
  参数：elementN -> 要添加到数组开头的元素 

var array = ["red", "green", "blue"];
var length = array.unshift("yellow");
console.log(array); // ["yellow", "red", "green", "blue"]
console.log(length); // 4

reverse()：颠倒数组中元素的顺序，并返回该数组的引用。

var array = [1,2,3,4,5];
var array2 = array.reverse();
console.log(array); // [5,4,3,2,1]
console.log(array2===array); // true

  reverse处理类数组对象。

//reverse处理类数组对象时，颠倒元素的范围受length属性制约。
var o = {0:"a", 1:"b", 2:"c", length:2};
var o2 = Array.prototype.reverse.call(o);
console.log(o); // Object {0: "b", 1: "a", 2: "c", length: 2}
console.log(o === o2); // true
   

//而且length值较大时，类数组对象的索引会尽可以能向length看齐。
var o = {0:"a", 1:"b", 2:"c",length:100};
var o2 = Array.prototype.reverse.call(o);
console.log(o); // {97: "c", 98: "b", 99: "a", length: 100}
console.log(o === o2); // true
         

//如果类数组对象不具有length属性或length属性不能被转成一个数值，
//则不会进行替换，也不会为其添加length属性。
var o = {0:"a", 1:"b", 2:"c"};
var o2 = Array.prototype.reverse.call(o);
console.log(o); // {0:"a", 1:"b", 2:"c"}
console.log(o === o2); // true

sort(compareFunction)

  作用：对数组的元素进行排序，并返回该数组。(默认排序顺序是根据字符串Unicode码点)
  参数：compareFunction -> 可选参数,用来指定按某种顺序进行排序的函数
   compareFunction中，a和b是两个将要比较的元素:

扫描二维码关注公众号，回复： 4613627 查看本文章
  • 若 compareFunction(a, b) < 0，那么a 将排到 b 前面
  • 若 compareFunction(a, b) = 0，那么a 和 b 相对位置不变
  • 若 compareFunction(a, b) > 0，那么a , b 将调换位置

  如果数组元素为数字，则排序函数如下所示：

//升序
function compare(a, b){
  return a-b;
}

//降序
function compare(a, b){
  return b-a;
}

  如果数组元素为非ASCLL字符的字符串(如包含类似 e、é、è、a、ä 或中文字符等非英文字符的字符串)，则需要使用String.localeCompare，则排序函数如下所示：

var array = ['互','联','网','改','变','世','界']; 
var newArray= array.sort(function (a, b) {
  return a.localeCompare(b);
});
console.log(newArray); // 按拼音先后排序：["变", "改", "互", "界", "联", "世", "网"]

  使用映射改善排序。compareFunction可能需要对元素做多次映射以实现排序，当compareFunction较为复杂且元素较多的时候，可能会导致很高的负载。使用map辅助排序将会是一个好主意。基本思想是首先将数组中的每个元素比较的实际值取出来，排序后再将数组恢复。

// 需要被排序的数组
var array = ["Tom","Lucky","John","Jeny","Tom"];
// 对需要排序的值和位置的临时存储
var mapArray = array.map(function(el, i) {
  return { index: i, value: el.toLowerCase() };
})
// 按照多个值排序数组
mapArray.sort(function(a, b) {
  return +(a.value > b.value) || +(a.value === b.value) - 1;
});
// 根据索引得到排序的结果
var result = mapArray.map(function(item){
  return array[item.index];
});
console.log(result); // ["Jeny", "John", "Lucky", "Tom", "Tom"]

copyWithin(targetIndex,startIndex,endIndex)

  作用：用于数组内元素之间的替换，替换元素和被替换元素都是数组内的元素。
  参数:  targetIndex -> 指定被替换元素的索引
            startIndex -> 指定替换元素的起始索引
            endIndex -> 指定替换元素的结束位置的索引

var array = [1,3,5,4,3,6,8,9]; 
var array2 = array.copyWithin(0,3);
console.log(array===array2,array2); // true [4, 3, 6, 8, 9, 6, 8, 9]

var array = [1,3,5,4,3,6,8,9]; 
console.log(array.copyWithin(0,3,4)); // [4, 3, 5, 4, 3, 6, 8, 9]

var array = [1,3,5,4,3,6,8,9]; 
console.log(array.copyWithin(0,-2,-1)); // [8, 3, 5, 4, 3, 6, 8, 9]

fill(value,startIndex,endIndex)

  作用：用于数组元素替换，指定某个值替换数组指定区间内的元素。
  参数：value -> 指定被替换的值
             startIndex -> 起始索引
             endIndex -> 终止索引
  fill和copyWithin功能类似，不同的是fill替换元素是任意的元素，而copyWithin规定的是数组内的元素。

var array = [1,2,3,4,5];
var array2 = array.fill(10,0,3);
console.log(array===array2,array2); // true [10, 10, 10, 4, 5]

Array.prototype中的方法都受益于鸭式辨型，都可处理类数组对象，使用call或apply实现。

（参考pop、push、reverse方法的处理进行分析）

猜你喜欢

转载自blog.csdn.net/yf_forever/article/details/85218263
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022