" untuk mentakrifkan fungsi, sintaksnya ialah "var function name=(parameter)=>{ ... }"; 3. Aksara elemen lanjutan "..." boleh menukar tatasusunan kepada jujukan parameter yang dipisahkan dengan koma dan juga boleh menukar beberapa struktur data kepada tatasusunan."/> " untuk mentakrifkan fungsi, sintaksnya ialah "var function name=(parameter)=>{ ... }"; 3. Aksara elemen lanjutan "..." boleh menukar tatasusunan kepada jujukan parameter yang dipisahkan dengan koma dan juga boleh menukar beberapa struktur data kepada tatasusunan.">
Rumah > Artikel > hujung hadapan web > 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.
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 atasfunction 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()
将两类对象转为真正的数组:类似数组的对象和可遍历(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()
将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组
参数如下:
[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!