文档章节

array数组的若干操作

leona_lily
 leona_lily
发布于 2015/08/04 16:18
字数 3943
阅读 53
收藏 5

1.Array.isArray()

The Array.isArray() method returns true if an object is an array,false if it is not.

如果判断的对象是一个数组则返回true,否则返回false;

实现:

if (!Array.isArray) {
	Array.isArray = function(arg){
		return Object.prototype.toString.call(arg) === '[object Array]';
	}
};

2. Array.of()

The Array.of() method creates a new Array instance with a variable number of arguments, regardless of number or type of the arguments.

Array.of()方法创建一个新的参数个数可变数组实例,而这个新的数组会忽视参数的数量和类型

实现:

if (!Array.of) {
  Array.of = function() {
    return Array.prototype.slice.call(arguments);
  };
}

eg: Array.of(1,2,3)   //[1,2,3]

3.Array.prototype.concat()

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本

var num1 = [1, 2, 3],
    num2 = [4, 5, 6],
    num3 = [7, 8, 9];

var nums = num1.concat(num2, num3);

console.log(nums); // Result: [1, 2, 3, 4, 5, 6, 7, 8, 9]

4. Array.prototype.entries()(新特性)

The entries() method returns a new Array Iterator object that contains the key/value pairs for each index in the array.

返回数组元素的索引和值

var arr = ['a', 'b', 'c'];
var eArr = arr.entries();//数组迭代器arrayIterator

console.log(eArr.next().value); // [0, 'a']
console.log(eArr.next().value); // [1, 'b']
console.log(eArr.next().value); // [2, 'c']

5. Array.prototype.every()

The every() method tests whether all elements in the array pass the test implemented by the provided function.

测试数组中的所有元素是否满足要求,如果满足返回true,否则返回false

if (typeof Array.prototype.every != "function") {
  Array.prototype.every = function (fn, context) {
    var passed = true;
    if (typeof fn === "function") {
       for (var k = 0, length = this.length; k < length; k++) {
          if (passed === false) break;
          passed = !!fn.call(context, this[k], k, this);
      }
    }
    return passed;
  };
}

var scores = [5, 8, 3, 10];
var current = 7;

function test(score) {
  return score > current;
}

if (scores.every(test)) {
  console.log("满足!");
} else {
  console.log("不满足!");        
}

6. Array.prototype.filter()

filter() 方法利用所有通过指定函数测试的元素创建一个新的数组,并返回

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
filter不会改变原数组。

callback被调用时传入三个参数:

  1. 元素的值
  2. 元素的索引
  3. 被遍历的数组

7.Array.prototype.map()

map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

function fuzzyPlural(single) {
  var result = single.replace(/o/g, 'e');  
  if( single === 'kangaroo'){
    result += 'se';
  }
  return result; 
}

var words = ["foot", "goose", "moose", "kangaroo"];
console.log(words.map(fuzzyPlural));

// ["feet", "geese", "meese", "kangareese"]


var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
/* roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9] */
通常情况下,map 方法中的 callback 函数只需要接受一个参数,就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。

// 下面的语句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]

// 通常使用parseInt时,只需要传递一个参数.但实际上,parseInt可以有两个参数.第二个参数是进制数.可以通过语句"alert(parseInt.length)===2"来验证.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.

/*
//应该使用如下的用户函数returnInt

function returnInt(element){
  return parseInt(element,10);
}

["1", "2", "3"].map(returnInt);
// 返回[1,2,3]
*/

8.Array.prototype.forEach()

forEach()方法让数组的每一项都执行一次给定的函数。

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[2] = 9
forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变,则传递给 callback的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。

注意: 没有办法中止 forEach 循环。如果要中止,可使用  Array.everyArray.some。见下面的例子。

一个可以克隆对象的函数

使用下面的代码可以复制一个给定的对象,虽然有很多不同的复制对象的方法.不过下面介绍的这种方法使用了Array.prototype.forEach和其他一些ECMAScript 5中的Object.*函数.

function copy(o){
  var copy = Object.create( Object.getPrototypeOf(o) );
  var propNames = Object.getOwnPropertyNames(o);

  propNames.forEach(function(name){
    var desc = Object.getOwnPropertyDescriptor(o, name);
    Object.defineProperty(copy, name, desc);
  });

  return copy;
}

var o1 = {a:1, b:2};
var o2 = copy(o1); // o2 looks like o1 now

