工作中常用到的ES6语法-定义变量

、let和const

在JavaScript中咱们以前主要用关键var来定义变量，ES6之后，新增了定义变量的两个关键字，分别是let和const。对于变量来说，在ES5中var定义的变量会提升到作用域中所有的函数与语句前面，而ES6中let定义的变量则不会，let声明的变量会在其相应的代码块中建立一个暂时性死区，直至变量被声明。 let和const都能够声明块级作用域，用法和var是类似的，let的特点是不会变量提升，而是被锁在当前块中。

function test() {
if(true){
 console.log(a)//TDZ，俗称临时死区，用来描述变量不提升的现象 
let a =1
}
}
test()// a is not defined
function test() {
 if(true){
 let a =1
 }
 console.log(a)
}
 
test()// a is not defined

唯一正确的使用方法：先声明，再访问。

function test() { 
 if(true){ 
 let a =1
 console.log(a)
 }
}
test()// 1

const 声明常量，一旦声明，不可更改，而且常量必须初始化赋值。 const虽然是常量，不允许修改默认赋值，但如果定义的是对象Object，那么可以修改对象内部的属性值。const和let的异同点 相同点：const和let都是在当前块内有效，执行到块外会被销毁，也不存在变量提升（TDZ），不能重复声明。 不同点：const不能再赋值，let声明的变量可以重复赋值。 const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

块级作用域的使用场景 除了上面提到的常用声明方式，我们还可以在循环中使用，最出名的一道面试题：循环中定时器闭包的考题在for循环中使用var声明的循环变量，会跳出循环体污染当前的函数。

for(var i =0; i <5;i++) {
 setTimeout(()=>{
 console.log(i) //5, 5, 5, 5, 5 
},0)
}
console.log(i) //5 i跳出循环体污染外部函数
//将var改成let之后
for(let i = 0; i < 5; i++){
 setTimeout(() =>{
 console.log(i)// 0,1,2,3,4},0)
}
console.log( i )//i is not defined i无法污染外部函数

symbol ES6 以前，我们知道5种基本数据类型分别是Undefined，Null，Boolean，Number以及String，然后加上一种引用类型Object构成了JavaScript中所有的数据类型，但是ES6出来之后，新增了一种数据类型，名叫symbol，像它的名字表露的一样，意味着独一无二，意思是每个 Symbol类型都是独一无二的，不与其它 Symbol 重复。可以通过调用 Symbol() 方法将创建一个新的 Symbol 类型的值，这个值独一无二，不与任何值相等。

头条创作挑战赛#

变量的含义及分类：

变量含义及操作：

变量指的是数据的命名及存储，在javascript中创建一个变量，需要用到 "let" 关键字来声明，并通过赋值运算符 "=" 为变量添加数据。

例如：

// 注释    
/* 注释 */    
let message;  // 将文本赋值给了变量名为 message的变量名    
message = "显示一个消息";    
alert(message);  // 通过调用 alert方法来显示该变量。

javascript显示

也可以在一行中声明多个变量，

例如：

// 多变量声明赋值    
let a = '我是a————', b = '我是b————', c = '我是c';    
alert(a + b + c);

javascript声明多个变量

这句代码看上去很简短，但是不推荐这样的命名方式，这样的命名方式会使得协同开发者很难阅读，为了可阅读性，请一行只声明一个变量，多行变量虽然有点长，但是能够提高我们的可阅读性。在对变量重复赋值时，新的值会覆盖掉前一赋值操作，也可以采用等同赋值操作，像下面这样：

// 等同赋值操作    
let msg = "一个等同赋值消息";    
let al_msg;    
al_msg= msg;    
alert(al_msg);

javascript等同赋值

一个变量声明两次则会触发 error报错。因此我们要避免这种操作。如下是报错截图：

let msg = 'error'    
alert(msg)

javascript二次生命报错

变量命名方式：

命名必须采用字母、数字、下划线、符号 "$" 和英文下划线 "_"。首字母必须非数字，例如：

// 变量命名方式    
let user_Name;    
let 123test;    // 命名时就会报错    
alert(user_Name);    
alert(123test)

javascript数字开头命名报错

命名出现多个单词时，采用驼峰原则的形式，除了第一个单词，其他的单词采用首字母大写的原则，美元符号 "$" 和下划线 "_" 也是可以用来命名的，跟字母一样，没有特殊含义。例如：

// 美元符号及下划线用作命名    
let $ = "美元符号————";    
let _ = "下划线";    
alert($ + _)

javascript符号命名

在命名时需要区分大写的，在javascript中，不同大小写的字母是不同的，例如：test 和 TEST。除了以上的类型用作命名外，还支持非字母和数字，但不推荐用来命名，主要是不便于协同开发。在命名时，我们也要避免与系统的关键字碰车，例如： let 、class、 return、 function等。

常量

常量与变量没有多大的区别，但是常量的定义为，固定的值或者为你当前已知的数据值。例如 NAME = "李强"，这个名字就是永存不变的，命名后就一直不变。常量的命名方式，我们将采用const 来声明一个常量且常量名为大写字母，命名后无法对常量进行修改。

// 常量的声明    
const name = "李白";    
alert(name);    
name = "新名字";    
alert(name)

javascript常量命名

javascript常量命名二次赋值失败

关注我！学习更多编程知识。

.scss中定义变量

$bg-color: #ed795a; //也可以$bg-color: #ed795a !default;这样写 !default 表示是默认值
.btn-default{
   background-color:$bg-color;
}
 
.btn-default{//编译后是
    background-color:#ed795a;
}
scss中的变量也存在作用域，类似于js中的局部变量
$bg-color: #ed795a;
 
.app{
	$bg-color: #8ab945;//类似于js的局部变量
}
 
.btn-default{
   background-color:$bg-color;//这里是 #ed795a 而不是.app里的 #8ab945
}

关于scss中参数传递

//@mixin 进行声明 多个参数 , 分割
@mixin wd($width){
	width:$width;
}
 
@mixin h($height:18px){
	height:@$height
}
 
.btn{// @include进行调用
    background-color:$bg-color;
    @include wd(32px);
    @include h;//不传 则默认18px
}
  
//编译后是
  .btn{
    background-color:#ed795a;
    width:32px;
    height:18px; 
}

2.less样式定义变量

以@符号开头即可

@bg-color:#8ab945;定义变量bg-color的颜色为#8ab945
 
.btn-default{
   background-color:@bg-color;//获取之前定义的颜色
}
 
.btn-default{//编译后
   background-color:#8ab945;
}

less样式中进行参数传递

//less中定义可传参的样式相比较scss中要简单  多个参数;分割
.wd(@width) {//无默认值
    width:@width;
}
 
.height(@h:18px) {//有默认值 18px; 
    height:@h;
}
 
.btn {
     background-color:@bg-color;
    .wd(32px);
    .height(22px);
}
 
//编译后是
.btn{
    background-color:#ed795a;
    width:32px;
    height:22px; 
}

3.css样式中定义变量

以--开头即可，在需要用到的地方以var()函数调用定义的变量名即可获取对应值。

body{ //这里限定了变量的作用域是 body
   --bg-color:#8ab945;
}
 
.btn-default{
   background-color:var(--bg-color);
}

目前css中定义的变量在ie(具体哪些版本不兼容本人并未测试)中并不兼容，请大家谨慎使用!

在线咨询

上一篇：一键即可复制网页上的文字，妈妈再也不用担心我查找资料了
下一篇：不一样的前端面试题答案_简述CSS3 #前端面试

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商