javascript 總結筆記

"use strict"; //在正常模式中，如果一個變數沒有宣告就賦值，預設是全域性變數。嚴格模式禁止這種用法，全域性變數必須顯式宣告。

v = 1; // 報錯，v未宣告

for (i = 0; i < 2; i++) { // 報錯，i未宣告
}
//因此， 嚴格模式下， 變數都必須先用var命令宣告， 然後再使用。

function f() { 
return this; //非嚴格模式下 因為"this"指向全域性物件，返回全域性物件
}

function f() { 
"use strict"; //這行程式碼看起來像是字串，而且也沒有賦值給任何變數，但其實它是一個編譯指示（pragma），
// 用於告訴支援的 JavaScript引擎切換到嚴格模式
return this; //嚴格模式下 this的值為undefined，
}
複製程式碼

var num2 = Number(""); //0 
var num4 = Number(true); //1 
var num3 = Number("000011"); //11
複製程式碼

var num2 = parseInt(""); // NaN 
var num1 = parseInt("1234blue");
// 1234    剛發現 666
var num4 = parseInt(22.5); // 22 
var num5 = parseInt("070"); // 56（八進位制數）

var num6 = parseInt("70"); // 70（十進位制數）

var num7 = parseInt("0xf"); // 15（十六進位制數）
複製程式碼

[] === '' 
[]== ''
複製程式碼

其中 null型別
 typeof null === "object" 
複製程式碼

if (isWaitting && isWaitting instanceof Array) {}
複製程式碼

var shallowCopy = function(obj) { //一個淺拷貝方法
應該知道為什麼有這個方法吧 （陣列、物件中地址引用的鍋）
if (typeof obj != 'object') return;
var newObj = obj instanceof Array ? [] : {};
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
return newObj;

}
複製程式碼

var deepCopy = function(obj) {
if (typeof obj !== 'object') return; //null NaN Math
var newObj = obj instanceof Array ? [] : (!obj ? null : {});
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) :
obj[key];
}
}
return newObj;
}
複製程式碼

<script type = "text/javascript" defer = "defer"  src = "example1.js" > 
</script> ）
複製程式碼

<script type = "text/javascript"  async src = "example1.js" >
< /script> 
<script type = "text/javascript"  async src = "example2.js" >
< /script> 
複製程式碼

var a = 0;
a++;
++a;
複製程式碼

var a = 0;
a + +1 輸出什麼？
//1 why?

'' + 1
1 + ''
'1' + '2'
1 + true

輸出什麼？

var num1 = 2;
var num2 = 20;
var num3 = --num1 + num2; // 輸出什麼？

0.1 + 0.2 // 輸出什麼？ 應該怎麼做才能不丟失精度呢？考慮
複製程式碼

if（ a != null && typeof a != 'undefined'） {}
複製程式碼

if（a） {} // a 不能是 0 -0 NaN '' false null undefined
複製程式碼

!!!a //強制轉化a的型別為Boolean型別
複製程式碼

a && b //短路運算 a如果為false 那麼b不用判斷了 懶！

var c = a || 'fd' //預設賦值 a如果為false 那麼c賦值為‘fd’ 

Infinity //瞭解下就行 我都沒遇到過 無窮大
-
-Infinity //無窮大的負數 你說是什麼呢？

