ES6新特性

目录

1、声明变量let和const

2、箭头函数

3、解构

4、for of 循环

5、不定参数

6、类

7、字符串模板

---

1、声明变量let和const

  let命令

是ES6标准中用来声明变量的新增命令。 它的使命就是来代替var命令的，它的用法类似于var，但是却弥补了var的设计缺陷。

两者最根本的区别在于let命令可以把当前代码块声明为块级作用域（后续章节有详细介绍），使用let命令声明的变量，只在当前代码块内有效。
（代码块以一对花括号{}为单位）

const命令

用于声明一个只读的常量。 声明之初就必须赋值，而且一旦声明就不可更改。

const命令的实质 :

const命令实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。

对于基本类型的简单数据（数值、字符串、布尔值）来说，变量所指向的内存地址保存的就是值本身，所以就等同于变量的值不得修改；

for (let i = 0; i < 3; i++){
    console.log(i);  //0  1  2
}
console.log(i);   //i is not defined

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改

2、箭头函数

ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体；

语法格式： let/const 变量名 = ([参数])=>{ 函数体语句 }

        

• 不需要 function 关键字来创建函数
• 省略 return 关键字
• this始终指向函数申明时所在作用域下的this值

//箭头函数
let fun = ()=> ({
    name: '张三',
    age: 20
})

console.log(fun())

3、解构

在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量

数组解构允许我们按照一一对应的关系从数组中提取值，然后将值赋给变量

let arr1 = [1, 2, 3];

let [a, b] = arr1;

console.log(a);

console.log(b);

console.log(c);  //undefined

       对象解构允许我们使用变量的名字匹配对象的属性 匹配成功将对象属性的值赋值给变量

let person = { name: '花少北', age: 25, sex: '男' };

let { name, age, sex } = person;

console.log(name);

4、for of 循环

 for...of循环是最新添加到 JavaScript 循环系列中的循环。

它结合了其兄弟循环形式 for 循环和 for...in 循环的优势，可以循环任何可迭代（也就是遵守可迭代协议）类型的数据。默认情况下，包含以下数据类型：String、Array、Map 和 Set，注意不包含 Object 数据类型（即 {}）。默认情况下，对象不可迭代

var arr=[1,3,5,7,21,45,73]

for(const num of arr){

console.log(num);
}

5、不定参数

  不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。

这只是一种语法糖，在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。

不定参数的格式是三个英文句点后跟代表所有不定参数的变量名。比如下面这个例子中，…args代表了所有传入sum1函数的参数。

const sum1 = (...args) => {
    let total = 0;
    args.forEach(items => 
        total += items
    )
    return total;
}
console.log(sum1(10, 20));
console.log(sum1(10, 20, 30) );

6、类

     ES6中添加了对类的支持，引入了class关键字（其实class在JavaScript中一直是保留字，目的

就是考虑到可能在以后的新版本中会用到，现在终于派上用场了）。JS本身就是面向对象的，ES6

中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加

直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化。
 

//1.创建一个类
class Star{
    constructor(uname) {  //函数
        this.uname = uname;
    }
}

7、字符串模板

   

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

由反引号 ` 来代替单引号 ’ 或者双引号 "

除此之外，模板字符串的出现可以让html这些脚本语言更加简单的应用在页面中，方便其相应的书写

ES6模板字符串有哪些好处

a. 在ES5拼接的时候，如果结构需要换行，必须使用转义符；在ES6中，使用模板字符串，直接使用html结构即可

b. 在ES5中，单引号和双引号必须注意嵌套问题，在ES6中，就不需要考虑；

c. 模板字符串中，可以写js语句

d. 方便简洁，不容易出错；
 

<script>
        var name='花少北'
        var age=18;
        console.log(`你的姓名是${name}，年龄是${age}`);  //你的姓名是花少北，年龄是18
    </script>