1.简述

1.什么是ES6?
ES6, 全称 ECMAScript 6.0,是 JavaScript 的下一个版本标准,2015年6月份发版。ES6的主要目的是为了解决 ES5 的先天不足。

2.了解ES和JS之间的关系

    • ES = ECMAScript 是一个动态脚本语言的‘标准’,JS = JavaScript是对ES的标准,默认,主流的‘实现’,由于商标权的问题,欧洲计算机协会制定的语言标准不能叫做JS,只能叫ES;
    • ES6新标准的目的是:使得JS可以用来开发大型的Web应用,成为企业级开发语言。而企业级开发语言就是:适合模块化开发,拥有良好的依赖管理;

3.为什么要学

  • 更严谨的语法,更高效的编码
  • 更新的特性,更多的功能
  • 主流的浏览器都已经全面支持ES6
  • 行业内较新的前端框架都已经全面使用ES6的语法
  • 微信小程序,uni-app等都是基于ES6的语法
  • 从就业出发,中小型公司,全栈,简历上多一个技能,试用期也能更快的上手。

4.前置知识铺垫了解(笔记会具体详述)

  • ES6 let 与const

    • let 和 const 是ES6新增的两个重要的JavaScript关键字。
    • let声明的变量只能在let命令所在的代码块内有效
    • const声明一个只读的常量,一旦声明,常量的值就不可以改变了。意味着一旦声明必须初始化,否则就会报错。
  • let和var的区别:
    • let只在自己声明的作用域有效,var是在全局作用域有效 ,尽量少用var,尽量可能的用let,因为var没有封装,容易污染别人的代码。
    • 同名的变量里,let不能重复声明,且只能声明一次。var可以声明多次。for循环内改用let,而不是var。
    • let严格遵守代码的顺序,不存在变量提升。而var声明的变量,会忽略声明的顺序,可以变量提升。
  • ES6 Map 与 Set
    • Map对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。Map 中的key:Key是(字符串,对象,NaN,函数)。
    • Set 对象允许存储任何类型的唯一值,不管是原始值还是对象引用的。对象存储的值总是唯一的,需要判断两个值是否相等。
  • Maps 和 Objects 的区别:
    • 一个Object 的键只可以是字符串或者 Symbols,而一个Map 的键可以是任意值。
    • Map中的键值是有序的(FIFO原则),而添加到对象中的键则不是。
    • Map的键值可以对个数从 size 属性获取,而Object 的键值对个数只能手动计算。
    • Object都有自己的原型,原型链上的键名可能会和你自己在对象上的设置的键名产生冲突。

2.ES6的变量及解构赋值

2.1.ES6变量与常量声明

  1)变量声明

var a=100
let b='hello' /*
let的三大特性:
1.不存在变量提升,必须要先声明,再使用;
2.不能重复声明
3.块级作用域,变量只在代码内有效
*/

   2)常量声明

const PAGE_SIZe=100
const PI = 3.1415926 /*
const的三大特征:
1.声明必须赋值(必须初始化)
2.常量是只读的,不能重新赋值
3.块级作用域,常量只在代码内有效、
*/

2.2.ES6解构赋值

1)数组的解构赋值

  • 按顺序将值赋值给对应的变量

    • 示例
let [a,b,c] = [1,2,3]
console.log(a)
console.log(b)
console.log(c)
    • 实例
let a = [1,2,3]
let [a1,a2,a3] = a
console.log(a1) //1
console.log(a2) //2
console.log(a3) //3
  • ...三个点表示解构运算符,将剩余的内容赋值

    • 示例
let [c,...d] = [1,2,3]
console.log(c) //1
console.log(d) //[2,3]
    • 实例
let a = [1,2,3]
let [b1,...b2] = a
console.log(b1) //1
console.log(b2) //[2,3]
  • 解构赋值失败,变量值为undefined

    • 示例
let [e,f] = [1]
console.log(e) //1
console.log(f) //undefined
  • 防止解构失败,给变量默认值

    • 示例
let [g,h=100] = [1]
console.log(g) //1
console.log(h) //100

2)对象的解构赋值

  • 按顺序将值赋值给对应的变量

    • 示例
let {foo,bar} = {foo:"111",bar:"222"};
console.log(foo); //111
console.log(bar); //222
  • 可以解构对象中的常量、方法

    • 示例
console.log(Math.PI) //3.141592653589793
let {PI,sin}=Math //sin是Math中的方法,PI是Math中常量
console.log(PI) //3.141592653589793
console.log(sin(PI/2)) //1
  • 解构赋值失败,则为undefined,可设置默认值

    • 示例
let {x,y,z=5} = {x:1}
console.log(x) //1
console.log(y) //undefined
console.log(z) //5
  • 重新指定变量名称

    • 示例
let {color} = {color:"blue"}
console.log(color) //blue let {color:sky} = {color:"blue"}
console.log(sky) //blue;注意:前面的冒号是将color变量改为sky,下次调用sky就能得到blue。后面的冒号是color的值blue
  • 复杂对象的解构赋值

    • 示例
1 let {title,author:{name,age}} = {
2 title:"新闻标题",
3 author:{
4 name:"张三",
5 age:23
6 }
7 }
8 console.log(name) //张三
9 console.log(age) //23
  • 对象解构赋值的应用

