前端筆記

nrm(npm源管理工具)

安裝nrm

sudo npm install -g nrm

列出所有源

nrm ls

修改源

nrm use <origin>

n(node版本管理工具)

安裝n

sudo npm install -g n

切換版本

n <version> #可能需要sudo

安裝最新版

n latest

安裝穩(wěn)定版本

n stable

刪除某個(gè)版本

n rm 6.9.1

以指定的版本來執(zhí)行腳本

n use 6.9.1 some.js

css定位

如下設(shè)置元素的內(nèi)邊距和邊框不再會(huì)增加它的寬度

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

absolute會(huì)相對(duì)于一個(gè)relative元素定位,fixed相對(duì)于視窗定位。
absolute是最棘手的position值。 absolute 除了不是相對(duì)于視窗而是相對(duì)于最近的positioned祖先元素定位外,其他與 fixed的表現(xiàn)類似。

考慮使用inline-block布局,但是必須設(shè)置每列的寬度

使用 Flexbox 的簡單居中布局

.vertical-container {
   height: 300px;
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

自調(diào)用函數(shù)

(function (a,b){
     var   result = a+b;
     return   result;
})(10,20);

Map

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);//注意:雙括號(hào)

var m = new Map(); // 創(chuàng)建Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam');

Set

var s = new Set([1, 2, 3, 3, '3']);// 創(chuàng)建Set
s.add(4);
s.delete(3);

for ... of循環(huán)和for ... in循環(huán)區(qū)別

for ... in循環(huán)遍歷的實(shí)際上是對(duì)象的屬性名稱。
for ... of循環(huán)遍歷的是對(duì)象的值

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍歷Array
    alert(x);
}
for (var x of s) { // 遍歷Set
    alert(x);
}
for (var x of m) { // 遍歷Map
    alert(x[0] + '=' + x[1]);
}

使用iterable內(nèi)置的forEach方法

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) { //注意:E大寫
    // element: 指向當(dāng)前元素的值
    // index: 指向當(dāng)前索引
    // array: 指向Array對(duì)象本身
    alert(element);
});

Set與Array類似,但Set沒有索引,因此回調(diào)函數(shù)的前兩個(gè)參數(shù)都是元素本身:

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    alert(element);
});

Map的回調(diào)函數(shù)參數(shù)依次為value、key和map本身:

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    alert(value);
});

rest參數(shù)

由于JavaScript函數(shù)允許接收任意個(gè)參數(shù),于是我們就不得不用arguments來獲取所有參數(shù):

function foo(a, b, ...rest) {//注意:rest參數(shù)只能寫在最后,前面用...標(biāo)識(shí)
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 結(jié)果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 結(jié)果:
// a = 1
// b = undefined
// Array []

'use strict';

map()問題

'use strict';

var arr = ['1', '2', '3'];
var r = arr.map(parseInt);
alert('[' + r[0] + ', ' + r[1] + ', ' + r[2] + ']');

結(jié)果提示是[1, NaN, NaN]。

原因:由于map()接收的回調(diào)函數(shù)可以有3個(gè)參數(shù):callback(currentValue, index, array),通常我們僅需要第一個(gè)參數(shù),而忽略了傳入的后面兩個(gè)參數(shù)。不幸的是,parseInt(string, radix)沒有忽略第二個(gè)參數(shù),導(dǎo)致實(shí)際執(zhí)行的函數(shù)分別是:

parseInt('0', 0); // 0, 按十進(jìn)制轉(zhuǎn)換
parseInt('1', 1); // NaN, 沒有一進(jìn)制
parseInt('2', 2); // NaN, 

按二進(jìn)制轉(zhuǎn)換不允許出現(xiàn)2
可以改為r = arr.map(Number),因?yàn)?code>Number(value)函數(shù)僅接收一個(gè)參數(shù)。

filter()篩選出素?cái)?shù)

'use strict';
function get_primes(arr) {
    return arr.filter(function(x){
        for(var i=2; i <= (x/2); i++){
            if(x%i === 0){
                return 0;
            }
        }
    return x === 1 ? 0 : 1;
    //參考Jemair丶,省了一行針對(duì)1的素?cái)?shù)判斷
});

綁定一次點(diǎn)擊事件(防止重復(fù)提交等)

$('#killBtn').one('click',function(){
//
});

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容