专栏首页视频播放JavaScript array对象
原创

JavaScript array对象

1 . concat()

concat()可以基于当前数组中的所有项创建一个新数组。即这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。

没有给concat方法传递参数的情况下,它只是复制当前数组并返回副本。

如果传递的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中

如果传递的值是不是数组,这些值会被简单的添加到数组的末尾

注意:该方法不会改变先后的数组,而仅仅会返回被连接数组的一个副本。

arrayObject.concat(arrayX,arrayX,......,arrayX)
参数:arrayX 必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。

返回值:返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。
如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。

var arrA = ['a', 'b', 'c'];
var arrB=[1,2,3];
var newArr=arrA.concat(arrB);
console.log(newArr)          //["a", "b", "c", 1, 2, 3]

2 . join()

join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

arrayObject.join(separator)

separator	可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。如果separator是空字符串(""),
则所有元素之间都没有任何字符。

返回值
返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,
在两个元素之间插入 separator 字符串而生成的。

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

3 . pop()

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

语法: arrayObject.pop()

返回值

arrayObject 的最后一个元素。

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

   var arr = new Array(3)
   arr[0] = "George"
   arr[1] = "John"
   arr[2] = "Thomas"

   console.log(arr);         // ["George", "John", "Thomas"]
   console.log(arr.pop());   // Thomas
   console.log(arr);         // ["George", "John"]           

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

let popped = myFish.pop();

console.log(myFish); 
// ["angel", "clown", "mandarin"]

console.log(popped); 
// surgeon

4 . push()

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。该方法会改变数组的长度。

语法: arrayObject.push(newelement1,newelement2,....,newelementX)

newelement1	必需。要添加到数组的第一个元素。
newelement2	可选。要添加到数组的第二个元素。
newelementX	可选。可添加多个元素。

返回值

把指定的值添加到数组后的新长度。

push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和

pop() 方法使用数组提供的先进后出栈的功能。要想数组的开头添加一个或多个元素,请使用 unshift() 方法。

        var arr = new Array(3)
        arr[0] = "George"
        arr[1] = "John"
        arr[2] = "Thomas"

        console.log(arr);         // ["George", "John", "Thomas"]
        console.log(arr.push("James"));   // 4
        console.log(arr);         // ["George", "John", "Thomas", "James"]    

5 . reverse()

reverse() 方法用于颠倒数组中元素的顺序。该方法会改变原来的数组,而不会创建新的数组。

语法:arrayObject.reverse()

返回值

颠倒后的数组。

reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

var arr = ["George","John","Thomas"]
 
console.log(arr);              // ["George", "John", "Thomas"]
console.log(arr.reverse());    // ["Thomas", "John", "George"] 

reverse 方法颠倒数组中元素的位置,改变了数组,并返回该数组的引用。

const a = [1, 2, 3];

console.log(a); // [1, 2, 3]

a.reverse(); 

console.log(a); // [3, 2, 1]

6 . shift()

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。该方法会改变数组的长度。

语法: arrayObject.shift()

返回值

数组原来的第一个元素的值。

如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。请注意,该方法不创建新数组,而是直接修改原有的 arrayObject。

提示:要删除并返回数组的最后一个元素,请使用 pop() 方法。

var arr = ["George","John","Thomas"]
 
console.log(arr);              // ["George", "John", "Thomas"]
console.log(arr.shift());      // George
console.log(arr);              // ["John", "Thomas"]

7 . slice()

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

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

语法: arr.slice([begin[, end]])


begin 可选
提取起始处的索引(从 0 开始),从该索引开始提取原数组元素。
如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素
到最后一个元素(包含最后一个元素)。

如果省略 begin,则 slice 从索引 0 开始。
如果 begin 大于原数组的长度,则会返回空数组。



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

slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 (索引为 1, 2, 3的元素)。
如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数
第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。

如果 end 被省略,则 slice 会一直提取到原数组末尾。
如果 end 大于数组的长度,slice 也会一直提取到原数组末尾。

返回值

一个含有被提取元素的新数组。

