前端开发总结的一些技巧和实用方法（2）-CRMEB社区

前端开发总结的一些技巧和实用方法（2）

管理

编辑

删除

本文主要介绍一些JS中用到的小技巧和实用方法，可以在日常Coding中提升幸福度，也可以通过一些小细节来增加代码可读性，让代码看起来更加优雅，后续将不断更新

1.数组 map 的方法 (不使用Array.Map)

Array.from 还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。如下：

const cities = [    
    { name: 'Paris', visited: 'no' },    
    { name: 'Lyon', visited: 'no' },    
    { name: 'Marseille', visited: 'yes' },    
    { name: 'Rome', visited: 'yes' },    
    { name: 'Milan', visited: 'no' },    
    { name: 'Palermo', visited: 'yes' },    
    { name: 'Genoa', visited: 'yes' },    
    { name: 'Berlin', visited: 'no' },    
    { name: 'Hamburg', visited: 'yes' },    
    { name: 'New York', visited: 'yes' }
];

const cityNames = Array.from(cities, ({ name}) => name);
console.log(cityNames);
//["Paris", "Lyon", "Marseille", "Rome", "Milan", "Palermo", "Genoa", "Berlin", "Hamburg", "New York"]

2.有条件的对象属性

不再需要根据一个条件创建两个不同的对象，可以使用展开运算符号来处理。

let getUser = (emailIncluded) => {
  return {
    name: 'John',
    surname: 'Doe',
    ...emailIncluded && { email : 'john@doe.com' }
  }
}

const user = getUser(true);
console.log(user); // outputs { name: "John", surname: "Doe", email: "john@doe.com" }

const userWithoutEmail = getUser(false);
console.log(userWithoutEmail); // outputs { name: "John", surname: "Doe" }

3. 动态属性名

const dynamic = 'email';
let user = {
    name: 'John',
    [dynamic]: 'john@doe.com'
}
console.log(user); // outputs { name: "John", email: "john@doe.com" }

4.函数默认参数妙用

场景：假设我们又如下的初始化工作需要进行，在代码的最开始我们需要对config对象进行初始化工作

function initConfig(config) {
    config.map((item) => {
        item.content = Number(item.content)
    })
}

如果我们不小心忘记给它传递参数，浏览器会报如下错误，提示我们 config 没有 map 方法，因为此时 config 为 undefined

解决办法：

我们可以给函数的参数加上一个默认的值

function initConfig(config = []) {
    config.map((item) => {
        item.content = Number(item.content)
    })
}

5.监听DOM元素是否在可视区域内

场景：如果打开网页，DOM元素在可视区域内，就不展示一个div，反之如果需要滑动网页才能让这个DOM元素出现在可视区域，就展示这个div。这里分享一个vue的做法。

mounted(){
let recommend = document.getElementById('replyList'),that = this;
 let observer = new IntersectionObserver(function(entries){
  entries.forEach( function(element, index) {
   if (element.isIntersecting ) {
   //用recommendShow这个布尔值来控制DOM是否显示
    that.recommendShow = false;
   } else {
    that.recommendShow = true;
   }
  });

 }, {
  root: null,
  threshold:[0, 1]
 });

 observer.observe(recommend)
}

16.谷歌浏览器A标签跳转新标签导致sessionStorage无效

解决方法：主动添加 rel="opener" 属性即可，如下。

跳转

17.Array.find

如果你曾经编写过普通 JavaScript 中的 find 函数，那么你可能使用了 for 循环。在 ES6 中，介绍了一种名为 find（）的新数组函数，可以实现 for 循环的简写。

const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
  for(let i = 0; i

简写为

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

`8.数组提取不重复的新值`

如果有下面两个数组，需要提取第二个中与第一个数组中不重复的新值,也就是单独把5，6提取出来

let arr1 = [1,2,3];
let arr2 = [2,5,6];
let arr3 = [];
arr2.forEach(item=>{
    if(!arr1.includes(item)){
        arr3.push(item);
    }
})
console.log(arr3);//[5,6]