3)字符串的解构赋值

3.ES6的函数

3.1.设置默认值

3.2.对象中的函数简写

3.3.箭头函数

4. ES6面向对象编程

4.1.JS中的面向对象编程

4.2.ES6中的继承

5.  ES6的模块化

6. Flex容器

Python全栈工程师之从网页搭建入门到Flask全栈项目实战(1) - ES6标准入门和Flex布局的更多相关文章

  1. Python全栈工程师之从网页搭建入门到Flask全栈项目实战(3) - 入门Flask微框架

    1.安装Flask 方式一:使用pip命令安装 pip install flask 方式二:源码安装 python setup.py install 验证 第一个Flask程序 程序解释 参数__na ...

  2. Web全栈工程师修养

    全栈工程师现在是个很热的话题,如何定义全栈工程师?在著名的问答网站Quora上有人提出了这个问题,其中一个获得了高票的回答是: 全栈工程师是指,一个能处理数据库.服务器.系统工程和客户端的所有工作的工 ...

  3. 阿里巴巴年薪800k大数据全栈工程师成长记

    大数据全栈工程师一词,最早出现于Facebook工程师Calos Bueno的一篇文章 - Full Stack (需fanqiang).他把全栈工程师定义为对性能影响有着深入理解的技术通才.自那以后 ...

  4. python 全栈开发,Day88(csrf_exempt,ES6 快速入门,Vue)

    BBS项目内容回顾 1. 登陆页面 1. 验证码 1. PIL(Pillow) 2. io 2. ORM 1. 增删改查 3. AJAX $.ajax({ url: '', type: '', dat ...

  5. Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  6. 测开之Python自动化全栈工程师+性能专项(送思维导图)

    测开之Python自动化全栈工程师+性能专项 功能测试基础 接口测试基础接口的通信原理与本质cookie.session.token详解接口测试的意义与测试方法接口测试用例的设计 app测试 app流 ...

  7. Python全栈工程师(装饰器、模块)

    ParisGabriel                每天坚持手写  一天一篇  决定坚持几年 全栈工程师     Python人工智能从入门到精通 装饰器 decorators(专业提高篇) 装饰 ...

  8. Python全栈工程师(递归函数、闭包)

    ParisGabriel            每天坚持手写  一天一篇  决定坚持几年 全栈工程师     Python人工智能从入门到精通 函数式编程: 是指用一系列函数解决问题 每一个函数完成细 ...

  9. 【目录】python全栈工程师

    第一阶段:Python 语言核心编程1. Python核心   -- 2048 游戏核心算法2. 面向对象   -- 天龙八部游戏技能系统3. Python高级   -- 集成操作框架项目:2048游 ...

随机推荐

  1. js入门基础

    JavaScript语言介绍 JavaScript的历史 诞生于1995年,最初名字叫做Mocha,1995年9月改为LiveScript.Netscape公司与Sun公司(Java语言的发明者)达成 ...

  2. Win10系统下使用Django2.0.4+Celery4.4.2+Redis来实现异步任务队列以及定时(周期)任务(2020年最新攻略)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_153 首先明确一点,celery4.1+的官方文档已经详细说明,该版本之后不需要引入依赖 django-celery 这个库了,直 ...

  3. 内网渗透之Windows认证(二)

    title: 内网渗透之Windows认证(二) categories: 内网渗透 id: 6 key: 域渗透基础 description: Windows认证协议 abbrlink: d6b7 d ...

  4. RISC-CPU设计和 FPGA 实现

    摸鱼的时候找到一份单周期和多周期的riscv的fpga实现,还是挺符合我的预期的 知乎专栏地址:https://www.zhihu.com/column/c_1530950608688910336

  5. HttpServletResponse 类

    HttpServletResponse 类的作用 HttpServletResponse 类和 HttpServletRequest 类一样.每次请求进来,Tomcat 服务器都会创建一个 Respo ...

  6. 面试突击79:Bean 作用域是啥?它有几种类型?

    Spring 框架作为一个管理 Bean 的 IoC 容器,那么 Bean 自然是 Spring 中的重要资源了,那 Bean 的作用域是什么意思?又有几种类型呢?接下来我们一起来看. PS:Java ...

  7. 关于 Math.random()生成指定范围内的随机数的公式推导

    关于 Math.random()生成指定范围内的随机数的公式推导 在 java 中,用于生成随机数的 Math 方法 random()只能生成 0-1 之间的随机数,而对于生成指定区间,例如 a-b ...

  8. EPIC限免提示

    通过云函数每周定时推送限免内容到手机 import datetime import requests requests.packages.urllib3.disable_warnings() # da ...

  9. 面试突击83:什么情况会导致@Transactional事务失效?

    一个程序中不可能没有事务,而 Spring 中,事务的实现方式分为两种:编程式事务和声明式事务,又因为编程式事务实现相对麻烦,而声明式事务实现极其简单,所以在日常项目中,我们都会使用声明式事务 @Tr ...

  10. 前端 vue表格数据导出Excel 文件实现

    实现思路 使用json2csv将后台json数据转化为csv格式数据 采用创建Blob(二进制大对象)的方式来存放缓存数据: 生成下载链接: 创建一个a标签,设置href和download属性 触发a ...