热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

前端ES6必须掌握的重点

ES6(常用的、重点的)数组API、正则API、字符串API都不讲变量声明es6中变量声明方式6种varfunctionletconstclassimport形参总结:【e

ES6(常用的、重点的)


数组API、正则API、字符串API都不讲


变量声明


es6 中变量声明方式6种 var function let const class import 形参

总结:【es6中语法】 在同一个作用域中【变量名】不能重复;

function 定义函数 函数声明提升

var 声明变量 变量提升


let 声明的变量


只能在当前块中使用。let 声明的变量;决定变量能在哪里使用;而不是 形成一个作用域

注意事项



  • 在当前{} 中不能重复声明let 声明的变量



  • 在当前{}中 let 声明的变量之前不能使用该变量 ----> 暂时性死区



  • 函数体中 let不能声明形参



  • 在同一个作用域中let 不能声明函数名



  • 内层{} 声明的变量不影响外层{} 声明的变量



  • var 声明的变量;在提升;只要遇到let 重名;一律报错;不允许重复,默认提升到当前let 的块级域顶端



  • for 中的let 默认() 中let 为父级作用域, {} let为子作用域、



  • for循环特殊;执行多次所以可以形成多个块级作用域




z 块级作用域

% let const 声明的变量能在哪里用的问题


模板字符串



  • 模板字符串的基本用法

var s1 = `abc`


  • 模板字符串的优势:

var obj={ name:"",age:5 };var s1 ="我叫:"+obj.name+",今年:"+obj.age+"岁。"

解构赋值

解构赋值;赋值的内容要么是对象要么是数组。其他类型会报错的。

从对象和数组中取值的另一种方式



  • 对象的解构赋值

var obj={name:"张三",age:18}var {name,age}=obj; //生成2个变量,// name值来自于obj.name、// age值来自于obj.agevar {name:title}=obj;//生成一个变量:title,值来自于obj.name


  • 函数参数的解构赋值

function f1(obj){console.log(obj.age);console.log(obj.height)}//等价于function f1({ age,height }){console.log(age);console.log(height)}f1({age:5,height:180})


  • 补充:属性的简写

var a = 3 ; var c = 10;var b = { a,c } ; //b对象有一个a属性,a属性的值,来自于a变量 ,//还有一个c属性,c属性的值来自于c变量console.log(b)

get &set


函数的扩展


rest参数



  • 使用背景:es6的

  • 优点:arguments是伪数组,而rest参数是真数组

