Apakah sambungan baharu yang ditambahkan pada es6?

Pelanjutan baharu dalam es6: 1. Benarkan menetapkan nilai lalai untuk parameter fungsi 2. Fungsi anak panah baharu, anda boleh menggunakan anak panah "=>" untuk mentakrifkan fungsi, sintaks "var function name = (parameter )=>{...}"; 3. Aksara elemen lanjutan "..." boleh menukar tatasusunan menjadi jujukan parameter yang dipisahkan koma dan juga boleh menukar beberapa struktur data kepada tatasusunan.

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

Pelanjutan baharu ES6

1. Parameter fungsi

ES6 dibenarkan untuk menjadi. Nilai lalai tetapan parameter fungsi

function log(x, y = 'World') {
  console.log(x, y);
}

console.log('Hello') // Hello World
console.log('Hello', 'China') // Hello China
console.log('Hello', '') // Hello

Parameter formal fungsi diisytiharkan secara lalai dan tidak boleh diisytiharkan semula menggunakan let atau const

function foo(x = 5) {
    let x = 1; // error
    const x = 2; // error
}

Nilai lalai parameter boleh dimusnahkan Nilai lalai tugasan digabungkan menggunakan fungsi

di atas

function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

foo Pemusnahan hanya boleh dilakukan apabila parameter ialah objek Jika tiada parameter disediakan, pembolehubah x dan y tidak akan dijana, sekali gus melaporkan ralat Tetapkan nilai lalai di sini untuk mengelakkan

function foo({x, y = 5} = {}) {
  console.log(x, y);
}

foo() // undefined 5

Nilai lalai parameter hendaklah menjadi parameter ekor bagi fungsi tersebut nilai lalai tetapan parameter bukan ekor, sebenarnya parameter ini tidak ditinggalkan

function f(x = 1, y) {
  return [x, y];
}

f() // [1, undefined]
f(2) // [2, undefined]
f(, 1) // 报错
f(undefined, 1) // [1, 1]

Atribut fungsi

Atribut fungsi. atribut panjang fungsi

length akan Mengembalikan bilangan parameter tanpa nilai lalai yang ditentukan

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

rest Parameter tidak akan dikira dalam length atribut

(function(...args) {}).length // 0

Jika parameter dengan set nilai lalai bukan parameter ekor, Maka atribut length tidak lagi akan dikira dalam parameter berikutnya

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

atribut nama

mengembalikan nama fungsi fungsi

var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"

Jika fungsi yang dinamakan diberikan kepada pembolehubah, atribut name akan mengembalikan nama asal bagi fungsi bernama

const bar = function baz() {};
bar.name // "baz"

Function contoh fungsi yang dikembalikan oleh pembina, dan nilai atribut name Untuk fungsi yang dikembalikan oleh anonymous

(new Function).name // "anonymous"

bind, nilai atribut name akan ditambah dengan awalan bound

function foo() {};
foo.bind({}).name // "bound foo"

(function(){}).bind({}).name // "bound "

3. Skop Fungsi

Setelah nilai lalai parameter ditetapkan, apabila fungsi diisytiharkan dan dimulakan, parameter akan membentuk skop berasingan

Apabila permulaan selesai, skop ini akan hilang. Tingkah laku tatabahasa ini tidak akan muncul apabila nilai lalai parameter tidak ditetapkan

Dalam contoh berikut, y=x akan membentuk skop yang berasingan dan x tidak ditakrifkan, jadi ia menunjuk kepada pembolehubah globalx

let x = 1;

function f(y = x) { 
  // 等同于 let y = x  
  let x = 2; 
  console.log(y);
}

f() // 1

4. Mod ketat

Selagi parameter fungsi menggunakan nilai lalai, memusnahkan tugasan atau operator spread, maka Anda tidak boleh menetapkan mod ketat secara eksplisit di dalam fungsi, jika tidak, ralat akan dilaporkan

// 报错
function doSomething(a, b = a) {
  'use strict';
  // code
}

// 报错
const doSomething = function ({a, b}) {
  'use strict';
  // code
};

// 报错
const doSomething = (...a) => {
  'use strict';
  // code
};

const obj = {
  // 报错
  doSomething({a, b}) {
    'use strict';
    // code
  }
};

5. Fungsi anak panah

Gunakan " anak panah" (=>) Tentukan fungsi

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

Jika fungsi anak panah tidak memerlukan parameter atau memerlukan berbilang parameter, gunakan tanda kurung untuk mewakili bahagian parameter

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

Jika kod fungsi anak panah Jika terdapat lebih daripada satu pernyataan dalam blok, anda mesti menggunakan kurungan kerinting untuk melampirkannya dan gunakan pernyataan return untuk mengembalikan

var sum = (num1, num2) => { return num1 + num2; }

Jika anda mengembalikan objek, anda perlu membalut objek dalam kurungan

let getTempItem = id => ({ id: id, name: "Temp" });

Nota:

• Objek this dalam badan fungsi ialah objek di mana ia ditakrifkan, bukan objek di mana ia digunakan

