Nota kajian JavaScript ES6 kaedah tatasusunan_kemahiran javascript

ES6 (ECMAScript 6) ialah standard untuk versi baharu bahasa JavaScript yang akan datang, dengan nama kod harmoni (bermaksud keharmonian, jelas sekali ia tidak mengikuti rentak negara kita, kami telah memasuki versi Impian Cina). Kali terakhir standard dirumuskan ialah ES5, yang dikeluarkan pada tahun 2009. Kerja-kerja penyeragaman ES6 sedang dijalankan, dan versi yang dimuktamadkan secara rasmi dijangka dikeluarkan pada Disember 2014. Tetapi kebanyakan piawaian sudah sedia ada, dan sokongan penyemak imbas untuk ES6 sedang dilaksanakan.

ES6 menambahkan beberapa ciri baharu pada tatasusunan dan ciri baharu ini boleh digunakan pada lapisan perniagaan anda sendiri setakat ini. Dalam bahagian ini, kami akan meringkaskan cara menggunakan beberapa ciri baharu yang disediakan oleh ES6 untuk tatasusunan.

Dua kaedah statik disediakan oleh ES6:

Susun.daripada

Array.of

ES6 menyediakan kaedah untuk memanipulasi, mengisi dan menapis tatasusunan:

Array.prototype.copyWidthin
Array.prototype.fill
Array.prototaip.cari
Array.prototype.findIndex

Terdapat kaedah mengenai lelaran tatasusunan dalam ES6:

Array.prototype.keys
Array.prototype.values
Array.prototype.entry
Array.prototype[Symbol.iterator]

Yang berikut terutamanya melihat penggunaan kaedah ini.

Array.from()

Kaedah Array.from() digunakan terutamanya untuk menukar dua jenis objek (objek seperti tatasusunan [objek seperti tatasusunan] dan objek boleh lalui [boleh diulang]) kepada tatasusunan sebenar.

Dalam ES5, kaedah berikut sering digunakan untuk menukar objek seperti tatasusunan kepada tatasusunan:

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

Atau anda juga boleh menulis:

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

Dalam ES6 anda boleh menggunakan Array.from untuk menukar objek seperti tatasusunan kepada tatasusunan sebenar.

Apa yang dipanggil objek seperti tatasusunan hanya mempunyai satu ciri penting, iaitu, ia mesti mempunyai atribut panjang. Oleh itu, mana-mana objek dengan atribut panjang ialah objek seperti tatasusunan dan boleh ditukar kepada tatasusunan sebenar melalui kaedah Array.from.

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

Dalam ES6, operator spread (...) juga boleh menukar beberapa struktur data kepada tatasusunan. Ia hanya perlu memanggil antara muka iterator Symbol.iterator di belakang tabir.

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

Perlu diingat bahawa jika objek tidak menggunakan antara muka traverser, operator spread tidak boleh digunakan untuk menukar objek seperti tatasusunan kepada tatasusunan.

Array.from menerima tiga parameter, tetapi hanya input diperlukan:

input: Objek seperti tatasusunan dan objek boleh dilalui yang ingin anda tukar

peta: Sama seperti kaedah peta tatasusunan, ia digunakan untuk memproses setiap elemen dan meletakkan nilai yang diproses ke dalam tatasusunan yang dikembalikan

konteks: ini
digunakan dalam peta mengikat

Selagi struktur data antara muka iterator digunakan, Array.from boleh menukarnya menjadi tatasusunan:

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

Kod di atas, kerana kedua-dua rentetan aksara dan struktur Set mempunyai antara muka lelaran, boleh ditukar menjadi tatasusunan sebenar oleh Array.from. Jika parameter ialah tatasusunan sebenar, Array.from juga akan mengembalikan tatasusunan baharu yang serupa:

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

Seperti yang dinyatakan sebelum ini, Array.from juga boleh menerima parameter kedua, yang serupa dengan kaedah peta tatasusunan Ia digunakan untuk memproses setiap elemen, dan nilai yang diproses dimasukkan ke dalam tatasusunan yang dikembalikan:

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

Jika kata kunci ini digunakan dalam fungsi peta, anda juga boleh memasukkan parameter ketiga Array.from untuk mengikat ini.

Array.from() boleh menukar pelbagai nilai kepada tatasusunan sebenar dan juga menyediakan fungsi peta. Maksud sebenarnya ialah selagi anda mempunyai struktur data primitif, anda boleh memproses nilainya dahulu dan kemudian menukarnya menjadi struktur tatasusunan berkanun, dan kemudian anda boleh menggunakan sejumlah besar kaedah tatasusunan.

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

Dalam kod di atas, parameter pertama Array.from menentukan bilangan kali parameter kedua dijalankan. Ciri ini menjadikan penggunaan kaedah ini sangat fleksibel.

Aplikasi lain Array.from() adalah untuk menukar rentetan kepada tatasusunan dan kemudian mengembalikan panjang rentetan itu. Kerana ia boleh mengendalikan pelbagai aksara Unicode dengan betul, ia boleh mengelakkan pepijat yang JavaScript mengira aksara Unikod yang lebih besar daripada uFFFF sebagai dua aksara.

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

Menggunakan Array.from() juga boleh mengembalikan pelbagai jenis data:

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

Anda juga boleh menggunakan kaedah peta untuk melaksanakan fungsi kod di atas:

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

Gunakan kaedah Array.of untuk menukar set nilai kepada tatasusunan.

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

Tetapi anda tidak boleh menggunakan Array.of dan bukannya Array.prototype.slice.call, mereka berkelakuan berbeza:

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

Tujuan utama kaedah ini adalah untuk mengimbangi kekurangan pembina tatasusunan Array(). Oleh kerana bilangan parameter berbeza, tingkah laku Array() akan berbeza:

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 pada asasnya boleh digunakan untuk menggantikan Array() atau Array() baharu, dan tiada lebihan beban disebabkan oleh parameter yang berbeza, dan tingkah lakunya adalah sangat seragam:

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数组方法小编就给大家介绍到这里，希望对大家有所帮助！