[ecmascript6] function and its related use

1、 Functions with parameter defaults

// es5
function es5_add(a, b) {
    a = a || 1;
    b = b || 2;
    return a + b;
}
console.log(es5_add());
//3

// es6
function es6_add(a=1, b=2) {
    return a + b;
}
console.log(es6_add());
//3

function es6_add1(a, b=2) {
    return a + b;
}
console.log(es6_add1(2));
//4

As you can see from the code above ,es5 Function parameters in are not allowed to be set with default values , and es6 You can and can mix parameters with and without default values .

2、 The default expression can also be a function

function es6_add(a=1, b=getBVal(5)) {
    return a + b;
}
function getBVal(val) {
    return val+1;
}
console.log(es6_add(2));
// 8

3、 Unnamed parameter function

function pick(obj) {
let result = Object.create(null);
    for(let i=1; i<arguments.length; i++) {
        result[arguments[i]] = obj[arguments[i]];
    }
    return result;
}
let book = {
    title: 'es6',
    author: 'Leozi',
    year: 2021
}
let bookData = pick(book, 'author', 'year');
console.log(bookData);

es6 The remaining parameters ： from ... And a named parameter immediately following it （...keys）.

Be careful ...keys It must be placed later in the function parameter , Otherwise an error .

function pick(obj, ...keys) {
console.log(keys);
// (2) ['author', 'year']
let result = Object.create(null);
for(let i=0; i<keys.length; i++) {
    result[keys[i]] = obj[keys[i]];
}
return result;
}
let book = {
    title: 'es6',
    author: 'Leozi',
    year: 2021
}
let bookData = pick(book, 'author', 'year');
console.log(bookData);
//  {author: 'Leozi', year: 2021}

function test(...args) {
    console.log(args);
    // (3) [1, '2', Array(1)] 
    console.log(arguments);
    // Arguments(3) [1, '2', Array(1), callee: (...), Symbol(Symbol.iterator): ƒ]
}
test(1, '2', [3]);

args Get the real array of formal parameters ,arguments The result is a pseudo array of formal parameters .

4、 Extension operator

Remainder operator ： Combine multiple independent parameters into an array .

Extension operator ： Split an array , And pass each term as a separate parameter to the function .

//  Find the maximum value of the determined formal parameter 
const maxNum = Math.max(1, 2);
console.log(maxNum);
// 2
//  Handle the maximum value in the array ,es5 Use in apply
const arr = [1, 6, 3, 8, 9, 5];
console.log(Math.max.apply(null, arr));
// 9
// es6 Use the extension operator in 
console.log(Math.max(...arr));
// 9

5、es6 Arrow function function () {} Equivalent to ()=>{}

// es5 Middle function 
let add = function ( a, b) { 
    return a + b;
}
console.log(add(1, 2));
// 3
// es6 neographism 
let add = (a, b) => {
    return a + b;
}
console.log(add(1, 2));
// 3
let add1 = val => {
    return val + 5;
}
//  If the return value is an expression, you can write it directly , And it can return normally 
let add2 = val => val;
let add3 = val => (val + 5);
let add4 = (val1, val2) => (val1 + val2);
let add4 = (val1, val2) => val1 + val2;
let fn = () => 'hello world';
console.log(fn());
// 'hello world'
let fn1 = () => 'hello world ' + 123;
console.log(fn1());
// 'hello world 123'
let getObj = id => {
    return {
    	id: id,
    	name: 'Leozi'
    }
}
console.log(getObj());
//  Closure function 
// es5：
let fn = (function () {
    return function () { 
    	console.log('es5');
    }
})();
fn();
// es6:
let fn_es6 = (() => {
    return () => {
    	console.log('es6');
    }
})();
fn();

6、rest Parameters

function fn() {
    console.log(arguments); // arguments Is a pseudo array , Its prototype is the object 
}
fn('1', '2', '3'); 

function fn1(...args) {
    console.log(args); // rest Parameters args True array , Its prototype is array 
}
fn1('1', '2', '3');
        
function fn2(a, b, ...args) { // args It can only be placed at the end of the parameter list 
    console.log(a)   // 1
    console.log(b)   // 2
    console.log(args)  // ['3', 4, 5, 6] 
}
fn2('1', '2', '3', 4, 5, 6)

Use rest Benefits of parameters ： Because the parameter corresponds to the true array , You can directly use some special API Method , Such as filter、some、every wait .