js简写

作者: jh2k15 | 来源:发表于2018-01-07 20:13 被阅读0次

三元操作符

var x = 20 , answer;
if (x > 10) {
    answer = 'is greater';
} else {
    answer = 'is lesser';
}
//简写
var answer = x > 10 ? 'is greater' : 'is lesser';
//
var answer = x > 10 ? 'is greater'  : x;

短路求值

当给一个变量分配另一个值时,想确定源始值不是null或undefined或空值 0。

if (variable1 !== null || variable1 !== undefined || variable1 !== ''||variable1 !== 0) {
     var variable2 = variable1;
}
//简写
var variable2 = variable1 || 'new';

声明变量

var x;
var y;
var z=3;
//简写
var x,y,z=3;

if存在条件

if (a === true)
//
if (a)
if ( a !== true ) 
//
if ( !a ) 

JavaScript循环

for (var i = 0; i < arr.length; i++)
for (var i in arr)

也可以Array.forEach

function logArrayElements(element, index, array) {
  console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 9

十进制指数

for (let i = 0; i < 10000; i++)
//
for (let i = 0; i < 1e7; i++) 
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

对象属性

如果属性名与key名相同,则可以采用ES6的方法

const obj = { x:x, y:y };
//简写
const obj = { x, y };

箭头函数

function sayHello(name) {
  console.log('Hello', name);
}

setTimeout(function() {
  console.log('Loaded')
}, 2000);

list.forEach(function(item) {
  console.log(item);
});

sayHello = name =>console.log('Hello', name);

setTimeout( () =>   console.log('Loaded'),2000 );

list.forEach( (item) =>  console.log(item) );

隐式返回值

es6

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

var func = function func() {
  return { foo: 1 };
};
calcCircumference = diameter => (
  Math.PI * diameter;
)

var func = () => ({ foo: 1 });

默认参数值

es6

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);

模板字符串

es6

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;

多行字符串

es6

const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim

扩展运算符

es6

// 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];

强制参数

function foo(bar) {
  if(bar === undefined) {
    throw new Error('Missing parameter!');
  }
  return bar;
}
mandatory = () => {
  throw new Error('Missing parameter!');
}

foo = (bar = mandatory()) => {
  return bar;
}

Array.find

es6

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 === Tommy) {
      return pets[i];
    }
  }
}
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');

.Object[key]

https://segmentfault.com/a/1190000012673854

相关文章

  • vue - element-ui -> el-tag 标签状

    两个的简写 多个的简写 js

  • js简写

    三元操作符 短路求值 当给一个变量分配另一个值时,想确定源始值不是null或undefined或空值 0。 声明变...

  • JS简写

    JS简写 三元运算符 当你想写一个if . .else语句只在一行中。 普通写法 const x = 20; le...

  • js 简写

    //取整 parseInt(a,10);//Before Math.floor(a);//Before a>>0;...

  • js-if简写

    if ()else{} 三目:条件 ?条件成立 : 条件不成立 只有一个语句 if()语句 if(true) a...

  • JS简写技巧

    JS简写 三元运算符 当你想写一个if . .else语句只在一行中。 普通写法 const x = 20; le...

  • js简写技巧

    JS简写 三元运算符 当你想写一个if . .else语句只在一行中。 普通写法 const x = 20; le...

  • js 对象简写

    函数简写 属性简写

  • js简写技巧

    给多个变量赋值 使用解构数组的形式:let [a,b,c]=[4,6,8]; 交换两个变量 let x='hell...

  • 简写js的积累

    写js的时候,有很多小技巧可以让我们的代码更整洁,只是我们都不注意积累,先上几个自己平时用的,以后慢慢积累。 空的...

网友评论

      本文标题:js简写

      本文链接:https://www.haomeiwen.com/subject/luumnxtx.html