slice 不会修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝:

  • 如果该元素是个对象引用 (不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。
  • 对于字符串、数字及布尔值来说(不是 StringNumber 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。

如果向两个数组任一中添加了新元素,则另一个不会受到影响。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

        var arr = ["George","John","Thomas"]
        
        console.log(arr);              // ["George", "John", "Thomas"]
        console.log(arr.slice(1));      // ["John", "Thomas"]
        console.log(arr);              // ["George", "John", "Thomas"]

        var arr = ["George","John","Thomas","James","Adrew","Martin"]
        
        console.log(arr);                 // George,John,Thomas,James,Adrew,Martin
        console.log(arr.slice(2,4));      // Thomas,James
        console.log(arr);                 // George,John,Thomas,James,Adrew,Martin

8 . sort()

sort() 方法用于对数组的元素进行排序。返回值 : 对数组的引用。请注意,数组在原数组上进行排序,不生成副本。

语法: arr.sort([compareFunction])

参数

compareFunction可选用来指定按某种顺序进行排列的函数。如果省略,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

firstEl第一个用于比较的元素。

secondEl第二个用于比较的元素。

返回值

排序后的数组。请注意,数组已原地排序,并且不进行复制。

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

如果指明了比较函数 compareFunction,那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:

  • 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
  • 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);
  • 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。
  • compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。

比较函数格式如下:

function compare(a, b) {
  if (a < b ) {           // 按某种排序标准进行比较, a 小于 b
    return -1;
  }
  if (a > b ) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

要比较数字而非字符串,比较函数可以简单的以 a 减 b,如下的函数将会将数组升序排列

function compareNumbers(a, b) {
  return a - b;
}

sort方法可以使用函数表达式方便地书写:

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

也可以写成:
var numbers = [4, 2, 5, 1, 3]; 
numbers.sort((a, b) => a - b); 
console.log(numbers);

// [1, 2, 3, 4, 5]

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

var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
];

// sort by value
items.sort(function (a, b) {
  return (a.value - b.value)
});

// sort by name
items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  
// names must be equal

  return 0;
});

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

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

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

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

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

9 . splice()

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

组。

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


arr.splice(开始的索引值,删除的个数,新增的数组元素1,新增的数组元素2,....) 作用: 删除元素,并向数组添加	
		   新元素。

参数

start​

指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开 始的第几位(从-1计数,这意味着-n是倒数第n个元素并且等价于array.length-n);如果负数的绝对值大于数组的长度,则表 示开始位置为第0位。

deleteCount 可选

整数,表示要移除的数组元素的个数。

如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。

如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是说,如果它大于或者等于start之后的所有元素 的数量),那么start之后数组的所有元素都会被删除。

如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。

item1, item2, ... 可选

要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。

返回值

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

如果添加进数组的元素个数不等于被删除的元素个数,数组的长度会发生相应的改变。

从第 2 位开始删除 0 个元素,插入“drum”

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum");

// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除

从第 2 位开始删除 0 个元素,插入“drum” 和 "guitar"

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除

从第 3 位开始删除 1 个元素

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);

// 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"]
// 被删除的元素: ["mandarin"]

从第 2 位开始删除 1 个元素,插入“trumpet”

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet");

// 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]
// 被删除的元素: ["drum"]

从第 0 位开始删除 2 个元素,插入"parrot"、"anemone"和"blue"

var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');

// 运算后的 myFish: ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// 被删除的元素: ["angel", "clown"]

从第 2 位开始删除 2 个元素

var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
var removed = myFish.splice(myFish.length - 3, 2);

// 运算后的 myFish: ["parrot", "anemone", "sturgeon"]
// 被删除的元素: ["blue", "trumpet"]

从倒数第 2 位开始删除 1 个元素

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(-2, 1);

// 运算后的 myFish: ["angel", "clown", "sturgeon"]
// 被删除的元素: ["mandarin"]

从第 2 位开始删除所有元素

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);

// 运算后的 myFish: ["angel", "clown"]
// 被删除的元素: ["mandarin", "sturgeon"]

10 . toString()

toString() 方法可把数组转换为字符串,并返回结果。

