JavaScript 연구 노트 ES6 배열 방법_javascript 기술

ES6(ECMAScript 6)은 곧 출시될 JavaScript 언어의 새 버전인 Harmony(하모니를 의미함)라는 코드명의 표준입니다. 분명히 우리나라의 속도를 따라잡지 못하여 Chinese Dream 버전에 진입했습니다. 마지막으로 표준이 공식화된 것은 2009년에 출시된 ES5였습니다. ES6의 표준화 작업은 현재 진행 중이며, 공식적으로 확정된 버전은 2014년 12월 출시될 예정입니다. 그러나 대부분의 표준은 이미 마련되어 있으며 ES6에 대한 브라우저 지원이 구현되고 있습니다.

ES6에는 어레이에 몇 가지 새로운 기능이 추가되었으며, 이러한 새로운 기능은 현재까지 귀하의 비즈니스 계층에 적용될 수 있습니다. 이 섹션에서는 ES6에서 제공하는 새로운 기능 중 일부를 배열에 사용하는 방법을 요약합니다.

ES6에서 제공하는 두 가지 정적 메서드:

Array.from

Array.of

ES6은 배열을 조작하고 채우고 필터링하는 방법을 제공합니다.

Array.prototype.copyWidthin
배열.프로토타입.채우기
배열.프로토타입.찾기
Array.prototype.findIndex

ES6에는 배열 반복에 대한 방법이 있습니다:

Array.prototype.keys
배열.프로토타입.값
배열.프로토타입.항목
Array.prototype[Symbol.iterator]

다음에서는 이러한 방법의 사용을 주로 살펴봅니다.

Array.from()

Array.from() 메서드는 주로 두 가지 유형의 객체(배열 유사 객체[배열 유사 객체] 및 순회 가능한 객체[반복 가능])를 실제 배열로 변환하는 데 사용됩니다.

ES5에서는 배열 유사 객체를 배열로 변환하는 데 다음 방법이 자주 사용됩니다.

function cast () {
return Array.prototype.slice.call(arguments);
}
cast('a','b','c','d'); // ["a", "b", "c", "d"]

또는 다음과 같이 쓸 수도 있습니다.

function cast () {
return [].slice.call(arguments);
}
cast('a','b','c','d'); // ["a", "b", "c", "d"]

ES6에서는 Array.from을 사용하여 배열과 유사한 객체를 실제 배열로 변환할 수 있습니다.

소위 배열형 객체에는 단 하나의 필수 특성, 즉 길이 속성이 있어야 합니다. 따라서 길이 속성이 있는 모든 객체는 유사 배열 객체이며 Array.from 메서드를 통해 실제 배열로 변환될 수 있습니다.

let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
console.log(Array.from(arrayLike)); // ["a","b","c"]

ES6에서는 스프레드 연산자(...)를 사용하여 일부 데이터 구조를 배열로 변환할 수도 있습니다. 뒤에서 반복자 인터페이스 Symbol.iterator를 호출하기만 하면 됩니다.

function cast (){
return [...arguments]
}
cast('a','b','c'); // ["a","b","c"]

객체가 트래버스 인터페이스를 배포하지 않는 경우 확산 연산자를 사용하여 배열 유사 객체를 배열로 변환할 수 없다는 점은 주목할 가치가 있습니다.

Array.from은 세 개의 매개변수를 허용하지만 입력만 필요합니다.

입력: 변환하려는 배열형 객체 및 탐색 가능한 객체

map: 배열의 map 메소드와 유사하게 각 요소를 처리하고 처리된 값을 반환된 배열에 넣는 데 사용됩니다.

context: this
바인딩 맵에 사용됨

반복자 인터페이스의 데이터 구조가 배포되는 한 Array.from은 이를 배열로 변환할 수 있습니다.

let arr = Array.from('w3cplus.com')
console.log(arr); // ["w","3","c","p","l","u","s",".","c","o","m"]
let namesSet = new Set(['a', 'b'])
let arr2 = Array.from(namesSet) 
console.log(arr2); //["a","b"]

