使用 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