function fn(...args){ // rest 参数console.log(args); //数组:[1,2,3,4,5]}fn(1,2,3,4,5)

箭头函数



  • 场景:用于替换匿名函数

  • 基本用法:

//匿名函数div.onclick=function(){console.log("你好")}//箭头函数div.onclick=()=>{console.log("你好")}


  • 有一个参数的箭头函数

var fn=(a)=>{console.log("abc");}//等价于:var fn=a=>{console.log("abc");}


  • 有2个及更多参数的箭头函数

var f=(a,b,c)=>{console.log("abc")}


  • 箭头函数注意事项

    • 箭头函数不能作为构造函数;不能new实例化

    • 箭头函数内部没有this (重点)

    • 箭头函数内部没有 arguements 可以哟弄个restt 参数代替

    • 不可以使用yield命令,因此箭头函数不能用作 Generator 函数



  • 箭头函数和普通匿名函数有哪些不同?

    • 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

    • 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

    • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

    • (不常用)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

      • generator函数现在经常用async替代






对象的扩展



  • Object.assign:实现拷贝继承

  • 对象扩展运算符

var obj1={ age:5,gender:"男" }var obj2={ ...obj1 }var obj3={ ...obj1 , age:10 }// 浅拷贝 一个参;深拷贝两个参var source={ age:18,height:170,className:"3年2班" }//克隆一个新对象出来var newObj=Object.assign({},source);console.log(newObj);var newObj2={};Object.assign(newObj2,source);console.log(newObj2);


  • 对象中新增属性 super.xx

  • 将某个属性挂在在某个属性的原型对对象上


异步

学习方式or看懂代码




  • or异步有哪些? 1:回调函数、promise 、async setTimeOut setTimeInterval


  • 异步什么时候开始的?



  • 当前的异步是在什么时候执行完毕的。



  • 当前的执行的异步是怎么告诉外界;异步执行完毕,可以执行下一个异步了



  • 外界收到信号后;做了哪些处理




Promise


为什么要有promise:解决(回调地狱)的问题


回调地狱:

//跟以前的if条件地狱很像// if(){// if(){// if(){// }// }// }$.get("/getUser",function(res){$.get("/getUserDetail",function(){$.get("/getCart",function(){$.get("/getBooks",function(){//...})})})})//node开发:读取文件;开个服务器、接收一个请求、请求路径、访问数据库

Promise函数基本用法

var promise=new Promise((resolve,reject)=>{//b 把需要执行的异步操作放在这里$.get("/getUser",res=>{//获取数据的异步操作已经执行完毕了,等待下一步的执行,通过执行resolve函数,告诉外界你可以执行下一步操作了//c、resolve(res)//而执行的下一步操作,其实就是写在then的回调函数中的})})//a、promise.then(res=>{//d、执行后续的操作console.log(res);})

Promise函数实现多层回调

new Promise((resolve,reject)=>{$.get("/getUser",res=>{resolve(res)})}).then(res=>{//用户基本信息return new Promise(resolve=>{$.get("/getUserDetail",res=>{resolve(res)})})}).then(res=>{//用户详情return new Promise(resolve=>{$.get("/getCart",res=>{resolve(res)})})}).then(res=>{//购物车信息})

Promise函数错误处理



  • 第一种方式

new Promise((resolve,reject)=>{$.ajax({url:"/getUser",type:"GET",success:res=>{resolve(res);},error:res=>{reject(res)}})}).then(resSuccess=>{//成功的返回值},resError=>{//失败的返回值})


  • 第二种方式

new Promise((resolve,reject)=>{$.ajax({url:"/getUser",type:"GET",success:res=>{resolve(res);},error:res=>{reject(res)}})}).then(resSuccess=>{//成功的返回值}).catch(resError=>{//失败的返回值
// catch 既可以捕获到promise 中的错误;也可以捕获到 then()中的处理;也就是外界处理函数中的错误})

async



  • async其实是一个promise的语法糖

async function get(){console.log('开始执行');var res = await timer()console.log('执行结束:',res);}function timer(){return new Promise((resolve,reject)=>{setTimeout(()=>{resolve("你好");},1000)})}get();


  • await可以执行异步操作,但是await必须在async函数内执行



  • await操作可以有返回值,这个返回值表示promise操作成功的返回值



  • 如果await里面执行的异步操作发生了reject,或者发生了错误,那么只能使用try…catch语法来进行错误处理




class


定义一个类

class Person {constructor(name) {this.name=name;}}//相当于:function Person(name){this.name=name;}

添加实例方法

class Person {constructor(name,age) {this.name=name;this.age=age;}//定义方法say() {console.log("大家好,我叫:"+this.name+",今年:"+this.age+"岁");}travel(){console.log("坐着飞机去巴厘岛");}}

添加静态方法



  • 静态成员:静态属性、静态方法

  • 静态属性:通过类本身来访问:Person.maxAge

  • 静态方法:通过类本身来访问的一个方法:Person.born();

class Animal {constructor(){}//这就是一个静态方法了static born(){console.log("小呆萌出生了")}}//访问静态方法Animal.born();

类的继承

//父类class Person {constructor(name){this.name=name;}}//Student类继承自Person类class extends Person {//构造方法constructor(name,grade){//规定:必须调用父类构造方法,如果不调用就会报错super(name); //调用父类构造方法,从而给子类的实例添加了name属性this.grade=grade;}}

[1,3,5].map(function(value,index){})[1,3,5].map((value,index)=>{})//以前变量和字符串拼接,现在用模板字符串

es6的新语法



  • 个人建议:不要去试想着一下子全部把之前的代码习惯变成es6的方式

    • 而是今年学会了模板字符串,把今天项目用到的所有字符串拼接都换成模板字符串

    • 过了几天学会了箭头函数,把当天项目里面的所有用到的匿名函数都换成箭头函数




预习作业:通过MDN学习Object.defineProperty()的用法


module -->放到后面的模块化课程中讲解


基本用法



  • 导出模块:

//common.jsexport default { name:"abc" }


  • 导入模块:

//b.jsimport common from "common.js"console.log( common.name ) //"abc"

模块有多个导出

//person.jsexport const jim = { country :"France" }export const tony = { color:"gray" }//默认的导出export default { name:"abc" }

//index.jsimport person , { jim , tony } from "person.js"//person:{ name:"abc" }//jim:{ country :"France" }//tony:{ color:"gray" }

模块导入导出取别名

js//person.jsexport const tOny= { color:"gray" }export { tony as Tony }//index.jsimport { Tony } from "person.js"import { Tony as man} from "person.js"console.log(man) //{ color:"gray" }

推荐阅读
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • 技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • 自然语言处理(NLP)——LDA模型:对电商购物评论进行情感分析
    目录一、2020数学建模美赛C题简介需求评价内容提供数据二、解题思路三、LDA简介四、代码实现1.数据预处理1.1剔除无用信息1.1.1剔除掉不需要的列1.1.2找出无效评论并剔除 ... [详细]
  • Webpack 初探:Import 和 Require 的使用
    本文介绍了 Webpack 中 Import 和 Require 的基本概念和使用方法,帮助读者更好地理解和应用模块化开发。 ... [详细]
  • 在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
  • 深入探索HTTP协议的学习与实践
    在初次访问某个网站时,由于本地没有缓存,服务器会返回一个200状态码的响应,并在响应头中设置Etag和Last-Modified等缓存控制字段。这些字段用于后续请求时验证资源是否已更新,从而提高页面加载速度和减少带宽消耗。本文将深入探讨HTTP缓存机制及其在实际应用中的优化策略,帮助读者更好地理解和运用HTTP协议。 ... [详细]
  • 使用HTML和JavaScript实现视频截图功能
    本文介绍了如何利用HTML和JavaScript实现从远程MP4、本地摄像头及本地上传的MP4文件中截取视频帧,并展示了具体的实现步骤和示例代码。 ... [详细]
  • 本文介绍了 Go 语言中的高性能、可扩展、轻量级 Web 框架 Echo。Echo 框架简单易用,仅需几行代码即可启动一个高性能 HTTP 服务。 ... [详细]
  • Ext JS MVC系列一:环境搭建与框架概览
    本文主要介绍了如何在项目中使用Ext JS 4作为前端框架,并详细讲解了Ext JS 4的MVC开发模式。文章将从项目目录结构、相关CSS和JS文件的引用以及MVC框架的整体认识三个方面进行总结。 ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • 在JavaWeb开发中,文件上传是一个常见的需求。无论是通过表单还是其他方式上传文件,都必须使用POST请求。前端部分通常采用HTML表单来实现文件选择和提交功能。后端则利用Apache Commons FileUpload库来处理上传的文件,该库提供了强大的文件解析和存储能力,能够高效地处理各种文件类型。此外,为了提高系统的安全性和稳定性,还需要对上传文件的大小、格式等进行严格的校验和限制。 ... [详细]
  • 在处理大规模数据数组时,优化分页组件对于提高页面加载速度和用户体验至关重要。本文探讨了如何通过高效的分页策略,减少数据渲染的负担,提升应用性能。具体方法包括懒加载、虚拟滚动和数据预取等技术,这些技术能够显著降低内存占用和提升响应速度。通过实际案例分析,展示了这些优化措施的有效性和可行性。 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 为开发者提供了一系列实用的参考网站和资源链接,包括HTML速查手册( 和 ),帮助开发者快速查找和学习相关技术知识。此外,还涵盖了其他重要的开发工具和文档,为编程工作提供全面支持。 ... [详细]
  • 资源管理器的基础架构包括三个核心组件:1)资源池,用于将CPU和内存等资源分配给不同的容器;2)负载组,负责承载任务并将其分配到相应的资源池;3)分类函数,用于将不同的会话映射到合适的负载组。该系统提供了两种主要的资源管理策略。 ... [详细]
author-avatar
人丁红星
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有