break-continue-return之间的区别

Posted on 2017-04-07 Edited on 2020-03-16 In javaScript

break

break 语句用于退出 switch 语句或循环语句(for, for … in, while, do … while)。

当 break 语句用于 switch 语句中时，会跳出 switch 代码块(终止执行其代码)。如：

var day;
switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case 6:
        day = "Saturday";
        break;
}
console.log(day);

当 break 语句用于for循环语句时，(跳出整个循环体)会终止执行循环，并执行循环后代码(如果有的话)。如：

(function (){
  var iSum = 0;
  for(var i = 1;i<101;i++){
    if(i == 5){
      break;
    }
    iSum +=i;
  }
  console.log(iSum); //10
}())

continue

continue 跳过`当前条件`的循环(用于跳过循环中的一个迭代，并继续执行循环中的下一个迭代)。

continue 与 break语句的区别是， break 是结束整个循环体， *continue *是结束单次循环。

注意： *continue * 语句（不带标签引用），只能用在循环或 switch 中。

//在 while 循环中
var text = "";
var i = 0;
while (i < 5) {
    i++;
    if (i == 3) {
        continue;
    }
console.log(i); //1,2,4,5
}

//在 for 循环中
(function (){
  var iSum = 0;
  for(var i = 1;i<101;i++){
    if(i == 5){
      continue;
    }
    iSum +=i;
  }
  console.log(iSum); //5045
}())

return

return表示(结束整个方法体)终止函数的执行并返回函数的值。

//用法1
(function (){
  var iSum = 0;
  for(var i = 1;i<101;i++){
    if(i == 5){
      return;
    }
    iSum +=i;
  }
  console.log(iSum); //当i==5时，结束（return）了整个方法体，所以此时没有执行这行代码
}())

//用法2
(function (){
  var iSum = 0;
  for(var i = 1;i<101;i++){
    if(i == 5){
      //return;
      i = A(i);
    }
    iSum +=i;
  }
  console.log(iSum); //5015,i 跳过了5，6，7，8，9，此时的i设为了10
}())

function A(i){
  i+=5;
  return i; //i可选(非必填)。指定返回的函数值。如果忽略，A(i)函数将返回 undefined
}

总结：

break:跳出整个循环体

continue:跳过`当前条件`的循环

return：结束当前方法体

移动web页面，input、textarea获取焦点弹出系统虚拟键盘时，挡住input、textarea的解决方案

Posted on 2017-04-07 Edited on 2020-03-16 In javaScript

使用场景

在移动web页面里，当点击input、textarea获取到焦点弹出系统虚拟键盘后，虚拟键盘挡住了输入框的情况；这种问题一般出现在部分android机型中，在ios机型中一般不会出现这个问题
在移动web页面里，只有可以滑动的时候就可以使用这个方法处理一些类似于锚点的问题，并非一定是输入框才可以使用

解决方案

通过js动态处理；在元素（输入框）被操作后，若元素在可视区域内，则不做处理。反之通过js将该元素的位置移动到可视区域内即可
使用W3C标准的scrollIntoView()、scrollIntoViewNeeded()方法处理,该方法就是让当前的元素滚动到浏览器窗口的可视区域内；两个方法共同使用可以兼容大部分的浏览器（移动端），该方法的参数类型是boolean值，默认参数是true。如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。反之，元素的底端将和其所在滚动区的可视区域的底端对齐。

使用方法

原生js里面

<body>
    <div class="chunk"></div>
    <div class="scrollIntoView">scrollIntoView top</div>
    <div class="scrollIntoViewIfNeeded-top">scrollIntoViewIfNeeded top</div>
    <div class="scrollIntoViewIfNeeded-bottom">scrollIntoViewIfNeeded botom</div>
    <script>
    const scrollIntoView = document.querySelector('.scrollIntoView');
    const scrollIntoViewIfNeededTop = document.querySelector('.scrollIntoViewIfNeeded-top');
    const scrollIntoViewIfNeededBottom = document.querySelector('.scrollIntoViewIfNeeded-bottom');
    const test = document.querySelector('.chunk');
    scrollIntoView.addEventListener('click', function() {
      test.scrollIntoView(true);
    });
    scrollIntoViewIfNeededTop.addEventListener('click', function() {
      test.scrollIntoViewIfNeeded(true);
    });
    scrollIntoViewIfNeededBottom.addEventListener('click', function() {
      test.scrollIntoViewIfNeeded(false);
    });
    </script>
