Hello ECMAScript .

2020-06-28  本文已影响0人  Super三脚猫

ECMAScript - 学习笔记 🎬

ECMAScript 6.jpeg

🧩nvm node.js 包管理工具

nvm github

🧩nrm npm 镜像管理工具

nrm ls
nrm test [name]         // 测试延迟
nrm use [name]          // 使用
nrm add [alias] [url]   // 添加自己的源
nrm del [name]          // 删除源

🧩新的声明方式 let 定义变量

  1. 不属于顶层对象的 window
    • 全局变量和var 都可以用 window 去指向，这就会导致 污染了全局变量
    • 虽然 webpack 打包会规避掉这个问题。
  2. 不允许重复声明
  3. 不存在变量提升
  4. 暂时性死区
Demo1:
a = 2
let a

Demo2: 比较隐蔽的
function foo(a = b, b = 2) {
  // 上面的第一个默认参数用b时，b还没有被赋值 所以会报错
}
foo()
  1. 块级作用域
// 因为 var 没法在 {} 中形成一个块，所以最后 i++ 后，循环外可以使用i它是3
for (var i = 0; i < 3; i++) {
  console.log('循环内：' + i) // 0 1 2
}
console.log('外：' + i) // 3

注意：块级作用域必须要有 {} 大括号

// 这样就会报错
if (true) let a = 5

知识点 + 面试题：

for (var i = 0; i < 3; i++) {
  // 异步
  setTimeout(function () {
    console.log(i); // 直接输出了i的最后结果：③ 3
  })
}

// 解决方案1：
for (var i = 0; i < 3; i++) {
  (function(j){
    setTimeout(function () {
      console.log(j);
    })
  })
  (i) // 调用方法
}

// 解决方案2：(可以通过 babel 查看编译成ES5的语法)
for (let i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i);
  })
}

扩展知识：

  1. webpack 打包目录注意 static 不会被打包进去
  2. webpack 打包时会自动每一行代码拼接\n所以js中不需要去刻意加";"
  3. Babel 是一个 JavaScript 编译器

🧩新的声明方式 const 定义常量

变量名 值
num 123456
str 'abcd'
obj 引用地址
arr 引用地址

知识点

const 定义的变量不可赋值，但是对象/数组可以改变，因为对象/数组都存在堆内存，栈内存中只是引用地址不变
Test:

const obj = {
  name: '三脚猫'
}
console.log(obj);
obj.englistName = 'Harvey'
console.log(obj);

🧩解构赋值

注意：

  1. 数组解构时，是通过顺序去解构赋值的
  2. 对象解构时，是通过key值去结构的，改变了key值顺序是没有影响
function foo({name, age}) {
    console.log(name, age);
}
foo({name: '三脚猫', age: 18})

let jsonStr = '{"a": "哈哈", "b": "嘿嘿"}'
let {a, b} = JSON.parse(jsonStr)
console.log(a, b);

🧩数组的遍历方式

ES5 中的数组遍历方式
ES6 中的数组遍历方式

🧩ES6新的特性 - 数组的扩展

注意：

在js当中 console.log(NaN == NaN) // false，所以想判断数组中是否存在就用includes()

🧩ES6新的特性 - 函数的参数

扩展知识：JavaScript 中 call()、apply()、bind() 的用法,
JS中call, apply, bind 的区别 - 知乎

🧩扩展运算符 与 rest参数

🧩ES6 箭头函数

🧩ES6 对象的扩展

注意：对象中不要用箭头函数定义方法，应该用ES6给出的方法定义，this会获取不到属性值

🧩深拷贝与浅拷贝

知识点：

  1. 检查数据类型不要用typeof()当检查数组和对象时，都返回的是Object
  2. 用对象原型toString().call()检查更准确js判断数据类型
  3. .slice(start, end) 字符串/数组的截取函数

🧩ES5 中的类与继承

注意：首字母大写更容易看出是类 function People()

🧩 ES6 中的类与继承

关键字：class、extends、constructor、super、static、get / set

// 定义一个类
class People {
    constructor(name, age) {
        this.name = name
        this.age = age
        this._sex = null
    }
    showName() {
        console.log('名字：' + this.name);
    }
    // 父类定义静态方法
    static getHello() {
        return 'Hello';
    }
    // 定义 get & set
    get sex() {
        if (this._sex === 1) {
            return '女士'
        } else if (this._sex === 0) {
            return '男士'
        } else {
            return '未知'
        }
    }
    set sex(val) {
        this._sex = val
    }
}
// 定义父类的静态属性 (ES5语法)
People.world = 'World'
let str = People.getHello() + ' ' + People.world
console.log(str); // Hello World
// 实例
let _people = new People('三脚猫', 18);
console.log(_people);
_people.showName()
// 定义子类
class Coder extends People {
    constructor(name, age, company) {
        super(name, age) // 继承父类的成员属性
        this.company = company
    }
    showCompany() {
        console.log('公司是:' + this.company);
    }
}
// 实例子类
let _coder = new Coder('Harvey', 19, 'tri-footed cat')
console.log(_coder);
_coder.showCompany()
_coder.showName() // 调用父类方法
// 设置 父类 set 方法
_people.sex = 0
console.log(_people.sex);

知识点: ES6类中，定义静态属性要和ES5语法一样。

🧩ES6 - Symbol (森宝�) 独一无二的不能重复的字符串

🧩ES6 - Set (一种新的数据结构)

注意: WeakSet删除对象时，也会存在栈内存引用地址问题，所以需要提前声明出对象赋给一个变量名