위 코드는 문자열과 Set 구조 모두 반복자 인터페이스를 갖고 있기 때문에 Array.from을 통해 실제 배열로 변환할 수 있습니다. 매개변수가 실제 배열인 경우 Array.from은 동일한 새 배열도 반환합니다.

let arr = Array.from([1, 2, 3]);
console.log(arr); // [1,2,3]

앞서 언급했듯이 Array.from은 배열의 map 메소드와 유사한 두 번째 매개변수를 허용할 수도 있으며, 이는 각 요소를 처리하는 데 사용되며 처리된 값은 반환된 배열에 저장됩니다.

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

map 함수에서 this 키워드를 사용하는 경우 Array.from의 세 번째 매개변수를 전달하여 이를 바인딩할 수도 있습니다.

Array.from()은 다양한 값을 실제 배열로 변환할 수 있으며, 맵 기능도 제공합니다. 이것이 실제로 의미하는 바는 원시 데이터 구조가 있는 한 먼저 해당 값을 처리한 다음 이를 정식 배열 구조로 변환한 다음 수많은 배열 방법을 사용할 수 있다는 것입니다.

Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']

위 코드에서 Array.from의 첫 번째 매개변수는 두 번째 매개변수의 실행 횟수를 지정합니다. 이 기능을 사용하면 이 방법을 매우 유연하게 사용할 수 있습니다.

Array.from()의 또 다른 응용 프로그램은 문자열을 배열로 변환한 다음 문자열의 길이를 반환하는 것입니다. 다양한 유니코드 문자를 올바르게 처리할 수 있기 때문에 JavaScript가 uFFFF보다 큰 유니코드 문자를 두 문자로 계산하는 버그를 피할 수 있습니다.

function countSymbols(string) {
return Array.from(string).length;
}

Array.from()을 사용하면 다양한 데이터 유형을 반환할 수도 있습니다.

function typesOf () {
return Array.from(arguments, value => typeof value)
}
typesOf(null, [], NaN)
// <- ['object', 'object', 'number']

map 메소드를 사용하여 위 코드의 기능을 구현할 수도 있습니다.

function typesOf (...all) {
return all.map(value => typeof value)
}
typesOf(null, [], NaN)
// <- ['object', 'object', 'number']
Array.of

Array.of 메서드를 사용하여 값 집합을 배열로 변환합니다.

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

그러나 Array.prototype.slice.call 대신 Array.of를 사용할 수 없으며 다르게 동작합니다.

Array.prototype.slice.call([1, 2, 3])
// <- [1, 2, 3]
Array.of(1, 2, 3)
// <- [1, 2, 3]
Array.of(3)
// <- [1]

이 방법의 주요 목적은 배열 생성자 Array()의 단점을 보완하는 것입니다. 매개 변수 수가 다르기 때문에 Array()의 동작도 달라집니다.

new Array()
// <- []
new Array(undefined)
// <- [undefined]
new Array(1)
// <- [undefined x 1]
new Array(3)
// <- [undefined x 3]
new Array(1, 2)
// <- [1, 2]
new Array(-1)
// <- RangeError: Invalid array length

Array.of는 기본적으로 Array() 또는 new Array()를 대체하는 데 사용할 수 있으며, 다른 매개변수로 인한 오버로드가 없으며 동작이 매우 균일합니다.

Array.of()
// <- []
Array.of(undefined)
// <- [undefined]
Array.of(1)
// <- [1]
Array.of(3)
// <- [3]
Array.of(1, 2)
// <- [1, 2]
Array.of(-1)
// <- [-1]

Array.of方法可以使用下面的代码来模拟实现：

function ArrayOf(){
return [].slice.call(arguments);
}

copyWidthin

copyWidthin方法可以在当前数组内部，将指定位置的数组项复制到其他位置(会覆盖原数组项)，然后返回当前数组。使用copyWidthin方法会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

