Example-00-javascript-examples

---

前言

本专栏是COMPSCI 732课程的笔记汇总，本文为第一篇
Supplementary JavaScript resources

---

No.1 - Ternary operator, truthiness and &&

1. ternary operator

即三元表达式：

const someValue = ...; // The value to check

const result = someValue ? valueIfTrue : valueIfFalse;

等价于：

const someValue = ...; // The value to check

let result;
if (someValue) {
    result = valueIfTrue; // Value if true
}
else {
    result = valueIfFalse; // value if false
}

2. truthiness

即 Truthy（真值）和Falsy（虚值），

-The values "" (empty string), 0, false, null, undefined, and NaN are considered falsy.
-Any value that is not falsy, is truthy.

3. Logical AND operator (&&)

在大多数语言中，&& 两侧的表达式均应为布尔表达式，但在 JS 中不受此限制。

expr1 && expr2 等价于：

let result;
if (expr1) {
    result = expr2;
}
else {
    result = expr1;
}

expr1 为 truthy -> 返回 expr2
expr1 为 falsy -> 返回 expr1

result = "" && "foo"; // 结果被赋值为 ""（空字符串）
result = 2 && 0; // 结果被赋值为 0
result = "foo" && 4; // 结果被赋值为 4

作用：

In react, this non-Boolean mode of the && operator is often used in place of the ternary operator to conditionally render a component if a value is truthy, in the case that rendering an alternative component if the value is falsy is not required.

No.2 - Arrow functions

1. 单行函数

function add(a, b) {
    return a + b;
}

相应的箭头函数：

const addArrow = (a, b) => a + b;

省去了 return

2. 多行函数

function average(numbers) {
    let sum = 0;
    for (let num of numbers) {
        sum += num;
    }
    return sum / numbers.length;
}

相应的箭头函数：

const averageArrow = (numbers) => {
    let sum = 0;
    for (let num of numbers) {
        sum += num;
    }
    return sum / numbers.length;
}

No.3 - Array and object dereferencing & ellipsis

1. dereferencing

① Array dereferencing

不知道具体怎么翻译，体会一下作用：
假设有一个 array,

const myArray = ['Hello', 'World', 'This', 'Is', 'Sparta'];

想要声明两个分别指向 array 第一 / 第二个元素的变量：

const elem1 = myArray[0];
const elem2 = myArray[1];

使用 array dereferencing syntax 的写法：

//      v-- assign myArray[0] to this variable...
const [elem, elem2] = myArray;
//             ^-- and assign myArray[1] to this variable.

② Object dereferencing

用于简化对对象属性的调用：

const person = {
    firstName: 'Joe',
    lastName: 'Bloggs',
    age: 42,
    address: '123 Some Street',
    likesReact: true
};

想调用 person 对象的属性：

person.firstName
person.age 
或
person['firstName']

使用 Object dereferencing：

const { firstName, age } = person;

2. Ellipsis notation

① Array ellipsis

用于复制数组的内容到新数组：

const arrayCopy = [ ...myArray ];

// 复制的同时添加新的项;
// Contents of array1:
// ['Hello', 'World', 'This', 'Is', 'Sparta', 'Extra', 'Things]
const array1 = [ ...myArray, 'Extra', 'Things'];

// Contents of array2:
// ['More', 'Stuff', 'Hello', 'World', 'This', 'Is', 'Sparta']
const array2 = [ 'More', 'Stuff', ...myArray ];



// 合并多个数组变量：
const array1 = [ 1, 2, 3 ];
const array2 = [ 4, 5, 6 ];

// Contents: [ 1, 2, 3, 4, 5, 6 ]
const result = [ ...array1, ...array2 ];

② Object ellipsis

类似数组复制，用于复制对象的内容到新对象变量

const myObject = {
    firstName: 'Joe',
    lastName: 'Bloggs',
    age: 42,
    address: '123 Some Street',
    likesReact: true
};

// Object ellipsis
const objectCopy = { ...myObject };

生成了完全相同的 object，

objectCopy.firstName === myObject.firstName  此等式对所有属性都成立

复制的同时可以修改属性值 & 添加新属性：

const dave = {
    ...myObject,
    // 修改属性值
    firstName: 'Dave',
    lastName: 'Dobbyn',
	// 添加新属性
    occupation: 'Singer'
};

3. Combining ellipsis with dereferencing

dereferencing 用于截取 array / object 的前几个变量 / 属性，ellipsis 用于承接截取后剩余的部分（the rest）
array：

function source = [ 1, 2, 3, 4, 5, 6 ];

const [first, second, ...andTheRest] = source;

// first: 1
// second: 2
// andTheRest: [ 3, 4, 5, 6 ]

object：

const person = {
    firstName: 'Joe',
    lastName: 'Bloggs',
    age: 42,
    address: '123 Some Street',
    likesReact: true
};

const { firstName, age, ...andTheRest } = person;

// firstName: 'Joe'
// age: 42
// andTheRest: { lastName: 'Bloggs', address: '123 Some Street', likesReact: true }

No.4 - The array map() function

根据指定内容创建新 array：

const nums = [ 1, 2, 3 ];

const plusOnes = nums.map(x => x + 1);
// plusOnes = [ 2, 3, 4 ]