二 浮沙之上 课程中到的 javascript 语法和知识_W

1、 夜团幕队第二篇 JavaScript识 Night TeamMar vi n. Z 知 扫码查看课程详情 CONTENTJS 简介JS 语法JS 进阶总结 3 Part 01JS 简介4 JS 简介 背景JavaScript 诞生于 20 多年前，由 NetScape 的 BrendanEich 发明设计，最初命名为 LiveScript 后来为了跟上当初比较火的 Java 就更名为了 JavaScript，并与微软的 JScript 和 CEnvi 的 ScriptEase 三足鼎立 1997 年，在 ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borlan

2、d组成的工作组确定统一标准：ECMA-262，并发布 ECMAScript 1.0，简称 ES1 1998 年 ES2 发布，1999 年 ES3 发布 2009 年 ES5 发布，如今大多数 JS 的特性都是这个版本 2015 年 ES6 发布，在 ES6 上有很多实用特性的改进 5 JS 简介 与 CSS 和 HTML 之间的关系 HTML 是结构层，相当于人的骨骼和躯体CSS 是表现层，相当于人的衣服和装饰 JS 是行为层，相当于人的行为与动作 6 JS 简介 发展前端 React、Vue、Angular后端 Node.js桌面端 Electron物联网 Arduino数据库 Mongo

3、DB 移动端 React Native7 Part 02JS 语法8 JS 语法 概览数据类型控制流 函数 特殊对象9 JS 语法 数据类型Object 对象 Array 数组String 字符串 Number 数字 Boolean 布尔值Map 映射 Set 集合 null / undefined10 JS 语法 数据类型Object 对象是以 Key-Value 键值对的形式存在的集合键（Key）都是字符串（String）类型 值（Value）可以是任意类型 对象的拷贝分为深浅拷贝 浅拷贝: 只复制对象内存地址，类似于指针深拷贝: 完全克隆，生成一个新对象 11 JS 语法 数据类型Arr

4、ay 数组数组是一个有序排列的集合数组的值可以是任意类型 数组的拷贝分为深浅拷贝 与对象一致 12 JS 语法 数据类型String 字符串字符串是任何由单引号或双引号定义的类型Number 数字数字是任何表示数字的类型Boolean 布尔值布尔值是表示 true 或 false 的类型13 JS 语法 数据类型映射（Map）和集合（Set）是 ES6 中新增的类型，以解决 ES5中对象（Object）和数组（Array）的不足 Map 映射键（Key）值（Value）对关系的集合与对象不同的是，键可以为任何类型 Set 集合相当于不重复值的数组14 JS 语法 数据类型null相当于一个“空

5、”的值表示该值为空 undefined表示“未定义” 通常用于比较不存在的属性或值15 JS 语法 控制流循环while for Array map forEach16 JS 语法 控制流条件判断可以是 if () else 的形式也可以是 if () else 的形式 中间有条件用 else if 的形式 17 JS 语法 函数定义 变量作用域高阶函数 闭包 特殊对象 18 JS 语法 函数 函数定义 带函数名 function funcName (param) statement const funcName = function (param) statement 不带函数名（定义） (

6、 function (param) statement () ) 19 JS 语法 函数 变量作用域 变量定义 var, const, let 定义的变量是有作用域的 var 定义的变量在各自的函数内部起作用 const、let 定义的变量为块级作用域变量提升 扫描整个函数体的语句，将所有申明变量提升到函数顶部全局作用域 如果不指定 var, const, let 申明关键字来定义变量，该变量将被绑定到全局变量 window 上 块级作用域 let, const 将作用在 for、while 等循环语句里20 JS 语法 函数 高阶函数 定义接收另一个函数作为参数的函数被称作高阶函数用途回调

7、Callback数组操作 filter、sort、map、forEach21 JS 语法 闭包 闭包 定义函数的返回值可以为函数 所有的参数和变量都保存在返回函数中 当调用返回函数时才会执行所有的运算逻辑用途自执行函数封装 结果缓存 22 JS 语法 特殊对象 特殊对象JSON JSON、对象的序列化 / 反序列化操作JSON.stringify 序列化 JSON.parse 反序列化 Date JS 的时间操作对象 new Date(dateString)23 Part 03JS 进阶24 JS 进阶 概览循环 原型链 异步编程 浏览器储存 跨域 Webpack 打包25 JS 进阶 循环循

8、环（Event Loop）定义：主线程不断的重复获取执行消息、再获取执行不断循环的机制被称为循环 为什么需要循环 JS 是单线程的在处理异步操作的时候需要循环机制相关概念堆（Heap）：大块非结构化内存区域，储存对象、数据 栈（Stack）：调用栈，储存该次循环待主程序执行的任务队列（Queue）：队列，先进先出被推入调用栈中 宏任务（Macro Task）和微任务（Micro Task）Node.js循环 26 JS 进阶 原型链原型链概念prototype proto constructor 应用场景 继承、代码复用ES6 出来后是否需要理解原型链？ 27 JS 进阶 异步编程回调Call

9、back HellES5异步编程回调函数 Callback通过传入回调函数作为参数在函数中异步执行优点：简单 缺点：回调ES6PromisePromiseES6 中出现的异步解决方案可以获取异步操作消息的对象resolve / reject，then / catch 优点：解决了回调async / awaitES8缺点：代码可读性不高28 JS 进阶 异步编程回调Callback HellES5异步编程async / awaitES8（ES2017） 中出现的异步解决方案 是基于 Promise 的语法糖，需要了解 Promise 相关知识 async 返回 Promise 对象ES6Prom

10、iseasync 函数遇到 await 时会终止运行，直到相应的 Promise 状态变为 resolved 优点：解决了 Promise 代码可读性问题，代码可读性高 缺点：多个并行异步操作需要用 Promise.all 来执行 async / awaitES829 JS 进阶 浏览器储存浏览器储存Cookies 主要用于与服务端通信储存量小 Local Storage 储存量相较于 Cookies 更大只能储存字符串 Session Storage只存在与当前 Session，关闭浏览器就丢失了其他与 Local Storage 一样IndexedDB相当于浏览器上的 SQL 数据库更大的储存空间 API 较难掌握 JS 进阶 跨域跨域定义：客户端与不同源的服务端通信解决办法CORS 跨域资源共享，解决跨域请求的方案的成熟方案JSONP 基于 标签具有可跨域特性 只能用于 GET 请求iframe 通过 标签在一个页面展示不同源的页面 通过 PostMessage 进行页面之间的通信 反向通过反向让客户端与服务端保持同源 JS 进阶 Webpack 打包Webpack 打包目的 将不同类型的源文件编译打包成静态文件为什么使用 We