</body>

vue里面

<template>
    <li class="requirement-description">
        <div class="li-inner">
            <span>测试数据</span>
            <textarea maxlength="200"
                      name="textarea"
                      @focus="textAreaFocus"
                      ref="textAreaF"></textarea>
        </div>
    </li>
</template>
<script>
    export default {
        name: 'Item-Textarea',
        methods: {
            textAreaFocus() {
                this.$refs.textAreaF.scrollIntoView(false)
                this.$refs.textAreaF.scrollIntoViewIfNeeded(false)
            }
        }
    }
</script>

JS中typeof与instanceof的区别

Posted on 2017-04-07 Edited on 2020-03-16 In javaScript

JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。区别：

typeof

typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。
它返回值是一个字符串，该字符串说明运算数的类型。typeof 一般只能返回如下几个结果：
number,boolean,string,function,object,undefined。我们可以使用 typeof 来获取一个变量是否存在，如 if(typeof a!=”undefined”){alert(“ok”)}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错，对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。

instanceof

instanceof 用于判断一个变量是否某个对象的实例，如:

//判断a是否是Array的实例
var a = new Array();
console.log(a instanceof Array); //true
console.log(window instanceof Object); //true
//所以，这里的 instanceof 测试的 object 是指 js 语法中的 object，不是指 dom 模型对象。
console.log(a instanceof object); //true, 因为 Array 是 object 的子类

//判断a是否是test的实例
function test(){};
var a=new test();
console.log(a instanceof test); //true

 // 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例
 function Aoo(){}
 function Foo(){}
 Foo.prototype = new Aoo();//JavaScript 原型继承

 var foo = new Foo();
 console.log(foo instanceof Foo)//true
 console.log(foo instanceof Aoo)//true
 //instanceof 复杂用法
 console.log(Object instanceof Object);//true
 console.log(Function instanceof Function);//true
 console.log(Number instanceof Number);//false
 console.log(String instanceof String);//false
 console.log(Function instanceof Object);//true
 console.log(Foo instanceof Function);//true
 console.log(Foo instanceof Foo);//false

未完待续…

NodeJS 文件(夹)压缩/解压(zip/unzip)

Posted on 2017-03-23 Edited on 2020-03-16 In nodeJs

我使用的比较靠谱的,也比较简单.其中archiver很强大支持zip格式tar格式,只需要提供路径就可以压缩已存在的文件夹.

压缩：

var fs = require('fs');
var archiver = require('archiver');

var output = fs.createWriteStream('archiver-unzip.zip');
var archive = archiver('zip');

archive.on('error', function(err){
     throw err;
 });

archive.pipe(output);
archive.bulk([
    { src: ['archiver/**']}
]);
archive.finalize();

解压:

var fs = require("fs");
var unzip = require("unzip");

fs.createReadStream('archiver-unzip.zip').pipe(unzip.Extract({ path: 'unarchive' }));

webstorm下调试node提示：v8debug is not defined

Posted on 2017-03-23 Edited on 2020-03-16 In WebStorm

解决步骤：Run/Debug configurations ->configuration->Node parameters: –expose_debug_as=v8debug

break

break 语句用于退出 switch 语句或循环语句(for, for … in, while, do … while)。

continue

continue 跳过当前条件的循环(用于跳过循环中的一个迭代，并继续执行循环中的下一个迭代)。

return

return表示(结束整个方法体)终止函数的执行并返回函数的值。

总结：

break:跳出整个循环体

continue:跳过当前条件的循环

return：结束当前方法体

使用场景

解决方案

使用方法

JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。区别：

typeof

instanceof

continue 跳过`当前条件`的循环(用于跳过循环中的一个迭代，并继续执行循环中的下一个迭代)。

continue:跳过`当前条件`的循环