• Tidak boleh digunakan sebagai pembina, iaitu perintah new tidak boleh digunakan, jika tidak ralat akan dilemparkan

• Objek arguments tidak boleh digunakan, objek berada dalam fungsi Tidak wujud dalam badan. Jika anda ingin menggunakannya, anda boleh menggunakan parameter rest dan bukannya

• Perintah yield tidak boleh digunakan, jadi fungsi anak panah tidak boleh digunakan sebagai fungsi Penjana

6 Operator pengembangan

ES6 menggunakan operator elemen pengembangan..., seperti operasi songsang rehat. parameter, untuk menukar tatasusunan menjadi parameter yang dipisahkan koma

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('p')]
// [<p>, <p>, <p>]

digunakan terutamanya apabila memanggil fungsi Mengubah tatasusunan menjadi jujukan parameter

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

boleh menukar beberapa struktur data. ke dalam tatasusunan

[...document.querySelectorAll('p')]

Penyalinan tatasusunan boleh direalisasikan dengan lebih mudah

const a1 = [1, 2];
const [...a2] = a1;
// [1,2]

Penggabungan tatasusunan juga lebih mudah

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

Nota: Salinan cetek dilaksanakan melalui penyebaran operator, dan titik rujukan diubahsuai Nilai akan dicerminkan kepada tatasusunan baharu secara serentak
Mari lihat contoh untuk menjadikannya lebih jelas

const arr1 = ['a', 'b',[1,2]];
const arr2 = ['c'];
const arr3  = [...arr1,...arr2]
arr1[2][0] = 9999 // 修改arr1里面数组成员值
console.log(arr3 ) // 影响到arr3,['a','b',[9999,2],'c']

Operator spread boleh digabungkan dengan tugasan memusnahkan untuk menjana tatasusunan

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

Jika operator hamparan digunakan untuk penugasan tatasusunan, ia hanya boleh diletakkan pada kedudukan terakhir parameter, jika tidak, ralat akan dilaporkan

const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错

Anda boleh menukar rentetan kepada tatasusunan sebenar

[...'hello']
// [ "h", "e", "l", "l", "o" ]

Objek dengan antara muka Iterator yang ditakrifkan boleh ditukar kepada tatasusunan sebenar menggunakan operator hamparan

let nodeList = document.querySelectorAll('p');
let array = [...nodeList];

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let arr = [...map.keys()]; // [1, 2, 3]

Jika anda menggunakan operator hamparan untuk objek tanpa antara muka Iterator, ralat akan dilaporkan

const obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object

七、构造函数新增的方法

关于构造函数，数组新增的方法有如下：

• Array.from()
• Array.of()

Array.from()

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

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

还可以接受第二个参数，用来对每个元素进行处理，将处理后的值放入返回的数组

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

Array.of()

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

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

没有参数的时候，返回一个空数组
当参数只有一个的时候，实际上是指定数组的长度
参数个数不少于 2 个时，Array()才会返回由参数组成的新数组

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

八、实例对象新增的方法

关于数组实例对象新增的方法有如下：

• copyWithin()
• find()、findIndex()
• fill()
• entries()，keys()，values()
• includes()
• flat()，flatMap()

copyWithin()

将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组
参数如下：

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

[1, 2, 3, 4, 5].copyWithin(0, 3) // 将从 3 号位直到数组结束的成员（4 和 5），复制到从 0 号位开始的位置，结果覆盖了原来的 1 和 2
// [4, 5, 3, 4, 5]

find()、findIndex()

find()用于找出第一个符合条件的数组成员
参数是一个回调函数，接受三个参数依次为当前的值、当前的位置和原数组

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

findIndex返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

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

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

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

fill()

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

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

new Array(3).fill(7)
// [7, 7, 7]

还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置

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

注意，如果填充的类型为对象，则是浅拷贝

entries()，keys()，values()

keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

or (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"

includes()

用于判断数组是否包含给定的值

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

方法的第二个参数表示搜索的起始位置，默认为0
参数为负数则表示倒数的位置

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

flat()，flatMap()

将数组扁平化处理，返回一个新数组，对原数据没有影响

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

flatMap()方法对原数组的每个成员执行一个函数相当于执行Array.prototype.map()，然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this

九、数组的空位

数组的空位指，数组的某一个位置没有任何值

ES6 则是明确将空位转为undefined，包括Array.from、扩展运算符、copyWithin()、fill()、entries()、keys()、values()、find()和findIndex()

建议大家在日常书写中，避免出现空位

十、排序稳定性

将sort()默认设置为稳定的排序算法

const arr = [
  'peach',
  'straw',
  'apple',
  'spork'
];

const stableSorting = (s1, s2) => {
  if (s1[0] < s2[0]) return -1;
  return 1;
};

arr.sort(stableSorting)
// ["apple", "peach", "straw", "spork"]

排序结果中，straw在spork的前面，跟原始顺序一致

Atas ialah kandungan terperinci Apakah sambungan baharu yang ditambahkan pada es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!