如何跳出二层循环
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);
}
}
月份：2020年12月
考虑：数组
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也可设置负数
使用函数式编程可以提高渲染效率，因为它没有状态，没有实例，并且它是一个组件可复用。下面用例展示了如何使用函数式组件。
给函数式组件传递事件
// 子组件
<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>插槽在函数式组件中能正常使用
成为函数式组件中，不能在script中写props
此处收集一些代码性能提升方面的细节，持续更新
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’浏览器运行逻辑
- 在内存创建一个临时字符串
- 连接后的字符onetwo赋值给临时字符串
- 临时字符串与str当前值连接
- 结果赋值给str
优化： str = str + ‘one’ + ‘two’;
- 以str为基础加上one
- 再加上two
- 当前值赋给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）这个帧栈，减小空间复杂度。