前端的一些编程小技巧

1. 利用sort根据对象中的某个属性对整个对象进行排序:

arr = arr.sort((pre, next) => pre.order - next.order);

2. 利用es6语法缩写函数

function todoApp(state, action) {
  if (typeof state === 'undefined') {
    return initialState;
  }

  return state;
}

//修改为
function todoApp(state = initialState, action) {
  return state;
}

3. 防止页面因为没有某个功能而报错

// 在typescript中因为先进行了变量检测
// 所以一般直接就报错了
// 除非先给props设置为any

let { fn } = this.props;

// 方法1：
fn && fn();

// 方法2：
if(fn) fn();

// 方法3（建议）：
fn?.()

4. 利用剩余参数复制对象并添加或修改属性

let obj1={ name: 'xiaohong', age: 11 }

// 如果obj1中有name属性，则会被覆盖修改
let obj2 = { ...obj1, name: 'xiaoming' };

console.log(obj2); // { name: 'xiaoming', age: 11 }

5. 对象解构的骚操作

onClick = ({target: {innerHTML}}) => {

  //等同于console.log(e.target.innerHTML);
  console.log(`Clicked on "${innerHTML}"!`);
  
  // 但是请注意，这样写是不能直接用target访问到target的
  // 访问target，使用{target,target:{innerHTML}}才可以
};

6. 隐式转换

// 转换为字符串
let a = 21;
console.log(a + '');  // expected output: '21'

// 转换为数字
let a = '21';
console.log(a * 1); // expected output: 21
console.log(+a); // expected output: 21

7. 快速生成数组

/*
*  Array.from方法,将类数组对象(包括字符串)转换为数组
*  @params ArrayLikeObject 类数组对象,字符串,或者带length属性的对象
*  @params (elem,index)=>{} 回调函数,当前遍历到的元素及其下标，返回值作为新数组的元素
*/
let arr = Array.from({ length:10 }, (x, i) => i);
// arr:[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

// 快速生成一个随机数组
let arr = Array.from({ length: 1000 }, Math.random)
// [ 0.6163093133259432, 0.8877401276499153, 0.4094354756035987, ...] - 1000 items

/*
*  Array在只有1个参数时，该参数是数组的长度
*/
let arr1 = Array(1, 2, 3, 4, 5); // arr1:[1,2,3,4,5]
let arr2 = Array(3) // arr2:[empty,empty,empty]

// 利用from将字符串转换为数组:
let str = 'app';
let arr3 = str.split(''); // arr3:['a','p','p']
let arr4 = Array.from(str); // arr4:['a','p','p']

8. javascript实现增删改查

let objs = [
  {
    name: 'xiaoming',
    age: 14
  },
  {
    name: 'xiaohua',
    age: 15
  }
];

// 增
let obj_add = {
  name: 'xiaohong',
  age: 16
};

objs.push(obj_add);

// 删
let objs_del = objs.filter(item => item.name !== 'xiaoming');

// 查
let objs_sel = objs.filter(item => item.name === 'xiaohong');

// 改
let obj_set = {
    name: 'xiaohua',
    age: 16
}

let objs_set = objs.map(item => item.name === obj_set.name ? obj_set : item);

// 排序
let objs_sort = objs.sort((a, b) => a.age - b.age);

9. 奇数或偶数使用 位 运算的方式：

const value = 232;  

if (value & 1) console.log("odd");
else console.log("even");
// even

10. 检查有效的 URL：

const isValidURL = (url) => {
  try {
    new URL(url);
    return true;
  } catch (error) {
    return false;
  }
}

isValidURL('https://segmentfault.com/u/minnanitkong/articles')
// true

isValidURL("https//invalidto");
// false

11. 距离过去到现在时间表示：

const fromAgo = (date) => {
  const ms = Date.now() - date.getTime();
  const seconds = Math.round(ms / 1000);
  const minutes = Math.round(ms / 60000);
  const hours = Math.round(ms / 3600000);
  const days = Math.round(ms / 86400000);
  const months = Math.round(ms / 2592000000);
  const years = Math.round(ms / 31104000000);

  switch (true) {
    case seconds < 60:
      return `${seconds} second(s) ago"`;
    case minutes < 60:
      return `${minutes} minute(s) ago"`;
    case hours < 24:
      return `${hours} hour(s) ago"`;
    case days < 30:
      return `${days} day(s) ago`;
    case months < 12:
      return `${months} month(s) ago`;
    default:
      return `${years} year(s) ago`;
  }
};

const createdAt = new Date(2021, 0, 5);
fromAgo(createdAt); // 14 day(s) ago;

12. 逻辑空赋值(??=)，空值合并(??)和可选链(?.)操作符

// 为元素设置默认值

let formData = {};
let a = formData?.name ?? 'xiaoming';

console.log(a); // xiaoming

a ??= 'xiaohong';

console.log(a); // 'xiaoming'