分类
javascript

颠覆常识的跳出循环

如何跳出二层循环

foo:for(var i=0;i<4;i++) {
        for (var j=0;j<4;j++) {
            if((i*j)>=3){
                console.log('stoping', i,j);
                break foo;
            }
            console.log(i,j);
        }
    }
qi ye wei xin jie tu 16081902748073 - 颠覆常识的跳出循环
分类
javascript

颠覆常识的数组排序

考虑:数组

const arr = [10,0,2];

arr.sort() // 0 10 2

竟然是先转换成String然后再排序的,那这个sort怎么放心用呢?

使用带类数组(TypeArray)

const arr = [10,0,2];

const newarr = […Uint8Array.from(arr).sort()]; // 0 2 10

带类数组构造器家族

Uint8Array // -255-255 Int8Array //0-255

Uint16Array //-65535-65535 Int16Array //0-65535

Uint32Array,Int32Array

Float32Array,Float64Array // 不用加U也可设置负数

分类
vue

vue 函数式组件

使用函数式编程可以提高渲染效率,因为它没有状态,没有实例,并且它是一个组件可复用。下面用例展示了如何使用函数式组件。

给函数式组件传递事件

// 子组件
<template functional>
    <div v-example v-on="listeners">{{props.msg}}</div>
</template>
// 父组件 
<list @click="handleClick" :msg="msg"></list>
 handleClick() {
      // eslint-disable-next-line no-debugger
      debugger;
      this.msg = 'aaa';
    }

函数式组件可以自己定义类,也可接收外部传入的类。样式同理。

<template functional>
    <div class="x" :class="[data.class, data.staticClass]" v-example v-on="listeners" :style="data.staticStyle">{{props.msg}}</div>
</template>

在函数式组件中加入别的组件,且别的组件可以不是函数式组件。

<template functional>
    <div class="x" :class="[data.class, data.staticClass]" v-example>
        {{props.msg}}
        <component :is="injections.components.Pane"/>
        <button  v-on="listeners">action</button>
    </div>
</template>

<script>
    import Pane from './Pane';
    export default {
        inject: {
            components: {
                default: {
                    Pane,
                }
            }
        }
    }
</script>

在函数式组件中更改数据源内容

<template functional>
    <div>
        {{$options.setContent(props.msg)}}
    </div>
</template>

<script>
    export default {
        setContent(val) {
            return val + 'sldkflkjdf';
        }
    }
</script>

插槽在函数式组件中能正常使用

分类
性能

代码性能

此处收集一些代码性能提升方面的细节,持续更新

for循环

  • for(let i=0,len=arr.length;i<len;i++)比for(let i=0;i<=arr.length;i++)更快
  • 当复杂度等于O(n)着重减少每次迭代的工作量,当复杂度大于O(n)着重减少迭代次数
  • forEach比for慢

条件语句

  • if适合判断范围
  • 当判断离散值多余两个是选择switch而不是if
  • 当有大量的离散值更适合查找表,const arr = [result1,result2,…,result100]; return arr[index];

字符串连接

str+= ‘one’ + ‘two’浏览器运行逻辑

  1. 在内存创建一个临时字符串
  2. 连接后的字符onetwo赋值给临时字符串
  3. 临时字符串与str当前值连接
  4. 结果赋值给str

优化: str = str + ‘one’ + ‘two’;

  1. 以str为基础加上one
  2. 再加上two
  3. 当前值赋给str

结果少了一步创建临时字符串的过程,所以速度加快,若str = ‘one’ + str + ‘two’则优化无效

vue-使用函数式组件

递归

尾调用优化

// 优化后和优化前对比 
function factorial(n) {
        function fact(n, res) {
            if(n<2) return res;
            return fact(n-1,n*res);
        }
        return fact(n,1);
    }
    function _factorial(n) {
        if (n===1) return 1;
        return n*_factorial(n-1);
    }

原理:优化前的递归要为每次调用开辟一个帧栈,优化后可以重用fact(n,1)这个帧栈,减小空间复杂度。