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.
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>]
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
[...document.querySelectorAll('p')]
foo< /code> 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]
const arr1 = ['a', 'b']; const arr2 = ['c']; const arr3 = ['d', 'e']; [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]
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]; // 报错
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]
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']
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🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>🎜🎜🎜5. Fonction flèche🎜🎜🎜🎜Utilisez "flèche" (<code>= >
) pour définir la fonction🎜Array.of(3, 11, 8) // [3,11,8]
Array() // [] Array(3) // [, , ,] Array(3, 11, 8) // [3, 11, 8]
return
Return🎜[1, 2, 3, 4, 5].copyWithin(0, 3) // 将从 3 号位直到数组结束的成员(4 和 5),复制到从 0 号位开始的位置,结果覆盖了原来的 1 和 2 // [4, 5, 3, 4, 5]
[1, 5, 10, 15].find(function(value, index, arr) { return value > 9; }) // 10
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é🎜🎜new
ne peut pas être utilisée, sinon une erreur sera générée🎜🎜arguments
, qui n'existe pas dans la fonction corps. Si vous souhaitez l'utiliser, vous pouvez utiliser le paramètre rest
à la place🎜🎜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
function f(v){ return v > this.age; } let person = {name: 'John', age: 20}; [10, 12, 26, 15].find(f, person); // 26
['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']
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"
[1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false [1, 2, NaN].includes(NaN) // true
[1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true
[1, 2, [3, 4]].flat() // [1, 2, 3, 4]
[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]] [1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
// 相当于 [[2, 4], [3, 6], [4, 8]].flat() [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]
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的前面,跟原始顺序一致
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!