Apakah kaedah tatasusunan baharu dalam es6?

青灯夜游
Lepaskan: 2022-04-11 16:27:45
asal
10883 orang telah melayarinya

Kaedah tatasusunan baharu: 1. from(), yang boleh menukar objek seperti tatasusunan atau boleh lelar kepada tatasusunan sebenar 2. daripada(), yang boleh menukar set nilai kepada tatasusunan, yang melengkapkan pembinaan tatasusunan Kekurangan fungsi Array();

Apakah kaedah tatasusunan baharu dalam es6?

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Kaedah tatasusunan baharu ES6

1 from method digunakan untuk menukar dua jenis objek kepada tatasusunan sebenar:

objek seperti tatasusunan (objek seperti tatasusunan)

  • boleh objek yang dilalui (boleh diulang) (termasuk Set dan Peta struktur data baharu ES6)

  • bermakna selagi struktur data antara muka Iterator digunakan, Array.from boleh menukarnya menjadi In pembangunan sebenar, tatasusunan

  • biasanya boleh digunakan untuk menukar koleksi NodeList yang dikembalikan oleh operasi DOM, dan objek argumen

di dalam fungsi digunakan untuk menukar tatasusunan kelas menjadi tatasusunan sebenar apabila lulus parameter.

Penyahduplikasi tatasusunan


  • Untuk penyemak imbas yang tidak menggunakan kaedah ini, anda boleh menggunakan Tatasusunan. kaedah prototype.slice Daripada
const arr = [1,2,3,3,3,2,5];
console.log(Array.from(new Set(arr))); //[1,2,3,5]
//...也可实现相同的效果
console.log([...new Set(arr)]) //[1,2,3,5]
Salin selepas log masuk
, anda juga boleh menerima parameter kedua Parameter kedua dihantar ke fungsi untuk mencapai kesan yang serupa dengan kaedah peta, memproses setiap elemen dan mengembalikan tatasusunan yang diproses

cosnt toArray = (() => {
    Array.from ? Array.from : obj => [].slice.call(obj)
})()
Salin selepas log masuk

Mengembalikan panjang rentetan
Array.from([1,2,3] , item => item *2)    //[2,4,6]
Salin selepas log masuk
  • boleh digunakan untuk menukar rentetan kepada tatasusunan dan kemudian mengembalikan panjang rentetan rentetan kerana ia mengendalikannya dengan betul Pelbagai aksara Unikod, dengan itu mengelakkan pepijat JS sendiri dalam mengira aksara Unikod yang lebih besar daripada /uFFFF sebagai 2 aksara

2, Array.of()
function countLength(string) {
    return Array.from(string).length
}
Salin selepas log masuk

Kaedah Array.of digunakan untuk menukar set nilai kepada tatasusunan. Tebus kekurangan pembina tatasusunan Array(). Oleh kerana bilangan parameter adalah berbeza, tingkah laku Array() akan berbeza

3 Find() dan findIndex() bagi tika array
//如下代码看出差异
Array.of(3); // [3]
Array.of(3, 11, 8); // [3,11,8]

new Array(3); // [, , ,]
new Array(3, 11, 8); // [3, 11, 8]

// Array.of方法可以用下面的代码模拟实现。

function ArrayOf() {
  return [].slice.call(arguments);
}
Salin selepas log masuk

find()

mengembalikan ahli tatasusunan pertama yang memenuhi syarat Parameternya ialah fungsi panggil balik Semua ahli tatasusunan melaksanakan fungsi ini dalam urutan sehingga A pertama ahli yang memenuhi syarat, dan kemudian mengembalikan ahli Jika tiada ahli yang memenuhi syarat, ia mengembalikan tidak ditentukanFungsi panggil balik kaedah ini menerima tiga parameter: nilai semasa, kedudukan semasa, tatasusunan asal<. 🎜>

Contoh 1

Contoh 2

[1,12,4,0,5].find((item,index , arr) => return item < 1)   // 0
Salin selepas log masuk
findIndex()

// find()
var item = [1, 4, -5, 10].find(n => n < 0);
console.log(item); // -5
// find 也支持这种复杂的查找
var points = [
  {
    x: 10,
    y: 20
  },
  {
    x: 20,
    y: 30
  },
  {
    x: 30,
    y: 40
  },
  {
    x: 40,
    y: 50
  },
  {
    x: 50,
    y: 60
  }
];
points.find(function matcher(point) {
  return point.x % 3 == 0 && point.y % 4 == 0;
}); // { x: 30, y: 40 }
Salin selepas log masuk
Tulisan dan penggunaan pada asasnya sama sebagai kaedah find() Hanya mengembalikan kedudukan ahli tatasusunan pertama yang memenuhi kriteria, atau -1 jika tiada

4 kaedah isi() contoh tatasusunan

kaedah fill() menggunakan nilai yang diberikan untuk mengisi tatasusunan

