位运算

请注意 位运算适用于 32 位整数,所以精度可能会丢失

  • 用 “ ” 取整
let num = 1.5
num = num | 0 // 1

  • 用 “»” 取半
let num = 4
num = num >> 1 // 2

  • 用 “»” 加倍
let num=2;
num=num<<1; / / 4

  • 用 “^” 两值交换
let a = 1
let b = 2

a ^= b
b ^= a
a ^= b
// a===2,b===1

  • 用 “&” 判断奇数
let n = 3
let m = 4
n & (1 === 1) // true 奇数
m & (1 === 1) // false 偶数

  • 用 “~” 判断项是否存在
let firstname = 'Ma'
let fullname = 'Jack Ma'
let isExist = !!~fullname.indexOf(firstname) // true

Array Flaten/DuplicateRemoval/Sort

数组平化, 去重, 排序

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];



Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ return a-b})


// arr.flat(Infinity) 无限层扁平化
// Array.from(new Set(arr)) 传递数组给 Set,ES6,去重
// 最后排序

ES5 备选方法

ES5 使用 对象属性单一性

function distinct(a, b) {
    let arr = a.concat(b) // 先将两个数组拼起来
    let result = []
    let obj = {}

    for (let i of arr) {
        if (!obj[i]) { // 如果数组里面没有这个元素
            result.push(i)
            obj[i] = 1
        }
    }

    return result
}

Module Pattern

var myModule = (function() {
  'use strict';

  var _privateProperty = 'Hello World';
  var publicProperty = 'I am a public property';

  function _privateMethod() {
    console.log(_privateProperty);
  }

  function publicMethod() {
    _privateMethod();
  }

  return {
    publicMethod: publicMethod,
    publicProperty: publicProperty
  };
}());




/* private 和 public 的区别就在于是否返回了出来 */
  


console.log(myModule.publicProperty);
// outputs 'I am a public property'
console.log(myModule._privateProperty);
// is undefined protected by the module closure





myModule._privateMethod();
// is TypeError protected by the module closure
myModule.publicMethod();
// outputs 'Hello World'


几种变体

传递参数

var myModule = (function(args) {

/* 将参数传递进去 */

}( ……args……  ));

Named Function & Anonymous Function

var myModule = (function() {

  var privateField = 12345;
  
  function _privateMethod() {
      /* 可以访问到 privateField */
  }
  
  var _privateMethod = function(){
    /* 无法访问到 privateField */
  }

}());


Lodash Template with condition

var itemRowTemplate = _.template([
    '<tr>',
      '<td class="btn-link pointer itemViewLink" data-spgid="<%= spgid %>">',
        '<%= itemnumber %><br><%= itemname %>',
          '<% if (hasMark == true) { %>',
            '<i class="fa fa-flag text-danger pull-right"></i>',
          '<% } %>',
      '</td>',
    '</tr>'
  ].join(''));
  
  /* some other issues */

  itemRowTemplate({
    itemnumber: row.customid,
    itemname: row.groupname,
    spgid: row.surveypartnergroupid,
    itemconcentrationexceeded: row.itemconcentrationexceeded,
    itemstatus: (row.approvalstatus.length>0)?row.approvalstatus:'No Response',
  })

.match()

Get occurrences count of substring in a string

// 
// Example:
// '123123'.match(new RegExp("1", "g"))
// 
// Output:
// ["1", "1"]
//
// If no substring found will return null !!!
// 
let singleCountObj = s.match(new RegExp("a", "g")); 
let singleCount = (singleCountObj !== null) ? singleCountObj.length : 0;


.replace()

正则表达式替换

'213-123-321-321'.replace(/-/g,'')
// 第一个参数没有引号!!!
// 213123321321

.slice()

获取数组的最后一个 elem

var myArray = [1,2,3,4,5,6];
console.log(myArray.slice(-1)[0])

移除特定 elem

// splice(startFromWhichIndex, deleteLength0)
// array self will be updated

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var removed = arr.splice(2,2);

/*
removed === [3, 4]
arr === [1, 2, 5, 6, 7, 8, 9, 0]
*/

.fetch()

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers:{
    'Content-Type': 'application/json'
  }
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));


ajax with serialized form

$.ajax({
  url: 'xxx.cfm?t=10EFCE11946ABB54D46EB44607097E60EAE5384E87E8&cfcid=3e481ba9f2a444c9987f068177150742',
  method: 'post',
  data: $('form').serialize()
})
.done(function(res) {
  // TODO
})
.fail(function() {
  console.log("error");
})
.always(function() {
  console.log("complete");
});


