JS骚操作写法和控制台console的高级玩法

最新推荐文章于 2024-08-17 23:56:22 发布

枕上~诗书闲

最新推荐文章于 2024-08-17 23:56:22 发布

阅读量1k

点赞数

分类专栏： JS Java Web 篇文章标签： js javascript

本文链接：https://blog.csdn.net/qq_43705670/article/details/111144996

版权

JS 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Java Web 篇

1 篇文章 0 订阅

订阅专栏

三元操作符
使用三元操作符可以让你的if…else多行语句变成一行

简化前：

const x = 20;
let answer;

if (x > 10) {
    answer = "greater than 10";
} else {
    answer =  "less than 10";
}

简化后：

const answer = x > 10 ? "greater than 10" : "less than 10";

短路操作符
当进行变量赋值的时候，你可能需要确保被用来赋值的变量不是null、undefined或者为空。

简化前：

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

简化后：

const variable2 = variable1  || 'new';

是不是感觉难以置信，试一试下面的代码：

let variable1;
let variable2 = variable1  || 'bar';
console.log(variable2 === 'bar'); // prints true

variable1 = 'foo';
variable2 = variable1  || 'bar';
console.log(variable2); // prints foo

需要注意的是，如果 varibale1 的值为 false 或者是 0 ，则 ‘bar’ 将会被赋值给 varibale2.

声明变量
简化前：

let x;
let y;
let z = 3;

简化后：

let x, y, z=3;

if判断是否存在
简化前：

let a;
if ( a !== true ) {
// do something...
}

简化后：

let a;
if ( !a ) {
// do something...
}

for 循环
简化前：

const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++)

简化后：

for (let fruit of fruits)

如果你想得到数组元素的下标，你可以这样子写：

for (let index in fruits)

当你用这种方法获取对象的key时仍然有效

const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}
for (let key in obj)
  console.log(key) // output: continent, country, city

对象属性
简化前：

const x = 1920, y = 1080;
const obj = { x:x, y:y };

简化后：

const obj = { x, y };
return

简化前：

function calcCircumference(diameter) {
  return Math.PI * diameter
}

简化后：

calcCircumference = diameter => (
  Math.PI * diameter;
)

参数是默认值
简化前：

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

简化后：

volume = (l, w = 3, h = 4 ) => (l * w * h);

volume(2) //output: 24

模板文本
简化前：

const welcome = 'You have logged in as ' + first + ' ' + last + '.'

const db = 'http://' + host + ':' + port + '/' + database;

简化后：

const welcome = `You have logged in as ${first} ${last}`;

const db = `http://${host}:${port}/${database}`;

解构赋值
简化前：

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');

const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

简化后：

import { observable, action, runInAction } from 'mobx';

const { store, form, loading, errors, entity } = this.props;

你甚至可以在解构的同时对变量重新命名：

const { store, form, loading, errors, entity:contact } = this.props;

… 运算符
简化前：

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()

简化后：

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

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

你还可以使用 …运算符在一个数组的任意位置去嵌入另一个数组：

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

… 和 es6 的解构赋值一起使用也很强大

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

Array.find
简化前：

const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]

function findDog(name) {
  for(let i = 0; i<pets.length; ++i) {
    if(pets[i].type === 'Dog' && pets[i].name === name) {
      return pets[i];
    }
  }
}

简化后：

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

指数幂
简化前：

Math.pow(2,3); // 8
Math.pow(2,2); // 4
Math.pow(4,3); // 64

简写后：

2**3 // 8
2**4 // 4
4**3 // 64

字符串转数字
简化前：

const num1 = parseInt("100");
const num2 =  parseFloat("100.01");

简化后：

const num1 = +"100"; // converts to int data type
const num2 =  +"100.01"; // converts to float data type

Object.entries()
这是一个 es8 中出现的特性，允许你把一个对象转换成具有键值对的数组。

const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.entries(credits);
console.log(arr);

/** Output:
[ [ 'producer', 'John' ],
  [ 'director', 'Jane' ],
  [ 'assistant', 'Peter' ]
]
**/

Object.values()
Object.values() 同样是 es8 里面出现的一个新特性，它和 Object.entries() 功能类似，但是在最终的转换数组中没有 key。

const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.values(credits);
console.log(arr);

/** Output:
[ 'John', 'Jane', 'Peter' ]
**/

下面我们用console.log来替换，感受一下它的魅力。

在这里插入图片描述
看了上面这张图，是不是认识到log的强大之处了，下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用。

在这里插入图片描述

一般情况下我们用来输入信息的方法主要是用到如下四个

console.log 用于输出普通信息
console.info 用于输出提示性信息
console.error用于输出错误信息
console.warn用于输出警示信息
console.debug用于输出调试信息

用图来说话

在这里插入图片描述
console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。

console.log("%d年%d月%d日",2011,3,26);
console.log("圆周率是%f",3.1415926);

在这里插入图片描述

%o占位符，可以用来查看一个对象内部情况

var dog = {};dog.name = "大毛";dog.color = "黄色";console.log("%o", dog);

在这里插入图片描述
console.dirxml用来显示网页的某个节点（node）所包含的html/xml代码

<body>
    <table id="mytable">
        <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>aaa</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>111</td>
            <td>333</td>
            <td>222</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    window.onload = function () {
        var mytable = document.getElementById('mytable');
        console.dirxml(mytable);
    }
</script>