转行学前端的第 32 天 : 了解 ECMAScript Array 对象基础-六虎

我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。

今天学习目标

昨日根据查找来细心学习 Object 目标相关的知识。今天主要是根据查找来根底学习 Array 目标特点和Array结构函数办法，又是n F ) Z : m F e J合适学习的一天，加油i K z f，小又又！！！！

what

Javaw [ t F n ySr w e U i 2 a 3cript的Arr. 3 W k U ~ qay目标? + ; W 5 0是用于结构数组的大局目标，数组是相似于列表的高阶目标。

数组是一品种列) : N S表目标，它的原型中提供了遍历和修正元素的相关操作。

JavaSU V dcript 数组的长度和元素类型都是非固定的。由于数组的长度可随时改动，而且其数据在内存中也能够不连续，所以 JavaScript 数组纷歧定是密集型的，这取决于它的运, q 9 6 @ c 5 w –用办法。

一般来说，数组的这些特性会给运用带来便利，但假如这些特性不适用于你的特定运用场景的话，h ^ r 8 V能够考C t ,虑运用类型数组 TypedArray。

只能用整数作为数组元素的索引，而不能用字符串。后者称为相关数组。运用非整数并经过方括号或点号来拜访或设置数组元素时，所操作的并不是数组列表中的元素，而是数x b p P D组目标的特点集合上的变量。

数组目标的特点和数组元素列表是分隔存储的，而且数组的遍历和修正操作也不能作用于这些命名特点。

how

字面量声明

[elementh L p : d x L @0, element1, ..., elementN]

参数

elemenB X ! T Q % & 3 ltN
Array 结构Q [ /器会t a } 5依据给定的元素创立一个 JavaScript 数组。

事例, ; v i

co: t k h w G (nsF $ G J ~t arr = [1,2,3];
c* e 6onsole.log(arr)_ 2 [ C;

结构函数声H x H明

语法

n% p f S @ r ) :ew Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)

参数

elementN

Array 结构器会依据给定的元素创立F j & r一个 JavaScript 数组，可是当仅有一个参数且为数字时在外（详见下面的 arrayLength 参数）。留意，后边这种情况仅适用于用 ArI q ? 9 Dray 结构器创立数组，而不适用于用方括号创立的数组字面量。

arrayLength

一个范` ? Q 3 o ~ E % z围在 0 到 232-1 之间的整数，此刻将回来一个 length 的值等于 arrayLength 的数组目标（言外之意就是该数组此刻并没有包含任何实践的元素T b 7 U – l 5 e _，不能天经地& n % ] 0 G义地认为它包含 arrayLength 个值为 undefined 的元素）。假如传入的参数不是有S D G效值，则会抛出 RangeError 异常。

事例

const arr1 = Array(1,2,3);
const arr2 = Array(3);
console.log(arr1);
console.log(arrx C ) 3 k u r ; o2);l O g

目标特点

拜访数组元素

JavaScript数组的索引是从0开端的，第一个元素的索引为0，最终一个元素的索引等于该数组{ v ( &的长度减1。假如指定的索引是一个无效值，JavaScript 数组并不会报错，而是会回来 undefined。

const arr = ['th] { h Ris is the first element', 'this is the second element', 'this is the last element'];
console.log(arr[0]);              // 打印 'thisx ( F is the first elem; h U | g 4ent'
console.log(arr[1]);              // 打印 'this is the second eleme+ ] x c b e } Ent'
console.log(arr[arr.length - 1]); /a ` R/ 打印 'this is the4 L U T Q 3 last element'

Array.length

Array 结构函数的 leu + ~ngth 特点，其值为1（留意该特点为静态特点，不是数组实例的 length 特点）。

get Array[@@species8 & W 4 n O h ]

回来 Array 结构函数。

