JavaScript数组进修纪录_11

JavaScript数组进修纪录

Array.length

Array.length 是Array的实例属性。返回或设置一个数组中的元素个数。该值是一个无标记 32-bit 整数,而且老是大于数组最高项的下标。

  • length 属性的值是一个 0 到$2^{32}$-1 的整数
let arr = ['1', '2', '3', '4','5'];

console.log(arr.length);

//output: 5
  • 可以设置 length属性的值来截断任何数组。当经由过程转变length属性值来扩大数组时,现实元素的数目将会增添。比方:将一个具有 2 个元素的数组的 length 属性值设为 3 时,那末这个数组将会包含3个元素,而且,第三个元素的值将会是 undefined 。
let numbers = [1, 2, 3, 4, 5];
let length = numbers.length;
for (let i = 0; i < length; i++) {
  numbers[i] *= 2;
} 
console.log(numbers);

//[2, 4, 6, 8, 10]
let numbers = [1, 2, 3, 4, 5];

if (numbers.length > 3) {
  numbers.length = 3;
}

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

console.log(numbers.length); // 3
  • length属性不一定示意数组中定义值的个数。相识更多:长度与数值下标属性之间的关联。

Array.length 属性的属性特征:

属性申明备注
writabletrue假如设置为false,该属性值将不能被修正
enumerablefalse假如设置为false,删除或变动任何属性都将会失利。
configurablefalse假如设置为 true ,属性可以经由过程迭代器for或for…in举行迭代。
let fruits = [];
fruits.push('banana', 'apple', 'peach');

console.log(fruits.length); 
// 3

fruits[5] = 'mango';

console.log(fruits[5]);
// 'mango'

console.log(Object.keys(fruits));  
// ['0', '1', '2', '5']

console.log(fruits.length);
// 6

//削减length属性会删除元素

fruits.length = 2;

console.log(Object.keys(fruits));
// ['0', '1']

console.log(fruits.length);
// 2

Array.prototype

Array.prototype 属性示意 Array 组织函数的原型,并许可向一切Array对象增加新的属性和要领。
Array实例继续自 Array.prototype 。与一切组织函数一样,可以变动组织函数的原型对象,以对一切 Array 实例举行变动。比方,可以增加新要领和属性以扩大一切Array对象。这用于 polyfilling, 比方:

不为人知的现实:Array.prototype 本身也是一个 Array。

Array.isArray(Array.prototype); 

// true
  • Array.prototype 属性
属性申明
writablefalse
enumerablefalse
configurablefalse
  • Array.prototype.constructor

一切的数组实例都继续了这个属性,它的值就是 Array,表清楚明了一切的数组都是由 Array 组织出来的。

  • Array.prototype.length

上面说了,由于 Array.prototype 也是个数组,所以它也有 length 属性,这个值为 0,由于它是个空数组。

会转变本身的要领

下面的这些要领会转变挪用它们的对象本身的值:

  • Array.prototype.copyWithin()

在数组内部,将一段元素序列拷贝到另一段元素序列上,掩盖原有的值。

  • Array.prototype.fill()

将数组中指定区间的一切元素的值,都替换成某个牢固的值。

  • Array.prototype.pop()

删除数组的末了一个元素,并返回这个元素。

  • Array.prototype.push()

在数组的末端增添一个或多个元素,并返回数组的新长度。

  • Array.prototype.reverse()

倒置数组中元素的分列递次,即本来的第一个变成末了一个,本来的末了一个变成第一个。

  • Array.prototype.shift()

删除数组的第一个元素,并返回这个元素。

  • Array.prototype.sort()

对数组元素举行排序,并返回当前数组。

  • Array.prototype.splice()

在恣意的位置给数组增加或删除恣意个元素。

  • Array.prototype.unshift()

在数组的开首增添一个或多个元素,并返回数组的新长度。

不会转变本身的要领

下面的这些要领相对不会转变挪用它们的对象的值,只会返回一个新的数组或许返回一个别的的期望值。

  • Array.prototype.concat()

