JavaScript ES6-10语法

第1章 课程介绍与环境搭建

JS作为前端的立身之本，让大家了解学习这门课的必要性。考虑到很多同学刚刚接触前端或者对工程化方法不太了解，为了快速进入到学习状态，我们提供了极其简单的方式帮大家准备好学习环境。

1-1 课程导学 试看

怎么学？

1. 一天后：体验乐趣
2. 十天后：进入状态
3. 一个月后：养成习惯
4. 三个月后：收获知识
5. 五个月后：形成思维习惯

课程内容

1. 快速搭建开发环境
2. 学习语法
3. 推荐阅读材料
4. 练习题
5. Vue 框架内实战
6. 学习开发环境如何构建

适用人群

1. 拥有 JavaScript ES3 以上基础
2. 会编程，有编程思维
3. 有耐心
4. 求上进

1-2 电子书位置

1-3 环境准备

环境准备

• 原理

  1. ES6-10 ：原生代码
  2. Babel→Webpack ：构建转换
  3. ES5 ：浏览器可以识别的代码

• 开发环境

  • Chrome和Node环境
  • 自动刷新 自动编译
  • 格式化编写代码

1-4 Node 安装

• Node 安装：-v 12.2.0
  • npm
  • npx

1-5 初始化项目

初始化项目

npx es10-cli create projectName // 创建模板文件命令

启动项目

cd projectName
npm install
npm start
touch static/lesson2-1.js // 新建文件命令

1-6 编辑器配置

VS code 插件 beautify 和 ESLint

第2章 ES6基础知识

ES6语法相对于ES5有了非常大的改变，让原生 JavaScript 能力再上一个台阶，这个章节会分门别类进行讲述，单纯讲语法既乏味也不利于记忆更不知道如何运用，我们以应用场景开场分别给出ES5和ES6两种不同的解决方案，循序渐进剖析语法…

Let & Const

2-1 作用域（1）

1. var 声明的全局变量相当于 window 的属性，但无法删除，属性可以删除
2. 没有var 定义的变量是作为 window 的属性定义的，是全局属性
3. 在函数内部没有 var 定义的变量是window 的属性，是全局属性

2-2 作用域（2）

• 函数作用域 = 局部作用域
• var 定义的变量会变量提升
• let 定义的变量具有块状作用域

this 与 动态作用域 的关系

• this 具有动态指向

四种作用域

1. 全局作用域
2. 函数作用域
3. 块状作用域 ，配合 let 和 const 使用
4. 动态作用域

2-3 什么是作用域

几乎所有编程语言就是在变量中储存值，并且能够读取和修改这些值。事实上在变量中储存和取出值得能力，给程序赋予了状态。

如果没有这样的概念，一个程序虽然可以执行一些任务，但是它们将会受到极大的限制而且不会非常有趣。

但是这些变量该储存在哪？又如何读取？为了完成这个目标需要制定一些规则，规则就是：作用域。

• 四种常见作用域类型：

  对象	类型
  global	全局作用域
  function	函数作用域（局部作用域）
  {}	块状作用域
  this	动态作用域

• 如果一个变量 或者其它表达式不在“当前得作用域”，那么JavaScript机制会继续沿着作用域链上查找直到找到全局作用域，通常是指沿着链式得作用域查找，而不能从父作用域引用子作用域中的变量和引用

2-4 let&const

• let 声明的特点
  • 块状作用域
  • 不能用用全局变量的属性访问
  • 不能重复定义
  • 不会变量提升
• const 声明的特点
  • 只能赋值一次
  • 初始化时一定要赋值
  • 块状作用域
  • 不能用用全局变量的属性访问
  • 不能重复定义
  • 不会变量提升
• 阅读
  1. 什么是作用域
  2. JavaScript深入之词法作用域和动态作用域
  3. 深入理解JS中声明提升、作用域（链）和 this 关键字

数组 - Array

2-6 ES5中数组有多少种遍历的方法？

他们有什么优势和缺点？

1. for 循环

2. forEach ：arr.forEach(funciton (item) {console.log(item)})

   不支持 break 和 continue

   return false 相当于 continue

   隐式索引

3. every ：arr.every(funciton (item) {console.log(item)})

   是否继续执行取决于函数返回值 true 、false

   如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

   如果所有元素都满足条件，则返回 true。

4. some：依次执行数组的每个元素：

   如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。

   如果没有满足条件的元素，则返回false。

5. for in ：for ( let index in Object) {console.log(Object[index])}

   为对象设计的，数组的属性和下标作为字符串遍历

   支持 continue 和 break

2-7 ES6中数组有多少种遍历的方法？

1. for of ：for (let item of arr) { console.log(item)}

   不仅可以遍历数组和对象

   可以遍历自定义数据结构

2. map()

   map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

   map() 方法按照原始数组元素顺序依次处理元素。

   这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach

2-8 Array.from（如何将伪数组转换成数组？）

ES5

let args = [].slice.call(arguments) // collection
let imgs = [].slice.call(doncument.querySelectorAll('img')) // NodeList

ES6

• Array.from(arrayLike, mapFn, thisArg)

  ES6 新增方法，专门转换伪数组到数组，也可用于生成数组

Array.prototype.from // ES6 新增方法
Array.from(arrayLike, mapFn, thisArg) // 语法 伪数组，函数返回值，this指向
let args = Array.from(arguments)

什么叫伪数组

1. 按照索引方式存储数据
2. 具有 length 属性

let array = Array.from({ length: 5}, function () { return 1})

2-9 Array.of-fill（如何生成新数组？）

ES6 新方法

• Array(5) ：初始化长度为5的数组

• new Array(1,2,3)：初始化数组，同时生成数据

• Array.of(1,2,3)：初始化数组，同时生成数据

• Array.fill(value,start,end)：填充数据

// Array.prototype.of
let array = Array.of(1,4,5,2,67)

// Array.prototype.fill
let array = Array(10).fill(1)

Array.fill(value,start,end) // 语法 填充值，起始位，截止值。 默认填充所有元素
console.log(array.fill(9, 5, 8))

2-10 Find&FindIndex（如何查找数组？）

• array.filter(fn)：ES5，返回符合fn 条件的所有值，没有则为空

• Array.find(fn)：ES6，查找数组中符合fn 条件的第一个值，并返回，没有则为 undefined

• Array.findIndex()：ES6，返回位置，未找到则-1

let array = Array.of(1, 4, 5, 2, 67)
let find = array.filter(function (item) {
  return item % 2 === 0
})
// 查找下标
let find = array.findIndex(function (item) {
  return item === 0
})
console.log(find);

Class Update

2-12 Class基础语法（怎么声明一个类？）

ES5中怎么声明一个类

• let Animal = function (type) {
    this.type = type
  }
  
  Animal.prototype.eat = function () {
    console.log('you are eatting food hello');
  }
  let dog = new Animal('food')
  let cat = new Animal('fish')
  
  console.log(dog)
  console.log(cat)
  
  // 修改实例对象原型链上的方法
  cat.constructor.prototype.eat = function () {
    console.log('error')
  }
  dog.eat()
  cat.eat()
  
    
  
  #### ES6中声明一个类
  
  - ```JS
    class Animal {
      constructor(type) {
        this.type = type
      }
      eat() {
        console.log('i am food')
      }
    }
    
    let dog = new Animal('food')
    let cat = new Animal('fish')
    
    console.log(dog)
    console.log(cat)
    
    // 修改实例对象原型链上的方法
    cat.constructor.prototype.eat = function () {
      console.log('error')
    }
    dog.eat()
    cat.eat()
    
    console.log(typeof Animal);
  

点击去GitHub查看完整版