{T}

编程技巧

条件判断

对象验证⽅式

javascript
const parent = {
  child: {
    child1: {
      child2: {
        key: 10
      }
    }
  } 
}

很多时候会这样去写，避免某⼀层级不存在导致报错，代码看起来就会很臃肿，可以使⽤ JavaScript 的可选链运算符：

javascript
parent && parent.child && parent.child.child1 && parent.child.child1.child2

// 等价于
parent?.child?.child1?.child2

可选链运算符同样适⽤于数组：

javascript
const array = [1, 2, 3];
array?.[5]

可选链运算符读取位于连接对象链深处的属性的值，不必明确验证链中的每个引⽤是否有效。

在引⽤为空 (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调⽤⼀起使⽤时，如果给定的函数不存在，则返回 undefined

验证 undefined 和 null

需要验证⼀个值如果等于 null 或 undefined 时，需要执⾏⼀个操作时，可以使⽤空值合并运算符

javascript
if(a === null || a === undefined) {
  doSomething() 
}

// 等价于
a ?? doSomething()

简化 if 多个条件

javascript
if(a === undefined || a === 10 || a=== 15 || a === null) {
  //...
}

就可以使⽤数组来简化这个判断逻辑：

javascript
if([undefined, 10, 15, null].includes(a)) {
  //...
}

逻辑与(&&)运算符

逻辑与 && 操作符前⾯的值为假，就会发⽣短路操作，直接结束这⼀句的执⾏；如果为真，就会继续执⾏ && 后⾯的代码，并返回后⾯代码的返回值。使⽤这种⽅式可以减少很多 if...else 判断

javascript
if(a > 10) {
  doSomething(a)
}

// 等价于
a > 10 && doSomething(a)

其他案例

javascript
if(a < 0 && b > 100 && c === 10) {
  fn() 
}

// 等价于
(a < 0 && b > 100 && c === 10) && fn();

值转换为布尔值

在 JavaScript 中，undefined、null、0、-0、NaN、"" 都会在布尔值转化时转化为 false，其他值会转化为 true

通常我们如果想显式的值转化为布尔值，会使⽤ Boolean() ⽅法进⾏转化

可以使⽤ !! 运算符来将⼀个值转化为布尔值。⼀个 ! 是将对象转为布尔型并取反，两个 !! 是将取反后的布尔值再取反，相当于直接将⾮布尔类型值转为布尔类型值。这种操作相对于 Boolean() ⽅法性能会快很多，因为它是计算机的原⽣操作：

javascript
!!undefined // false
!!"996" // true
!!null // false
!!NaN // false

Array.every 检测数组所有元素

javascript
const cars = [
  { name: 'car1', color: 'red' },
  { name: 'car2', color: 'blue' },
  { name: 'car3', color: 'purple' } 
];

function test(cars) {
  let isAllblue = true;

  for (let c of cars) {
    if (!isAllblue) break;
    isAllblue = (c.color == 'blue');
  }
  return isAllblue; 
}

test(cars);

数组提供了 every() ⽅法，该⽅法⽤于检查数组中所有元素是否满⾜给定条件。当每个数组元素都满⾜给定条件时会返回 true ，否则会返回 false

javascript
const cars = [
  { name: 'car1', color: 'red' },
  { name: 'car2', color: 'blue' },
  { name: 'car3', color: 'purple' } 
];

function test(cars) {
  return cars.every(c => c.color == 'blue'); 
}

test(cars);

数组 find 简化

当我们有一个对象数组，并想根据对象属性找到特定对象，find 方法会非常有用

javascript
const data = [
  {
    type: 'test1',
    name: 'abc'
  },
  {
    type: 'test2',
    name: 'cde'
  },
  {
    type: 'test1',
    name: 'fgh'
  },
]

function findtest1(name) {
  for (let i = 0; i < data.length; ++i) {
    if (data[i].type === 'test1' && data[i].name === name) {
      return data[i];
    }
  }
}

//Shorthand
filteredData = data.find(data => data.type === 'test1' && data.name === 'fgh');
console.log(filteredData); // { type: 'test1', name: 'fgh' }

if 判断值是否存在

javascript
// Longhand
if (test1 === true) or if (test1 !== "") or if (test1 !== null)

// Shorthand //it will check empty string,null and undefined too
if (test1)

简短的函数调用

使用三元操作符来实现多个函数调用

javascript
// Longhand
function test1() {
  console.log('test1');
};
function test2() {
  console.log('test2');
};

var test3 = 1;
if (test3 == 1) {
  test1();
} else {
  test2();
}

// Shorthand
(test3 === 1? test1:test2)();

switch 简化

我们可以将条件保存在键值对象中，并根据条件来调用它们

javascript
// Longhand
switch (data) {
  case 1:
    test1();
    break;
  case 2:
    test2();
    break;
  case 3:
    test();
    break;
    // And so on...
}


// Shorthand
var data = {
  1: test1,
  2: test2,
  3: test
};
data[something] && data[something]();

indexOf 的按位操作简化

在查找数组的某个值时，可以使用 indexOf() 方法

javascript
//longhand
if(arr.indexOf(item) > -1) { // item found 
}
if(arr.indexOf(item) === -1) { // item not found
}

//shorthand
if(~arr.indexOf(item)) { // item found
}
if(!~arr.indexOf(item)) { // item not found
}

按位 ~ 运算符将返回 true (-1 除外)，反向操作只需要 !~ 。另外，也可以使用 include() 函数

javascript
if (arr.includes(item)) { 
  // true if the item found
}

编程技巧

尽早 return

在 JavaScript 中，尽早 return 是⼀种将函数体减少 else 语句的简单⽅法

javascript
function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  if (fruit) {
    if (redFruits.includes(fruit)) {
      console.log('red');
      if (quantity > 10) {
        console.log('big quantity');
      }
    }
  } else {
    throw new Error('No fruit!');
  } 
}

