ES6自用笔记

这篇具有很好参考价值的文章主要介绍了ES6自用笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

原型、Object方法

执行上下文与this

JS预解析/编译（变量提升）

闭包

垃圾回收：自动定期，不需要的引用设置为null

class类

ES6前：构造函数和原型链

1.构造函数：this.x=x

2.类方法：构造函数.prototype.fun=function(){}

继承

1.构造函数：父类构造函数.call(this,x)

2.原型链：Dog.prototype = Object.create(Animal.prototype)

3.修正prototype上的构造函数：Dog.prototype.constructor = Dog

ES6:class

constructor可没有（默认会创建）

super必须实现

ES13：类私有属性#

ES6新增

数据类型

运算符

变量的解构赋值：从数组/对象中取值，推荐用const，因为是从其他地方获取值

扩展/展开运算符(浅拷贝)：... 数组/对象

ES11

可选链运算符（?.）：类似.，但引用为空时不报错，返回undefined

空位合并运算符（??）：类似||，但只有undefined和null才算假值

ES12

数字分隔符_

逻辑或赋值||=

逻辑与赋值&&=

ES13：prop in object属性在指定的对象或其原型链

函数

箭头函数：简洁

继承上一层作用域链的this

不绑定arguments,用rest参数

因为没有function声明，所以没有原型prototype，所以不能作为构造函数

rest 参数：...真正的数组

ES8 的async/await函数替代了ES6 的Generator 函数

ES13：Top-level await全局import异步加载

ES9

异步迭代：串行的方式运行异步await和for...of可以一起用

Promise.finally()

ES11

Promise.allSettled

ES12

Promise.any

字符串方法：模板字面量/字符串${ }，单反引号

块级作用域：let,const

ES6 前作用域：全局变量与函数内的局部变量。

块级作用域{}：if(){},for(){}等

var：重复声明，变量提升

let、const：块作用域里访问，无重复声明，变量提升

const ：必须初始化（语法错误SyntaxError），栈值/内存地址不变（类型错误TypeError）

定义类的语法糖(class)

模块化import/export

API：fetch基于promise

判断数据类型、类型转换、不同类型间的运算、判断相等

遍历（str，num，set，map)

val

for of：Object.获取数组(obj)：自身属性Object.keys，Object.values ，Object.entries

idx

for in：包括继承的可枚举属性

可遍历对象的公有可枚举属性（除symbol 属性）

obj.hasOwnProperty(prop) 避免遍历原型链上的属性

val+idx

forEach（value[，index，arr]）：不改变原数组，返回undefined

无法中断（ break (Illegal break statement)和 return (无效)）

map（value[，index，arr]）：返回新的数组

执行速度优于forEach（底层做了优化）

高阶函数：params / return func

函数柯里化：return func

延迟计算：只有在所有参数都被传递时，才会执行

代码重用：重用处理不同情况下相似逻辑的代码

原型、Object方法

执行上下文与this

JS预解析/编译（变量提升）

闭包

垃圾回收：自动定期，不需要的引用设置为null

(GC)Garbage Collection

浏览器的js具有自动垃圾回收机制，垃圾回收机制也就是自动内存管理机制，垃圾收集器会定期的找出不可访问的值，然后释放内存，所以将不需要的对象设为null即可。

class类

ES6前：构造函数和原型链

1.构造函数：this.x=x

2.类方法：构造函数.prototype.fun=function(){}

继承

1.构造函数：父类构造函数.call(this,x)

2.原型链：Dog.prototype = Object.create(Animal.prototype)

3.修正prototype上的构造函数：Dog.prototype.constructor = Dog

// 使用构造函数和原型链定义"类"
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(this.name + ' makes a sound.');
};

// 创建类的实例
const dog = new Animal('Dog');
dog.speak(); // 输出: "Dog makes a sound."

// 继承一个"类"
function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}
//Object.create() 静态方法以一个现有对象作为原型，创建一个新对象
Dog.prototype = Object.create(Animal.prototype);
//修正构造函数
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
  console.log(this.name + ' barks loudly.');
};

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // 输出: "Buddy barks loudly."

ES6:class

constructor可没有（默认会创建）

super必须实现

ES13：类私有属性#

私有变量、私有方法、静态私有变量、静态私有方法

在当前版本的 TypeScript 中，我们的私有属性使用 private 这一个修饰符，但是这个修饰符只会在我们写代码的时候限制我们，真正转译成 JavaScript 代码的时候，还是公共属性

class ClassWithPrivateProperty {
  #privateField;
  static #PRIVATE_STATIC_FIELD;

  constructor() {
    this.#privateField = 42;
  }

