Heim > Web-Frontend > Front-End-Fragen und Antworten > Welche neuen Erweiterungen werden zu es6 hinzugefügt?

Welche neuen Erweiterungen werden zu es6 hinzugefügt?

青灯夜游
Freigeben: 2022-04-13 11:52:24
Original
2113 Leute haben es durchsucht

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.

Welche neuen Erweiterungen werden zu es6 hinzugefügt?

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
Nach dem Login kopieren

函数的形参是默认声明的,不能使用letconst再次声明

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

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

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
Nach dem Login kopieren

上面的foo函数,当参数为对象的时候才能进行解构,如果没有提供参数的时候,变量xy就不会生成,从而报错,这里设置默认值避免

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

foo() // undefined 5
Nach dem Login kopieren

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

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

f() // [1, undefined]
f(2) // [2, undefined]
f(, 1) // 报错
f(undefined, 1) // [1, 1]
Nach dem Login kopieren

二、函数属性

函数的length属性

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

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

rest 参数也不会计入length属性

(function(...args) {}).length // 0
Nach dem Login kopieren

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

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1
Nach dem Login kopieren

name属性

返回该函数的函数名

var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"
Nach dem Login kopieren

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

const bar = function baz() {};
bar.name // "baz"
Nach dem Login kopieren

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

(new Function).name // "anonymous"
Nach dem Login kopieren

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

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

(function(){}).bind({}).name // "bound "
Nach dem Login kopieren

三、函数作用域

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

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

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

let x = 1;

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

f() // 1
Nach dem Login kopieren

四、严格模式

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

// 报错
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
  }
};
Nach dem Login kopieren

五、箭头函数

使用“箭头”(=>)定义函数

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};
Nach dem Login kopieren

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

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

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

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

var sum = (num1, num2) => { return num1 + num2; }
Nach dem Login kopieren

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

let getTempItem = id => ({ id: id, name: "Temp" });
Nach dem Login kopieren

注意点:

  • 函数体内的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>]
    Nach dem Login kopieren

    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
    Nach dem Login kopieren
Der Standardwert des Parameters kann mit dem Standardwert der Destrukturierungszuweisung kombiniert werden, um

