ES6 小结，[freeCodeCamp]

2022-02-01 15:59:50 阅读：171 来源： 互联网

标签：ES6 const name freeCodeCamp Promise 数组小结 age 函数

ES6

使用 var 关键字声明变量时，它是全局声明的，如果在函数内部声明则是局部声明的

使用数组解构来交换两个变量的值

let a = 8, b = 6
[a, b] = [b, a]

使用解构赋值配合 rest 操作符来重新分配数组元素，与Array.prototype.slice()类似

rest 操作符只能对数组列表最后的元素起作用。不能使用 rest 操作符来截取原数组中间的元素作为子数组

const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
console.log(a, b); // 1 2
console.log(arr); // 3 4 5 6 7

使用解构赋值将对象作为函数的参数传递

const profileUpdate = (profileData) => {
  const { name, age, nationality, location } = profileData;

}
// 上面的操作可以直接像下面解构赋值，当 profileData 被传递到上面的函数时，从函数参数中解构出值以在函数内使用
const profileUpdate = ({ name, age, nationality, location }) => {

}

模板字符串可以使用多行字符串和字符串插值功能

const person = {
  name: "Zodiac Hasbro",
  age: 56
}

const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`
console.log(greeting)

${variable} 语法是一个占位符

使用 ES6 编写简洁的对象字面量声明和函数声明

const name = "白醭飚尘"

const person = {
  name,
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
}
console.log(person) // {name: '白醭飚尘', sayHello: ƒ}

使用 class 语法定义构造函数

class SpaceShuttle {
  constructor(targetPlanet) {
    this.targetPlanet = targetPlanet;
  }
}
const zeus = new SpaceShuttle('Jupiter')

class 关键字添加了一个新的函数，里面添加了一个构造函数，当用 new 创建一个新对象时，构造函数会被调用

constructor 方法是一个特殊方法，用于创建和初始化 class 创建的对象

使用 getter 和 setter 来控制对象的访问

Getter 函数的作用是可以让对象返回一个私有变量，而不需要直接去访问私有变量。

Setter 函数的作用是可以基于传进的参数来修改对象中私有变量。这些修改可以是计算，或者是直接替换之前的值

class Book {
  constructor(author) {
    this._author = author
  }
  // getter
  get writer() {
    return this._author
  }
  // setter
  set writer(updatedAuthor) {
    this._author = updatedAuthor
  }
}
const novel = new Book('anonymous')
console.log(novel.writer)
novel.writer = 'newAuthor'
console.log(novel.writer)

通常会在私有变量前添加下划线（_），这个做法只是命名规范而已，本身并不是将变量变成私有的

ES6 可以导出文件的一部分供其它文件使用，在需要它的地方按需导入

用 export default 创建一个默认导出，文件中只有一个值需要导出的时候，就可以使用这个

export default 用于为模块或文件声明一个返回值，在每个文件或者模块中应当只默认导出一个值

导入

Promise 是异步编程的一种解决方法，其是构造器函数，需要通过 new 关键字来创建

构造器参数是一个函数，该函数有两个参数 - resolve 和 reject

const myPromise = new Promise((resolve, reject) => {

})
// 上面这个会一直堵塞在 pending 状态，因为没有调用 Promise 的完成方法

Promise 有三个状态：pending、fulfilled 和 rejected

Promise 提供的 resolve 和 reject 参数就是用来结束 promise 的。 Promise 成功时调用 resolve，promise 执行失败时调用 reject

const myPromise = new Promise((resolve, reject) => {
  if(condition here) {
    resolve("Promise was fulfilled"); // 调用 resolve 和 reject 函数的参数可以是任何格式，可以是一个包含数据的对象
  } else {
    reject("Promise was rejected");
  }
})

用 then 处理 Promise 完成的情况

当程序需要花费未知的时间才能完成时（比如一些异步操作），一般是服务器请求，promise 很有用。服务器请求会花费一些时间，当结束时，需要根据服务器的响应执行一些操作。

这可以用 then 方法来实现，当 promise 完成 resolve 时会触发 then 方法
```
myPromise.then(result => {
	// result 即传入 resolve 方法的参数
})
```
当 promise 失败时会调用 catch 方法。当 promise 的 reject 方法执行时会直接调用
```
myPromise.catch(error => {
	// error 是传入 reject 方法的参数
})
```

方括号方法查看对象中是否存在某个属性，obj[prop] 取这个属性的值，如果返回的值是 undefined 则证明不存在这个属性

通过对象属性查找属性值是速度很快的操作

检查对象是否具有某个属性：hasOwnProperty() 方法；使用 in 关键字

users.hasOwnProperty('Alan')
'Alan' in users

// 检查多个属性是否在对象 userObj 中
["Alan", "Jeff", "Sarah", "Ryan"].every(name =>  
  userObj.hasOwnProperty(name)
)

使用 for…in 语句遍历对象，这样可以遍历对象中的所有属性

*注意：**对象中的键是无序的，这与数组不同。因此，一个对象中某个属性的位置，或者说它出现的相对顺序，在引用或访问该属性时是不确定的。

使用 Object.keys() 生成由对象的所有属性(键)组成的数组，数组中元素的顺序是不能确定的

在代码块、语句或表达式中使用 let 关键字声明变量时，其作用域仅限于该代码块、语句或表达式。

const 声明并不会真的保护数据不被改变。为了确保数据不被改变，JavaScript 提供了一个函数 Object.freeze

使用箭头函数编写简洁的匿名函数

使用 rest 参数，就不需要查看 args 数组，并且允许我们在参数数组上使用 map()、filter() 和 reduce()

const sum = (...args) => {
	return args.reduce((a, b) => a + b, 0);
}

ES5 中使用 apply() 函数来求数组中的最大值

const arr = [6, 89, 3, 45]
const maximus = Math.max.apply(null, arr)
// maximus 的值为 89

// Math.max(arr) 返回 NaN。 Math.max() 函数中需要传入的是一系列由逗号分隔的参数，而不是一个数组
// ES6 中提供了 spread 展开符，提高了代码可读性，易维护
const maximus1 = Math.max(...arr)

...arr 返回一个解压的数组。也就是说，它展开数组。然而，展开操作符只能够在函数的参数中或者数组中使用

解构赋值是 ES6 引入的新语法，用来从数组和对象中提取值，并优雅地对变量进行赋值

const user = { name: 'John Doe', age: 34 }
const { name, age } = user
// name 的值应该是字符串 John Doe， age 的值应该是数字 34

// 可以给解构的值赋予一个新的变量名， 通过在赋值的时候将新的变量名放在冒号后面来实现
const { name: userName, age: userAge } = user
// 可以这么理解这段代码：获取 user.name 的值，将它赋给一个新的变量 userName，等

使用解构赋值从嵌套对象中分配变量

const user = {
  johnDoe: { 
    age: 34,
    email: 'johnDoe@freeCodeCamp.com'
  }
}

// 将对象中的属性值赋值并给具有不同名字的变量
const { johnDoe: { age: userAge, email: userEmail }} = user

数组的扩展运算会将数组里的所有内容分解成一个由逗号分隔的列表，所以不能选择哪个元素来给变量赋值，数组解构可以

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c) // 1 2 5

标签：ES6,const,name,freeCodeCamp,Promise,数组,小结,age,函数
来源： https://blog.csdn.net/weixin_45397318/article/details/122764432

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ES6 小结，[freeCodeCamp]

ES6