Array.prow ` v 3 ; / V ! 7totype

经过数组的原型目标能够为一切数组目标增加特点。

留意事项

length 和数字下标之间的联系J r + n a k Y )

JavaScript数组~ c % 6 A $的length 特点和其数字下标之间有着紧密的联系。数组内置的几个办法（例如join、slice、indexOf 等）都会考虑length 的值。别的还有一些办法（例如 push、splice 等）还会改动length 的值。

const fruits = [];
fruits.push('banana8 P * A `', 'apple', 'peach');W 1 ! 5 % + 7 7 m

console.log(frut 1 A  - w fits.length); // 3

运用一个合法q L # `的下标为数组元素赋值，而且该下标超出了当时数组的大小的时候C G . B Y，解说3 O | I 2 x器会一起修正length 的值

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 = 10;
console.log(Object.keys(fruits)); // ['0', '1', '2', ! v v ~ s B ?'5']
console.loJ c ~ Jg(fru[ # : yits.length); // 10

而为 length 赋一个更小的值则会删掉一部分元素：

cm 2 uonst fruits = [];
fruits.push('banana', 'apple', 'p] + R K ? ; ) weach');
fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruitp + u Rs.leni ) o 1 , , { Cgth); // 2

数组^ q q G H 0 中数字最初的特点

尽管数组元素能够看做是数组目标的特点，就像toString 一样，可是下面的写法是过错的，运行时会抛出 SyntaxError 异常，而原因则是运用了非法的特点名：

const arr = ['B p p &this is the first ele| @ : m 8 3 sment', 'this is the secH / i O uond element', 'this is the la% X O ? O w j 9st element'];
co P m ? i [ &nsole.log(arr.0); // a syntax error( P X

并不是JavaScript 数组有什么特殊之处，而是由于在 JavaScript 中，以数字最初的特点不能用点号H E A { k { e引证，有必要用方括号。

比方，假如一个目标有一个名为 3d 的特点，那么只能用方括号来引证它。下面是详细的比方：

var years = [19 ; u $ 9950, 1960, 1970, 1980, 1990, 2b P 6 C !  ? P000, 2010];
console.lo1 W W 1 4g(years.0);   // 语法过错
console.log(years[0]);  // √
renderer.3d.setTexture(model, 'character.png');     // 语法过错3 l 9
renderer['3d'].setTexture(model, 'character.png');  // √

留意在 3d 那个比方中，引号是有必要的。

你也能够将数组的索引证引号引+ S L # + E起来，比方years[2] 能够写成yea= % @ 0 wrs['2']。 years( n H 4[2]中的 2会5 J R V 2 B j 0 @被 JavaScr, # `ipt 解说器经过调用 toString 隐式转换成字符串。

正由于这样，'E l [ R B x 6 [ {2' 和r q v g'02'在 years 中所引证的或许是不同方位上的元素。

而j a _ p v m p i下面这个比方也或许会打印true：

const years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.logJ o } ] ] S & J(years# 3 v k M d ]['2'] != years['02l ? G $ O S | P s']);

目标中保留字特点

假如目标的1 + 9 V { 特点名称是保留字（最好不要这么做！），那么就只能经过字符串的形式用方括号来拜访（从 firefox 40.0a2 开端也支持用点号拜访了）：

const promise = {
'var'  : 'text',
'array': [1, 2, 3[ $  e D a ( C, 4]
};

con3 H A Fsole.log(promise['var']);

Array 结构函数办法

Array 5 2 xy.form()

根底语法

Array.from(arrayLike[, mapFn[, thisArg]])

参数阐明

arrayLike

想要转F 1 w o W G | = m换成数组的伪数组目标或可迭G J @代目标。

mapFn (可选参数)

假如指定了该参数，新数组中的每个元素会执行该回调函数。

thisArg (可选参数)

可选参数，执行回调函数 mapFn 时 this 目标。

回来值阐明

一个N 6 j B : X p新的数组实例

详细阐明

Array.from() 办法从一个相似数组或可迭代目标中创立一个新的数组实例。

Array.from() 能够q L m q { ; `经p g – l I过以下办法来创立数组目标：

伪数组目标（拥有一个 length 特点和若干索引特点的恣意目标^ 3 O G [）
可迭代目标（能够获取目标中的元素,如 Map和 Set 等）

Array.from() 办法有一个可选参数 mapFn，让你能够在最终生成的数组上再执行一次 map 办法后再回8 / , i _ l J来。也就是说 Array.from(obj, mapFn, thiw 7 j [ +sArg) 就相当于 Array.from(obj).map, I -(mapFn, thi^ F EsArg), 除非: f W H创立的不是可用的中心数组。这对一些数组的子类,如 typed arrays 来说很重要, 由于中心数组的值在调用 map() 时需求是适当的类型。

fromo o 3 K $ _() 的 length 特D / = @ J } { c j点为 1 ，即Array.from.length = 1。S H k m ) 9 *

在 ES2015 中， Clq s u { L % S c @ass 语法允许咱们为内置类型（比方 Array）和自界说类新建子类（比方叫 SubArray. Z D u t X (）。这些子类也会承继父类的静态办法，比方 SubArray.from()，调用该办法后会回来子类 SubArray 的一个实例，而不是 AG z 2 F t /rray 的实例。

事例

Array from a String

Array.from('foo');
// ["f", "c a [o", "o"]

Array from a Set

letJ 4 ( s = new Set(['foo', window]);
Array.from(s);
// ["foo", window]

Array fr} R k X 9 6om a Map

let m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);H ( 1 I
// [[1, 2]* A r t 2 $ s G, [2, 4], [4, 8]]

Array from an Array-like object (arguments)

function f() {
return Array.from(arguments);
}! K 7 & )

f(1, 2, 3);

// [1, 2, 3]

在Array.from中运用箭头函数

// Using an arrow functioq B ] f U in as the map function to
// manipulate the elements
Array.from(: P v[1, 2, 3], x =&gw Y K d }t; x + x);
// x => x + x代表这是一个函数，仅仅省掉了其他的界说，这是一种Lambda表达式的写法
// 箭头的意思表示从当时数组中取Y / N # ) u ; u N出一个值，然后自加，并将回来的成果增_ 5 c ^ -加到新数组中    
// [2, 4, 6]

// Generate a se9 6 @ 5 ( _ + c &quence of numbers
// Since the array is initialized wiQ } bth `undefined` on each position,
// the value of `v` below will be `undefined`{ L 7 7 x @ O n :
Array.from({length: 5},I x H V b M & q k (v, i) => i);
// [0, 1, 2, 3, 4]

数组去重兼并

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` x v ? e ? P(m,n));                     // [1H } . j z, 2, 3]

Polyfill

ECMA-262 第六版标准增加了 Array.from 。有些完成中或许没有包含在其间。你能够经过在脚本前增加如x u – X U k ! K下内容作为替代办法，以运用未原生0 y + b O支持的 ArA } ) K I d yray.from 办法。该算法依照 ECMA-262 第六版- b s 9 D中的规范完成，并假定 Object 和 TypeError 有其自身的s # n m 6 i #值， callback.call 对应 Function.{ o s Kprototype.call 。此外，鉴于无法运用 Pol2 a + K m o qyfill 完成真实的的迭代器，该完成不支持规范中界说的泛型可迭代元素。

// Production steps of ECMA-262, Edition 6, 22.1.2.1
// Referen] Q 6 _ m E {ce: https://people.mozilla.org/~jorendorff/es6-draft.html#sei ) G M 8c-array.from
if (!Array.from) {
Arrayq S T J u h #.from = (function () {
var toStr =e e m u # 0 = n o Object.k  s { @ q Dprototype.toString;
var isCallable = function (fn) {
retu | o x Y c `rn t( u G 3 j # Z U Nypeof fn === 'function' || toStr.cally e I Q - B (fn) === '[object Function]';
};
var toInteger = function (value) {
var number = Number(value);
if (isNaN(number)) { return 0; }
if (number === 0 || !isFinite(number)) { returi 3 D H K Xn number; }
return (number > 0 ? 1 : -d p 2 J ~1) * Math.floor(Math.abs(number));
};
var maxSafeInteger = Math.pow(2, 53) - 1;m A j ) z 0 { q
var toLength = function (value) {
var len = toI7 S f O m @ R wntegerT j 7(value);
return Math.min(Math.max(len, 0), maxSafeInt` ` X , Q 0eger);
};

// The length property of the from method is 1.
return function from(arrayLike/*, mapFn, thisArg */) {
// 1. Let C be the this value.
var C = this;

// 2. Let items be ToObject(ar# B ) X * b rayLike).
var items = Object(arrayLike);

// 3.Q E & c [ + M O x ReturnIfAbrupt(items).
if (arrayLike == null) {
throw new TypeError("Array.fG c ( ? A 0 o d hrom requires an array-like object - not null or undefined");
}

// 4. If mapfn is uu a N Indefined, theP h X Q *n let mapping be falG z w ? ! B -se.
varv ! Q 6 mapFn = arguments.length >m { 4 F Z I; 1 ? arguments[1] : vot x 7id undefined;
var T;
if (typeof mapFn !== 'undefined') {
// 5. else      
// 5. a If IsCall9 6 T b Yable(mapfn) is false, throw a TypeError exception.
if (!isCallable(mapFn)) {
throw new TypeErr6 ! b d 4 e U # Bor('Array.from: when provided, the second argument mm v U [ b ] 4ust be a functionq . y K x 8 T n');
}

// 5. b. If thisArg was supplie6 V 1 nd, let T be thisArg; else let T be undefined.
if (arguments.length > 2) {A A e / w + c
T = argumA j 1 2 { ! 4ents[2E $ 1 r g];
}
}

/| Q R t s R { K/ 10. Let lenValue be Get(items, "length").
// 11. Let len be ToLength(lenValue).
v& J X . sar len = toLength(items.length);

// 13. If IsConstructorA k p w u(C) is true, then
// 13. a. Let A be the result of calling the [[Construct]] internal method 
// of C with an argument list coC 4 # h 8ntaining the single item len.
// 14. a. Else, Let A, 3 & # + 7 Z be^ f # 1 = I 3 ` - ArrayCrea* ( O e y 3 5 Ite(len).
var A = isCallable(C) ? Object(new C(le? 0 K u q x v hn)) : new Array(len);

// 16. LetH Z A x i ( k be 0.
var k_ g P 1 9 = 0;
// 17. Repeat, while k < len… (also steps a - h)
var kValue;
while (k < len) {
kValue = items[k];
if (m7 i } . L P | g ^apFn) {
A[k] = typeof T === 'undefined' ? mapFns / 5 q _ t X(kValue, k) : mapFn.call(T, kValue, k);
} else {
A[kr 4 q @ 5 Y 7 _] = kVal; - , U J {ueE 7 { v # ~ $ ( k;
}
k += 1;
}
// 18. Let putStatus be Put(A, "length", len, true).
A3 . { g , ) 4.lenE O w B }gth = len;
// 20. Return A.
return A;
};
}());
}

有些看不太懂~~~~

Array.isArray()

根底语法

Array.isArray(obj)

参数阐明

obj

需求e u ?检测的值。

回来值阐明

假如值是 Array，则为true; 否则为false。

详细阐明

Arrg * Iay.isArray() 用于确定传递的值是否是一个Array。

有关更多详细信息，请参阅文章严格判定JavaScript目标是否为数组。

事例

根底事例

// 下面的函数调用都回来 true
Array.isArray([]);
Array.isArray([1]z j S F 6 5 Y);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'))
// 不为人知的现实：其实 Array.prototype 也是一个数组。
Arra* - b 9 3 = L w dy.isArray(Array S g u X o ;.prototk 5 2 C ype);

// 下面的函数调用都回来 false
Array.isArray();
Array.% , H j G P 9isArray({});
Array.isArray(null);
Array.isArray(undefinF U ! C s ~ ] Ped);
Array.isArraye m ) J ~ R(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false4 { g p m c  E x);
Array.isArray(new Uint8^ V T fArray(32))
Array.isArray({ __proto__: Array.prototype });

i| { S ] D Dnstanceof 和 isArray

当检测Array实例时,Array.isArray 优于 instanceof,由于Array.isArray能 ] ^检测) X a W * F – w `iframes.

var iframe = document.createElement('ifrE M , Y N hame');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].ArrY h 8 h : U nay;
var arr = new xArray(1,2,3); // [13 E { W N y 2,2,3]

// Correctly checking for Array
Array.K ! 7 z 7 @ C DisArray(arr);  // true
// Considered harmful, because doesn't work though iframes
arr instanceof Array; // false

Polyfill

假如J d [ C [ [原生不支持的话，; E O W J Z h在其他代码之D # _ J 1 h R前执行以下代码会创立 Array.isArray()| = 8 T P D 7 ` O 。