返回一个由当前数组和别的多少个数组或许多少个非数组值组合而成的新数组。

  • Array.prototype.includes()

推断当前数组是不是包含某指定的值,假如是返回 true,不然返回 false。

  • Array.prototype.join()

衔接一切数组元素构成一个字符串。

  • Array.prototype.slice()

抽取当前数组中的一段元素组合成一个新数组。

  • Array.prototype.toSource()

返回一个示意当前数组字面量的字符串。遮盖了原型链上的 Object.prototype.toSource() 要领。

  • Array.prototype.toString()

返回一个由一切数组元素组合而成的字符串。遮盖了原型链上的 Object.prototype.toString() 要领。

  • Array.prototype.toLocaleString()

返回一个由一切数组元素组合而成的本地化后的字符串。遮盖了原型链上的 Object.prototype.toLocaleString() 要领。

  • Array.prototype.indexOf()

返回数组中第一个与指定值相称的元素的索引,假如找不到如许的元素,则返回 -1。

  • Array.prototype.lastIndexOf()

返回数组中末了一个(从右侧数第一个)与指定值相称的元素的索引,假如找不到如许的元素,则返回 -1。

遍历要领

鄙人面的浩瀚遍历要领中,有许多要领都须要指定一个回调函数作为参数。在每一个数组元素都离别实行完回调函数之前,数组的length属性会被缓存在某个处所,所以,假如你在回调函数中为当前数组增加了新的元素,那末那些新增加的元素是不会被遍历到的。别的,假如在回调函数中对当前数组举行了别的修正,比方转变某个元素的值或许删掉某个元素,那末随后的遍历操纵能够会遭到未预期的影响。总之,不要尝试在遍历过程当中对原数组举行任何修正,虽然范例对如许的操纵举行了细致的定义,但为了可读性和可维护性,请不要如许做。

  • Array.prototype.forEach()

为数组中的每一个元素实行一次回调函数。

  • Array.prototype.entries()

返回一个数组迭代器对象,该迭代器会包含一切数组元素的键值对。

  • Array.prototype.every()

假如数组中的每一个元素都满足测试函数,则返回 true,不然返回 false。

  • Array.prototype.some()

假如数组中至少有一个元素满足测试函数,则返回 true,不然返回 false。

  • Array.prototype.filter()

将一切在过滤函数中返回 true 的数组元素放进一个新数组中并返回。

  • Array.prototype.find()

找到第一个满足测试函数的元素并返回谁人元素的值,假如找不到,则返回 undefined。

  • Array.prototype.findIndex()

找到第一个满足测试函数的元素并返回谁人元素的索引,假如找不到,则返回 -1。

  • Array.prototype.keys()

返回一个数组迭代器对象,该迭代器会包含一切数组元素的键。

  • Array.prototype.map()

返回一个由回调函数的返回值构成的新数组。

  • Array.prototype.reduce()

从左到右为每一个数组元素实行一次回调函数,并把上次回调函数的返回值放在一个暂存器中传给下次回调函数,并返回末了一次回调函数的返回值。

  • Array.prototype.reduceRight()

从右到左为每一个数组元素实行一次回调函数,并把上次回调函数的返回值放在一个暂存器中传给下次回调函数,并返回末了一次回调函数的返回值。

  • Array.prototype.values()

返回一个数组迭代器对象,该迭代器会包含一切数组元素的值。

  • Array.prototype[@@iterator]()

和上面的 values() 要领是统一个函数。

通用要领节

在 JavaScript 中,许多的数组要领被故意设想成是通用的。也就是说,那些看起来像是数组的对象(类数组对象),即具有一个 length 属性,以及对应的索引属性(也就是数字范例的属性,比方 obj[5])的非数组对象也是可以挪用那些数组要领的。个中一些数组要领,比方说 join 要领,它们只会纯真的读取当前对象的 length 属性和干脆属性的值,并不会尝试去转变这些属性的值。而别的一些数组要领,比方说 reverse 要领,它们会尝试修正那些属性的值,因而,假如当前对象是个 String 对象,那末这些要领在实行时就会报错,由于字符串对象的 length 属性和索引属性都是只读的。

