ES6技巧篇

2021-09-22 14:01:28 阅读：99 来源： 互联网

ES6技巧篇

ECMAScript 6.0（简称ES6）是 JavaScript 语言的下一代标准。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。为什么ES6如此重要呢？因为ES6解决了JS无法开发大型应用的语言层面的问题。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ES6中引入许多重要的概念，这里只叙述其中一部分的使用:

1.变量的声明

ES6新增了let和const关键字,提出了块级作用域的概念，需要注意的是const声明的变量是常量，不能被修改；类似于Java中的final关键字。所以，const的使用必须先初始化。

const num1 = 123;
console.log(num1);
const num2 ;

2.Array.from()

2.1Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

console.log(Array.from([1, 2, 3], x => x));

2.2快速创建数组：需求假设—获取当前年份前后各五年

// 需求分析 
// 假设今年是2021年，我们要的结果就是
// [2016, 2017, 2018,2019, 2020, 2021,2022, 2023, 2024, 2025, 2026]
// 这项数组中，当前年是第六项，数组length是11

const currentYear = new Date().getFullYear()
console.log(Array.from({length:11},(item,index) => currentYear + index - 5));

解构赋值

ES6中常用的解构赋值分为数组的解构赋值与对象的结构赋值

3.1 数组的解构赋值
```
let [a = 1,b,c] = [ , 2 , 3 ];
console.log(a,b,c);
```
数组的解构赋值是与参数的书写顺序有关的。

3.2 对象的解构赋值
```
const {username,password} = {username:"zhangsan",password:"123456"}
console.log(username,password);
```
我们可以从已知对象身上解构出我们想要的数据。

甚至：我们还可以给变量起一个别名，当变量有个别名，原来的名字就失效了

const {username:uname,password} = {username:"zhangsan",password:"123456"}
console.log(uname,password);
console.log(username);

实际开发中我们可以用来解构请求来的数据，配合ES7新增的async与await可以达到更好的效果。

这里我们用简单数据来代替

const goods = {
  "status": 200,
  "message": "获取成功",
  "data": {
    "brand": [
      {
        "title": "所有品牌",
        "text": [
          "全部",
          "爱肯拿ACANA",
          "爱旺斯ADVANCE",
          "AVODerm",
          "爱诺Eminent",
          "巴西淘淘TOTAL",
          "Farmina",
          "海洋之星FISH4DOGS",
          "纽顿nutram number",
          "耐吉斯SOLUTION",
          "now FRESH",
          "欧帝亿IMPERIAL PAW",
          "生鲜本能Instinct",
          "天衡宝Natural Balance",
          "Tikipets"
        ]
      }
    ]
  }
}
const  {data}  = goods
console.log(data); // data的结构是一个对象 如下图

当前，我们还可以继续解构，比如，我们不想要data而是只想要data中的brand数组

const  {data : {brand}}  = goods
console.log(brand);

扩展运算符

扩展运算符是三个点(…)，可以将一个数组转为用逗号分隔的参数序列。下方案例需求中，我们无法直接将数组传递给函数

function add (a,b,c,d,e) {
    console.log(a + b + c + d + e);
}
let array = [1,2,3,4,5]
add(array)

但是我们有2种方式解决这个需求，第一，使用apply()方法

let array = [1,2,3,4,5]
add.apply(null,array)

apply()方法主要的作用是修改this的指向，同时，参数必须是一个数组，第二，我们就可以使用扩展运算符来解决。

操作起来更简单方便。

let array = [1,2,3,4,5]
add(...array)

我们还可以使用扩展运算符给数组或者对象做数据拷贝。比入：

const obj1 = {
  name:"zhangsan",
  age:18,
  friend: {
    name:"lisi"
  }
}
const obj2 = {
  gender:"男",
  job:"WEB工程师"
}
const obj3 = {...obj1,...obj2}
console.log(obj3);

但是，就是是深拷贝还是浅拷贝呢？

obj3.friend.name = "wangwu"
console.log(obj1.friend.name);

演示得知：复杂数据类型,仅仅是拷贝的地址。所以是浅拷贝。

当然，我们也可以继续给拷贝出来的obj3对象进行属性的重写,只需要将需要修改的属性在后面直接赋值即可。

const obj1 = {
  name:"zhangsan",
  age:18,
  friend: {
    name:"lisi"
  }
}
const obj2 = {
  gender:"男",
  job:"WEB工程师"
}
const obj3 = {...obj1,...obj2,job:"UI设计师",age:20}
console.log(obj3);

5.ES中，还有很多重要的知识点，比如模板字符串，箭头函数，Promise等等。都是很好用的，下次再一起研究。

标签：ES6,const,log,解构,数组,console,技巧
来源： https://blog.csdn.net/weixin_43827533/article/details/120413587

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

ICode9

ES6技巧篇

ES6技巧篇