语法: arrayObject.toString()

对于数组对象,toString方法连接数组并返回一个字符串,其中包含用逗号分隔的每个数组元素。

arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同。

注释:数组中的元素之间用逗号分隔。

 const array1 = [1, 2, 'a', '1a'];

 console.log(array1.toString());
 // expected output: "1,2,a,1a"

var array = ["George","John","Thomas"];
console.log(array.toString())      // "George,John,Thomas"

11 . toLocaleString()

把数组转换为本地数组,并返回结果。

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

        var date = new Date();

        console.log(date);                     //Sun Mar 01 2020 13:43:36 GMT+0800 (中国标准时间)
        console.log(date.valueOf());           //1583041416749  (数字型)
        console.log(date.toString());          //Sun Mar 01 2020 13:43:36 GMT+0800 (中国标准时间)
        console.log(date.toLocaleString());    //2020/3/1 下午1:43:36

        var num = new Number(1337);
        
        console.log(num.valueOf());            //1337  (数字型)
        console.log(num.toString());           //1337  (字符串型)
        console.log(num.toLocaleString());     //1,337 (字符串型)

  • toString()方法获取的是String(传统字符串),而toLocaleString()方法获取的是LocaleString(本地环境字符串)。
  • 如果你开发的脚本在世界范围都有人使用,那么将对象转换成字符串时请使用toString()方法来完成。
  • LocaleString()会根据你机器的本地环境来返回字符串,它和toString()返回的值在不同的本地环境下使用的符号会有微妙的变化。
  • 所以使用toString()是保险的,返回唯一值的方法,它不会因为本地环境的改变而发生变化。如果是为了返回时间类型的数据,推荐使用toLocaleString()。若是在后台处理字符串,请务必使用toString()。

12 . valueOf()

valueOf() 方法返回当前对象的原始值,valueOf() 方法不会改变原数组。

1、 undefined和null没有valueOf()方法,使用会报错;
2、 布尔类型true和false会返回原值;
3、 字符串类型会返回原值;
4、 数字:
       如果是整数,需要用小括号将数字包起来再使用valueOf()方法,直接在数字后面跟.valueOf()会报错;
       如果是小数会返回原值;
5、 对象Object类型及自定义对象类型会返回原对象(注意花括号可能会被当作代码块的问题);
6、 函数function类型返回原函数;
7、 数组Array类型返回原数组;
8、 Date对象类型返回数字(1970年1月1日00:00:00至现在的毫秒数);
9、 正则表达式RegExp类型返回正则对象;

13 . unshift()

unshift() 方法可向数组的开头添加一个或更多元素,并返回该数组的新的长度。(该方法修改原有数组)。

语法: arrayObject.unshift(newelement1,....,newelementN)

newelementN要添加到数组开头的元素或多个元素。

返回值

arrayObject 的新长度。

unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。

请注意,unshift() 方法不创建新的创建,而是直接修改原有的数组。

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

let arr = [4,5,6];
arr.unshift(1,2,3);
console.log(arr); // [1, 2, 3, 4, 5, 6]

arr = [4,5,6]; // 重置数组
arr.unshift(1);
arr.unshift(2);
arr.unshift(3);
console.log(arr); // [3, 2, 1, 4, 5, 6]

let arr = [1, 2];

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

arr.unshift(-2, -1); // the new array length is 5
// arr is [-2, -1, 0, 1, 2]

arr.unshift([-4, -3]); // the new array length is 6
// arr is [[-4, -3], -2, -1, 0, 1, 2]

arr.unshift([-7, -6], [-5]); // the new array length is 8
// arr is [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]

14 . flat()

flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

语法:var newArray = arr.flat([depth])

depth可选指定要提取嵌套数组的结构深度,默认值为 1。

返回值

一个包含将数组与子数组中所有元素的新数组。

扁平化嵌套数组

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity,可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

扁平化与数组空项

flat() 方法会移除数组中的空项:

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

替代方案

使用reduceconcat

var arr = [1, 2, [3, 4]];

// 展开一层数组
arr.flat();
// 等效于
arr.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]

