Welche neuen Erweiterungen werden zu es6 hinzugefügt?

Neue Erweiterungen in es6: 1. Ermöglicht das Festlegen von Standardwerten für Funktionsparameter 2. Pfeilfunktion hinzugefügt, Sie können den Pfeil „=>“ verwenden, um die Funktion zu definieren, die Syntax lautet „var function name=(parameter)“ => {...}"; 3. Das erweiterte Elementzeichen „..." kann ein Array in eine durch Kommas getrennte Parametersequenz umwandeln und kann auch einige Datenstrukturen in Arrays umwandeln.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

ES6 neue Erweiterungen

1. Funktionsparameter

ES6 ermöglicht das Festlegen von Standardwerten für FunktionsparameterES6允许为函数的参数设置默认值

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

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

函数的形参是默认声明的，不能使用let或const再次声明

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

参数默认值可以与解构赋值的默认值结合起来使用

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函数，当参数为对象的时候才能进行解构，如果没有提供参数的时候，变量x和y就不会生成，从而报错，这里设置默认值避免

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

foo() // undefined 5

参数默认值应该是函数的尾参数，如果不是非尾部的参数设置默认值，实际上这个参数是没发省略的

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

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

二、函数属性

函数的length属性

length将返回没有指定默认值的参数个数

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

rest 参数也不会计入length属性

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

如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了

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

name属性

返回该函数的函数名

var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"

如果将一个具名函数赋值给一个变量，则 name属性都返回这个具名函数原本的名字

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

Function构造函数返回的函数实例，name属性的值为anonymous

(new Function).name // "anonymous"

bind返回的函数，name属性值会加上bound前缀

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

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

三、函数作用域

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域

等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的

下面例子中，y=x会形成一个单独作用域，x没有被定义，所以指向全局变量x

let x = 1;

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

f() // 1

四、严格模式

只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错

// 报错
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
  }
};

五、箭头函数

使用“箭头”（=>）定义函数

var f = v => v;

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

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分

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

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

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回

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

如果返回对象，需要加括号将对象包裹

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

注意点：

• 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

• 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误

• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替

• 不可以使用yield

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

  Die formalen Parameter von Funktionen werden standardmäßig deklariert und können nicht Verwenden Sie let oder const, um erneut zu deklarieren.

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

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

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

Der Standardwert des Parameters kann mit dem Standardwert der Destrukturierungszuweisung kombiniert werden, um

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

foo< zu verwenden /code> Funktion oben kann die Destrukturierung nur durchgeführt werden, wenn es sich bei den Parametern um Objekte handelt. Wenn keine Parameter angegeben werden, werden die Variablen <code>x und y nicht generiert, was zu einem führt Legen Sie hier den Standardwert fest, um

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

Der Standardparameterwert sollte der Endparameter der Funktion sein. Wenn es sich nicht um einen Nicht-Tail-Parametereinstellungs-Standardwert handelt, wird dieser Parameter tatsächlich nicht weggelassen

2. Funktionsattribute

Das Längenattribut der Funktion

length gibt die Anzahl der Parameter ohne angegebenen Standardwert zurück

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

rest Parameter werden nicht im length-Attribut gezählt

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

falls gesetzt Der Parameter mit dem Standardwert ist nicht der Tail-Parameter, daher wird das length-Attribut im Folgenden nicht mehr gezählt Parameter

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

Namensattribut

Gibt den Funktionsnamen der Funktion zurück

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

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

Wenn eine benannte Funktion einer Variablen zugewiesen wird, gibt das Attribut name den ursprünglichen Namen der benannten Funktion zurück

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

Die vom Function-Konstruktor zurückgegebene Funktionsinstanz, name. Der Wert des Attributs ist die von anonymous🎜

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]

🎜bind, und dem Attributwert name wird bound vorangestellt Wenn der Parameter festgelegt ist, bilden die Parameter einen separaten Bereich, wenn die Funktion deklariert und initialisiert wird. 🎜🎜 Wenn die Initialisierung abgeschlossen ist, verschwindet dieser Bereich. Dieses grammatikalische Verhalten tritt nicht auf, wenn der Standardwert des Parameters nicht festgelegt ist. Im folgenden Beispiel bildet y=x einen separaten Bereich, x jedoch not ist definiert, daher zeigt es auf die globale Variable . Die Formel ist auf den strikten Modus eingestellt, andernfalls wird ein Fehler gemeldet >), um die Funktion zu definieren🎜

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

🎜Wenn die Pfeilfunktion keine Parameter erfordert. Oder wenn Sie mehrere Parameter benötigen, verwenden Sie eine Klammer, um den Parameterteil darzustellen🎜

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

🎜Wenn der Codeblock der Pfeilfunktion mehr ist Wenn Sie mehr als eine Anweisung verwenden, müssen Sie geschweifte Klammern verwenden, um sie einzuschließen, und die return-Anweisung Return verwenden ul>

🎜Das this-Objekt im Funktionskörper ist das Objekt, in dem es definiert wurde, nicht das Objekt, in dem es verwendet wird🎜🎜

🎜 kann nicht als Konstruktor verwendet werden Das heißt, der Befehl new kann nicht verwendet werden, andernfalls wird ein Fehler ausgegeben🎜🎜

🎜kann nicht verwendet werden arguments Objekt, das in der Funktion nicht vorhanden ist Körper. Wenn Sie es verwenden möchten, können Sie stattdessen den Parameter rest verwenden. 🎜🎜

🎜Sie können den Befehl yield nicht verwenden, daher kann die Pfeilfunktion nicht als verwendet werden Generatorfunktion🎜🎜🎜🎜🎜🎜6, Erweiterungsoperator 🎜🎜🎜🎜ES6 verwendet den Erweiterungselementoperator ..., wie die Umkehroperation von Restparametern, um ein Array hauptsächlich in eine durch Kommas getrennte Parametersequenz umzuwandeln 🎜

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

🎜 Wird beim Aufrufen von Funktionen zum Konvertieren eines Arrays verwendet. Als Parametersequenz🎜

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

🎜 können Sie einige Datenstrukturen in Arrays konvertieren🎜

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

🎜, was das Kopieren von Arrays erleichtern kann🎜

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

🎜Das Zusammenführen von Arrays ist auch prägnanter🎜

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

🎜Hinweis : Was durch den Spread-Operator erreicht wird, ist eine flache Kopie. Die Änderung des Werts, auf den die Referenz zeigt, wird synchron im neuen Array widergespiegelt. Schauen Sie sich das Beispiel unten an, um es klarer zu machen. Der Spread-Operator kann mit Destrukturierung kombiniert werden Zuweisung zum Generieren eines Arrays🎜

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

🎜Wenn der Spread-Operator für ein Array verwendet wird. Die Zuweisung kann nur an der letzten Position des Parameters platziert werden, andernfalls wird ein Fehler gemeldet🎜

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

🎜Sie können die Zeichenfolge in ein echtes Array konvertieren🎜

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

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

🎜Objekte, die die Iterator-Schnittstelle (Iterator) definieren, können mithilfe des Spread-Operators in echte Arrays umgewandelt werden. Ein Array🎜

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

🎜Wenn Sie den Spread-Operator für ein Objekt ohne Iterator-Schnittstelle verwenden, wird ein Fehler gemeldet🎜

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的前面，跟原始顺序一致

Das obige ist der detaillierte Inhalt vonWelche neuen Erweiterungen werden zu es6 hinzugefügt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!