ES6 语法

ES6 语法
- 简介
- let 关键字
- - 模板字符串
- const 关键字
- js中const,var,let区别
- 箭头函数

ES6 语法

简介

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

ES6指的是javascript新规范

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 关键字

let关键字是用来取代var的；
let作用，与var类似，用于声明一个变量；

    {let a = 'http://www.baidu.com';var b = "魔道祖师";console.log(b);console.log(a);  }console.log(b);console.log(a);// 报错 ReferenceError: a is not defined

let 只在let命令所在块级作用域里有效
效果：

     {let a = 'http://www.baidu.com';var b = "魔道祖师";let a = 'http://www.douyin.com';//  报错 Identifier 'a' has already been declaredvar b = "含光君";console.log(b);console.log(a);}console.log(b);console.log(a);

let 不能重复声明
效果：

注意：
for 循环计数器很适合用 let

for (var i = 0; i < 6; i++) {setTimeout(function(){console.log(i);})
}
// 输出6个 6
for (let j = 0; j < 6; j++) {setTimeout(function(){console.log(j);})
}
// 输出 012345

解析：

变量 i 是用 var 声明的，在全局范围内有效，所以全局中只有一个变量 i, 每次循环时，setTimeout 定时器里面的 i 指的是全局变量 i ，而循环里的6个 setTimeout 是在循环结束后才执行，所以此时的 i 都是 6。
变量 j 是用 let 声明的，当前的 i 只在本轮循环中有效，每次循环的 j 其实都是一个新的变量，所以 setTimeout 定时器里面的 j 其实是不同的变量，即最后输出012345。（若每次循环的变量 j 都是重新声明的，如何知道前一个循环的值？这是因为 JavaScript 引擎内部会记住前一个循环的值）。

     console.log(aa);//  报错  ReferenceError: a is not definedlet aa = 'ptor';console.log(bb);//  undefinedvar bb = "沐泽君";

var 会变量提升，let 变量不可提升
效果：

ES6对象定义简写
ES6提供了对象定义里的属性，方法简写方式:

     //定义属性let name = 'mike';let age = 21;//ES6的写法//定义对象let obj={//赋值name,age,getName(){return this.name;},getAge(){return this.age;}};console.log(obj);console.log(obj.getName(),obj.getAge());

ES6简写方式，假如属性和变量名一样，可以省略，包括定义对象方法function也可以省略；

效果：

模板字符串

ES6 模版字符串主要用于简化字符串的拼接

用斜引号和 ${} 符号实现:

     //属性过多时let obj={name:'蓝忘机',age:'18',sore:'含光君'};//ES6写法let str = `姓名:${obj.name},年龄:${obj.age},角色:${obj.sore}`;console.log(str);

效果：

const 关键字

const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。

     const c = 1;console.log(c);c = 6;

const 关键字用来定义常量，同样，const和let一样，不可改变，其余特性和let所差无几

const不可改变,效果：

注意：
const 如何做到变量在声明初始化之后不允许改变的？
其实 const 其实保证的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许改动。
此时，简单类型和复合类型保存值的方式是不同的，
对于简单类型（number、string 、boolean）,值就保存在变量指向的那个内存地址，因此 const 声明的简单类型变量等同于常量；
而复杂类型（object，array，function），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了，所以使用 const 声明复杂类型对象时要慎重。

js中const,var,let区别

var 相信大家非常熟悉了，那么，我就着重讲 let 与 const 。

相同点：

let 和 const 的作用，与 var 类似，用于声明一个变量

在函数体内使用 var 、const、let 关键字声明的变量的作用域都是局部的。

       // 使用 varfunction myFunction() {var carName = "Volvo";   // 局部作用域}// 使用 letfunction myFunction() {let carName = "Volvo";   //  局部作用域}// 使用 constfunction myFunction() {const carName = "Volvo";   //  局部作用域}

在函数体外或代码块外使用 var 、const、let 关键字声明的变量的作用域都是全局的。

         // 使用 varvar x = 2;       // 全局作用域// 使用 letlet x = 2;       // 全局作用域// 使用 constconst x = 2;       // 全局作用域

不同点：

代码块{}内有效
let 和 const 是在代码块内有效，var 是在全局范围内有效
使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。
```
             {let a = 0;var b = 1;const c = 2;}console.log(a); // ReferenceError: a is not definedconsole.log(b); // 1console.log(c);// ReferenceError: c is not defined
```

不能重复声明
let 和 const 只能声明一次, var 可以声明多次

            let a = 1;let a = 2;var b = 3;var b = 4;const c = 5;const c = 6;console.log(a); // Identifier 'a' has already been declaredconsole.log(b); // 4console.log(c); // Identifier 'c' has already been declared

不存在变量提升
let 和 const 不存在变量提升，var 会变量提升

             console.log(a); //ReferenceError: Cannot access 'a' before initializationlet a = "apple";console.log(b); //undefinedvar b = "banana";console.log(c); //ReferenceError: Cannot access 'a' before initializationconst c = "orange";

细究 let 和 const 的区别：

const声明的常量必须初始化，而let声明的变量不用
const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

注意：

const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。
const 关键字用来定义常量，同样，const和let一样，不可改变，其余特性和let所差无几。

const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。

来，我们尝试一下对对象的操作。

        // 创建常量对象const car = {type: "Fiat",model: "500",color: "white"};// 修改属性:car.color = "red";// 添加属性car.owner = "Milo";console.log(car.type,car.color,car.owner);//Fiat red Milo

但是，不能对常量对象重新赋值

             const car = {type: "Fiat",model: "500",color: "white"};car = {type: "Volvo",model: "EX60",color: "red"}; // 错误  Assignment to constant variable.

接下来，就看下修改常量数组

              // 创建常量数组const cars = ["Saab", "Volvo", "BMW"];// 修改元素cars[0] = "Toyota";// 添加元素cars.push("Audi");console.log(cars);// (4) ["Toyota", "Volvo", "BMW", "Audi"]

同样，不能对常量数组重新赋值

             const cars = ["Saab", "Volvo", "BMW"];cars = ["Toyota", "Volvo", "Audi"]; // 错误 Assignment to constant variable.

箭头函数

在ES6中，推出了一个新语法 箭头函数 。

以前定义一个函数:

let fun=function(){console.log('我是箭头函数');
};

现在用箭头函数定义：

let fun=()=>{console.log('我是箭头函数')};

当函数体只有一条语句或者是表达式的时候，花括号可以省略：

let fun1=()=>console.log('我是箭头函数');

加形参时：

let fun2=(a)=>console.log(a);

只有一个形参的时候，括号可以省略：

let fun3=a=>console.log(a);

有多个形参时：

let fun4=(x,y)=>console.log(x,y);
fun3(20,30);

有返回值情况时：

let fun5=(x,y)=>{console.log(x,y);return x+y;
}
console.log(fun5(1,3));

关于箭头函数里的this:

箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是再次定义的时候，所在的对象就是它的this；

箭头函数的this看外层是否有函数，如果有，外层函数的this就是内部调用箭头函数的this ；如果没有，则this是window。

     //箭头函数let ba = document.getElementById('ba');let bb = document.getElementById('bb');ba.οnclick=function(){console.log(this);};bb.οnclick=()=>{console.log(this);}

效果：

点击按钮一，this是调用的时候的ba对象
点击按钮二，this是window对象

当箭头函数在定义对象的回调函数里时：

     //箭头函数let ba = document.getElementById('ba');let bb = document.getElementById('bb');//this外层方法的this,也就是this.getName中this代表的对象,这里指的是palet pa={name:'魏无羡',getName(){ba.οnclick=()=>{console.log(this);}}};//this指的是当前的被点击的html元素,在这里就是<button id="bb">按钮二</button>pa.getName();let pb={name:'夷陵老祖',getName(){bb.οnclick=function(){console.log(this);}}};pb.getName();

效果：

ES6 语法之 let、const、模板字符串、箭头函数相关推荐

深入浅出ES6（四）：模板字符串
作者 Jason Orendorff github主页 https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符 ...
ES6（二）——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol
一.字符串模板基本使用在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly). ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接: 首 ...
【ES6 教程】第一章新的ES6语法03—使用const 关键字定义常量
英文 | https://www.javascripttutorial.net 翻译 | 杨小爱在本教程中,我们将学习如何使用 JavaScript const 关键字定义常量. JavaScrip ...
javaScript：js数据类型，模板字符串，函数
一.js数据类型基本数据类型(值类型):字符串(String).数字(Number).布尔(Boolean).对空(Null).未定义(Undefined). 引用数据类型(对象类型):对象(Obj ...
模板字符串`${}` 各种函数中的this指向？
let name="小明" let age="18" console.log(`${this.name}已经${age}岁了`)//输出:小明已经18岁了 ** ...
webpack转化es6语法
1.安装babel babel转换高语法到es5 babel-loader转换 @babel/core是核心模块 @babel/preset-env 高级语法转换成低级语法 yarn add bab ...
深入浅出ES6：模板字符串（`和‘）
反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起 ...
ES6：模板字符串的简单使用
本来是个后端工程师,因为最近要做开源项目,还不会前端 TnT ,没办法只能一步步学啦.前端知识知之甚微,基本小白一个.em...顺便吐槽下自己也要往full stack的方向前进了. 好多东西不会,在 ...
【Vue.js 知识量化】ES6 语法积累
ES6 语法 let / var const 的使用 class.extends.super 箭头函数(arrow function) 模版字符串(template string) 结构(destru ...

ES6 语法之 let、const、模板字符串、箭头函数

ES6 语法

ES6 语法

简介

let 关键字

模板字符串

const 关键字

js中const,var,let区别

箭头函数

ES6 语法之 let、const、模板字符串、箭头函数相关推荐

最新文章

热门文章

ES6 语法 之 let、const、模板字符串、箭头函数

ES6 语法

ES6 语法

简介

let 关键字

模板字符串

const 关键字

js中const,var,let区别

箭头函数

ES6 语法 之 let、const、模板字符串、箭头函数相关推荐

最新文章

热门文章

ES6 语法之 let、const、模板字符串、箭头函数

ES6 语法之 let、const、模板字符串、箭头函数相关推荐