js箭头函数简介

news/2024/7/10 23:59:58 标签: javascript, 前端, html, es6

1.箭头函数是用来简化函数定义语法的

html" title=javascript>javascript">        const fn = () => {
            console.log(123);
        }
        fn();

2.在箭头函数中 函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号

html" title=javascript>javascript">        function sum(n, m) {
            return n + m;
        }
        const newSum = (a, b) => a + b;
        console.log(sum(1, 2));
        console.log(newSum(1, 2));

3.在箭头函数中 如果形参只有一个,可以省略小括号

html" title=javascript>javascript">        const fn = value => value++;

4.不能作为构造实例化对象

html" title=javascript>javascript">      // let Person = (name, age) => {
        //     this.name = name;
        //     this.age = age;
        // }
        // let me = new Person('yy', 18);
        // console.log(me);

5.3.不能使用 arguments 变量

html" title=javascript>javascript">        // let fn = () => {
        //     console.log(arguments);
        // }
        // fn(1, 2, 3);

6.this 是静态的,this始终指向函数声明时所在作用域下的this的值,如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的this

html" title=javascript>javascript">        function getName() {
            console.log(this.name);
        }
        let getNewName = () => console.log(this.name);

        //设置window 对象的 name 属性
        window.name = 'YY';
        const obj = {
            name: '张三'
        }

        //直接调用
        getName();
        getNewName();

        //call方法调用
        getName.call(obj);
        getNewName.call(obj);

7.小案例

(1) 定时器,1秒后div盒子变成红色

html"><div></div>
html" title=javascript>javascript">        let div = document.getElementsByTagName('div')[0];
        div.onclick = function() {
            setTimeout(() => this.style.background = 'red', 1000);
        }

(2)从数组中返回偶数的元素

html" title=javascript>javascript">        const arr = [1, 2, 3, 4, 56, 8, 64, 7]
        // 传统写法
        // const result = arr.filter(function(item) {
        //     if (item % 2 === 0) {
        //         return true;
        //     } else {
        //         return false;
        //     }
        // })
        const result = arr.filter(item => item % 2 === 0)
        console.log(result);

总结:
①箭头函数适合与this无关的回调,定时器,数组的方法回调
② 箭头函数不适合与this有关的回调,事件回调,对象的方法


http://www.niftyadmin.cn/n/854594.html

相关文章

Oracle建立DBLINK的详细步骤记录

测试条件&#xff1a; 假设某公司总部在北京&#xff0c;新疆有其下属的一个分公司。在本次测试中&#xff0c;新疆的计算机为本地计算机&#xff0c;即本要的IP地址为&#xff1a;192.168.1.100 北京的总部有一个集中的数据库&#xff0c;其SID是SIDBJ&#xff0c;用户名&…

ES6:Symbol创建对象属性及调用方法

1.第一种调用方法&#xff1a; obj[Reflect.ownKeys(obj)[index]]() //向对象中添加方法 up downlet game {name: YY,up() {console.log(向上);},down() {console.log(向下);}}//声明一个对象let methods {up: Symbol(),down: Symbol()};game[methods.up] function() {conso…

JavaScript字符串方法总结

所有字符串方法都会返回新字符串。它们不会修改原始字符串 **四个与正则关联的字符串方法**var ex /(y|[0-9])/ig;var newEx /\||_/ig;var str yy-yy-_-|2000|-;ex.test(str);//match() 以数组形式返回匹配到的字符串console.log(str.match(ex));//replace() 替换匹配到的字…

axios初识

axios初识 1. axios.get(url)返回的是一个promise对象&#xff0c;若成功则PromiseState为fulfilled&#xff0c;若失败PromiseState为rejected&#xff0c;而PromiseResult则为获得的数据 console.log(axios.get(https://api.apiopen.top/getJoke));console.log(axios.get(ht…

浏览器检测

检测浏览器 浏览器名称&#xff1a;除了IE10及以下是Microsoft Internet Explorer&#xff0c;谷歌、火狐、Edge、IE11都是Netscape console.log(navigator.appName) //返回浏览器名称浏览器的代码名&#xff1a;都是Mozilla console.log(navigator.appCodeName); //返回浏览…

Promise封装AJAX

/*** promise封装AJAX*/ function sendAJAX(request, url, data, responseType) {return new Promise((resolve, reject) > {// var formData ;// Object.entries(data);// for (let k in data) {// formData k data[k] &;// }// formData formData.substrin…

js错误处理及调试

错误类型&#xff1a; Error 基类型&#xff0c;是所有的类型的⽗类&#xff0c;其它的类型都继承⾃它。⼀般由浏览器抛出&#xff0c;这个基类主要 是⽤于开发⼈员抛出⾃定义的错误类型EvalError表⽰全局函数eva()的使⽤⽅式与定义的不同时抛出&#xff0c;但是实际上并不能产…

axios较常用的全局配置

axios.defaults.baseURL 域名; if (localStorage.phone) axios.defaults.headers.common[phone] JSON.parse(localStorage.phone);//请求头全局配置 if (localStorage.token) axios.defaults.headers.common[token] JSON.parse(localStorage.token);//请求头全局配置 // axi…