5分でJavaScriptの実用的なコツをマスター

简评:JavaScriptは最初はウェブページにリアルタイムのアニメーション効果を加えるだけで、今JSはすでに前后の端で食べることができて、しかも年度の流行言语です.本文はいくつかのJSの小さいコツを分かち合って、あなたに半分の仕事を倍にすることができます~
1.配列末尾要素の削除
1つの簡単な方法は、配列のlength値を変更することです.

 
  
 
   
const arr = [11, 22, 33, 44, 55, 66];
 
   
// truncanting
 
   
arr.length = 3;
 
   
console.log(arr); //=> [11, 22, 33]
 
   
// clearing
 
   
arr.length = 0;
 
   
console.log(arr); //=> []
 
   
console.log(arr[2]); //=> undefined
 
  
 
  
2.使用对象解构（object destructuring）来模拟命名参数
 
  
如果需要将一系列可选项作为参数传入函数，你很可能会使用对象（Object）来定义配置（Config）。
 
  
 
  
 
   
doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
 
   
function doSomething(config) {
 
   
  const foo = config.foo !== undefined ? config.foo : 'Hi';
 
   
  const bar = config.bar !== undefined ? config.bar : 'Yo!';
 
   
  const baz = config.baz !== undefined ? config.baz : 13;
 
   
  // ...
 
   
}
 
  
 
  
不过这是一个比较老的方法了，它模拟了 JavaScript 中的命名参数。
 
  
在 ES 2015 中，你可以直接使用对象解构：
 
  
 
  
 
   
function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
 
   
  // ...
 
   
}
 
  
 
  
让参数可选也很简单：
 
  
 
  
 
   
function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
 
   
  // ...
 
   
}
 
  
 
  
3.使用对象解构来处理数组
 
  
可以使用对象解构的语法来获取数组的元素：
 
  
 
  
 
   
const csvFileLine = '1997,John Doe,US,[email protected],New York';
 
   
const { 2: country, 4: state } = csvFileLine.split(',');
 
  
 
  
4.在 Switch 语句中使用范围值
 
  
可以这样写满足范围值的语句：
 
  
 
  
 
   
function getWaterState(tempInCelsius) {
 
   
  let state;
 
   
 
 
   
  switch (true) {
 
   
    case (tempInCelsius <= 0): 
 
   
      state = 'Solid';
 
   
      break;
 
   
    case (tempInCelsius > 0 && tempInCelsius < 100): 
 
   
      state = 'Liquid';
 
   
      break;
 
   
    default: 
 
   
      state = 'Gas';
 
   
  }
 
   
  return state;
 
   
}
 
  
 
  
5.await    async   
 
  
    async/await    ，     Promise.all   await    async   
 
  
 
  
 
   
await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])
 
  
 
  
6.   pure objects
 
  
        100% pure object，    Object           （   constructor, toString() ）
 
  
 
  
 
   
const pureObject = Object.create(null);
 
   
console.log(pureObject); //=> {}
 
   
console.log(pureObject.constructor); //=> undefined
 
   
console.log(pureObject.toString); //=> undefined
 
   
console.log(pureObject.hasOwnProperty); //=> undefined
 
  
 
  
7.    JSON   
 
  
JSON.stringify            ，         JSON   
 
  
 
  
 
   
const obj = { 
 
   
  foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } 
 
   
};
 
   
// The third parameter is the number of spaces used to 
 
   
// beautify the JSON output.
 
   
JSON.stringify(obj, null, 4); 
 
   
// =>"{
 
   
// =>    "foo": {
 
   
// =>        "bar": [
 
   
// =>            11,
 
   
// =>            22,
 
   
// =>            33,
 
   
// =>            44
 
   
// =>        ],
 
   
// =>        "baz": {
 
   
// =>            "bing": true,
 
   
// =>            "boom": "Hello"
 
   
// =>        }
 
   
// =>    }
 
   
// =>}"
 
  
 
  
8.          
 
  
          Spread   ，             ：
 
  
 
  
 
   
const removeDuplicateItems = arr => [...new Set(arr)];
 
   
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
 
   
//=> [42, "foo", true]
 
  
 
  
9.      
 
  
   Spread           ：
 
  
 
  
 
   
const arr = [11, [22, 33], [44, 55], 66];
 
   
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]
 
  
 
  
               ，      ，               ：
 
  
 
  
 
   
function flattenArray(arr) {
 
   
  const flattened = [].concat(...arr);
 
   
  return flattened.some(item => Array.isArray(item)) ? 
 
   
    flattenArray(flattened) : flattened;
 
   
}
 
   
 
 
   
const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
 
   
const flatArr = flattenArray(arr); 
 
   
//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]
 
  
 
  
              JavaScript ~
 
  

 
  
 
   
  ：https://medium.freecodecamp.org/9-neat-javascript-tricks-e2742f2735c3   ：Alcides Queiroz
 
   
  ：https://zhuanlan.zhihu.com/p/37493249   ：