  #privateMethod() {
    return 'hello world';
  }

  static #privateStaticMethod() {
    return 'hello world';
  }
}

ES6新增

数据类型

运算符

变量的解构赋值：从数组/对象中取值，推荐用const，因为是从其他地方获取值

//对象解构{}
//解构对象的属性并赋值
const { trigger: connectionTrigger } = useCreateConnection(objectId)
//数组解构[]
const [threadIdDelete, setThreadIdDelete] = useState<string>('')

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

扩展/展开运算符(浅拷贝)：... 数组/对象

// 提取部分数组元素，其余元素放在剩余数组中
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(rest);   // 输出: [3, 4, 5]

// 从对象中提取属性并赋值给变量
const person = { firstName: 'John', lastName: 'Doe' };
const { firstName, lastName } = person;
console.log(firstName); // 输出: John
console.log(lastName);  // 输出: Doe

// 提取属性并赋值给变量，并指定默认值
const { age = 30, occupation = 'Engineer' } = person;
console.log(age);        // 输出: 30 (因为age属性不存在)
console.log(occupation); // 输出: Engineer (因为occupation属性不存在)

const nestedObject = {
  outer: {
    inner: {
      deep: 'Hello, nested!'
    }
  }
};

const { outer: { inner: { deep } } } = nestedObject;
console.log(deep); // 输出: Hello, nested!

ES11

可选链运算符（?.）：类似.，但引用为空时不报错，返回undefined

允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 运算符的功能类似于 . 链式运算符，不同之处在于，在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。
// 可选链
const obj = {
  cat: {
    name: '哈哈'
  }
}
const dog = obj?.dog?.name // undefined
空位合并运算符（??）：类似||，但只有undefined和null才算假值

||逻辑运算符:'' 或 0也算假值
const baz = 0 ?? 42;
console.log(baz);
// Expected output: 0

ES12

数字分隔符_
// 使用数字分隔符
const num = 1_000_000_000
逻辑或赋值||=

或等于(||=) a ||= b 等同于 a || (a = b);

逻辑与赋值&&=

且等于(&&=) a &&= b 等同于 a && (a = b);

ES13：prop in object属性在指定的对象或其原型链

函数

箭头函数：简洁

继承上一层作用域链的this

不绑定arguments,用rest参数

因为没有function声明，所以没有原型prototype，所以不能作为构造函数

rest 参数：...真正的数组

function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3)); // 输出 6

ES8 的async/await函数替代了ES6 的Generator 函数

ES13：Top-level `await全局import异步加载`

async隐式返回promise， await 不必和 async 配套，比如我们在全局作用域使用 import 的异步加载方式。

let jQuery;
try {
  jQuery = await import('https://cdn-a.com/jQuery');
} catch {
  jQuery = await import('https://cdn-b.com/jQuery');
}

ES9

异步迭代：串行的方式运行异步await和for...of可以一起用

Promise.finally()

ES11

Promise.allSettled

接收一个Promise数组

把每一个Promise的结果，集合成数组，返回

ES12

Promise.any

接收一个Promise数组

如果有一个Promise成功，则返回这个成功结果

如果所有Promise都失败，则报错

字符串方法：模板字面量/字符串${ }，单反引号

块级作用域：let,const

ES6 前作用域：全局变量与函数内的局部变量。

块级作用域{}：if(){},for(){}等

var：重复声明，变量提升

let、const：块作用域里访问，无重复声明，变量提升

const ：必须初始化（语法错误SyntaxError），栈值/内存地址不变（类型错误TypeError）

定义类的语法糖(class)

模块化import/export

API：fetch基于promise

判断数据类型、类型转换、不同类型间的运算、判断相等

遍历（str，num，set，map)

val

for of：Object.获取数组(obj)：自身属性Object.keys，Object.values ，Object.entries

const myObject = { a: 1, b: 2, c: 3 };

Object.keys(myObject).forEach(key => {
  console.log(key, myObject[key]);
});

Object.values(myObject).forEach(value => {
  console.log(value);
});

Object.entries(myObject).forEach(([key, value]) => {
  console.log(key, value);
});

idx

for in：包括继承的可枚举属性

可遍历对象的公有可枚举属性（除symbol 属性）

obj.hasOwnProperty(prop) 避免遍历原型链上的属性

for (const idx in person) {
  console.log(idx);
}

for (const prop in person) {
  if (person.hasOwnProperty(prop)) {
    console.log(prop);
  }
}

val+idx

forEach（value[，index，arr]）：不改变原数组，返回undefined

无法中断（ break (Illegal break statement)和 return (无效)）

map（value[，index，arr]）：返回新的数组

执行速度优于forEach（底层做了优化）