数组要领

Array.from()

Array.from()要领从一个相似数组或可迭代对象中建立一个新的数组实例。

let arr= Array.from('Array')

console.log(arr);

// ["A", "r", "r", "a", "y"]

console.log(Array.from([1, 2, 3], x => x*x));

// [1, 4, 9]

Array.from() 可以经由过程以下体式格局来建立数组对象:

  • 伪数组对象(具有一个length属性和多少索引属性的恣意对象)
  • 可迭代对象(可以猎取对象中的元素,如 Map和 Set 等)

Array.from() 要领有一个可选参数
mapFn,让你可以在末了天生的数组上再实行一次 map 要领后再返回。也就是说 Array.from(obj, mapFn, thisArg) 就相当于 Array.from(obj).map(mapFn, thisArg), 除非建立的不是可用的中心数组。 这对一些数组的子类,如 typed arrays 来讲很主要, 由于中心数组的值在挪用 map() 时须如果恰当的范例。

from() 的 length 属性为 1 ,即Array.from.length = 1。

在 ES2015 中, Class 语法许可我们为内置范例(比方 Array)和自定义类新建子类(比方叫 SubArray)。这些子类也会继续父类的静态要领,比方 SubArray.from(),挪用该要领后会返回子类 SubArray 的一个实例,而不是 Array 的实例。

数组去重

function combine(){ 
    let arr = [].concat.apply([], arguments);  //没有去反复的新数组 
    return Array.from(new Set(arr));
} 

var m = [1, 2, 2], n = [2,3,3]; 

console.log(combine(m,n)); // [1, 2, 3]

Array.isArray()

Array.isArray() 用于肯定通报的值是不是是一个 Array。

// 下面的函数挪用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
// 不为人知的现实:实在 Array.prototype 也是一个数组。
Array.isArray(Array.prototype); 

// 下面的函数挪用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

instanceof 和 isArray

当检测Array实例时, Array.isArray 优于 instanceof,由于Array.isArray能检测iframes.

Array.of()

Array.of() 要领建立一个具有可变数目参数的新数组实例,而不斟酌参数的数目或范例。

Array.of() 和 Array 组织函数之间的区分在于处置惩罚整数参数:Array.of(7) 建立一个具有单个元素 7 的数组,而 Array(7) 建立一个长度为7的空数组(注重:这是指一个有7个空位的数组,而不是由7个undefined构成的数组)


Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.concat()

concat() 要领用于兼并两个或多个数组。此要领不会变动现有数组,而是返回一个新数组

Array.copyWithin()

copyWithin() 要领浅复制数组的一部分到统一数组中的另一个位置,并返回它,而不修正其大小

arr.copyWithin(target[, start[, end]])

  • target

0 为基底的索引,复制序列到该位置。假如是负数,target 将从末端最先盘算。
假如 target 大于即是 arr.length,将会不发生拷贝。假如 target 在 start 以后,复制的序列将被修正以相符 arr.length。

  • start

0 为基底的索引,最先复制元素的肇端位置。假如是负数,start 将从末端最先盘算。
假如 start 被疏忽,copyWithin 将会从0最先复制。

  • end

0 为基底的索引,最先复制元素的终了位置。copyWithin 将会拷贝到该位置,但不包含 end 这个位置的元素。假如是负数, end 将从末端最先盘算。
假如 end 被疏忽,copyWithin 将会复制到 arr.length。

[1, 2, 3, 4, 5].copyWithin(-2);
// [1, 2, 3, 1, 2]

