[Day3][笔记] React.js 常用 的 ES6 语法(2)

前言

延续昨天内容今天继续介绍常用 ES6 语法。

展开其余

展开运算符有几个用途

1. 阵列 展开成个别值
2. 字串拆解成阵列
3. 物件 展开成 key-value 方式 ( ES9 後才可以使用)

下面就列举一些常见展开运算符例子

• 组合阵列

let groupA = ['小明', '杰伦', '阿姨'];
let groupB = ['老妈', '老爸'];
// let groupAll = groupA.concat(groupB); ES6前 组阵列方法

let groupAll=[...groupA,...groupB]; 
console.log(...groupA);// 小明 杰伦 阿姨
console.log(groupAll);//["小明", "杰伦", "阿姨", "老妈", "老爸"]

• 物件组合

const object = {
    name:'Andy',
    age:18
}

const object2 = {
    name:'Andy2',
    age:183
}

const cloneObj = {...object,...object2}; //这边要注意一下，相同属性後者会盖掉前者
console.log(cloneObj); // {name: 'Andy2', age: 183}

其余参数(Rest Operator)

用途：

• 其余参数是将不确定的传入参数值们在函式中转变成为一个阵列来进行运算。

function moreMoney(ming ,...money) {           
console.log(ming,money);}
moreMoney('andy',100, 200, 300, 400, 500)//不论数值有几个都OK

备注：其余参数在传入参数定义中，必定是位於最後一位，并且在参数中只能有一个其余参数，如果不这麽做就会产生下列错误讯息

Uncaught SyntaxError: Rest parameter must be last formal parameter

• 解构赋值时使用

function calculate(...[a,b,c]){
   return a + b + c;
}
calculate(1); // NAN a =1, b,c =undefined
calculate(1,,3) // Uncaught SyntaxError: Unexpected token ','
calculate(1,2,3) //6

function addNumber(...argument){
   const array = [...argument];
   console.log(array); //[1,2,3]
}
addNumber(1,2,3);

解构

当我们要取物件、阵列资料时，很常会用到解构方式。

阵列解构赋值方法（Array Destructuring）

• 提示：阵列的解构赋值，必须注意到顺序性

过去阵列内的元素在赋值的时候，只能透过直接给值的方式，像是下面这样：

let list=[a,b];
let a = list[0];
let b = list[1];
console.log(a,b) //a,b

而在 ES6 世界中，我们可以这样用，而这就是最基本阵列解构赋值方法
备注：解构赋值会将右方的资料往左边送，然後会一个位置对一个值

第一种
let [a,b,c]=[1,2,3]
console.log(a,b,c) //1,2,3
变数 a = 1, b = 2, c = 3

第二种写法
let number=[1,2,3];
let[andy,chunwen,jay]=number;
console.log(andy,chunwen,jay) //[1,2,3]

物件解构赋值

首先，必须强调一个观念。物件的解构赋值强调的是属性名称，属性名称必须相互对应才能取到值，反之则会无法取值
基本方法如下：

const object = {
   name:'Andy',
   age:26,
   sex:male
}
// 一般来说我们过往取物件的方法可以用点阵法或是物件实字法
1. object.name  //Andy
2. object[name] //Andy

//当我们今天有许多属性要取出时，我们通常会直接用解构方式直接取得属性
const { name } = object //只要对应到属性的 key 就可以直接取出物件 value 

let obj = {
  name: "chunwen",
  country: "Taiwan"
}

let {name, country} = obj;
console.log(name);  // chunwen
console.log(country);  // Taiwan

结论：

阵列的解构赋值强调的是顺序，而物件的解构赋值强调的则是属性名称，属性名称必须相互对应才能够取得到值

Optional chaining(ES11)

这个写法可以避免我们取值时如果属性不存在，程序报错问题。题外话，目前 Node.js 14版後都有支援这写法喔！

data?.columnName?.result
// 如果 data 不为 undefined 则会继续往下取值
// 如果没有值则直接回传 undefined

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);  //undefined

参考资料

• [ES6-重点纪录] 扩展运算子 Spread Operator
• Week8 - 不想再看到undefined的TypeError吗，你可以试看看JS的Optional chaining operator [Server的终局之战系列]
• Optional chaining