🧩ES6 - Map (一种新的数据结构)

补充：Object 两种判断key值方式

  1. Object.keys() 然后如果是深判断就需要递归比较麻烦
  2. 直接用 Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性

🧩字符串的扩展

🧩ES6 中的正则表达式的扩展

🧩数值的扩展

🧩ES6 新特性 - Proxy (代理) 中式发音：普若C

let obj = {}
let newVal = ''
// 第一个参数目标拦截对象 第二个参数拦截的值 第三个闭包内置get和set钩子函数(Hook)
Object.defineProperty(obj, 'name', {
    // 钩子函数 get
    get() {
        return newVal
    },
    // 钩子函数 set
    set(val) {
        // this.name = val // 这样会死循环，set设置完又set
        newVal = val
    }
})
console.log(obj.name); // ''
obj.name = 'es'
console.log(obj.name); // es

扩展知识：

在Vue2.0里实现双向数据绑定的是Object.defineProperty这样的ES5去实现的
在Vue3.0里实现双向数据绑定的是用的Proxy这种拦截器

🧩ES6 中另外一个对象 Reflect (单词本意映射的意思)

下面几项是说明：Reflect 存在的目的

🧩异步操作的前置知识

🧩ES6 Promise （重要知识）

// Promise 状态管理
console.log(1);
let p = new Promise((resolve, reject) => {
    // 在Promise中是同步操作直接输出
    console.log(2);
    var status = true
    if (status) {
        resolve() // 异步调用成功回调，最后执行
    } else {
        reject() // 执行失败后回调
    }
})
console.log(3);
// .then(音译：然后) 第一个参数必填，第二个可以不写
p.then( res => {
    console.log('成功');
}, () => {
    console.log('失败');
})

[图片上传失败...(image-51e78f-1600260968705)]

🧩ES6 Promise 静态方法

🧩ES6 Generator 也叫 生成器函数 (另一种异步解决方案) 摘呢瑞特

🧩迭代器 Iterator A特瑞特

[图片上传失败...(image-70b3dc-1600260968705)]

注意：因为当前没有数据没有 Symbol.iterator 这个方法，就是无法遍历的意思。

只要有该方法，遵循 iterator 协议的都可遍历。

🧩ES6 Module

🧩ES7 ECMAScript7 (2016)

🧩ES7 新特性 数值扩展->幂运算符(指数运算符)

🧩ES8 ECMAScript8 (2017) Async Await（重要知识）

🧩ES8 对象的扩展

🧩ES8 对象属性描述符

🧩ES8 (ES2017) 字符串扩展

🧩ES8 新特性 尾逗号 Trailing commas

🧩ES9 ECMAscript9 (ES2018)

🧩ES9 (2018) 正则表达式扩展

🧩ES9 对象扩展 (用...扩展对象)

// 复习之前数组合并
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [...arr1, ...arr2]
console.log(arr3);
// 用来 - 克隆对象
let obj1 = {
    name: '三脚猫',
    age: 18,
    money: {'RMB': 5, 'USD': 3}
}
let obj2 = {...obj1}
// console.log(obj2);
obj2.school = 'Harvard'
obj1.money.RMB = 88
console.log(obj1);
console.log(obj2); // 浅拷贝 money: {RMB: 88, USD: 3}
// 用来 - 合并对象
let obj3 = {
    sex: '男'
}
let obj4 = {...obj1, ...obj3}
console.log(obj4, 'obj4');
// 用来 - 剩余运算符
let obj5 = {
    name: '三脚猫',
    age: 18,
    school: 'Harvard',
    sex: 2
}
let {name, age, ...rest} = obj5
console.log(name); // 三脚猫
console.log(age);  // 18
console.log(rest); // {school: "Harvard", sex: 2}

🧩ES9 Promise扩展 finally()

🧩ES9 字符串扩展（特性）

🧩ES10 ECMAScript10 (2019) 对象扩展

🧩ES10 (2019) 字符串扩展 去掉字符串前后空格

🧩ES10 (2019) 数组的扩展

🧩ES10 (2019) 修订Function.prototype.toString() 新特性

🧩ES10 (2019) 可选的 Catch Binding

🧩ES10 (2019) JSON扩展 新特性

🧩ES10 (2019) Symbol 扩展

🧩ES11 (2020)

扩展知识：正则的底层原理lastIndex属性，正则的索引下标，寻找字符串时，会从上次的下标开始找

🧩ES11 (2020) Dynamic import() (带奶麦克)

🧩ES11 (2020) BigInt 新纳入的标准（新的原始数据类型）

扩展知识：不想要后面跟n就只能用字符串的形式存储，用.toString()转化

🧩ES11 (2020) Promise扩展

🧩ES11 (2020) 引入了新的对象 globalThis

🧩ES11 (2020) 新特性 可选链?. (Optional chaining)

🧩ES11 (2020) 新特性 ?? Nullish coalescing Operator

🧩常用数组/对象方法

方法名 用途 参数/说明
数组
.splice(startIndex, replaceNum, arge+) 替换/插入 数组元素 startIndex开始的下标位置
replaceNum替换的元素，如果是插入该值设为0
argeN个元素
.slice(start, end) 剪切数组 ...
.flat(Infinity) 扁平化数组 Infinity无限的扁平化
.push() 入栈 尾部新增
.pop() 出栈 尾部取出
.unshift() 头部新增 在数组头部添加新元素
.shift() 头部取出 取出数组头部元素

🧩ECMAScript 2015~2020 语法全解析

慕课网解析-文档地址

上一篇 下一篇

猜你喜欢

热点阅读