JavaScript 基本用法

tags: JavaScript

物件陣列的判斷 [{},{}]：

用map將要判斷的物件陣列成新的陣列
再透過新的陣列去做判斷

var result = array.map(value => value.property)

JavaScript取出”陣列-物件“重複/不重複值的方法

result = arr.filter(item => !set.has(item.name) ? set.add(item.name) : false);

2018/10/30學習筆記

Array.splice用法 splice(index位置,刪除數,新增資料)

array.splice(0,1)  //刪除index=0的資料

FormData使用

var fileData = new FormData();
fileData.append("key",value)   //新增
fileData.delete(key)           //刪除
fileData.get(key)              //取得值

for (var value of fileData.values()) {     //取出全部值
    console.log(value);
}

for in 與 of 在陣列及物件上的不同

for( index in array){}    //index
for( value of array){}    //值

for( key in obj){}        //key
for( value of obj){}

async await

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log('Taking a break...');
  await sleep(2000);
  console.log('Two second later');
}

demo();

最簡單的callback function

var funcA = function(callback){

  window.setTimeout(function(){
      
    //要先做的事情........

    // 如果 callback 是個函式就呼叫它
    if( typeof callback === 'function' ){
      callback();
    }
  }, 0);
};

var funcB = function(){
 //等先做的事完成後再做的事情........
};

funcA( funcB );   // 將 funcB 作為參數帶入 funcA()

map 產生新的array

var array1 = [1, 4, 9, 16];
var array2 = array1.map(x => x * 2);

var array1 = [{"a":1},{"a":2}];
var array2 = array1.map(el => {return el.a*4});

A && B 、 A || B 用法

var x = A && B && C  
var x = A || B || C   

刪除array重複值

方法1:
var deduped = [ 1, 1, 'a', 'a' ].filter( (el, i, arr) => arr.indexOf(el) === i);
方法2:
var deduped = Array.from( new Set([ 1, 1, 'a', 'a' ]) );

刪除object重複值

function dedup(arr) {
	var hashTable = {};

	return arr.filter(function (el) {
		var key = JSON.stringify(el);    //js的物件key不會分辨 1 與 '1' 所以要用stringify轉換
		var match = Boolean(hashTable[key]);

		return (match ? false : hashTable[key] = true);
	});
}

？？？

for( let i = 0; i < 5; i++ ) {
  window.setTimeout(function() {
    console.log(i);
  }, 1000);
}
for( var i = 0; i < 5; i++ ) {
  window.setTimeout(function() {
    console.log(i);
  }, 1000);
}

function sleep(ms) {
	console.log("123")
  return new Promise(resolve => setTimeout(resolve, ms));
}
var funcC =async function(callback){
	await sleep(2000);
    // 如果 callback 是個函式就呼叫它
    if( typeof callback === 'function' ){
      callback();
    }
};
funcC(function(){console.log("456")})

for (let i = 0, p = Promise.resolve(); i < 10; i++) {
    p = p.then(_ => new Promise(resolve =>
        setTimeout(function () {
            console.log(i);
            resolve();
        }, Math.random() * 1000)
    ));
}

(async function loop() {
    for (let i = 0; i < 10; i++) {
        await new Promise(resolve => setTimeout(resolve, Math.random() * 1000));
        console.log(i);
    }
})();

function a(){
  var deferred = $.Deferred();
  setTimeout(function(){
    console.log("status in a:",deferred.state());
    //this should trigger calling a or not?
    deferred.resolve("from a");
  },500);
  console.log("a");
  return deferred.promise();
}
function b(){
  var deferred = $.Deferred();
  setTimeout(function(){
    console.log("status in b:",deferred.state());
    deferred.resolve("from b");
  },1000);
  console.log("b");
  return deferred.promise();
}
//synchronous function
function c(){
  var deferred = $.Deferred();
  console.log("c");
  console.log("status in c:",deferred.state());
  deferred.resolve("from c");
  return deferred.promise();
}
function test(){
  var d = jQuery.Deferred(), 
  p=d.promise();
  //instead of the loop doing the following has the same output
  p.then(a).then(b).then(c);
  console.log(d)
  d.resolve();
  
}
test();

Array 用法表