if (!Array.isArray) {
Array.isArra= + c l y 0 Y r 6y = function(arg) {
return Object.prototype.toString.call(arg) === 'p R . c # s[object Array]';
};
}

这个完成也有些看不太懂~~~

Array.of()

根底语法

Array.of(element0[, element1[, ...[, elementN]]])

参数阐明

elementN

恣意个参数，将按次序成为回来数组N A $ o ~ K N v中的元素。

回来值阐明

新的 Array 实例。

详细描述

Array@ 1 $ + V f =.of() 办法创立一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of() 和 Array 结构函数之间的差异在t E k P于处理整数参数：Array.of(7) 创立一个具有单个元素 7 的数组，而 Array(7) 创立一个长度为7的空数组（留意：这是指一个有7个空位的数组，P 5 t O v : Y而不是由7个undefined组成的数组）。

ArraZ P m 1 9 U : c dy.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7U + M x k O } /);          // [ , , , , ,& 0 c L m E O s , ]
Array(1, 2, 3);    // [1, 2)  L 7, 3]

此函数是ECMAScript 2015标准的一部9 q U ~ K r分。

事例

Arrayx c a 4 8 7 _.of(1);         // [1]
Array.of(1, 2, 3);   // [1, 2, 3]
Array.of(undefined)f u b v; // [undefined]