[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
// [1, 2, 3, 3, 4]

[].copyWithin.call({length: 5, 3: 1}, 0, 3);
({0:undefined,1:undefined,2:undefined,3: 1,4:undefined,5:undefined,length: 5}).copyWithin(0,3,5);
效果为:
{0:1,1:undefined,2:undefined,3: 1,4:undefined,5:undefined,length: 5};
也就是
{0:1,3:1,length:5}
// {0: 1, 3: 1, length: 5}


// ES2015 Typed Arrays are subclasses of Array
var i32a = new Int32Array([1, 2, 3, 4, 5]);

i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// On platforms that are not yet ES2015 compliant: 
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

参数target,start和end 必需为整数。

假如start为负,则其指定的索引位置等同于length+start,length为数组的长度。end也是云云。

copyWithin要领不请求其this值必需是一个数组对象;除此之外,copyWithin是一个可变要领,它可以转变this对象本身,而且返回它,而不仅仅是它的拷贝。

copyWithin 就像 C 和 C++ 的 memcpy 函数一样,且它是用来挪动 Array 或许 TypedArray 数据的一个高性能的要领。复制以及粘贴序列这两者是为一体的操纵;纵然复制和粘贴地区堆叠,粘贴的序列也会有拷贝来的值。

copyWithin 函数是设想为通用的,其不请求其 this 值必需是一个数组对象。

The copyWithin 是一个可变要领,它不会转变 this 的 length,然则会转变 this 本身的内容,且须要时会建立新的属性。

Array.entries()

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

一个新的 Array 迭代器对象。Array Iterator是对象,它的原型(__proto__:Array Iterator)上有一个next要领,可用用于遍历迭代器获得原数组的[key,value]。

var arr = ['a', 'b', 'c'];

var iteratorArr = array1.entries();

console.log(iteratorArr.next().value);
// expected output: Array [0, "a"]

console.log(iteratorArr.next().value);
// expected output: Array [1, "b"]
  • 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的数组
  • 二维数组排序
function sortArr(arr) {
    var goNext = true;
    var entries = arr.entries();
    while (goNext) {
        var result = entries.next();
        if (result.done !== true) {
            result.value[1].sort((a, b) => a - b);
            goNext = true;
        } else {
            goNext = false;
        }
    }
    return arr;
}

var arr = [[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]];
sortArr(arr);

/*(4) [Array(2), Array(5), Array(5), Array(4)]
    0:(2) [1, 34]
    1:(5) [2, 3, 44, 234, 456]
    2:(5) [1, 4, 5, 6, 4567]
    3:(4) [1, 23, 34, 78]
    length:4
    __proto__:Array(0)
*/
  • 运用 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"]

Array.every()

every() 要领测试数组的一切元素是不是都经由过程了指定函数的测试

function isBelowThreshold(currentValue) {
  return currentValue < 40;
}

var array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true


function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true
  • every 要领为数组中的每一个元素实行一次 callback 函数,直到它找到一个使 callback 返回 false(示意可转换为布尔值 false 的值)的元素。假如发现了一个如许的元素,every 要领将会马上返回 false。不然,callback 为每一个元素返回 true,every 就会返回 true。callback 只会为那些已被赋值的索引挪用。不会为那些被删除或历来没被赋值的索引挪用。
  • callback 被挪用时传入三个参数:元素值,元素的索引,原数组。

假如为 every 供应一个 thisArg 参数,则该参数为挪用 callback 时的 this 值。假如省略该参数,则 callback 被挪用时的 this 值,在非严厉形式下为全局对象,在严厉形式下传入 undefined。

  • every 不会转变原数组。
  • every 遍历的元素范围在第一次挪用 callback 之前就已肯定了。在挪用 every 以后增加到数组中的元素不会被 callback 接见到。假如数组中存在的元素被变动,则他们传入 callback 的值是 every 接见到他们那一刻的值。那些被删除的元素或历来未被赋值的元素将不会被接见到。
  • every 和数学中的”一切”相似,当一切的元素都相符前提才返回true。别的,空数组也是返回true。(空数组中一切元素都相符给定的前提,注:由于空数组没有元素)。

Array.fill()

fill() 要领用一个牢固值添补一个数组中从肇端索引到停止索引内的悉数元素。不包含停止索引。

arr.fill(value,[start, end])
[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

// Objects by reference.
var arr = Array(3).fill({}) // [{}, {}, {}];
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
  • fill 要领吸收三个参数 value, start 以及 end. start 和 end 参数是可选的, 其默许值离别为 0 和 this 对象的 length 属性值。
  • 假如 start 是个负数, 则最先索引会被自动盘算成为 length+start, 个中 length 是 this 对象的 length 属性值。假如 end 是个负数, 则终了索引会被自动盘算成为 length+end。
  • fill 要领故意被设想成通用要领, 该要领不请求 this 是数组对象。
  • fill 要领是个可变要领, 它会转变挪用它的 this 对象本身, 然后返回它, 而并非返回一个副本。
  • 当一个对象被通报给 fill要领的时刻, 添补数组的是这个对象的援用。

Array.filter()

filter() 要领建立一个新数组, 其包含经由过程所供应函数完成的测试的一切元素。

  • filter 为数组中的每一个元素挪用一次 callback 函数,并应用一切使得 callback 返回 true 或 等价于 true 的值 的元素建立一个新数组。callback 只会在已赋值的索引上被挪用,关于那些已被删除或许从未被赋值的索引不会被挪用。那些没有经由过程 callback 测试的元素会被跳过,不会被包含在新数组中。
  • callback 被挪用时传入三个参数:

1.元素的值

2.元素的索引

3.被遍历的数组

  • 假如为 filter 供应一个 thisArg 参数,则它会被作为 callback 被挪用时的 this 值。不然,callback 的 this 值在非严厉形式下将是全局对象,严厉形式下为 undefined。
  • callback 终究观察到的this值是依据一般函数所看到的 “this”的划定规矩肯定的。
  • filter 不会转变原数组,它返回过滤后的新数组。
  • filter 遍历的元素范围在第一次挪用 callback 之前就已肯定了。在挪用 filter 以后被增加到数组中的元素不会被 filter 遍历到。假如已存在的元素被转变了,则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或历来未被赋值的元素不会被遍历
  • 过滤JSON中的无效条目
var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

var invalidEntries = 0;

function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  } 
  invalidEntries++;
  return false; 
}