[...document.querySelectorAll(&#39;p&#39;)]
Nach dem Login kopieren
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]
Nach dem Login kopieren
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 = [&#39;a&#39;, &#39;b&#39;];
const arr2 = [&#39;c&#39;];
const arr3 = [&#39;d&#39;, &#39;e&#39;];
[...arr1, ...arr2, ...arr3]
// [ &#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;, &#39;e&#39; ]
Nach dem Login kopieren

rest Parameter werden nicht im length-Attribut gezählt

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

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   // []
Nach dem Login kopieren

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];
// 报错
Nach dem Login kopieren

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

[...&#39;hello&#39;]
// [ "h", "e", "l", "l", "o" ]
Nach dem Login kopieren

Die vom Function-Konstruktor zurückgegebene Funktionsinstanz, name. Der Wert des Attributs ist die von anonymous🎜
let nodeList = document.querySelectorAll(&#39;p&#39;);
let array = [...nodeList];

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

let arr = [...map.keys()]; // [1, 2, 3]
Nach dem Login kopieren
🎜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
Nach dem Login kopieren
Nach dem Login kopieren
🎜Wenn die Pfeilfunktion keine Parameter erfordert. Oder wenn Sie mehrere Parameter benötigen, verwenden Sie eine Klammer, um den Parameterteil darzustellen🎜
let arrayLike = {
    &#39;0&#39;: &#39;a&#39;,
    &#39;1&#39;: &#39;b&#39;,
    &#39;2&#39;: &#39;c&#39;,
    length: 3
};
let arr2 = Array.from(arrayLike); // [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
Nach dem Login kopieren
Nach dem Login kopieren
🎜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]
    Nach dem Login kopieren
    Nach dem Login kopieren
    🎜 Wird beim Aufrufen von Funktionen zum Konvertieren eines Arrays verwendet. Als Parametersequenz🎜
    Array.of(3, 11, 8) // [3,11,8]
    Nach dem Login kopieren
    Nach dem Login kopieren
    🎜 können Sie einige Datenstrukturen in Arrays konvertieren🎜
    Array() // []
    Array(3) // [, , ,]
    Array(3, 11, 8) // [3, 11, 8]
    Nach dem Login kopieren
    Nach dem Login kopieren
    🎜, 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]
    Nach dem Login kopieren
    Nach dem Login kopieren
    🎜Das Zusammenführen von Arrays ist auch prägnanter🎜
    [1, 5, 10, 15].find(function(value, index, arr) {
      return value > 9;
    }) // 10
    Nach dem Login kopieren
    Nach dem Login kopieren
    🎜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
    Nach dem Login kopieren
    Nach dem Login kopieren
    🎜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: &#39;John&#39;, age: 20};
    [10, 12, 26, 15].find(f, person);    // 26
    Nach dem Login kopieren
    Nach dem Login kopieren
    🎜Sie können die Zeichenfolge in ein echtes Array konvertieren🎜
    [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;].fill(7)
    // [7, 7, 7]
    
    new Array(3).fill(7)
    // [7, 7, 7]
    Nach dem Login kopieren
    Nach dem Login kopieren
    🎜Objekte, die die Iterator-Schnittstelle (Iterator) definieren, können mithilfe des Spread-Operators in echte Arrays umgewandelt werden. Ein Array🎜
    [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;].fill(7, 1, 2)
    // [&#39;a&#39;, 7, &#39;c&#39;]
    Nach dem Login kopieren
    Nach dem Login kopieren
    🎜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
    Nach dem Login kopieren
    Nach dem Login kopieren

    七、构造函数新增的方法

    关于构造函数,数组新增的方法有如下:

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

    Array.from()

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

    let arrayLike = {
        &#39;0&#39;: &#39;a&#39;,
        &#39;1&#39;: &#39;b&#39;,
        &#39;2&#39;: &#39;c&#39;,
        length: 3
    };
    let arr2 = Array.from(arrayLike); // [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
    Nach dem Login kopieren
    Nach dem Login kopieren

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

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

    Array.of()

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

    Array.of(3, 11, 8) // [3,11,8]
    Nach dem Login kopieren
    Nach dem Login kopieren

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

    Array() // []
    Array(3) // [, , ,]
    Array(3, 11, 8) // [3, 11, 8]
    Nach dem Login kopieren
    Nach dem Login kopieren

    八、实例对象新增的方法

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

    • 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]
    Nach dem Login kopieren
    Nach dem Login kopieren

    find()、findIndex()

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

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

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

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

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

    function f(v){
      return v > this.age;
    }
    let person = {name: &#39;John&#39;, age: 20};
    [10, 12, 26, 15].find(f, person);    // 26
    Nach dem Login kopieren
    Nach dem Login kopieren

    fill()

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

    [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;].fill(7)
    // [7, 7, 7]
    
    new Array(3).fill(7)
    // [7, 7, 7]
    Nach dem Login kopieren
    Nach dem Login kopieren

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

    [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;].fill(7, 1, 2)
    // [&#39;a&#39;, 7, &#39;c&#39;]
    Nach dem Login kopieren
    Nach dem Login kopieren

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

    entries(),keys(),values()

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

    or (let index of [&#39;a&#39;, &#39;b&#39;].keys()) {
      console.log(index);
    }
    // 0
    // 1
    
    for (let elem of [&#39;a&#39;, &#39;b&#39;].values()) {
      console.log(elem);
    }
    // &#39;a&#39;
    // &#39;b&#39;
    
    for (let [index, elem] of [&#39;a&#39;, &#39;b&#39;].entries()) {
      console.log(index, elem);
    }
    // 0 "a"
    Nach dem Login kopieren

    includes()

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

    [1, 2, 3].includes(2)     // true
    [1, 2, 3].includes(4)     // false
    [1, 2, NaN].includes(NaN) // true
    Nach dem Login kopieren

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

    [1, 2, 3].includes(3, 3);  // false
    [1, 2, 3].includes(3, -1); // true
    Nach dem Login kopieren

    flat(),flatMap()

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

    [1, 2, [3, 4]].flat()
    // [1, 2, 3, 4]
    Nach dem Login kopieren

    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]
    Nach dem Login kopieren

    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]
    Nach dem Login kopieren

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

    九、数组的空位

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

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

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

    十、排序稳定性

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

    const arr = [
      &#39;peach&#39;,
      &#39;straw&#39;,
      &#39;apple&#39;,
      &#39;spork&#39;
    ];
    
    const stableSorting = (s1, s2) => {
      if (s1[0] < s2[0]) return -1;
      return 1;
    };
    
    arr.sort(stableSorting)
    // ["apple", "peach", "straw", "spork"]
    Nach dem Login kopieren

    排序结果中,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!

  • Verwandte Etiketten:
    es6
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage