ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue中常用的es6语法

2022-05-17 10:31:06  阅读:36  来源: 互联网

标签:es6 vue const 作用域 return 语法 var 20


ES6语法

1.var const let 区别
var的作用域是方法作用域,在方法外无法通过var定义的变量

const的作用域和let的作用域相同,是块作用域,只要出在同一个{}内都是可以被访问到的,两者的主要差别是const一旦被赋值就不再被改变,在vue中大部分情况下会用const,除非知道该变量值会改变。
2.箭头函数
//es5
var fn  = function(a,b){
    return a + b;
}
//es6箭头函数写法,当函数直接被return时,可以省略函数体的括号
const fn = (a,b) => a + b;
//es5
var foo = function(){
  var a=20;
  var b=30;
  return a+b;
}
//es6
const foo=()=>{
    const a = 20;
    const b = 20;
    return a + b;
}
值得一提的是,箭头函数中没有this,所以要使用时尽量避免使用箭头函数,否则容易出现undefined
3.参数的默认值
当函数的参数没有传递值会使用默认值,在es6中默认值的指定语法变得非常简单
//es5
function add(x,y){
   var x  = x || 20;
   var y  = y || 30;
   return x + y;
}
//es6
function add(x=20,y=30){
   return x + y;
}
4.展开运算符
const arr1 = [1,2,3];
const arr2 = [...arr1,10,20,30];
//这样,arr2变成了[1,2,3,10,20,30];
在不知道Props有多少数据传递过来,用展开运算符即可解决
5.省略字面量
//es6
const person = {
   name,
   age
}
//es5
var person = {
  name:name,
  age:age
};

标签:es6,vue,const,作用域,return,语法,var,20
来源: https://www.cnblogs.com/3448664061-dwg/p/16279814.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有