var arrByID = arr.filter(filterByID);

console.log('Filtered Array\n', arrByID); 
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log('Number of Invalid Entries = ', invalidEntries); 
// Number of Invalid Entries = 5
  • 搜刮
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toLowerCase().indexOf(query.toLowerCase()) > -1
  );
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

Array.find()

find() 要领返回数组中满足供应的测试函数的第一个元素的值。不然返回 undefined。

假如你须要找到一个元素的位置或许一个元素是不是存在于数组中,运用Array.prototype.indexOf() 或 Array.prototype.includes()。

  • 用对象的属性查找数组里的对象
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 }
寻
  • 寻觅质数
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].find(isPrime)); // undefined, not found
console.log([4, 5, 8, 12].find(isPrime)); // 5

Array.findIndex()

findIndex()要领返回数组中满足供应的测试函数的第一个元素的索引。不然返回-1。

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

Array.forEach()

forEach() 要领对数组的每一个元素实行一次供应的函数

//<!--复制对象的函数-->
function copy(obj) {
  var copy = Object.create(Object.getPrototypeOf(obj));
  var propNames = Object.getOwnPropertyNames(obj);

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

  return copy;
}

var obj1 = { a: 1, b: 2 };
var obj2 = copy(obj1); // obj2 looks like obj1 now
  • 假如数组在迭代时被修正了,则其他元素会被跳过。节

下面的例子输出”one”, “two”, “four”。当抵达包含值”two”的项时,全部数组的第一个项被移除了,这致使一切剩下的项上移一个位置。由于元素 “four”如今在数组更前的位置,”three”会被跳过。 forEach()不会在迭代之前建立数组的副本

var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// one
// two
// four