9.Array.prototype.indexOf()

indexOf()方法返回根据给定元素找到的第一个索引值,否则返回-1

arr.indexOf(searchElement[, fromIndex = 0])

参数

searchElement位于数组中的元素。
fromIndex默认值: 0 (即在整个数组中查找指定元素)该值为开始查找指定元素的索引值。如果该索引值大于或等于数组长度,则停止查找并返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个 抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,仍然从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。


var array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

10.Array.prototype.join()

join()方法将数组中的所有元素连接成一个字符串。

str=arr.join([separator= ','])

参数

separator可选,用于指定连接每个数组元素的分隔符。分隔符会被转成字符串类型;如果省略的话,默认为一个逗号。如果seprator是一个空字符串,那么数组中的所有元素将被直接连接。


var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"
var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
var myVar4 = a.join('');    // myVar4的值变为"WindRainFire"

11.Array.prototype.lastIndexOf()

lastIndexOf()方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从fromIndex处开始


arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])

参数

searchElement被查找的元素。fromIndex从此位置开始逆向查找。默认为数组的长度减 1,即整个数组都被查找。如果该值大于或等于数组的长度,则整个数组会被查找。如果为负值,将其视为从数组末尾向前的偏移。即使该值为负,数组仍然会被从 后向前查找。如果该值为负时,其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。


var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3

12.Array.prototype.pop()

pop() 方法删除一个数组中的最后的一个元素,并且返回这个元素。

var myFish = ["angel", "clown", "mandarin", "surgeon"];

console.log("myFish before: " + myFish);

var popped = myFish.pop();

console.log("myFish after: " + myFish);
console.log("Removed this element: " + popped);

13.Array.prototype.push()

push() 方法添加一个或多个元素到数组的末尾,并返回数组新的长度(length 属性值)。

var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");

console.log(sports); // ["soccer", "baseball", "football", "swimming"]
console.log(total);  // 4

14.Array.prototype.reduce()


reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

arr.reduce(callback,[initialValue])


参数

callback执行数组中每个值的函数,包含四个参数


previousValue上一次调用回调返回的值,或者是提供的初始值(initialValue

currentValue数组中当前被处理的元素

index当前元素在数组中的索引

array调用reduce的数组

initialValue作为第一次调用 callback 的第一个参数。


reduce为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用reduce的数组。

回调函数第一次执行时,previousValue  和 currentValue 可以是一个值,如果  initialValue 在调用 reduce 时被提供,那么第一个 previousValue 等于 initialValue ,并且currentValue 等于数组中的第一个值;如果initialValue 未被提供,那么previousValue 等于数组中的第一个值,currentValue等于数组中的第二个值


[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
  return previousValue + currentValue;
});

回调被执行四次,每次的参数和返回值如下表:

  previousValue currentValue index array return value
first call 0 1 1 [0,1,2,3,4] 1
second call 1 2 2 [0,1,2,3,4] 3
third call 3 3 3 [0,1,2,3,4] 6
fourth call 6 4 4 [0,1,2,3,4] 10
reduce的返回值是回调函数最后一次被调用的返回值(10)。



var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
    return a.concat(b);
});
// flattened is [0, 1, 2, 3, 4, 5]

15.Array.prototype.reverse()

reverse() 方法颠倒数组中元素的位置。

语法

arr.reverse()
var myArray = ["one", "two", "three"]; myArray.reverse(); console.log(myArray) // ["three", "two", "one"]

16.Array.prototype.shift()


shift()方法删除数组的 第一个 元素,并返回这个元素。该方法会改变数组的长度。


arr.shift()
var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

console.log('调用 shift 之前: ' + myFish);
// "调用 shift 之前: angel,clown,mandarin,surgeon"

var shifted = myFish.shift(); 

console.log('调用 shift 之后: ' + myFish); 
// "调用 shift 之后: clown,mandarin,surgeon" 

console.log('被删除的元素: ' + shifted); 
// "被删除的元素: angel

17.Array.prototype.slice()

slice() 方法把数组中一部分的浅复制(shallow copy)存入一个新的数组对象中,并返回这个新的数组。

语法

array.slice(begin[, end])

在该索引处结束提取原数组元素(从0开始)。slice会提取原数组中索引从 begin 到 end 的所有元素(包含begin,但不包含end)


// Our good friend the citrus from fruits example
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

// puts --> ["Orange","Lemon"]

18.Array.prototype.some()

