Quelles nouvelles extensions sont ajoutées à es6 ?

Nouvelles extensions dans es6 : 1. Autoriser la définition de valeurs par défaut pour les paramètres de fonction ; 2. Fonction de flèche ajoutée, vous pouvez utiliser la flèche "=>" pour définir la fonction, la syntaxe est "var function name=(paramètre) => {...}"; 3. Le caractère d'élément étendu "..." peut convertir un tableau en une séquence de paramètres séparée par des virgules, et peut également convertir certaines structures de données en tableaux.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Nouvelles extensions ES6

1. Paramètres de fonction

ES6 permet de définir des valeurs par défaut pour les paramètres de fonctionES6允许为函数的参数设置默认值

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

  Les paramètres formels des fonctions sont déclarés par défaut et ne peuvent pas Utilisez let ou const pour déclarer à nouveau

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

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

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

La valeur par défaut du paramètre peut être combinée avec la valeur par défaut de l'affectation de déstructuration pour utiliser le

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

foo ci-dessus, la déstructuration ne peut être effectuée que lorsque les paramètres sont des objets. Si aucun paramètre n'est fourni, les variables <code>x et y ne seront pas générées, ce qui entraînera un Erreur. Définissez la valeur par défaut ici pour éviter

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

La valeur du paramètre par défaut doit être le paramètre de queue de la fonction. S'il ne s'agit pas d'une valeur par défaut de paramètre non-queue, en fait, ce paramètre n'est pas omis

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

. 2. Attributs de fonction

L'attribut length de la fonction

length renverra le nombre de paramètres sans valeur par défaut spécifiée

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

rest les paramètres seront ne sera pas compté dans l'attribut length

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

if set Le paramètre avec la valeur par défaut n'est pas le paramètre tail, donc l'attribut length ne sera plus compté dans ce qui suit paramètres

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

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

attribut name

Renvoie le nom de la fonction

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

Si un nom Lorsqu'une fonction est affectée à une variable, l'attribut name renvoie le nom d'origine de la fonction nommée

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]

🎜L'instance de fonction renvoyée par le constructeur Function, name La valeur de l'attribut est la fonction renvoyée par anonymous🎜

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

🎜bind, et la valeur de l'attribut name sera préfixée par bound🎜

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

🎜🎜🎜3 Function scope🎜🎜🎜🎜Une fois la valeur par défaut de la. Le paramètre est défini, lorsque la fonction est déclarée et initialisée, les paramètres formeront une portée distincte🎜🎜Lorsque l'initialisation est terminée, cette portée disparaîtra. Ce type de comportement grammatical n'apparaîtra pas lorsque la valeur par défaut du paramètre n'est pas définie. Dans l'exemple suivant, y=x formera une portée distincte, mais x le fera. not est défini, donc il pointe vers la variable globale La formule est définie en mode strict, sinon une erreur sera signalée🎜<pre class="brush:js;toolbar:false;">Array.from([1, 2, 3], (x) =&gt; x * x) // [1, 4, 9]</pre>🎜🎜🎜5. Fonction flèche🎜🎜🎜🎜Utilisez "flèche" (<code>= >) pour définir la fonction🎜

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

🎜Si la fonction flèche ne nécessite pas de paramètres Ou si vous avez besoin de plusieurs paramètres, utilisez une parenthèse pour représenter la partie paramètre🎜

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

🎜Si le bloc de code de la fonction flèche est plus plus d'une instruction, vous devez utiliser des accolades pour les entourer et utiliser l'instruction return Return🎜

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

🎜Si vous renvoyez un objet, vous devez mettre l'objet entre parenthèses🎜

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

🎜Remarque :🎜

🎜L'objet this dans le corps de la fonction est l'objet dans lequel il a été défini, et non l'objet dans lequel il est utilisé🎜🎜

🎜 ne peut pas être utilisé comme constructeur, cela c'est-à-dire que la commande new ne peut pas être utilisée, sinon une erreur sera générée🎜🎜

🎜ne peut pas être utilisée avec un objet arguments, qui n'existe pas dans la fonction corps. Si vous souhaitez l'utiliser, vous pouvez utiliser le paramètre rest à la place🎜🎜

🎜Vous ne pouvez pas utiliser la commande yield, donc la fonction flèche ne peut pas être utilisée comme un Fonction générateur🎜🎜🎜🎜🎜🎜6, opérateur d'expansion 🎜🎜🎜🎜ES6 utilise l'opérateur d'élément d'expansion..., comme l'opération inverse des paramètres de repos, pour convertir un tableau en une séquence de paramètres séparés par des virgules 🎜

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

🎜 est principalement utilisé lors de l'appel de fonctions pour convertir un tableau en séquence de paramètres🎜

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

🎜, vous pouvez convertir certaines structures de données en tableaux🎜

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

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

🎜, ce qui peut faciliter la copie de tableaux🎜

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

🎜La fusion de tableaux est également plus concise🎜

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"

🎜Remarque : Ce qui est obtenu grâce à l'opérateur de propagation est une copie superficielle. La modification de la valeur pointée par la référence sera reflétée de manière synchrone dans le nouveau tableau🎜Regardez l'exemple ci-dessous pour le rendre plus clair🎜

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

🎜L'opérateur de propagation peut être combiné avec la déstructuration. affectation pour générer un tableau🎜

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

🎜Si l'opérateur spread est utilisé pour un tableau, l'affectation ne peut être placée qu'à la dernière position du paramètre, sinon une erreur sera signalée🎜

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

🎜Vous pouvez convertir la chaîne en un vrai tableau🎜

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

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

🎜Les objets qui définissent l'interface itérateur (Iterator) peuvent être convertis en tableaux réels à l'aide de l'opérateur spread An array🎜

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

🎜Si vous utilisez l'opérateur spread sur un objet sans interface Iterator, une erreur sera signalée🎜

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!