Array.includes()

includes() 要领用来推断一个数组是不是包含一个指定的值,依据状况,假如包含则返回 true,不然返回false。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
  • fromIndex 大于即是数组长度节
    假如fromIndex 大于即是数组长度 ,则返回 false 。该数组不会被搜刮
var arr = ['a', 'b', 'c'];

arr.includes('c', 3);   //false
arr.includes('c', 100); // false
  • includes() 作为一个通用要领节

includes() 要领故意设想为通用要领。它不请求this值是数组对象,所以它可以被用于其他范例的对象 (比方类数组对象)。下面的例子展现了 在函数的arguments对象上挪用的includes() 要领。

(function() {
  console.log([].includes.call(arguments, 'a')); // true
  console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');

Array.indexOf()

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

arr.indexOf(searchElement)
arr.indexOf(searchElement, fromIndex = 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]

Array.join()

join() 要领将一个数组(或一个类数组对象)的一切元素衔接成一个字符串并返回这个字符串。

str = arr.join()
// 默以为 ","

str = arr.join("")
// 分隔符 === 空字符串 ""

str = arr.join(separator)
// 分隔符

Array.keys()

var array1 = ['a', 'b', 'c'];
var iterator = array1.keys(); 
  
for (let key of iterator) {
  console.log(key); // expected output: 0 1 2
}
  • 会包含没有对应元素的索引
var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys);  // [0, 1, 2]

Array.lastIndexOf()

lastIndexOf() 要领返回指定元素(也即有用的 JavaScript 值或变量)在数组中的末了一个的索引,假如不存在则返回 -1。从数组的背面向前查找,从 fromIndex 处最先

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

今后位置最先逆向查找。默以为数组的长度减 1,即全部数组都被查找。假如该值大于或即是数组的长度,则全部数组会被查找。假如为负值,将其视为从数组末端向前的偏移。纵然该值为负,数组依然会被从后向前查找。假如该值为负时,其相对值大于数组长度,则要领返回 -1,即数组不会被查找。。

Array.map()

map() 要领建立一个新数组,其效果是该数组中的每一个元素都挪用一个供应的函数后返回的效果。

var kvArray = [{key: 1, value: 10}, 
               {key: 2, value: 20}, 
               {key: 3, value: 30}];

var reformattedArray = kvArray.map(function(obj) { 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});

// reformattedArray 数组为: [{1: 10}, {2: 20}, {3: 30}], 

// kvArray 数组未被修正: 
// [{key: 1, value: 10}, 
//  {key: 2, value: 20}, 
//  {key: 3, value: 30}]

Array.pop()

pop()要领从数组中删除末了一个元素,并返回该元素的值。此要领变动数组的长度。

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

let popped = myFish.pop();

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

console.log(popped); 
// surgeon

Array.push()

push() 要领将一个或多个元素增加到数组的末端,并返回该数组的新长度

  • push 要领故意具有通用性。该要领和 call() 或 apply() 一同运用时,可应用在相似数组的对象上。push 要领依据 length 属性来决议从那里最先插进去给定的值。假如 length 不能被转成一个数值,则插进去的元素索引为 0,包含 length 不存在时。当 length 不存在时,将会建立它。

Array.reduce()

reduce() 要领对数组中的每一个元素实行一个供应的reducer函数(升序实行),将其效果汇总为单个返回值

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

reducer 函数吸收4个参数:

Accumulator (acc) (累计器)
Current Value (cur) (当前值)
Current Index (idx) (当前索引)
Source Array (src) (源数组)
您的 reducer 函数的返回值分配给累计器,该返回值在数组的每一个迭代中被记着,并末了成为终究的单个效果值。

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// 和为 6
var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x;
},initialValue)

