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)})

    不支持 breakcontinue

    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中声明一个类

  • 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查看完整版


文章作者: Eish
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Eish !
评论
 上一篇
Vue2.5从零基础入门到实战项目开发去哪儿网App Vue2.5从零基础入门到实战项目开发去哪儿网App
项目代码 第1章 课程介绍本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获。1-1 课程简介课程流程 知识点 课程安排 学习前提 讲授方式 通俗易懂的案例讲解 借助基础知识实现项目 带着你编写每一行代码 图文讲解复杂知识点 课程收
2020-06-02
下一篇 
JavaScript从入门到精通 JavaScript从入门到精通
JavaScript从入门到精通初探 JavaScript 魅力JavsScript 是什么 网页特效原理 JavaScript 就是修改样式(文档) 编写 JS 的流程 布局:HTML + CSS 属性:确定要修改的属性 事件: 确
2020-06-02
  目录