小问题及技巧-CSDN博客

1. 数组代替对象

var nameIndex = 1;
var peopleObj = {
	1:"小米",
	2:"小明",
	3:"小红"
}
console.log(peopleObj[nameIndex])
‖
‖
var nameIndex = 1;
var peopleArr = ["","小米","小明","小红"]
console.log(peopleArr[nameIndex])

2. v-html 标签内容可省

<span v-html="ydc.getPrice(parkBase.minLeasePrice)">{{ydc.getPrice(parkBase.minLeasePrice)}}</span>
‖
‖
<span v-html="ydc.getPrice(parkBase.minLeasePrice)"></span>

3. switch case return 后 无需break

function platform(value) {
    switch (val) {
        case "1":
            return '单面'
            break;
        case "2":
            return '双面'
            break;
        default:
            return '--';
            break;
    }
}
‖
‖
function platform(value) {
    switch (val) {
        case "1":
            return '单面'
        case "2":
            return '双面'
        default:
            return '--';
    }
}

4. 活用 && 取代 三目运算符

var userName = "小米";
var age = userName == "小米" ? 14:"";
console.log(age)
‖
‖
var userName = "小米";
var age = userName == "小米" && 14;
console.log(age)

5. nginx配置中 proxy_pass参数应为可以在浏览器打开的网址

location /api {
    #proxy_pass http://api.map.baidu.com; 报错
    proxy_pass http://api.map.baidu.com/location/ip;
}

6. svg中image标签创建及路径动态赋值问题

function $_svg(tagName) {
  return $(document.createElementNS("http://www.w3.org/2000/svg", tagName));
}
var image = $_svg('image').appendTo('#g-box')
image[0].href.baseVal = 图片路径;

7. 动态生成标签null值问题

var name = null;
# 填充时同时赋值,会造成 input 输入框内显示 null 字符串
$("tr.increase-kind").append(`<td><input type="text" value="${name}"></td>`);

## 填充后再赋值,input输入框内显示 空白
$("tr.increase-kind").append(`<td><input type="text"></td>`);
$("tr.increase-kind").find("td input").val(name)

8.操作数组遍历不一定要用for循环 以下方法都兼容IE9

var ages = [32, 33, 16, 40];
# some 返回是否存在item> 16
ages.some(item=>{return item > 16;});
//true
## map 返回所有(item>16)的结果
ages.map(item=>{return item > 16;});
//[true, true, false, true]
### filter 返回所有item>16结果为true 的 item
ages.filter(item=>{return item > 16;});
//[32, 33, 40]
#### every 返回所有item是否都大于16
ages.every(item=>{return item > 16;});
//false

9.filter数组去重

var a = [1, 1, 2, 1, 3, 11, 1, 1, 1]
var b = a.filter(function(item, index) {
    return a.indexOf(item) == index;
})
console.log(b) // [1,2,3,11]

10.数组转字符串

var a = [1,2,3]
a.toString() / a.reduce((c,b)=>c+","+b) / a.join() // 默认逗号拼接

11.页面input 快速填充

$("input[type!='file']").map(index=>{$("input[type!='file']").eq(index).val(index)})

12.简单五角星评分公式

function setScore(score){
 	return "\u2605".repeat(score)+"\u2606".repeat(10-score)
}
setScore(7)
//"★★★★★★★☆☆☆"

13.toFixed()问题

可把 Number 四舍五入为指定小数位数的数字,
但返回的是以NumberObject表示的*字符串*

14.App内嵌套H5页面,点击事件反应迟钝

• 将click事件替换为touchstart