console.log(sum) // logs 6
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(a, b) {
    return a.concat(b);
  },
  []
);
// flattened is [0, 1, 2, 3, 4, 5]
var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, 'age');
// groupedPeople is:
// { 
//   20: [
//     { name: 'Max', age: 20 }, 
//     { name: 'Jane', age: 20 }
//   ], 
//   21: [{ name: 'Alice', age: 21 }] 
// }
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current)=>{
    if(init.length===0 || init[init.length-1]!==current){
        init.push(current);
    }
    return init;
}, []);
console.log(result); //[1,2,3,4,5]

Array.reduceRight()

reduceRight() 要领吸收一个函数作为累加器(accumulator)和数组的每一个值(从右到左)将其削减为单个值

reduceRight 为数组中每一个元素挪用一次 callback 回调函数,然则数组中被删除的索引或从未被赋值的索引会跳过。回调函数吸收四个参数:初始值(或上次挪用回调的返回值)、当前元素值、当前索引,以及挪用 reduce 的数组

var a = ['1', '2', '3', '4', '5']; 
var left  = a.reduce(function(prev, cur)      { return prev + cur; }); 
var right = a.reduceRight(function(prev, cur) { return prev + cur; }); 

console.log(left);  // "12345"
console.log(right); // "54321"

Array.reverse()

reverse() 要领将数组中元素的位置倒置。

var myArray = ['one', 'two', 'three'];
myArray.reverse(); 

console.log(myArray) // ['three', 'two', 'one']

Array.shift()

shift() 要领从数组中删除第一个元素,并返回该元素的值。此要领变动数组的长度

shift 要领移除索引为 0 的元素(即第一个元素),并返回被移除的元素,其他元素的索引值随之减 1。假如 length 属性的值为 0 (长度为 0),则返回 undefined。

shift 要领并不局限于数组:这个要领可以经由过程 call 或 apply 要领作用于相似数组的对象上。然则关于没有 length 属性(从0最先的一系列一连的数字属性的末了一个)的对象,挪用该要领能够没有任何意义。

let 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"

Array.slice()

slice() 要领返回一个新的数组对象,这一对象是一个由 begin和 end(不包含end)决议的原数组的浅拷贝。原始数组不会被转变。

arr.slice();
// [0, end]

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

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

Array.some()

some() 要领测试数组中的某些元素是不是经由过程由供应的函数完成的测试

some() 为数组中的每一个元素实行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。假如找到了如许一个值,some() 将会马上返回 true。不然,some() 返回 false。callback 只会在那些”有值“的索引上被挪用,不会在那些被删除或历来未被赋值的索引上挪用。

callback 被挪用时传入三个参数:元素的值,元素的索引,被遍历的数组。

将会把它传给被挪用的 callback,作为 this 值。不然,在非严厉形式下将会是全局对象,严厉形式下是 undefined。

some() 被挪用时不会转变数组。

some() 遍历的元素的范围在第一次挪用 callback. 时就已肯定了。在挪用 some() 后被增加到数组中的值不会被 callback 接见到。假如数组中存在且还未被接见到的元素被 callback 转变了,则其通报给 callback 的值是 some() 接见到它那一刻的值。

function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

Array.sort()

sort() 要领用原地算法对数组的元素举行排序,并返回数组。排序算法如今是稳固的。默许排序递次是依据字符串Unicode码点。

Array.splice()

splice()要领经由过程删除现有元素和/或增加新元素来修正数组,并以数组返回原数组中被修正的内容。

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

Array.toLocaleString()

toLocaleString() 返回一个字符串示意数组中的元素。数组中的元素将运用各自的 toLocaleString 要领转成字符串,这些字符串将运用一个特定言语环境的字符串(比方一个逗号 “,”)离隔。

var prices = ['¥7', 500, 8123, 12];
prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });

// "¥7,¥500,¥8,123,¥12"

Array.toString()

Array.unshift()

unshift() 要领将一个或多个元素增加到数组的开首,并返回该数组的新长度。

Array.values()

values() 要领返回一个新的 Array Iterator 对象,该对象包含数组每一个索引的值

    原文作者:xiaoping
    原文地址: https://segmentfault.com/a/1190000017452296
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