高阶函数：params / return func

函数柯里化：return func

参数复用： 可以将一个多参数函数转化为一系列只接受一个参数的函数，这使得参数可以在不同的环境中被复用。

部分应用： 可以部分应用函数，只传递部分参数，返回一个接受剩余参数的新函数。

函数组合： 柯里化可以更容易地进行函数组合，将多个小函数组合成更大的函数，提高代码的可读性和可维护性。

function range(start, end) {
  // 如果end未定义，则返回一个接受end参数的函数
  if (end === undefined) {
    return function(end) {
      return generateRange(start, end);
    }
  }

  // 否则，直接生成范围
  return generateRange(start, end);

  // 内部函数，用于生成范围
  function generateRange(start, end) {
    const arr = [];
    for (let i = start; i < end; i++) {
      arr.push(i);
    }
    return arr;
  }
}

// 使用方法
const r1 = range(1, 5); // 返回 [1, 2, 3, 4]
const r2 = range(3)(7); // 返回 [3, 4, 5, 6]

延迟计算：只有在所有参数都被传递时，才会执行

代码重用：重用处理不同情况下相似逻辑的代码

基础很好？总结了38个ES6-ES12的开发技巧，倒要看看你能拿几分？🐶 - 掘金文章来源地址https://www.toymoban.com/news/detail-664433.html

到了这里，关于ES6自用笔记的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

ES6自用笔记

原型、Object方法

执行上下文与this

JS预解析/编译（变量提升）

闭包

垃圾回收：自动定期，不需要的引用设置为null

class类

ES6前：构造函数和原型链

1.构造函数：this.x=x

2.类方法：构造函数.prototype.fun=function(){}

继承

1.构造函数：父类构造函数.call(this,x)

2.原型链：Dog.prototype = Object.create(Animal.prototype)

3.修正prototype上的构造函数：Dog.prototype.constructor = Dog

ES6:class

constructor可没有（默认会创建）

super必须实现

ES13：类私有属性#

ES6新增

数据类型

运算符

变量的解构赋值：从数组/对象中取值，推荐用const，因为是从其他地方获取值

扩展/展开运算符(浅拷贝)：... 数组/对象

ES11

可选链运算符（?.）：类似.，但引用为空时不报错，返回undefined

空位合并运算符（??）：类似||，但只有undefined和null才算假值

ES12

数字分隔符_

逻辑或赋值||=

逻辑与赋值&&=

ES13：prop in object属性在指定的对象或其原型链

函数

箭头函数：简洁

继承上一层作用域链的this

不绑定arguments,用rest参数

因为没有function声明，所以没有原型prototype，所以不能作为构造函数

rest 参数：...真正的数组

ES8 的async/await函数替代了ES6 的Generator 函数

ES13：Top-level await全局import异步加载

ES9

异步迭代：串行的方式运行异步await和for...of可以一起用

Promise.finally()

ES11

Promise.allSettled

ES12

Promise.any

字符串方法：模板字面量/字符串${ }，单反引号

块级作用域：let,const

ES6 前作用域： 全局变量 与 函数内的局部变量。

块级作用域{}：if(){},for(){}等

var：重复声明，变量提升

let、const：块作用域里访问，无重复声明，变量提升

const ：必须初始化（语法错误SyntaxError），栈值/内存地址不变（类型错误TypeError）

定义类的语法糖(class)

模块化import/export

API：fetch基于promise

判断数据类型、类型转换、不同类型间的运算、判断相等

遍历（str，num，set，map)

val

for of：Object.获取数组(obj)：自身属性Object.keys，Object.values ，Object.entries

idx

for in：包括继承的可枚举属性

可遍历对象的 公有 可枚举属性（除symbol 属性）

obj.hasOwnProperty(prop) 避免遍历原型链上的属性

val+idx

forEach（value[，index，arr]）：不改变原数组，返回undefined

无法中断（ break (Illegal break statement)和 return (无效)）

map（value[，index，arr]）：返回新的数组

执行速度优于forEach（底层做了优化）

高阶函数：params / return func

函数柯里化：return func

延迟计算： 只有在所有参数都被传递时，才会执行

代码重用： 重用处理不同情况下相似逻辑的代码

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

空位合并运算符（??）：类似`||`，但只有`undefined和null`才算假值

ES13：Top-level `await全局import异步加载`

异步迭代：串行的方式运行异步`await和for...of可以一起用`

ES6 前作用域：全局变量与函数内的局部变量。

可遍历对象的公有可枚举属性（除symbol 属性）

延迟计算：只有在所有参数都被传递时，才会执行

代码重用：重用处理不同情况下相似逻辑的代码