【ES6】模板字符串、简化对象写法、箭头函数

简介: 【ES6】模板字符串、简化对象写法、箭头函数

模板字符串


在es6中引入了新的对字符串表示方法,那就是模板字符串,在es6之前,我们通常使用双引号""单引号''来表示字符串,模板字符串用反引号``来表示,下面我们一起看看模板字符串与普通字符串有何区别


声明


与普通字符串一样,声明模板字符串用反引号``表示即可。


let str = `苏凉`;
console.log(str,typeof str);
//苏凉 string


在内容中可出现换行符


使用反引号可以自动添加换行:在html中添加列表只能用字符串来拼接,如:


window.onload = function(){
   var p = document.getElementById('p1');
   p.innerHTML='<ul>'+
               '<li>'+'1' +'</li>'+  
               '<li>'+ '2'+'</li>' +
               '<li>'+'3'+'</li>' +
               '<li>'+'4'+'</li>'+
               '</ul>'
}


使用模板字符串就省事很多。


window.onload = function(){
   var p2 = document.getElementById('p2');
   p2.innerHTML = `<ul>
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                    <li>d</li>
                    <li>e</li>
                    </ul>`
 }



两种方法,哪一个更简洁好用不言而喻。


变量拼接


普通字符串拼接使用+号来进行拼接,而使用模板字符串则可以直接拼接,如:


//语法:在反引号内使用${}拼接
`${str1}str2`


let name = '苏凉';
let age = 21;
let info = `姓名:${name},年龄:${age}`;
console.log(info);//姓名:苏凉,年龄:21


简化对象写法


在es6中,在对象的大括号内,可以直接写入变量和函数,作为对象的属性和方法,这种写法相较于es6之前的版本来说书写更简洁。如:


let name = '苏凉';
let sayName = function(){
    console.log('su')
}
const info = {
  //直接写入变量,取代:name:name
    name,
    sayName,
    //直接写入函数,取代:fun2:function(){}
    fun2(){
        console.log('liang')
    }
}
console.log(info.name); //苏凉
info.sayName(); +//su
info.fun2() //liang


箭头函数


在es6中可以使用箭头(=>)来定义函数。


语法:let 函数名 = (参数)=>{函数体}


如:


let fun1 = () =>{
    console.log('苏凉')
}
fun1(); //苏凉


函数体内与之前一样,调用函数也是,函数名()


下面我们一起看看箭头函数与普通函数有何区别:


this指向


箭头函数的this指向时静态的,它始终指向声明函数时所在的作用域下this的值。


而普通函数的this值则是谁调用函数,this就指向谁,默认指向window。


箭头函数的this指向不会被call,bind,apply所改变。


//定义全局变量
var name = '苏凉'
//普通函数
let fun1 = function(){
   console.log(this.name);
}
//箭头函数
let fun2 = () =>{
   console.log(this.name);
}
const info ={
   name:'xiaoming'
}
fun1(); //苏凉
fun2(); //苏凉
//改变this指向,
//通函数的this指向会被改变
//箭头函数的this不会被改变
fun1.call(info); //xiaoming
fun2.call(info); //苏凉 


不能作为构造实例化对象


箭头函数不能作为构造实例化对象使用。否则会报错:TypeError: Person is not a constructor


如:


 //使用普通函数构造实例化对象
let Dog = function(name,age){
     this.name = name ;
     this.age = age ;
}
let dog1 = new Dog('xiaohua',2);
console.log(dog1);
//Dog {name: 'xiaohua', age: 2}
//是用箭头函数构造实例化对象
let Person = (name,age)=>{
       this.name = name ;
       this.age = age;
}
let per1 = new Person('suliang',21);
console.log(per1);
//TypeError: Person is not a constructor


不能使用arguments隐含参数


在普通函数中,arguments隐含参数会返回我们所传递的实参,而在箭头函数中并不存在这一隐含参数。


//普通函数
let fun1 = function(){
    console.log(arguments);
}
fun1(1,2,3);
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
//箭头函数
let fun2 =()=>{
    console.log(arguments);
}
fun2(4,5,6);
// arguments is not defined at fun2


箭头函数的简写


1.省略小括号


当形参有且只有一个的时候,箭头函数中的小括号可以省略。如:


//小括号省略
let fun1 = n =>{
   return n+n;
}
let result1 = fun1(5)
console.log(result1); //10


2.省略花括号


当函数体内的代码有且只有一条语句时,可以省略花括号,并且语句的执行结果就是函数的返回值。


//省略花括号
//eg1
let fun2 = n => n*n;
console.log(fun2(9)); //81
//eg2
let fun3 = n =>console.log(n);
fun3(9); //9


箭头函数的案例


定时器的箭头函数,若定时器不适用箭头函数,则定时器内部的this则指向window。



window.onload = function(){
    //找到box
    let box = document.getElementById('box');
    box.addEventListener('click',function(){
        setTimeout(() => {
            this.style.backgroundColor = 'blue'
        }, 2000);
    })
}


返回数组中偶数:


let list = [1,5,3,6,8,45,68,96,99];
 const arr = list.filter(item => item%2==0);
 console.log(arr);
 //(4) [6, 8, 68, 96]


箭头函数适合与 this 无关的回调,如定时器,数组的方法回调等


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


var name = 'ming'
let arr = {
     name:'su',
     age:21,
     sayName:()=>{
         console.log(this.name); //指向window
     },
     sayName1:function(){
         console.log(this.name); //指向arr数组对象
     } 
}
arr.sayName(); //ming
arr.sayName1(); //su


目录
相关文章
|
11天前
|
自然语言处理
ES6 中箭头函数和普通函数区别
【10月更文挑战第19天】这些仅是对箭头函数和普通函数区别的一些主要方面进行的详细阐述,实际应用中可能还会有更多具体的细节和情况需要进一步探讨和理解。可以根据自己的需求进一步深入研究和实践,以更好地掌握它们在不同场景下的应用。
26 2
ES6学习(3)模板字符串、简化对象和函数写法
ES6学习(3)模板字符串、简化对象和函数写法
|
2月前
|
JavaScript 前端开发
ES6+ 特性,箭头函数、解构赋值、模块导入
ES6+ 特性,箭头函数、解构赋值、模块导入
|
5月前
|
SQL 自然语言处理 前端开发
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
45 2
|
前端开发 JavaScript API
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
|
12月前
简化对象和函数写法
简化对象和函数写法
36 1
|
6月前
|
JSON JavaScript 数据格式
ES6箭头函数和模板字符串
ES6箭头函数和模板字符串
41 0
|
前端开发 JavaScript 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(三)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(三)
|
前端开发 API 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(六)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(六)
|
前端开发 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(二)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(二)