Kaedah isian juga boleh menerima yang pertama Parameter kedua dan ketiga digunakan untuk menentukan kedudukan permulaan dan kedudukan akhir pengisian
[1,2,4,15,0].findIndex((item , index ,arr) => return item > 10)   //3
Salin selepas log masuk

var points = [
  {
    x: 10,
    y: 20
  },
  {
    x: 20,
    y: 30
  },
  {
    x: 30,
    y: 40
  },
  {
    x: 40,
    y: 50
  },
  {
    x: 50,
    y: 60
  }
];
points.findIndex(function matcher(point) {
  return point.x % 3 == 0 && point.y % 4 == 0;
}); // 2
points.findIndex(function matcher(point) {
  return point.x % 6 == 0 && point.y % 7 == 0;
}); //1
Salin selepas log masuk
Kedua-dua kaedah boleh mencari NaN dalam tatasusunan, dan indexOf() dalam ES5 NaN tidak boleh ditemui

5 entries(), keys() dan values()

  • contoh tatasusunan Untuk melintasi tatasusunan, objek traverser dikembalikan dan gelung for...of boleh digunakan untuk melintasi
  • Perbezaannya ialah:
// fill方法使用给定值, 填充一个数组。
var fillArray = new Array(6).fill(1);
console.log(fillArray); //[1, 1, 1, 1, 1, 1]
//fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
["a", "b", "c"].fill(7, 1, 2);
// [&#39;a&#39;, 7, &#39;c&#39;]
// 注意,如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。
let arr = new Array(3).fill({
  name: "Mike"
});
arr[0].name = "Ben";
console.log(arr);
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]
Salin selepas log masuk

keys() ialah lintasan nama kunci

values() ialah traversal of nilai utama

entri() ialah lintasan pasangan nilai kunci

  • 6 () kaedah mengembalikan nilai Boolean
  • Kaedah ini mengembalikan nilai Boolean yang menunjukkan sama ada tatasusunan mengandungi nilai yang diberikan Nilai
  • juga boleh menerima parameter kedua , menunjukkan kedudukan permulaan carian Lalai ialah 0. Jika parameter kedua ialah nombor negatif, ia menunjukkan kedudukan nombor tersebut. Jika parameter kedua lebih besar daripada panjang tatasusunan, ia bermula dari subskrip 0.

  • termasuk kaedah menebus kelemahan kaedah indexOf yang tidak cukup semantik dan salah menilai NaN
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"
var a = [1, 2, 3];
[...a.values()]; // [1,2,3]
[...a.keys()]; // [0,1,2]
[...a.entries()]; // [ [0,1], [1,2], [2,3] ]
Salin selepas log masuk

Kaedah yang serasi:

7 rata() bagi tika tatasusunan, flatMap()

[1, 2, 3].includes(2) // true
[(1, 2, 3)].includes(4) // false
Salin selepas log masuk

flat() digunakan untuk menyarang Tatasusunan "diratakan" menjadi tatasusunan satu dimensi. Kaedah ini mengembalikan tatasusunan baharu dan tidak mempunyai kesan ke atas data asal. Parameter yang diluluskan mewakili bilangan lapisan untuk diratakan. Lalai ialah satu lapisan

flatMap() hanya boleh mengembangkan satu lapisan tatasusunan. Kaedah melaksanakan fungsi pada setiap ahli tatasusunan asal (bersamaan dengan melaksanakan Array.prototype.map()), dan kemudian melaksanakan kaedah flat() pada tatasusunan yang terdiri daripada nilai pulangan. Kaedah ini mengembalikan tatasusunan baharu tanpa mengubah tatasusunan asal
[1,23,NaN].includes(NaN)   //true
Salin selepas log masuk

function contains = ( () => {
    Array.prototype.includes
    	?(arr , val) => arr.includes(val)
    	:(arr , val) => arr.some(item => return item === val)
})()
Salin selepas log masuk

8. Copywithin() bagi contoh tatasusunan <🎜. > berada dalam Salin ahli pada kedudukan yang ditentukan ke kedudukan lain dalam tatasusunan semasa, dan kemudian kembali ke tatasusunan semasa, yang akan menukar tatasusunan asal

    menerima tiga parameter:
  • 1. . sasaran (diperlukan) Mula menggantikan dari kedudukan ini Data
  • 2、start(可选) 从该位置开始读取数据,默认为0,如果为负数,则表示到数

    3、end(可选) 到该位置前停止读取数据,默认等于数组长度。如果是负数,表示到数

    三个参数都应该是数字,如果不是,会自动转为数值

    [1,2,3,4,5].copywithin(0,3);  //[4,5,3,4,5]  表示从下标3位置直到结束的成员(4,5),复制到从下标0开始的位置,结果替换掉了原来的1和2
    Salin selepas log masuk

    【相关推荐:javascript视频教程web前端

    Atas ialah kandungan terperinci Apakah kaedah tatasusunan baharu dalam es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
es6
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!