test(null); // error: No fruits
test('apple'); // red
test('apple', 20); // red, big quantity

来使⽤这种模式来优化上⾯的代码，可以在⽆效条件时尽早返回，使⽤这种模式可以消除不必要的 else 语句，使得函数更加清晰和简洁

javascript
function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];

  if (!fruit) throw new Error('No fruit!');
  if (!redFruits.includes(fruit)) return;

  console.log('red');
  if (quantity > 10) {
    console.log('big quantity');
  } 
}

优化多 if 判断

javascript
function printCars(color) {
  if (color === 'red') {
    return ['Rcar1', 'Rcar2'];
  }else if (color === 'blue') {
    return ['Bcar1', 'Bcar2'];
  }else if (color === 'purple') {
    return ['Pcar1', 'Pcar2'];
  }
  return [];
}

对于这种 if 的判断条件中都是针对⼀个变量进⾏判断的情况，可以使⽤ switch...case 来简化

javascript
function printCars(color) {
  switch (color) {
    case 'red':
      return ['Rcar1', 'Rcar2'];
    case 'blue':
      return ['Bcar1', 'Bcar2'];
    case 'purple':
      return ['Pcar1', 'Pcar2'];
    default:
      return [];
  }
}

可以使⽤对象来继续优化：

javascript
const carColor = {
  red: ['Rcar1', 'Rcar2'],
  blue: ['Bcar1', 'Bcar2'],
  purple: ['Pcar1', 'Pcar2'] 
};

function printcars(color) {
  return carColor[color] || []; 
}

console.log(printcars()); // []
console.log(printcars('red')); // ['Rcar1'，'Rcar2']
console.log(printcars('blue')); // ['Bcar1'，'Bcar2']

使⽤ Map 来实现相同的结果：

javascript
const carColor = new Map()

carColor.set('red', ['Rcar1', 'Rcar2'])
carColor.set('blue', ['Bcar1', 'Bcar2'])
carColor.set('purple', ['Pcar1', 'Pcar2']);

function printcars(color) {
  return carColor.get(color) || []; 
}
console.log(printcars()); // []
console.log(printcars('red')); // ['Rcar1'，'Rcar2']
console.log(printcars('blue')); // ['Bcar1'，'Bcar2']

给多个变量赋值

当我们想给多个不同的变量赋值时，这种技巧非常有用

javascript
// Longhand 
let test1, test2, test3;
test1 = 1;
test2 = 2;
test3 = 3;

// Shorthand 
let [test1, test2, test3] = [1, 2, 3];

for each 循环

javascript
// Longhand
for(var i= 0;i < testData.length;i++)

// Shorthand
for(let i in testData);
for(let i of testData);

遍历数组的每一个变量

javascript
function testData(element, index, array) {
  console.log('test[' + index + '] = ' + element);
}

[11, 24, 32].forEach(testData);
// logs: test[0] = 11, test[1] = 24, test[2] = 32

[11, 24, 32].forEach(function (element, index, array) {
  console.log("a[" + index + "] = " + element)
})

默认参数值

javascript
// Longhand
function add(test1, test2) {
  if (test1 === undefined)
    test1 = 1;
  if (test2 === undefined)
    test2 = 2;
  return test1 + test2;
}

// shorthand
add = (test1 = 1, test2 = 2) => (test1 + test2);
add() // output: 3

跨行字符串

当我们在代码中处理跨行字符串时，可以这样做

javascript
// longhand
const data = 'abc abc abc abc abc abc\n\t'
    + 'test test,test test test test\n\t'
    
// shorthand
const data = `abc abc abc abc abc abc
         test test,test test test test`

对象属性赋值

javascript
let test1 = 'a'; 
let test2 = 'b';

// Longhand 
let obj = {test1: test1, test2: test2}; 

// Shorthand 
let obj = {test1, test2};

