ES6笔记大全(最新)

文章目录

  • 前言
  • 一、ES6是什么?
  • 二、语法规范
    • 1.let关键字
    • 2.const 关键字
    • 3.变量和对象的解构赋值
    • 4、模板字符串
    • 5、简化对象和函数写法
    • 6、箭头函数
    • 7.ES6中函数参数的默认值
    • 8.rest参数
    • 9.扩展运算符
    • 10.Symbol
    • 11.迭代器
    • 12.生成器
    • 13.Set集合
    • 14.Map集合


前言

为什么要学习 ES6:
ES6 的版本变动内容最多,具有里程碑意义;
ES6 加入许多新的语法特性,编程实现更简单、高效;
ES6 是前端发展趋势,就业必备技能;


一、ES6是什么?

ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。它的目标是使得 JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

二、语法规范

1.let关键字

特性:
let 关键字用来声明变量,使用 let 声明的变量有几个特点:

  1. 不允许重复声明;
  2. 块儿级作用域(局部变量);
  3. 不存在变量提升;
  4. 不影响作用域链;

(1)let创建变量代码示例:

// (1)let关键字使用示例:
  let a; //单个声明 
  let b,c,d;//批量声明
  let e = 100;//单个声明并赋值 
  let f = 521, g = 'iloveyou', h = []; // 批量声明并赋值

(2).不允许重复声明:
代码实现:

// (2). 不允许重复声明;
 let dog = "狗"; 
 let dog = "狗";
 // 报错:Uncaught SyntaxError: Identifier 'dog' has already been declared

(3).块儿级作用域(局部变量):
代码实现:

//(3).块儿级作用域(局部变量):
 {
    
     let cat = "猫";
     console.log(cat); 
  }
     console.log(cat); 
 // 报错:Uncaught ReferenceError: cat is not defined

(4).不存在变量提升:
什么是变量提升:
就是在变量创建之前使用(比如输出:输出的是默认值),let不存在,var存在;
代码实现:

// (4). 不存在变量提升; 
// 什么是变量提升:就是在变量创建之前使用(比如输出:输出的是默认值),let不存 在,var存在;
  console.log(people1); // 可输出默认值
  console.log(people2); // 报错:Uncaught ReferenceError: people2 is not defined
   var people1 = "大哥"; // 存在变量提升
   let people2 = "二哥"; // 不存在变量提升

(5).不影响作用域链:

代码实现:

// 5. 不影响作用域链; 
// 什么是作用域链:很简单,就是代码块内有代码块,跟常规编程语言一样,上级代码块中 的局部变量下级可用
{
    
   let p = "大哥"; 
   function fn(){
   
   console.log(p); // 这里是可以使用的 }
   fn(); 
 }

应用场景:
以后声明变量使用 let 就对了;

2.const 关键字

特性:
const 关键字用来声明常量,const 声明有以下特点:

  1. 声明必须赋初始值;
  2. 标识符一般为大写(习惯);
  3. 不允许重复声明;
  4. 值不允许修改;
  5. 块儿级作用域(局部变量);

const创建变量代码示例:

<!DOCTYPE html> 
<html>
  <head>
  <meta charset="utf-8"> 
  <title>const</title> 
  </head> 
  <body>
     <script> 
     // const声明常量
      const DOG = "旺财"; 
      console.log(DOG); 
      </script> 
  </body> 
</html>

块儿级作用域(局部变量):
代码实现:

// 5. 块儿级作用域(局部变量); 
{
    
   const CAT = "喵喵"; 
   console.log(CAT); 
}
  console.log(CAT);

3.变量和对象的解构赋值

什么是解构赋值:
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值;

代码演示及相关说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
&l

你可能感兴趣的:(前端,javascript,es6,学习)