polyfill

假如原生不支持的话，在其他代码之前执行以下代+ B o [ V 0 q $ h码会创立 Array.of() 。

if (!Array.of)D -  {
Array.of = function() {
return Arraq t c { ` i z Cy.prototype.slice.call(arguments);
};
}

这个完成也有些看不太懂~~~

今天学习9 c M z | r总结

今天心情

今天主要是根据查找来根底学习 Array 目标，希望明日准备学习一下Array实例目标的办法 ~~~~

本文运用 mdnicw 0 q 9 q + ; Ae 排版

转行学前端的第 32 天 : 了解 ECMAScript Array 对象基础

今天学习目标

what

how

字面量声明

结构函数声H x H明

目标特点

拜访数组元素

Array.length

get Array[@@species8 & W 4 n O h ]

Array.prow ` v 3 ; / V ! 7totype

留意事项

length 和数字下标之间的联系J r + n a k Y )

数组^ q q G H 0 中数字最初的特点

目标中保留字特点

Array 结构函数办法

Array 5 2 xy.form()

根底语法

参数阐明

回来值阐明

详细阐明

事例

Polyfill

Array.isArray()

根底语法

参数阐明

回来值阐明

详细阐明

事例

Polyfill

Array.of()

根底语法

参数阐明

回来值阐明

详细描述

事例

polyfill

今天学习9 c M z | r总结

今天心情

相关文章

来自 2022 的总结，拖延症害死人

🔥为什么选择Nest

原来，我们的代码就是这样被污染的…

为什么产品国际化看似简单，实际落地却困难重重？

作者信息