| 文章标题 | Javascript-命令速查-CheatSheet |
| 发布日期 | 2016-12-31 |
| 文章分类 | Tech |
| 相关标签 | #JS #CheatSheet |
Export 基本语法:
var name = "xxx";
export {
name
}
/*
// 效果相同
export var name="xxx";
*/
……
import {
name
} from "/xxx"
var name1 = "xxx";
var name2 = "yyy";
export {
name1,
name2
}
/*
// 效果相同
export name1;
export name2;
*/
……
import {
name1 as x1,
names as x2
} from "/xxx"
const getdata = () => {
……
}
export default getdata;
// 一个文件中 default 只能使用一次。
……
import getdata from './XXX'
// 特别注意这个地方没有花括号
Default is required due to anonymous export
export default () => console.log("say hello");
……
import str as XXX from 'demo1' //导入的时候没有花括号
[……Array(10).keys()];
// 生成 0-9
[……Array(10).keys()].map(e => e + (new Date).getFullYear())
// 如果需要其他数组就 map 一下
// 这个例子生成了当前年份前后 5 年的数字
请注意 位运算适用于 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
ES6
[……new Set([1, 1, 2, 2, 3, 3])]
// 首先是 Set 去重, Set 的结果是一个 Obj
// 注意 Set 使用时需要关键字 new
// 然后使用 spread operator 展开
数组平化, 去重, 排序
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
})
// 或者使用 spread operator
[……new Set(arr.flat(Infinity))].sort((a, b) => {
return a - b
})
// arr.flat(Infinity) 无限层扁平化, 多维数组全部变为一维数组
// Array.from(new Set(arr)) 传递数组给 Set
// 最后排序
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
}
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……));
var myModule = (function() {
var privateField = 12345;
function _privateMethod() {
/* 可以访问到 privateField */
}
var _privateMethod = function() {
/* 无法访问到 privateField */
}
}());
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',
})
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;
正则表达式替换
'213-123-321-321'.replace(/-/g, '')
// 第一个参数没有引号!!!
// 213123321321
var myArray = [1, 2, 3, 4, 5, 6];
console.log(myArray.slice(-1)[0])
// 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(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({
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");
});
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;
};
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"]
*/
x = [1, 2, 3, 4];
x.reduce((accumulator, currentValue) => (accumulator + currentValue), 0);
// 设置了 0 为初始值, 如果没有初始值那么会将第一个元素当成 acc 放进去, 可能会忽略第一个参数
// output 10
[1, 2, 3, 4, 5, 6, 7, 8, 9].reduce((acc, cv) => (acc + cv))
// 45, 因为一开始 1 就被作为 acc 了
[1, 2, 3, 4, 5, 6, 7, 8, 9].reduce((acc, cv) => (acc + cv), 10)
// 55
[{
a: 1,
b: 2
}, {
a: 2,
b: 3
}].reduce((acc, cv) => acc + cv.a, 0)
// 3, 全部 a 的总和是 3
[{
a: 1,
b: 2
}, {
a: 2,
b: 3
}].reduce((acc, cv) => acc + cv.b, 0)
// 5
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/
$.fn.dataTable.ext.search.push(
/* 这里 push 了一个方法, 每次 draw 的时候就会调用这个方法 */
function(settings, data, dataIndex) {
var status = $('#approvalStatus').val();
// 这里判断 status 和 data[1], 返回 true 的话就显示, 否则不显示
if (status == "") return true;
else if (data[1] == status) return true;
else return false;
}
);
/* 给特定的 filter 绑定事件, 选择之后进行筛选 */
$('#approvalStatus').change(function(event) {
/* temp save the filter to global var */
if ($(this).val() !== '') currStatus = $(this).val();
dataTable.draw(false);
});
var dataTable = $itemDashboardCard.find('table').DataTable({
……});
dataTable.page.info().page; // 当前页数 index, 这个是 index 从 0 开始
dataTable.page.info().pages; // 总页数计数
dataTable.page(currPageIndex).draw(false); // 跳转到 index = currPageIndex 的那一页
tags: datatable, excel, print, 限制, 隐藏
"columnDefs": [{
orderable: false,
targets: [5]
}],
这样第 6 列就不会输出了, 注意从 0 开始
分页, 筛选都会调用到
"drawCallback": function(settings) {
debugger
}
实际上就是将几个参数合并到第一个参数而已啦
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 }, 注意目标对象自身也会改变。
实际上很简单
HTML 部分加一个 multiple="true"
然后 select2.init 的时候加一个参数 isMultiple: isMultiple
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;
}
}]
});
newElem.onclick = function() {
document.getElementById('' + newRowID).className = "tbl_highlightRow";
PCC_Notes_deleteNote(newRowID, noteID);
}
注意这里不需要写 new function
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("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
var x=10
document.write(eval(x+17))
主要通过配合 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 = '';
}
};
};
显示表格模式:
let args = ["%c Environment %c production ",
"padding: 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060;",
"padding: 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e;"
]
console.log(args[0], args[1], args[2])
// or
console.log.apply(this, arguments)
给输出设定样式:
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");
console.table([john, jane, emily], ["firstName"]);
var d = {}
var c = {
next: d
}
var b = {
next: c
}
var a = {
next: b
}
f = function(head) {
if (head.next) {
f(head.next)['next'] = head; // 将递归结果的 next 指向前一个
delete head.next; // 并且删除掉
}
return head;
}
f(a)
// 我们的目的
d.next = c
c.next = b
b.next = a
a.next = undefined
可以看到 [x.next].next = [x]
上方两个变量可以推得一个函数
f(x) {
f(x.next).next = x;
//我们将函数递归点放到了最前端, 这样可以一次性递归到最后一个元素
return x
}
我们需要一个跳出条件:
f = function(x) {
if (x.next) {
f(x.next).next = x;
}
return x
}
然后我们需要清除原始数据
f = function(head) {
if (head.next) {
f(head.next)['next'] = head; // 将递归结果的 next 指向前一个
delete head.next; // 并且删除掉
}
return head;
}
