javascript 零碎笔记

使用 live-serve 这个工具，可以热更新 js 代码

逻辑运算符：

常用于单边条件判断，比如

真判断（获取子属性）

{error && <div className="alert alert-danger">{error}</div>}

假判断（设置默认值）

const errors = this.validate();
this.setState({errors: errors || {}});

例子：

false || 'test" 返回 "test"

true && "test" 返回 "test"

return item._id + column.path || column.key; 与
return item._id + (column.path || column.key);

selectedGenre && selectedGenre._id ? 'some' : 'another'

find vs filter

filter 遍历全部元素才会停止， find 遍历到正确的元素会立即停止。

使用 Object.keys 判断是否为 {}

validate = () => {
    const errors = {};
    const {account} = this.state;
    if (account.username.trim() === '')
        errors.username = "Username is required!";
    if (account.password.trim() === '') {
        errors.password = "Password is required!";
    }
    return Object.keys(errors).length === 0 ? null : errors;
};

ES6 允许使用字面量定义对象时，用 表达式 / 变量 作为对象的属性名，即把 表达式 / 变量 放在方括号内。

validateProperty = ({name, value}) => {
    const obj = {[name]: value};
    const schema = {[name]: this.schema[name]};
    const {error} = Joi.validate(obj, schema);
    return error ? error.details[0].message : null;
};

　

全引入别名

import * as userService from './service/userServices'

多重解构

theme 先解构出 spacing 属性，再别名，再解构出 unit 属性

const theme  = { spacing: { unit: 3 }, row: { new: 9 } };

// const {spacing} = theme ;
// const {unit} = spacing;
// 等价于 =>
const {spacing:{unit}} = theme ;

console.log(unit) // 3 

数组删除某个元素

export function deleteMovie(id) {
  let movieInDb = movies.find(m => m._id === id);
  movies.splice(movies.indexOf(movieInDb), 1);
  return movieInDb;
}

类 中与 object 中方法简写:

类

fn1() {
    console.log(this)
    // Child {props: {…}, context: {…}, refs: {…}, …}
}

// 简写
fn2 = () => {
    console.log(this)
    // 输出：Child {props: {…}, context: {…}, refs: {…}, …}
}

ojbect

const o = {
    method: function () {
        return "Hello!";
    }
};

// 简写
const o = {
    method() {
        return "Hello!";
    }
};

　　

233