解构赋值

javascript
// longhand
const test1 = this.data.test1;
const test2 = this.data.test2;
const test2 = this.data.test3;

// shorthand
const { test1, test2, test3 } = this.data;

延展操作符简化

javascript
// longhand
// joining arrays using concat
const data = [1, 2, 3];
const test = [4 ,5 , 6].concat(data);


//shorthand
// joining arrays
const data = [1, 2, 3];
const test = [4 ,5 , 6, ...data];
console.log(test); // [ 4, 5, 6, 1, 2, 3]

也可以使用延展操作符进行克隆

javascript
//longhand
// cloning arrays
const test1 = [1, 2, 3];
const test2 = test1.slice()

//shorthand
// cloning arrays
const test1 = [1, 2, 3];
const test2 = [...test1];

命名约定

变量的命名约定

最推荐的声明 JavaScript 变量的⽅法是驼峰式变量名

javascript
// bad
let dogname = 'Droopy';

// bad
let dog_name = 'Droopy';

// bad
let DOGNAME = 'Droopy';

// bad
let DOG_NAME = 'Droopy';

// good
let dogName = 'Droopy';

布尔值的命名约定

当定义布尔类型的变量时，应该使⽤ is 或者 has 作为变量的前缀。例如，需要变量来检查狗是否有主⼈，应该使⽤ hasOwner 作为变量名

javascript
// bad
let bark = false;
// good
let isBark = false;

// bad
let ideal = true;
// good
let areIdeal = true;

// bad
let owner = true;
// good
let hasOwner = true;

函数的命名约定

在声明函数时，推荐使⽤驼峰式⽅法来命名函数。除此之外，推荐使⽤描述性名词和动词来作为前缀

javascript
// bad
function name(dogName, ownerName) {
  return '${dogName} ${ownerName}'; 
}

// good
function getName(dogName, ownerName) {
  return '${dogName} ${ownerName}'; 
}

常量的命名约定

在定义常量时，推荐使⽤⼤写，因为它们是不变的变量，如果变量声明名称中包含多个单词，就应该使⽤ UPPER_SNAKE_CASE

javascript
const LEG = 4;
const TAIL = 1;
const MOVABLE = LEG + TAIL;

const DAYS_UNTIL_TOMORROW = 1;

类的命名约定

类的命名约定规则与函数⾮常相似，推荐使⽤描述性的名称来描述类的功能。函数名和类名之间的主要区别在于类名要使⽤⼤写开头

javascript
class DogCartoon {
  constructor(dogName, ownerName) {
    this.dogName = dogName;
    this.ownerName = ownerName;
  } 
}

const cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');

组件的命名约定

JavaScript 组件⼴泛应⽤于React、Vue等前端框架中。组件的命名建议与类保持⼀致，使⽤开头⼤写的驼峰式命名法：

jsx
// bad
function dogCartoon(roles) {
  return (
    <div>
    <span> Dog Name: { roles.dogName } </span> 
    <span> Owner Name: { roles.ownerName } </span> 
    </div> 
  );
}

// good
function DogCartoon(roles) {
  return (
    <div>
    <span> Dog Name: { roles.dogName } </span> 
    <span> Owner Name: { roles.ownerName } </span> 
    </div> 
  ); 
}

由于组件的命名开头字⺟是⼤写，因此在使⽤时，就很容易和HTML、属性值等区分开来：

html
<div>
  <DogCartoon roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }}/>
</div>

私有函数的命名约定

下划线 _ 在 MySQL 和 PHP 等语⾔中⼴泛⽤于定义变量、函数和⽅法。但在 JavaScript 中，下划线⽤于表示私有变量或函数

例如，有⼀个私有函数名 toonName，则可以通过添加下划线作为前缀 _toonName 来将其表示为私有函数

javascript
class DogCartoon {
  constructor(dogName, ownerName) {
    this.dogName = dogName;
    this.ownerName = ownerName;
    this.name = _toonName(dogName, ownerName);
  }
  _toonName(dogName, ownerName) {
    return `${dogName} ${ownerName}`;
  } 
}

const cartoon = new DodCartoon('Scooby-Doo', 'Shaggy');

// good
const name = cartoon.name;
console.log(name); // "Scooby-Doo Shaggy" 

// bad
name =cartoon._toonName(cartoon.dogName, cartoon.ownerName);
console.log(name); // "Scooby-Doo Shaggy"

⽂件名的命名约定

⼤多数 Web 服务器（Apache、Unix）在处理⽂件时都区分⼤⼩写。例如，flower.jpg 和 Flower.jpg 是不⼀样的。

但是，如果从不区分⼤⼩写的服务器切换到区分⼤⼩写的服务器，即使是⼀个⼩错误也可能导致⽹站崩溃。

因此，尽管它们是⽀持区分⼤⼩写的，建议在所有服务器中还是使⽤⼩写来命名⽂件