小知识随手记（九）：兄弟选择器（~和+）区别、forEach无法return和break的替换方法、html结构转为markdown语法、beforeunload离开当前页面提示、利用set及解构数组去重、设置函数必传参数

一、CSS选择器之兄弟选择器（~和+）

　　以前还没注意，兄弟元素选择器 ~ 和 + 的区别：

　　‘+’选择器：表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。

　　‘~’选择器：则表示某元素后所有同级的指定元素，强调所有的。

二、forEach无法return或break跳出循环的替换方法

　　我们都知道for循环里要跳出整个循环是使用break，但在数组中用forEach循环如要退出整个循环使用break会报错，使用return也不能跳出循环。

　　针对这个问题，可以使用数组的另外2个方法 some() 和 every()，或者是使用for循环，或者抛出异常，捕获异常。主要介绍下some和every方式

　　some()：当内部return true时跳出整个循环

　　every()：当内部return false时跳出整个循环

　　顾名思义，some要找一些，找到了true就结束了，every本意要每个，必须明确不要了false才算退出。但是由于js函数在没有显式return值时会隐式return undefined，undefined转换为布尔值是false，相当于return false。所以在使用every时，必须显示return true才会查询每一个。

1、every 当内部return false时跳出整个循环；但不想跳出循环时，return true;也需要写

//every()当内部return false时跳出整个循环
let list = [1, 2, 3, 4, 5];
list.every((value, index) => {
    if(value > 3){
        console.log(value)// 4
        return false; // 跳出循环
    } else {
        console.log(value)// 1 2 3
        return true;
    }
});

list.every((value, index) => {
    if(value > 3){
        console.log(value)
        return false;
    }else{
        console.log(value)// 1
        // return true;
        // 如果没有返回值true 的话，也会跳出循环
    }
}); 
// 1
// false

2、forEach没有返回值，只针对每个元素调用func

// forEach没有返回值，只针对每个元素调用func。
let list2 = [1, 2, 3, 4, 5];
list2.forEach((value, index) => {
　　if(value > 3){
　　　　console.log(value)// 4 5
　　　　return false;//没有返回值，ruturn false 仍向下执行，且最后返回undefined
　　}else{
　　　　console.log(value)// 1 2 3
　　　　return true;
　　}
});
VM27068:9 1
VM27068:9 2
VM27068:9 3
VM27068:5 4
VM27068:5 5
undefined

3、some 当内部return true时跳出整个循环

let list3 = [1, 2, 3, 4, 5];
list3.some((value, index) => {
　　if(value === 3){
　　　　return true;//当内部return true时跳出整个循环
　　}
　　console.log(value)// 1 2
});
VM27073:6 1
VM27073:6 2
true

4、map 有返回值，返回一个新的数组，每个元素为调用func的结果。

let list5 = [1, 2, 3, 4, 5];
let arr = [];
arr = list5.map((value, index) => {
　　return value * 2;
});
console.log(arr, list5);
VM27113:6 (5) [2, 4, 6, 8, 10] (5) [1, 2, 3, 4, 5]

　　具体也可以看下之前的博客：JS中map、forEach、filter、reduce等Array新增方法的区别

三、html结构转为markdown语法

　　推荐一个比较好用的插件：to-markdown，目前已经改名叫： turndown，5.2K star，使用方便简单，感觉不错

　　github地址：https://github.com/domchristie/turndown

四、当离开当前页面时给予用户提示

    mounted () {
      window.onbeforeunload=function(event){
        let e = window.event || event
        e.returnValue=("确定离开当前页面吗？")
      }
    },
    beforeDestroy () {
      window.onbeforeunload = null
    }

　　需要注意的是在退出页面的时需要解绑onbeforeunload事件，否则会存在引用未清，无法回收，导致内存泄漏问题。

//方法一
 window.onbeforeunload = function(){
    return '真的要关闭此窗口吗?';
 }
 //or 方法二
 window.addEventListener("beforeunload", function(event) {
    //event.preventDefault();
    event.returnValue = "真的要关闭此窗口吗?";
 });

　　在写一个需求，要求用户进入页面，返回/刷新/关闭该页面提示用户一些信息。发现在使用window.onbeforeunload的时候，必须打开调试才会生效，而且只有第一次有效，再次点击就会失效。

　　在实际使用中让用户打开调试模式肯定是不可能的，后来发现出现这种情况是因为没有在该页面有任何操作，或者是操作时间间隔太短，所以不会有提示。

　　打开该页面后，在该页面没有任何操作，不会有提示，在input中输入文字或者其他信息，刷新/返回/关闭该页面都会有提示；刷新/返回/关闭操作时间间隔太短有时有提示，有时没有。

　　所以只有在该页面有操作，并且时间间隔大于5秒左右即会有提示。

五、利用set及解构数组去重及合并对象

let a = [1,2,3,2,5,6,3,3,1]
let b = [...new Set(a)]
console.log(b, a)
// (5) [1, 2, 3, 5, 6] 
// (9) [1, 2, 3, 2, 5, 6, 3, 3, 1]

　　不改变原数组。

　　同理可以合并或拷贝对象（深拷贝）

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };

const summary = {...person, ...tools, ...attributes};
/*
Object {
  "computer": "Mac",
  "editor": "Atom",
  "eyes": "Blue",
  "gender": "Male",
  "hair": "Brown",
  "handsomeness": "Extreme",
  "name": "David Walsh",
}
*/

　　拷贝对象（深拷贝）

let p1 = { name: 'David Walsh', gender: 'Male'，aa: {a: 1} };
let p2 = {...p1}
p2.name = 'test'
console.log(p2, p1)
// {name: "test", gender: "Male", aa: {a: 1}} {name: "David Walsh", gender: "Male", aa: {a:1}}

　　注意很多时候，我们需要解构别名：ES6中我们经常会使用对象结构获取其中的属性，但有时候会想重命名属性名，以避免和作用域中存在的变量名冲突，这时候可以为解构属性名添加别名。

const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;

// Grabs obj.x as as { otherName }
const { x: otherName } = obj;

六、设置函数必传参数

　　借助ES6支持的默认参数特性，我们可以将默认参数设置为一个执行抛出异常代码函数返回的值，这样当我们没有传参时就会抛出异常终止后面的代码运行。

const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// This will throw an error because no name is provided
hello();

// This will also throw an error
hello(undefined);

// These are good!
hello(null);
hello('David');