// 使用扩展运算符 ...
const flattened = arr => [].concat(...arr);

flatMap() 方法对原数组的每个成员执行一个函数,相当于执行Array . map(),然后对返回值组成的数组执行 flat() 方法。该

方法返回一个新数组,不改变原数组。

[2, 3, 4].flatMap((x) => [x, x * 2])         // 相当于 [[2, 4], [3, 6], [4, 8]].flat()
// [2, 4, 3, 6, 4, 8]

15 . find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。 find() 方法不会改变原数组。

语法: arr.find(callback[, thisArg])

     array.find(function(currentValue, index, arr),thisValue)

callback在数组每一项上执行的函数,接收 3 个参数:

element 当前遍历到的元素。

index可选

当前遍历到的索引。

array可选

数组本身。

thisArg可选 传递给函数的值一般用 "this" 值。 如果这个参数为空, "undefined" 会传递给 "this" 值

返回值

数组中第一个满足所提供测试函数的元素的值,否则返回 undefined

find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组,函数是不会执行的。

注意: find() 并没有改变数组的原始值。

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

用对象的属性查找数组里的对象

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) { 
    return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

16 . findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。findIndex( ) 不会修改所调用的数组。

语法:   arr.findIndex(callback[, thisArg])

或      array.findIndex(function(currentValue, index, arr), thisValue)     

callback 针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:

element 当前元素。

index 当前元素的索引。

array 调用findIndex的数组。

thisArg 可选。执行callback时作为this对象的值.

返回值:

返回符合测试条件的第一个数组元素索引,如果没有符合条件的则返回 -1。

findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组,函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

查找数组中首个质数元素的索引

function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

17 . includes()

includes()方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。

语法 : arr.includes(valueToFind[, fromIndex]) 

valueToFind

必须。需要查找的元素值。

fromIndex

可选。从该索引处开始查找 fromIndex。如果为负值,则按升序从 arr.length + fromIndex 的索引开始搜索。默认为 0。

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

18 . keys()

keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key);
}

// expected output: 0
// expected output: 1
// expected output: 2

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。

传入对象, 返回 包含对象可枚举属性和方法的数组

var obj = {'name': 'xiaoming', 'age': 18};
console.log(Object.keys(obj)); // ["name","age"]

传入字符串,返回索引值

var str = "Beijing"; 
console.log(Object.keys(str));
// ["0", "1", "2", "3", "4", "5", "6"]

传入数组,返回索引值

var arr = ["a", "b", "c"];
console.log(Object.keys(arr));
//["0", "1", "2"]

假如现在有一个对象

var obj = {
                A:2,
                B:"Ray",
                C:true,
                D:function(){}
        }
        
如果想遍历对象obj中的所有键值,一般是用以下方式

for(var key in obj){
    console.log(key,obj[key])
}

输出:

A 2
B Ray
C true
D function (){}


如果只是想获取所有的key值,用上面的方法也行得通。

===================================================================================================

但有更简单的方式:Object.keys(...),返回值是包含key的数组(IE9及以上可支持  Chrome与FF自不必说)

Object.values() //获取所有的value值

Object.entries() //分别将keys 和 values 放到两个数组中


如:console.log(Object.keys(obj))      // ["A", "B", "C", "D"] 

19 . indexOf()

indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

语法 : arr.indexOf(searchElement[, fromIndex])

参数

searchElement 要查找的元素

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

返回值

首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

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

找出指定元素出现的所有位置

var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);
while (idx != -1) {
  indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}
console.log(indices);
// [0, 2, 4]

20 . copyWithin()

copyWithin()方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

语法:array.copyWithin(target, start, end)

参数

描述

target

必需。复制到指定目标索引位置。

start

可选。元素复制的起始位置。

end

可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。

复制数组的前面两个元素到第三和第四个位置上:

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 2);

// expected output:   Banana,Orange,Banana,Orange,Kiwi,Papaya

21 . entries()

entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

语法: arr.entries()

返回值