for (;;) { // 無限迴圈 doSomething(); } 
for (true) { // 無限迴圈 doSomething(); } 

continue; break; //只能使用在迴圈遍歷中 // foreach（） map（）裡能用不 ？思考下
 
複製程式碼

var superClass = function() {
this.name = null;
}

superClass.prototype.setName = function(name) {
this.name = name;
}
superClass.prototype.getName = function() {
return this.name;
}
var superC = new superClass();
superC.setName('fd');
superC.getName();

var subClass = superClass.prototype; //繼承
subClass.prototype.mackSound = function() {
this.name = '電風扇';
}
複製程式碼

class superClass2 {
constructor() {
this.name = name;
}
getName() {
return this.name;
}

setName(name) {
this.name = name;
}
show() {
console.log(this.name);
}
}
var as = new superClass2();

as.setName('fdsf');

as.show();
class superClass3 extends superClass2 { //繼承
}
var sdf = new superClass3();
複製程式碼

(function sd() { console.log(12) })()//自動執行函式 
複製程式碼

function adds() {
var something = "ssh";
var another = [1, 2, 3];

function doSomething() {
alert(something);
}

function doAnother() {
alert(another.join(","));
}
return {
 doSomething: doSomething,
doAnother: doAnother
};
}
var fn = adds();
fn.doSomething(); // cool
fn.doAnother(); // 1 ! 2 ! 3
//私有資料變數something和another，以及doSomething()
和doAnother() 兩個內部函式，
//它們的語法作用域（而這就是閉包）也就是foo() 的內部作用域。
複製程式碼

var a = (function() {
var i = 0;
return function() {
return i++;
}
})()
複製程式碼

var b = (function(name) {
var i = 0;

function identify() {
alert(name.toUpperCase());
}

function add() {
return i++;
}
return{
identify:identify,
add:add
}
})('ssh')
複製程式碼

var a = 10;
function sum(b) {
return a + b;
}

function add() {
var a = 20;
var c = sum(30);
return c;
}

add(); //40
複製程式碼

var x = {
name:'ssh',
age:18
}

var fn = function(){
console.log(this);
console.log(this.name);
}
fn.call(x);//fn.apply(x)
複製程式碼

var arr = [1,2,4,5,7,34]
Math.max.call(null,1,2,4,5,7,34) //34
Math.max.apply(null,arr) //34
複製程式碼

var arr = [1, 2, 3];
var c = arr;
arr = [1, 2];
console.log(c); //[1, 2, 3]
arr.push(4);
console.log(arr); //[1, 2,4]
console.log(c); //[1, 2, 3]

var arr2= [1, 2, 3];
var c2 = arr2;
arr2.push(4);
console.log(arr2); //[1, 2, 3,4]
console.log(c); //[1, 2, 3]

var obj = [{ name: 'ssh' }, { name: 'ssh2'
}]
var obj2 = [];
obj.forEach((item, index) => {
item.name == 'ssh' ? obj2.push(item) : false;
})
obj2[0].name = 'ssh2222';
console.log(obj) // 有變化嘛如果有 why?
複製程式碼

Var a = new Date();
本地全部時間格式：
toLocaleString(); // "2017/11/16 下午4:27:09"
a.toLocaleDateString() //"2017/11/16"
toLocaleTimeString() // "下午4:27:09"
getFullYear() //2017
getTime()
getTime() 返回從 1970 年 1 月 1 日至今的毫秒數。//+new Date()
getDay()
//如何使用 getDay() 和陣列來顯示星期幾，而不僅僅是數字  //週日 =>0 ？
複製程式碼

push pop 都是從陣列後面開始處理資料的 （棧）
shift unshift 從頭開始 （佇列）
slice() 相當於重新定義了個陣列 即不同的指標
splice() //從陣列中移除一個或多個陣列，並用新的item代替他們 返回被替換的陣列

var a = ['a','b','c','d'];
var b = a.splice(1,3,'f');
a// ["a", "f"]
b// ["b", "c","d"]
複製程式碼

//使用陣列的indexOf()方法可以很簡單的達到目的。
Array.prototype.unique = function() {
// 建立一個新的臨時陣列，用於儲存輸出結果
var n = []; 
// 遍歷當前陣列
for (var i = 0; i < this.length; i++) {
// 如果當前陣列的第i個元素已經儲存進了臨時陣列，那麼跳過，否則把當前項push到臨時陣列裡面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
// if (!n.includes(this[i]))
n.push(this[i]);
}
return n;
}
複製程式碼

//把已經出現過的元素通過下標的形式存入一個Object內。下標的引用的實現原理利用的是雜湊演算法，要比用indexOf()搜尋陣列快的多。
Array.prototype.unique = function() {
// n為hash表，r為臨時陣列
var n = {}, r = [];
for (var i = 0; i < this.length; i++) {
// 如果hash表中沒有當前項
if (!n[this[i]]) {
// 存入hash表
n[this[i]] = true;
// 把當前陣列的當前項push到臨時陣列裡面
r.push(this[i]); 
}
}
return r;
}
複製程式碼

Array.prototype.unique = function() {
this.sort();
var re = [this[0]];
for (var i = 1; i < this.length; i++) {
if (this[i] !== re[re.length - 1]) {
re.push(this[i]);
}
}
return re;
}
複製程式碼

// [...new Set([1,1,3,4,3,56,6])] 最簡單的方法
複製程式碼

Array.prototype.$remove = function (v) {
const index = this.indexOf(v) //this代表陣列本身
if (index !== -1) this.splice(index, 1)
return this;
}

const arr = [1, 2, 3]
arr.$remove(2) //下標從1開始
複製程式碼

Array.prototype.$delete = function (v){
var set = new Set(this);// this 代表該陣列本身
set .delete(v);
return [...set]
}
var arr = [1, 2, 3]
arr.remove(2)// [1, 3]
複製程式碼

console.log('先執行這裡');
setTimeout(() => {
console.log('執行啦1')
},10);
setTimeout(() => {
console.log('執行啦2')
},0);

console.log('最後執行這裡');
複製程式碼

function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}

timeout(100).then((value) => {
console.log(value); //'done'
});
複製程式碼

const wait = function(val) {
    // 定義一個 promise 物件
    const promise = new Promise((resolve, reject) => {
            // 將之前的非同步操作，包括到這個 new Promise 函式之內
            const task = function() {
                if (val) {
                    console.log('執行完成');
                    resolve(true)
                } else { console.log('執行失敗');
                    reject(false) }
                // callback 中去執行 resolve 或者 reject
            }
            setTimeout(task, 2000)
        })
        // 返回 promise 物件
    return promise
}

const w = wait (1);
var a = 0;
w.then((val) => {
    console.log('ok 1' + val);
    a = 231;
    console.log(a);
    return w;
}, (val) => {
    console.log('err 1' + val)
}).then((val) => {
    console.log('ok 2' + val);
    var b = a + 2;
    console.log(b)
}, (val) => {
    console.log('err 2' + val)
})
複製程式碼

var asyncReadFile = async function () {
var f1 = await readFile('/etc/fstab');
var f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};//注意 封裝的readFile ()方法要返回promise物件

async function getStockPriceByName(name) {
var symbol = await getStockSymbol(name);
var stockPrice = await getStockPrice(symbol);
return stockPrice;
}
getStockPriceByName('goog').then(function (result) {
console.log(result);
});
複製程式碼

async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
}