copyWidthin将会接受三个参数：

target: 这个参数是必须的，从该位置开始替换数组项

start: 这是一个可选参数，从该位置开始读取数组项，默认为0，如果为负值，表示从数组的右边向左开始读取

end: 这是一个可选参数，到该位置停止读取的数组项，默认等于Array.length。如果为负值，表示倒数

我们先来看一个简单的示例，下面声明了一个items数组：

var items = [1, 2, 3, ,,,,,,,]; // <- [1, 2, 3, undefined x 7]

下面的代码将在数组items的第六个位置开始粘贴数组项。粘贴过去的数组项是从items的第二位开始到第三位置结束。

items.copyWithin(6, 1, 3)
// <- [1, 2, 3, undefined × 3, 2, 3, undefined × 2]

下面是更多例子：

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
// 将2号位到数组结束，复制到0号位
var i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
// 对于没有部署TypedArray的copyWithin方法的平台
// 需要采用下面的写法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]
Array.prototype.fill

Array.prototype.fill方法使用给定的值填充一个数组：

['a', 'b', 'c'].fill(0)
// <- [0, 0, 0]
new Array(3).fill(0)
// <- [0, 0, 0]

上面这种方法用于空数组的初始化非常方便。数组中已有的元素会全部被抹去。

除此之外，Array.prototype.fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

['a', 'b', 'c',,,].fill(0, 2)
// <- ['a', 'b', 0, 0, 0]
new Array(5).fill(0, 0, 3)
// <- [0, 0, 0, undefined x 2]

Array.prototype.fill提供的值可以是任意的，不仅可以是一个数值，甚至还可以是一个原始类型：

new Array(3).fill({})
// <- [{}, {}, {}]

不过这个方法不可以接受数组的映射方法，不过可以接受一个索引参数或类似下面这样的方式：

new Array(3).fill(function foo () {})
// <- [function foo () {}, function foo () {}, function foo () {}]
Array.prototype.find

Array.prototype.find方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的数组项，然后返回该数组项。如果没有符合条件的数组项，则返回undefined。

[1, 2, 3, 4, 5].find(item => item > 2)
// <- 3
[1, 2, 3, 4, 5].find((item, i) => i === 3)
// <- 4
[1, 2, 3, 4, 5].find(item => item === Infinity)
// <- undefined

另外这种方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原始数组。

[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
Array.prototype.findIndex

这个方法类似于.some和.find方法。像.some返回true；像.find返回item。如果array[index] === item则返回其index。

Array.prototype.findIndex方法主要是用来返回数组项在数组中的位置。其和Array.prototype.find方法非常类似，接受一个回调函数，如果符合回调函数的条件，则返回数组项在数组中的位置，如果所有数组项都不符合回调函数条件，则会返回-1。

[1, 2, 3, 4, 5].find(item => item > 2)
// <- 2
[1, 2, 3, 4, 5].find((item, i) => i === 3)
// <- 3
[1, 2, 3, 4, 5].find(item => item === Infinity)
// <- -1

这个方法也可以接受第二个参数，用来绑定回调函数的this对象。

注：Array.prototype.find和Array.prototype.findIndex两个方法都可以发现NaN，弥补数组的indexOf方法的不足。

[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0

上面的代码中，indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到。

ES6遍历数组的方法

ES6提供了三个新方法：entries()、keys()和values()，用来遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对数组的键名的遍历、values()是对数组键值的遍历，entries()方法是对数值的键值对的遍历。

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"

如果不使用for...of循环，可以手动调用遍历器对象的next方法，进行遍历：

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

总结

这里简单的总结了有关于ES6中数组的相关方法。说实在的，初次接触ES6，很多东西都看得云里来雾里去。这里只是整理了一下这方面的相关知识。

关于JavaScript学习笔记之ES6数组方法小编就给大家介绍到这里，希望对大家有所帮助！