一个新的 Array 迭代器对象。Array Iterator是对象,它的原型(__proto__:Array Iterator)上有一个next方法,可用用

于遍历迭代器取得原数组的[key,value]。

1、 Array Iterator

var arr = ["a", "b", "c"];
var iterator = arr.entries();
console.log(iterator);

/*Array Iterator {}
         __proto__:Array Iterator
         next:ƒ next()
         Symbol(Symbol.toStringTag):"Array Iterator"
         __proto__:Object
*/

2、iterator.next()

var arr = ["a", "b", "c"]; 
var iterator = arr.entries();
console.log(iterator.next());

/*{value: Array(2), done: false}
          done:false
          value:(2) [0, "a"]
           __proto__: Object
*/
// iterator.next()返回一个对象,对于有元素的数组,
// 是next{ value: Array(2), done: false };
// next.done 用于指示迭代器是否完成:在每次迭代时进行更新而且都是false,
// 直到迭代器结束done才是true。
// next.value是一个["key","value"]的数组,是返回的迭代器中的元素值。

3、iterator.next方法运行

var arr = ["a", "b", "c"];
var iter = arr.entries();
var a = [];

// for(var i=0; i< arr.length; i++){   // 实际使用的是这个 
for(var i=0; i< arr.length+1; i++){    // 注意,是length+1,比数组的长度大
    var tem = iter.next();             // 每次迭代时更新next
    console.log(tem.done);             // 这里可以看到更新后的done都是false
    if(tem.done !== true){             // 遍历迭代器结束done才是true
        console.log(tem.value);
        a[i]=tem.value;
    }
}
    
console.log(a);                         // 遍历完毕,输出next.value的数组

4、使用for…of 循环

var arr = ["a", "b", "c"];
var iterator = arr.entries();
// undefined

for (let e of iterator) {
    console.log(e);
}

// [0, "a"] 
// [1, "b"] 
// [2, "c"]

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

相关文章

  • js中reduce的用法(二) 详解与注意事项

    reduce()是将数组数据的每个元素累积为一个值的最佳方法,所以本篇文章我们就来详细介绍一下JavaScript中reduce()的使用方法。

    用户6973020
  • javaScript 循环遍历大全

    写下这篇文章的目的,主要是想总结一下关于JS对于集合对象遍历的方式方法,以及在实际应用场景中怎样去使用它们。本文会主要介绍:while,for,forEach,...

    用户6973020
  • js中reduce的用法

    reduce() 是数组的归并方法,reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算

    用户6973020
  • Javascript数组系列一之栈与队列

    所谓数组(英语:Array),是有序的元素序列。 若将有限个类型相同的变量的集合命名,那么这个名称为数组名。 组成数组的各个变量称为数组的分量,也称为数组的元素...

    六小登登
  • 数据结构Stack

    ​ 在很多应用中,我们需要维护多个对象的集合,这种操作非常简单。我们可能想要向集合中 加入某个元素,去掉某个元素,以及遍历 集合中的元素并对他们执行某种操...

    lwen
  • js查询数组或者List类型是否包含某个元素

    start:可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首...

    yaphetsfang
  • php数组和链表的区别总结

    1.、数组必须事先定义固定的长度(元素个数),不能适应数据动态地增减的情况。当数据增加时,可能超出原先定义的元素个数;当数据减少时,造成内存浪费;数组可以根据下...

    砸漏
  • 数组和链表的区别

    数组: 数组是将元素在内存中连续存放,由于每个元素占用内存 相同,可以通过下标迅速访问数组中任何元素。但是如果要在数组中增加一个元素,需要移动大量元素,在内...

    猿人谷
  • 怀英漫谈9 - JS 数组

    所谓的数组,就是一些数据的集合,JS中没有集合的概念,所以集合也是数组的一种。如果你Java用的多,那么这个概念就有点儿难以理解,毕竟从Java的文意来说,集合...

    用户1335799
  • js 数组方法大集合,各方法是否改变原有的数组详解

    不会改变原来数组的有: concat()---连接两个或更多的数组,并返回结果。

    IT人一直在路上

扫码关注云+社区

领取腾讯云代金券