// 另一種寫法 （推薦）
async function myFunction() {
await somethingThatReturnsAPromise().catch(function
(err) {
console.log(err);
});}
複製程式碼

const fs = require('fs')
const path = require('path')  // 後面獲取檔案路徑時候會用到
const readFilePromise = function (fileName) {
    return new Promise((resolve, reject) => {
        fs.readFile(fileName, (err, data) => {
            if (err) {
                reject(err)  // 注意，這裡執行 reject 是傳遞了引數，後面會有地方接收到這個引數
            } else {
                resolve(data.toString())  // 注意，這裡執行 resolve 時傳遞了引數，後面會有地方接收到這個引數
            }
        })
    })
}
複製程式碼

const fullFileName = path.resolve(__dirname, '../data/data2.json')
const result = readFilePromise(fullFileName)
result.then(data => {
    // 第一步操作
    console.log(data)
    return JSON.parse(data).a  // 這裡將 a 屬性的值 return
}).then(a => {
    // 第二步操作
    console.log(a)  // 這裡可以獲取上一步 return 過來的值

})
複製程式碼

const fullFileName = path.resolve(__dirname, '../data/data2.json')
const result = readFilePromise(fullFileName)
result.then(data => {
    console.log(data)
    return JSON.parse(data).a;
}).then(a => {
    console.log(a)
}).catch(err => {
    console.log(err.stack)  // 這裡的 catch 就能捕獲 readFilePromise 中觸發的 reject ，而且能接收 reject 傳遞的引數
})
複製程式碼

