ES6 简写方式

Posted 2020-11-03 Running

三目运算符

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

循环

for (let index of allImgs) 等于 for (let i = 0; i < allImgs.length; i++)

//数组遍历
[2, 5, 9].forEach(function (ele,index,array) {
    console.log("a[" + index + "] = " + ele);
});

变量声明

函数开始前变量赋值，写成一行：let x,y,z=3;

if判断

if (likejavascript === true) 等于 if (likeJavaScript)

科学计数法代替大数

1e7 = 10000000

多行字符串

const lorem = ‘Lorem ipsum dolor sit amet, consectetur\n\t‘
    + ‘adipisicing elit, sed do eiusmod tempor incididunt\n\t‘
//只用引号``
const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt`

变量赋值（确保原值不是 null、未定义的或空值）

if (variable1 !== null || variable1 !== undefined || variable1 !== ‘‘) {
     let variable2 = variable1;
}
//上面等同于下面
const variable2 = variable1  || ‘new‘;

属性名与 key 名相同

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));//匿名函数，有参数

隐式返回值

单行省略括号：calcCircumference = diameter => Math.PI * diameter;
多行（对象文本）用（）：calcCircumference = diameter => (Math.PI * diameter;)

默认参数值

函数声明定义默认值：volume = (l, w = 3, h = 4 ) => (l * w * h);
（没有传参则使用3,4，否则用参数的）

//强制参数，没有参数赋值则抛出错误
mandatory = ( ) => {
  throw new Error(‘Missing parameter!‘);
}
foo = (bar = mandatory( )) => {
  return bar;
}

模板字符串

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‘);
//导入包的简写
import { observable, action } from ‘mobx‘;
*******分割线*******
const store = this.props.store;
const form = this.props.form;
//导入常量简写,重命名
const { store, form:form_0 } = this.props;

展开运算符[...]

//数组拼接
const arr = [1,2,3]
const arr_1 = [5,6].concat(arr)
const arr_2 = [11,...arr,12];//任意位置进行扩展都可以
//复制数组
const arr_3 = [...arr];
//解构运算符和展开运算符连用
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(z) // { c: 3, d: 4 }

Array.find

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

编写验证函数

foo.bar 等于 foo [‘bar‘]

// object validation rules
const schema = {
  first: {
    required:true
  },
  last: {
    required:true
  }
}
 
// universal validation function
const validate = (schema, values) => {
  for(field in schema) {
    if(schema[field].required) {
      if(!values[field]) {
        return false;
      }
    }
  }
  return true;
}
console.log(validate(schema, {first:‘Bruce‘})); // false
console.log(validate(schema, {first:‘Bruce‘,last:‘Wayne‘})); // true

双位操作符

Math.floor(4.9) === 4 //true 等于 ~~4.9 === 4 //true
用~~代替体Math.floor,执行速度更快