some() 方法测试数组中的某些元素是否通过了指定函数的测试。

语法

arr.some(callback[, thisArg])
some为数组中的每一个元素执行一次 callback函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some 将会立即返回 true。否则,some返回false。callback 只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。


function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);
// passed is false
passed = [12, 5, 8, 1, 4].some(isBigEnough);
// passed is true

19.Array.prototype.sort()

sort()方法对数组的元素做原地的排序,并返回这个数组。 sort 可能不是稳定的。默认按照字符串的UNICODE码位点(code point)排序。

语法

array.sort([compareFunction]);

参数

compareFunction可选的。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的万国码位点进行排序。


var fruit = ['apples', 'bananas', 'Cherries'];
fruit.sort(); // ['Cherries', 'apples', 'bananas'];

var scores = [1, 2, 10, 21]; 
scores.sort(); // [1, 10, 2, 21]

var things = ['word', 'Word', '1 Word', '2 Words'];
things.sort(); // ['1 Word', '2 Words', 'Word', 'word']
// In Unicode, numbers come before upper case letters,
// which come before lower case letters.
sort 方法可以使用 函数表达式 方便地书写:如下的函数将会将数组升序排列

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
print(numbers);

对象可以按照某个属性排序:

var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
];
items.sort(function (a, b) {
  if (a.name > b.name) {
    return 1;
  }
  if (a.name < b.name) {
    return -1;
  }
  // a 和 b 的 name 相等
  return 0;
});
例子:使用映射改善排序

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

// 需要被排序的数组
var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];

// 对需要排序的数字和位置的临时存储
var map = list.map(function(e, i) {
  return { index: i, value: e.toLowerCase() };
})

// 按照多个值排序数组
map.sort(function(a, b) {
  return +(a.value > b.value) || +(a.value === b.value) - 1;    //返回0和1
});

// 根据索引得到排序的结果
var result = map.map(function(e){
  return list[e.index];
});

20.Array.prototype.splice()

splice() 方法用新元素替换旧元素,以此修改数组的内容。

语法

array.splice(index , howMany[, element1[, ...[, elementN]]])array.splice(index) // SpiderMonkey/Firefox extension

参数

index


从数组的哪一位开始修改内容。如果超出了数组的长度,则自动从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位。

howMany整数,

表示要移除的数组元素的个数。如果howmany是 0,则不移除元素。这种情况下,至少应添加一个新元素。如果howmany超出了index位之后的元素的总数,则从index向后至数组末尾的全部元素都将被删除(含第index位)。如果没有指定howmany参数(如上第二种语法,是 SpiderMonkey 的扩展功能),将会删除第index位之后的所有元素(不含第index位)。

element1, ..., elementN

要添加进数组的元素。如果不指定,则splice只删除数组元素。

返回值

由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。

var myFish = ["angel", "clown", "mandarin", "surgeon"];

//从第 2 位开始删除 0 个元素,插入 "drum"
var removed = myFish.splice(2, 0, "drum");
//运算后的 myFish:["angel", "clown", "drum", "mandarin", "surgeon"]
//被删除元素数组:[],没有元素被删除

//从第 3 位开始删除 1 个元素
removed = myFish.splice(3, 1);
//运算后的myFish:["angel", "clown", "drum", "surgeon"]
//被删除元素数组:["mandarin"]

//从第 2 位开始删除 1 个元素,然后插入 "trumpet"
removed = myFish.splice(2, 1, "trumpet");
//运算后的myFish: ["angel", "clown", "trumpet", "surgeon"]
//被删除元素数组:["drum"]

//从第 0 位开始删除 2 个元素,然后插入 "parrot", "anemone" 和 "blue"
removed = myFish.splice(0, 2, "parrot", "anemone", "blue");
//运算后的myFish:["parrot", "anemone", "blue", "trumpet", "surgeon"]
//被删除元素的数组:["angel", "clown"]

//从第 3 位开始删除 2 个元素
removed = myFish.splice(3, Number.MAX_VALUE);
//运算后的myFish: ["parrot", "anemone", "blue"]
//被删除元素的数组:["trumpet", "surgeon"]

21.Array.prototype.toLocaleString()

toLocaleString()返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。

语法

arr.toLocaleString();

数组中的元素将会使用各自的 toLocaleString 方法:


var number = 1337;
var date = new Date();
var myArr = [number, date, "foo"];

var str = myArr.toLocaleString(); 

