Apakah kaedah tatasusunan es6?

Kaedah tatasusunan ES6 termasuk: "dari()", "daripada()", "copyWithin()", "fill()", "find()", "findIndex()", "includes( )", "entry()", "keys()", "values()", dsb.

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

Kaedah objek Tatasusunan Tradisional

• toSource() mengembalikan kod sumber objek.
• toString() Menukar tatasusunan kepada rentetan dan mengembalikan hasilnya.
• toLocaleString() Menukar tatasusunan kepada tatasusunan setempat dan mengembalikan hasilnya.
• valueOf() mengembalikan nilai asal objek tatasusunan

修改原数组	不修改原数组
push， pop	concat
unshift，shift	join
sort	slice
reverse	indexOf()，lastIndexOf()
splice	forEach
copyWithin	map
fill	filter
	some
	every
	reduce，reduceRight
	includes
	finde，findIndex
	entries()，keys()，values()

Ubah suai tatasusunan asal

• push() menambah satu atau lebih elemen pada penghujung tatasusunan dan mengembalikan panjang baharu.
• unshift() menambah satu atau lebih elemen pada permulaan tatasusunan dan mengembalikan panjang baharu.
• pop() mengalih keluar dan mengembalikan elemen terakhir tatasusunan
• shift() mengalih keluar dan mengembalikan elemen pertama tatasusunan
• sort() mengisih unsur-unsur array
• reverse() Balikkan susunan elemen dalam tatasusunan.
• splice() mengalih keluar elemen dan menambah elemen baharu pada tatasusunan.

splice

Syntax

arrayObject.splice(index,howmany,item1,.....,itemX)

var arr = new Array();
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";

arr.splice(2,1);               //"George", "John"
arr.splice(1,0,"William");     //"George", "William", "John"
arr.splice(2,1,"haha");        //"George", "William", "haha"

Jangan ubah suai tatasusunan asal

• concat() menggabungkan dua atau lebih tatasusunan dan mengembalikan hasilnya.
• join() meletakkan semua elemen tatasusunan ke dalam rentetan. Elemen dipisahkan oleh pembatas yang ditentukan.
• slice() Mengembalikan elemen terpilih daripada tatasusunan sedia ada

slice

Syntax

arrayObject.slice(start,end);

• mula Diperlukan. Menentukan tempat untuk memulakan pemilihan. Boleh menjadi negatif, mengira dari hujung tatasusunan.
• tamat Pilihan. Menentukan tempat pemilihan berakhir. Jika tidak dinyatakan, tatasusunan yang dihiris mengandungi semua elemen dari mula hingga akhir tatasusunan. Boleh menjadi negatif, mengira dari hujung tatasusunan.

var arr = new Array();
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";

arr.slice(2,1);         //[]
arr.slice(1,2);         //"William"
arr.slice(-2,-1);         //"William"

Tukar objek seperti tatasusunan (seperti argumen) kepada tatasusunan sebenar
Array.prototype.slice.call(arguments);

ES5 Baharu tatasusunan

• kaedah indeks: indexOf(), lastIndexOf()
• kaedah lelaran: forEach(), map(), filter(), some(), every( )
• Kaedah gabungan: reduce(), reduceRight()

kaedah tidak mengubah suai tatasusunan asal

Kaedah indeks

indexOf

array.indexOf(searchElement[, fromIndex])

• Mengembalikan nilai indeks integer, jika tiada padanan (padanan ketat), mengembalikan -1.
• fromIndex adalah pilihan, menunjukkan bahawa carian bermula dari kedudukan ini Jika lalai atau format tidak memenuhi keperluan, gunakan nilai lalai 0.

var data = [2, 5, 7, 3, 5];

console.log(data.indexOf(5, "x")); // 1 ("x"被忽略)
console.log(data.indexOf(5, "3")); // 4 (从3号位开始搜索)

lastIndexOf

array.lastIndexOf(searchElement[, fromIndex])

• Cari dari hujung rentetan, bukan dari awal.
• Nilai lalai fromIndex ialah array.length - 1.

var data = [2, 5, 7, 3, 5];

console.log(data.lastIndexOf(5)); // 4
console.log(data.lastIndexOf(5, 3)); // 1 (从后往前，索引值小于3的开始搜索)

console.log(data.lastIndexOf(4)); // -1 (未找到)

Kedua-dua kaedah akan menggunakan operator kesamaan apabila membandingkan parameter pertama dengan setiap item dalam tatasusunan Mereka mesti sama sepenuhnya, jika tidak -1 akan dikembalikan.

Kaedah berulang

Setiap kaedah menerima dua parameter, parameter panggil balik pertama (fungsi panggil balik, diperlukan), parameter kedua Parameter pertama ialah parameter konteks pilihan.

• Panggil balik parameter pertama menerima tiga parameter, nilai item semasa, indeks item semasa dalam tatasusunan dan objek tatasusunan itu sendiri. Iaitu, function(value,index,arr) {}; perlu diingatkan bahawa perbezaan daripada kaedah yang terkandung dalam jQuery yang biasa kami gunakan ialah parameter pertama dan parameter kedua, iaitu susunan indeks dan nilai diterbalikkan .
• Parameter kedua ialah parameter konteks pilihan, iaitu objek skop yang melaksanakan parameter fungsi pertama, iaitu nilai yang ditunjukkan oleh ini dalam panggilan balik yang dinyatakan di atas. Jika parameter pilihan kedua tidak ditentukan, objek global digunakan sebaliknya (tetingkap dalam penyemak imbas), atau bahkan tidak ditentukan dalam mod ketat.

Perlu diambil perhatian bahawa kecuali untuk kaedah forEach(), panggilan balik dalam kaedah lelaran lain perlu mempunyai nilai pulangan, jika tidak, ia akan kembali tidak ditentukan.