Deep Clone

const deepClone = obj => {
  let clone = Object.assign({}, obj);
  Object.keys(clone).forEach(
    key => (clone[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key])
  );
  return Array.isArray(obj) && obj.length
    ? (clone.length = obj.length) && Array.from(clone)
    : Array.isArray(obj)
      ? Array.from(obj)
      : clone;
};

Reduce

var rv = [];
[1, 2, 3, 4, 5].reduce((a, c) => {
  let str = a + ((c === 1) ? '' : '/') + c;
  rv.push(str);
  return str;
}, []);atte

/*
Input: [1,2,3,4,5]
Output: ["1", "1/2", "1/2/3", "1/2/3/4", "1/2/3/4/5"]
*/

Example

x = [1, 2, 3, 4];
x.reduce((accumulator, currentValue) => (accumulator + currentValue), 0); 
// 0 is the initial value
// output 10
[1,2,3,4,5,6,7,8,9].reduce((sum, e)=>(sum+e))
// 45

[1,2,3,4,5,6,7,8,9].reduce((sum, e)=>(sum+e), 10)
// 55

[{a:1, b:2 }, {a:2, b:3 }].reduce((acc, e)=>acc + e.a, 0)
// 3

[{a:1, b:2 }, {a:2, b:3 }].reduce((acc, e)=>acc + e.b, 0)
// 5

Datatable 自定义 Excel/Print 输出 Column

Datatable 限定特定行 允许/不允许 排序

$('#results').html(res); // res = html pure table with good format
$('#results table').DataTable({
"buttons": [{
  extend: 'print',
  text: '<i class="fa fa-print" title="Print"></i>',
  className: "mb-2",
  exportOptions: {columns: [ 0, 1, 2, 3, 4 ]}
},{
  extend: 'excelHtml5',
  text: '<i class="fa fa-file-excel-o" title="Excel Download"></i>',
  className: "mb-2",
  exportOptions: {columns: [ 0, 1, 2, 3, 4 ]}
}]
});

各种按钮的 Action 列表:https://datatables.net/reference/button/


Datatable 限定特定行 允许/不允许 排序

tags: datatable, excel, print, 限制, 隐藏

"columnDefs": [ { orderable: false, targets: [5] }],

这样第 6 列就不会输出了,注意从 0 开始


Object.assign()

实际上就是将几个参数合并到第一个参数而已啦

var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, c: 2 };
var o3 = { c: 3 };

var obj = Object.assign({}, o1, o2, o3);
//首先将第二个和第一个得到 A, 然后将第三个合并到之前的结果 A
console.log(obj); // { a: 1, b: 2, c: 3 }

需要注意的一点: 第一个参数在合并之后会改变, 其他参数不会

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

Javascript: Select2 多选的实现

实际上很简单

HTML 部分加一个multiple="true" 然后 select2.init 的时候加一个参数isMultiple: isMultiple


Datatable 输出 Excel 时添加额外行

Add extra rows for datatable-exported-excel

方法 1: datatable.init 之前用 JS 添加额外行, 此方法无法添加到 header 之前 方法 2: 对 Excel 进行操作

主要说方法 2:

$('table#datatable').dataTable({
  buttons: [{
    extend: 'excelHtml5',
    customize: function(xlsx) {
      var sheet = xlsx.xl.worksheets['sheet1.xml'];
      var downrows = 7;
      var clRow = $('row', sheet);

      // add styles for the column header, and row[0] will be move down later
      $(clRow[0]).find('c').attr('s', 31);

      //update Row
      clRow.each(function() {
        var attr = $(this).attr('r');
        var ind = parseInt(attr);
        ind = ind + downrows;
        $(this).attr("r", ind);
      });

      // Update  row > c
      $('row c ', sheet).each(function() {
        var attr = $(this).attr('r');
        var pre = attr.substring(0, 1);
        var ind = parseInt(attr.substring(1, attr.length));
        ind = ind + downrows;
        $(this).attr("r", pre + ind);
      });

      function Addrow(index, data) {
        msg = '<row r="' + index + '">'
        for (i = 0; i < data.length; i++) {
          var key = data[i].k;
          var value = data[i].v;
          msg += '<c t="inlineStr" r="' + key + index + '">';
          msg += '<is>';
          msg += '<t>' + value + '</t>';
          msg += '</is>';
          msg += '</c>';
        }
        msg += '</row>';
        return msg;
      }

      //add data to extra rows
      var countryStateList = $('select[name=f_stateidlist] option:selected').map(function(index, elem) {
        return $(elem).attr('title').trim().replace('>>', '');
      }).get().join(",");
      var agencyValue = $('select[name=f_agency] option:selected').val();
      var reportGroupList = $('select[name=f_reportgroup] option:selected').map(function(index, elem) {
        return $(elem).attr('title').trim();
      }).get().join(",");
      var repealValue = $('select[name=f_repealed] option:selected').val();
      var actTypeValue = $('select[name=f_actiontype] option:selected').val();
      var updateStatusValue = $('select[name=f_rulestatus] option:selected').val();
      countryStateList = (countryStateList != "") ? countryStateList: 'All';
      agencyValue = (agencyValue != "") ? agencyValue: 'All';
      reportGroupList = (reportGroupList != "") ? reportGroupList: 'All';
      repealValue = (repealValue != "") ? repealValue: 'All';
      actTypeValue = (actTypeValue != "") ? actTypeValue: 'All';
      updateStatusValue = (updateStatusValue != "") ? updateStatusValue: 'All';
      var r1 = Addrow(1, [{
        k: 'A',
        v: 'Report Filter Criteria:'
      },
      {
        k: 'B',
        v: ''
      }]);
      var r2 = Addrow(2, [{
        k: 'A',
        v: 'Country/State:'
      },
      {
        k: 'B',
        v: countryStateList
      }]);
      var r3 = Addrow(3, [{
        k: 'A',
        v: 'Agency:'
      },
      {
        k: 'B',
        v: agencyValue
      }]);
      var r4 = Addrow(4, [{
        k: 'A',
        v: 'Report Group:'
      },
      {
        k: 'B',
        v: reportGroupList
      }]);
      var r5 = Addrow(5, [{
        k: 'A',
        v: 'Repealed:'
      },
      {
        k: 'B',
        v: repealValue
      }]);
      var r6 = Addrow(6, [{
        k: 'A',
        v: 'Action Type:'
      },
      {
        k: 'B',
        v: actTypeValue
      }]);
      var r7 = Addrow(7, [{
        k: 'A',
        v: 'Update Status:'
      },
      {
        k: 'B',
        v: updateStatusValue
      }]);

      sheet.childNodes[0].childNodes[1].innerHTML = r1 + r2 + r3 + r4 + r5 + r6 + r7 + sheet.childNodes[0].childNodes[1].innerHTML;
    }
  }]
});

参考文献

Excel Export Add Rows and Data excelHtml5


关于 Element.onclick

newElem.onclick = function(){
    document.getElementById(''+newRowID).className="tbl_highlightRow";
    PCC_Notes_deleteNote(newRowID,noteID);
}

注意这里不需要写 new function


动态提交 Form

var form = document.createElement("form");  
form.id = "form";  

var input = document.createElement("input"); 
input.name = "index";
input.value = $(this).data('metaresultid');
form.appendChild(input);

form.method = "POST";  
form.action = "tib.cfm?ajaxModal";  
form.submit();

进制转换

左边是修改前的进制,右边是修改后的

to=parseInt(num).toString(2);
to=parseInt(num).toString(8);
to=parseInt(num).toString(16);
to=parseInt(num,2);
to=parseInt(num,8);
to=parseInt(num,16);
to=parseInt(num,2).toString(8); 
to=parseInt(num,8).toString(2); 
to=parseInt(num,2).toString(16); 
to=parseInt(num,16).toString(2); 
to=parseInt(num,8).toString(16); 
to=parseInt(num,16).toString(8); 

定义 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。


eval()

实例

eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
var x=10
document.write(eval(x+17))

实例 2

主要通过配合 Object 使用,可以访问不确定的属性

person=new Object();
person.age=56;
var attrname="age";
eval("alert(person."+attrname+");");

键盘事件监听

window.onload=function()
{
    var oTxt1=document.getElementById('txt1');
    var oTxt2=document.getElementById('txt2');
    
    oTxt1.onkeydown=function(ev)
    {
        var oEvent=ev||event;
        if(oEvent.keyCode==13 && oEvent.ctrlKey)  //keyCode==13 就是等于按回车键
        {
            oTxt2.value+=oTxt1.value+'\n';
            oTxt1.value='';
        }
    };
};