console.log(str); 
// 输出 "1337,2015/2/27 下午8:29:04,foo" 
// 假定运行在中文(zh-CN)环境,北京时区

22.Array.prototype.toString()



toString()返回一个字符串,表示指定的数组及其元素。

语法

arr.toString()

参数

Array 对象覆盖了  Object 的toString方法。对于数组对象,toString方法返回一个字符串,该字符串由数组中的每个元素的toString()返回值经调用 join()方法连接(由逗号隔开)组成。例如,下面的代码创建了一个数组,然后使用toString方法把该数组转成一个字符串。


var monthNames = ['Jan', 'Feb', 'Mar', 'Apr'];
var myVar = monthNames.toString(); // assigns "Jan,Feb,Mar,Apr" to myVar.

23.Array.prototype.unshift()


unshift() 方法在数组的开头添加一个或者多个元素,并返回数组新的 length 值。

语法

arr.unshift(element1, ..., elementN)

参数列表

element1, ..., elementN要添加到数组开头的元素。

返回值

当一个对象调用该方法时,返回其 length 属性值。

var arr = [1, 2];

arr.unshift(0); //result of call is 3, the new array length
//arr is [0, 1, 2]

arr.unshift(-2, -1); // = 5
//arr is [-2, -1, 0, 1, 2]

arr.unshift( [-3] );
//arr is [[-3], -2, -1, 0, 1, 2]



本文转载自:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

leona_lily
粉丝 9
博文 99
码字总数 43341
作品 0
朝阳
程序员
私信 提问
javascript学习(三) — 数组

JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素。 要取得Array的长度,可以直接访问length属性: 请注意,直接给Array的length赋一个新的值会导致Array大小的变化: Arra...

Vasilis_1
2017/07/04
0
0
JavaScript 基础 1_2

<head> <head> var arr=[1, 2, 3.14, 'Hello', null, true]; v...

sidiansh
2016/04/06
55
0
字符串与数组常用操作

字符串: 1、获取某个指定位置的字符 2、把一个字符串全部变为大写 toUpperCase 3、把一个字符串全部变为小写 toLowerCase 4、搜索指定字符串出现的位置 indexOf 5、返回指定索引区间的子串 ...

小草先森
2018/01/17
13
0
JavaScript常用数据结构

常用数据结构:Array, Object 不常用数据结构:Set, WeakSet, Map, WeakMap 结构型数据:JSON 特殊结构:Function 常用数据结构 日常使用强烈推荐使用字面量方式创建,以下能字面量就字面量说...

风蓝小栖
2018/08/03
0
0
js中splice的使用

一、splice语法 arrayObject.splice(start,deleteCount,item1,.....,itemX) 1、参数说明 start: 必需。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字...

学习也休闲
2015/08/31
39
0

没有更多内容

加载失败,请刷新页面

加载更多

好程序员web前端教程分享常见基础面试题之性能优化

  好程序员web前端教程分享常见基础面试题之性能优化,为了能够更快的通过企业面试,很多人都会背面试题,而性能优化是每一个企业都会问到的问题,今天就给大家分享一下。   性能优化(Op...

好程序员官网
15分钟前
2
0
面试题必问:spring MVC工作流程图

先看下我在网上找的一张图片,图虽然不是很好看但是很详细很清晰 具体解答 用户向服务器发送请求,请求被spring的核心组件DispatcherServlet截获 DispatcherServlet对请求URL进行解析,得到U...

shiliang_feng
15分钟前
3
0
centos7编译安装php7

安装依赖 [root@localhost ~]# yum -y install gcc gcc++ gcc-c++ wget make libxml2 libxml2-devel openssl openssl-devel curl-devel libjpeg-devel libpng-devel freetype-devel bison au......

请叫我足下
15分钟前
3
0
处理Unicode字符 \u202E 问题

这么一段字符串,实际内容应该是123abc456,在获取到的时候就变成下面的内容,肯定要处理呀.... 又得手撸了代码了\u202E : 会将字符串进行翻转,\u202D : 会将字符串互换位置,但为什么从...

小象鸭
21分钟前
2
0
怎么用视频转换器把qsv格式转换成mp4

随着生活水平不断提高消费水平也在不断的增长,与此同时娱乐已经成为了人们生活中重要的一环,在看一些视频时是否会发现例如qsv、qlv和kux等格式是不能用别的播放器打开的,其实这几个格式分...

cenfeng123
29分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部