forEach

forEach() menggelung melalui tatasusunan dan menjalankan fungsi yang diberikan pada setiap item dalam tatasusunan Kaedah ini tidak mempunyai nilai pulangan.

[].forEach(function(value, index, array) {
    // ...
}, [ thisObject]);

• Selain menerima parameter fungsi panggil balik yang diperlukan, forEach juga boleh menerima parameter konteks pilihan (menukar penuding ini dalam fungsi panggil balik) (parameter kedua).
• Jika parameter pilihan kedua tidak ditentukan, objek global digunakan sebaliknya (tetingkap dalam penyemak imbas), atau bahkan tidak ditentukan dalam mod ketat.

[1, 2, 3, 4].forEach(function (item, index, array) {
  console.log(array[index] == item); // true
  sum += item;
});

alert(sum); // 10

var database = {
  users: ["张含韵", "江一燕", "李小璐"],
  sendEmail: function (user) {
    if (this.isValidUser(user)) {
      console.log("你好，" + user);
    } else {
      console.log("抱歉，"+ user +"，你不是本家人");    
    }
  },
  isValidUser: function (user) {
    return /^张/.test(user);
  }
};

// 给每个人法邮件
database.users.forEach(  // database.users中人遍历
  database.sendEmail,    // 发送邮件
  database               // 使用database代替上面标红的this
);

// 结果：
// 你好，张含韵
// 抱歉，江一燕，你不是本家人
// 抱歉，李小璐，你不是本家

map

map() merujuk kepada "pemetaan". Ia menjalankan fungsi yang diberikan pada setiap item dalam tatasusunan dan mengembalikan tatasusunan yang terdiri daripada hasil setiap panggilan fungsi.

[].map(function(value, index, array) {
    // ...
}, [ thisObject]);

var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function (item) {
  return item * item;
});

alert(arrayOfSquares); // 1, 4, 9, 16

penapis

penapis(), "penapis", menjalankan fungsi yang diberikan pada setiap item dalam tatasusunan dan mengembalikan komposisi yang memenuhi tatasusunan keadaan penapisan.

array.filter(callback,[ thisObject]);

• fungsi panggil balik penapis perlu mengembalikan nilai Boolean benar atau salah.
• Selagi nilai pulangan adalah sama lemah dengan == benar/salah, ia tidak perlu mengembalikan === benar/salah.

var arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var flag = arr3.filter(function(value, index) {
  return value % 3 === 0;
}); 
console.log(flag);  // [3, 6, 9]

setiap

setiap(), menentukan sama ada setiap item dalam tatasusunan memenuhi syarat yang diberikan Apabila semua item memenuhi syarat, akan kembali benar.
Nota: Jika tatasusunan kosong, benar akan dikembalikan

array.every(callback,[ thisObject]);

var arr4 = [1, 2, 3, 4, 5];
var flag = arr4.every(function(value, index) {
  return value % 2 === 0;
}); 
console.log(flag);  // false

beberapa

some(), menentukan sama ada terdapat item dalam tatasusunan yang memenuhi syarat Selagi satu item memenuhi syarat, ia akan kembali benar.
Nota: Jika tatasusunan kosong, false akan dikembalikan

array.some(callback,[ thisObject]);

var arr5 = [1, 2, 3, 4, 5];
var flag = arr5.some(function(value, index) {
  return value % 2 === 0;
}); 
console.log(flag);   // true

Kaedah gabungan

这两个方法相比前面可能稍微复杂一些，它们都会迭代数组中的所有项，然后生成一个最终返回值。这两个方法接收两个参数。

• 第一个参数callback，函数接受4个参数分别是（初始值total必选，当前值currentValue必选，索引值currentIndex可选，当前数组arr可选），函数需要返回一个值，这个值会在下一次迭代中作为初始值。
• 第二个参数是迭代初始值（initialValue），参数可选，如果缺省，初始值为数组第一项，从数组第一个项开始叠加，缺省参数要比正常传值少一次运算。

reduce

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 reduce() 对于空数组是不会执行回调函数的。

array. reduce(function(total, currentValue, currentIndex, array) {<br/> // ...<br/>});

var arr9 = [1, 2, 3, 4];
var sum9 =arr9.reduce(function (total, curr, index, array) {
  return total * curr;
});
console.log(sum9);  // 24 
var sum9_1 =arr9.reduce(function (total, curr, index, array) {
  return total * curr;
}, 10);
console.log(sum9_1);  // 240

reduceRight

reduceRight()和reduce()相比，用法类似，差异在于reduceRight是从数组的末尾开始实现的。

array.reduceRight(callback,[ thisObject]);

var arr9 = [2, 45, 30, 80];
var flag = arr9.reduceRight(function (total, curr, index) {
  return total - curr;
});
var flag_1 = arr9.reduceRight(function (total, curr, index) {
  return total - curr;
},200);
console.log(flag);  // 3
console.log(flag_1);  // 43

Array方法

isArray

判断参数是否是”Array”返回true或false。

var a = [1,2,3];
Array.isArray(a);   //true

ES6数组方法

Array方法

Array.from()

用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

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]

Array.of()

用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]

实例方法

会改变原数组

• copyWithin()

在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。

array. copyWithin(target, start = 0, end = this.length);

• target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
• start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

// 将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]

• fill()

使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7);   // [7, 7, 7]

let arr = new Array(3).fill([]);
arr[0].push(5);       // [[5], [5], [5]]

不会改变原数组

• find()

用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

• findIndex()

findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

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

• includes()

返回一个布尔值，表示某个数组是否包含给定的值。

[1, 2, 3].includes(2) // true

• entries()，keys() 和 values()

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

【推荐学习：javascript高级教程】

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