// Promise.all 接收一個包含多個 promise 物件的陣列

Promise.all([result1, result2]).then(datas => {
    // 接收到的 datas 是一個陣列，result1, result2 依次執行，返回包含了多個 promise的內容
    console.log(datas[0])
    console.log(datas[1])
})

  var funcA = function(){
                console.log("funcA");
                return "hello,funA";
            }
            var funcB = function(){
                console.log("funcB");
                return "hello,funB";
            }
          var a = [funcA ,funcB];
          Promise.all([funcA , funcB]).then(datas => {   //  Promise.all(a).then()
    // 接收到的 datas 是一個陣列，依次包含了多個 promise 返回的內容
    console.log(datas[0])
    console.log(datas[1])
})
複製程式碼

// Promise.race 接收一個包含多個 promise 物件的陣列
Promise.race([result1, result2]).then(data => {
// data 即最先執行完成的 promise 的返回值
console.log(data)
})
複製程式碼

var uploadQuestion = function(questions) {
var promises = [];
angular.forEach(questions, function(question) {
var promise = $http({ //
url: 'upload/question',
method: 'POST',
data: question
});
promises.push(promise);

});
return $q.all(promises);
}
複製程式碼

var iWantResolve = true;

function es6promise() {
    return $q(function(resolve, reject) {
        $timeout(function() {
            if (iWantResolve) {
                resolve("es6promise resolved");
            } else {
                reject("es6promise reject");
            }
        }, 1000)
    })
}

es6promise()
    .then(function(data) {
        console.log(data);
    })
    .catch(function(err) {
        console.log(err);
    });

// if(iWantResolve == true) output: es6promise resolved
// if(iWantResolve = false) output: es6promise reject
複製程式碼

function commonJsPromise() {
    var deferred = $q.defer();
    $timeout(function() { //可以沒有
        deferred.notify("commonJS notify");
        if (iWantResolve) {
            deferred.resolve("commonJS resolved");
        } else {
            deferred.reject("commonJS reject");
        }

    }, 500);
    return deferred.promise;
}

commonJsPromise()
    .then(function /** success callback**/ (data) {
        console.log(data);

    }, function /** error callback **/ (err) {
        console.log(err);
    }, function /** progress callback **/ (update) {
        console.log(update);
    });

// if(iWantResolve == true) output: commonJS notify commonJS resolved
// if(iWantResolve = false) output: commonJS notify commonJS reject
複製程式碼

$q.all([es6promise(), commonJsPromise()])
    .then(function (dataArr) {
        console.log("$q.all: ", dataArr);
    }, function (err) {
        console.log("$q.all: ", err)
    }, function /** unnecessary **/ (update) {
        console.log("$q.all", update);
    });
// if(iWantResolve == true) output: $q.all:  ["es6promise resolved", "commonJS resolved"]
// if(iWantResolve = false) output: $q.all:  es6promise reject
複製程式碼

const jsPromise =
Promise.resolve($.ajax('/whatever.json'))
jsPromise.then(data => {
// ...
})//ajax 非同步執行方法
複製程式碼

const w9991 = wait(1)
w9991.then((val) => {
console.log('ok 1'+val);// ok 1true ok 2true //2不是undefined
return w9991;
}).then((val) => {
console.log('ok 2'+val); 
})
複製程式碼

function readFilePromise() {
    return new Promise((resolve, reject) => {
        resolve(setTimeout(() => {
            console.log(1111);
        }));
    })
};

const readFileAsync = async function() {
        const f1 = await readFilePromise();
        const f2 = await readFilePromise();
        return 'done' // 先忽略，後面會講到
    }
    // 執行
const result = readFileAsync() //1111 1111
result.then(data => {
    console.log(data) // done
})
複製程式碼

result.then(data => {
console.log(data) // done
})
複製程式碼