前端基础之《ECMAScript 6（5）—函数》

csj50

已于 2022-10-19 13:42:27 修改

阅读量238

点赞数

分类专栏：前端基础文章标签： ecmascript 前端 javascript

于 2022-10-18 14:03:14 首次发布

本文链接：https://blog.csdn.net/csj50/article/details/127387359

版权

前端基础专栏收录该内容

55 篇文章 0 订阅

订阅专栏

一、箭头函数

1、ES6允许使用箭头（=>）来定义函数。

原来声明函数：

let fn = function(){

}

箭头声明函数，省了function：

let fn = () => {

}

2、例子

let fn = (a,b) => {
	return a + b;
}
//调用函数
let result = fn(1, 2);
console.log(result);

二、箭头声明函数的特性

1、this是静态的

this始终指向函数声明时所在作用域下的this的值。

function getName(){
	console.log(this.name);
}

let getName2 = () => {
	console.log(this.name);
}

//设置window对象的name属性
window.name = '张三';

//定义一个对象
const school = {
	name: "李四"
}

//直接调用
getName();  //张三
getName2();  //张三

//call方法调用
//call方法可以改变函数内部this的值的
getName.call(school);  //变为李四
getName2.call(school);  //还是张三

箭头函数this是静态的，this始终指向函数在声明时所在作用域下的那个this值。指向外层window。

call方法说明：
在JavaScript中，函数是对象的方法。
如果一个函数不是JavaScript对象的方法，那么它就是全局对象的函数（window对象？global对象？）。
call方法可以在不同对象上使用这个函数。
getName.call(school); 表示在school对象上使用getName()函数。

2、箭头函数不能作为构造器去实例化对象

let Person = (name, age) => {
	this.name = name;
	this.age = age;
}
let me = new Person('xiao', 30);
console.log(me);

报错：Uncaught TypeError: Person is not a constructor

3、不能使用arguments变量

arguments变量是用来保存实参的。在箭头函数里是不可以的。

let fn = () => {
	console.log(arguments);
}
fn(1, 2, 3);

报错：Uncaught ReferenceError: arguments is not defined

4、箭头函数的简写

（1）省略小括号，当形参有且只有一个的时候

let add = n => {
	return n + n;
}
console.log(add(9));

（2）省略花括号，当代码体只有一条语句的时候
省略花括号，return也必须省略，而且语句的执行结果就是函数的返回值。

let pow = n => n * n;
console.log(pow(8));

三、箭头函数实践

1、this使用

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>箭头函数实践</title>
<style>
    div {
        width: 200px;
        height: 200px;
        background: #58a;
    }
</style>
</head>

<body>
	<h1 id="hid" class="hcls"><span>test</span></h1>
    <div id="ad"></div>
</body>

<script>
	//1. 点击div 2s后颜色变成“粉色”
    //获取元素
    let ad = document.getElementById('ad');
    //绑定事件
    ad.addEventListener('click', function(){
        //保存当前函数作用域下的this，原来this指向window对象
        let _this = this;

        //定时器
        setTimeout(function(){
            //修改背景颜色
            console.log(_this);
            _this.style.background = 'pink';
        }, 2000);
    });

</script>

</html>

console.log(_this);为什么这里输出<div id="ad""></div>？
因为先获取了ad这个元素，在这个元素内获取了this，所以指向这个元素。

用箭头函数改写，不需要先保存当前函数的this：

	//1. 点击div 2s后颜色变成“粉色”
    //获取元素
    let ad = document.getElementById('ad');
    //绑定事件
    ad.addEventListener('click', function(){

        //定时器
        setTimeout(() => {
            //修改背景颜色
            console.log(this);
            this.style.background = 'pink';
        }, 2000);
    });

2、过滤数组

    //2. 从数组中返回偶数的元素
    const arr = [1,6,9,10,100,999];
    const result = arr.filter(function(item){
        if (item%2==0){
            return true;
        } else {
            return false;
        }
    });
    console.log(result);

用箭头函数改写：

    //2. 从数组中返回偶数的元素
    const arr = [1,6,9,10,100,999];
    const result = arr.filter(item => item % 2 === 0);
    console.log(result);

3、箭头函数适合与this无关的回调，定时器、数组的方法回调。

箭头函数不适合与this有关的回调，事件回调，对象的方法。

四、函数参数默认值

1、ES6允许给函数参数（形参）赋值初始值

	//形参初始值
    function add(a,b,c=10){
        return a + b + c;
    }
    let result = add(1,2);
    console.log(result);

2、与解构赋值结合

原来的写法：

    //定义函数
    function connect(options){
        let host = options.host;
        let username = options.username;
        let password = options.password;
        let port = options.port;
        console.log(host);
        console.log(username);
        console.log(password);
        console.log(port);
    }
    //函数调用
    connect({
        host: 'localhost',
        username: 'root',
        password: 'root',
        port: 3306
    });

解构赋值写法：

    //定义函数
    function connect({host,username,password,port}){
        console.log(host);
        console.log(username);
        console.log(password);
        console.log(port);
    }
    //函数调用
    connect({
        host: 'localhost',
        username: 'root',
        password: 'root',
        port: 3306
    });

五、函数的rest参数

1、ES6引入rest参数，用于获取函数的实参，用来代替arguments。

2、ES5获取实参的方式

	//ES5获取实参的方式
    function date(){
        console.log(arguments);
    }
    //函数调用
    date('白芷','娇娇','思慧');

arguments实际上是一个Object：

3、ES6 rest写法

rest参数格式：三个点+标识符。
例如：date(...args)

    function date(...args){
        console.log(args);
    }
    //函数调用
    date('白芷','娇娇','思慧');

args实际上是一个数组：

数组的好处是，可以使用数组的api方法，比如：filter、some、every、map等，提高了对参数处理的灵活程度。

4、rest参数必须放在参数的最后

    function fn(a,b,c,...args){
        console.log(a);
        console.log(b);
        console.log(c);
        console.log(args);
    }
    fn(1,2,3,4,5,6);

把1给了a，2给了b，3给了c，456给了args：