你平常不會用到的js

jsnote.js

str1 = "http://www.google.tw/search?q=中文";
obj = {
    get a(){return '1';},
    set b(value){this.c = value;},
    c:1
};
class Cls{
    constructor(name){
        console.log("hello",name);
        if (typeof(new.target)==='function')
            new.target()
    }
}
//symbol([String]) 作為key或event的索引
symbol=Symbol('symbol string')
obj[symbol]='hello world'
console.log(obj[symbol])                                                        //'hello world'

// for (key in obj){console.log(key)}                                           // 遍歷obj的key 
for (key in obj) console.log(key);                                              //a b c
for (key in ['1', 2]) console.log(key);                                         //0 1
// for (value of array){console.log(value)}                                     //遍歷array的value
for (value of ['1', 2]) console.log(value);                                     //'1' 2
// Object.keys(obj)                                                             // 回傳Array,值為obj的key
Object.keys(obj)                                                                //['a', 'b','c']
// Object.values(obj)                                                           // 回傳Array,值為obj的value
Object.values(obj)                                                              //[ '1', undefined, 1 ]
// Object.entries(obj)                                                          // 回傳Array,值為obj的[key,value]
Object.entries(obj)                                                             //[ [ 'a', '1' ], [ 'b', undefined ], [ 'c', 1 ] ]
// Object.getOwnPropertyDescriptors(obj)                                        //返回obj 所有屬性特性值
Object.getOwnPropertyDescriptors(obj)                                           //{ a:{ get: [Function: get a], set: undefined, enumerable: true, configurable: true }, b:{ get: undefined, set: [Function: set b], enumerable: true, configurable: true }, c: { value: 1, writable: true, enumerable: true, configurable: true }, [Symbol(symbol string)]:{ value: 'hello world', writable: true, enumerable: true, configurable: true } }
// Object.getOwnPropertyDescriptor(obj,attributeName)                           //返回obj 指定屬性特性值
Object.getOwnPropertyDescriptor(obj,'c')                                        //{ value: 1, writable: true, enumerable: true, configurable: true }
// Object.getOwnPropertyNames(obj)                                              //返回所有屬性名稱
Object.getOwnPropertyNames(obj)                                                 //[ 'a', 'b', 'c']
// Object.getOwnPropertySymbols(obj)                                            //返回所有符號
Object.getOwnPropertySymbols(obj)                                               //[ Symbol(symbol string) 
// obj.__lookupGetter__("attributeName")                                        //返回getter函數定義
obj.__lookupGetter__("a")                                                       //"function get a(){return \'1\';}"
// obj.__lookupSetter__("attributeName")                                        //返回setter函數定義
obj.__lookupSetter__("b")                                                       //'function set b(value){this.c=value;}'
// obj.__defineGetter__("attributeName",function(){...})                        // 設定 getter function
obj.__defineGetter__("a",function(){return this.c*2;})                          //
// obj.__defineSetter__("attributeName",function(value){...})                   // 設定 Setter function
obj.__defineSetter__("b",function(value){console.log(value);this.c *= value;})  //
// Object.defineProperty(obj,attribute,property)                                // 設定屬性特性
Object.defineProperty(obj,'b',{enumerable:false})       
Object.keys()                                                                   // ['a', 'c']
// Object.defineProperties(obj,property)                                        // 設定多個屬性特性
Object.defineProperties(obj,{a:{configurable:true},c:{value:20}})
Object.defineProperties(obj,{a:{enumerable:false}})                             // TypeError
console.log(obj.c)                                                              // 20
// Object.setPropertyOf(type,propertys)                                         // 設定原型（好比新增修改靜態屬性方法)
Object.setPrototypeOf(obj,{hello:function(){console.log("world")}})
obj.hello()                                                                  // 'world'
// /* 
//     //defineProperty property              get|set不能與writable|value 同時設置
//     {
//       configurable : boolean,            //可否改變enumerable,configurable,writable的值
//       enumerable : boolean,              //可否使用Object.keys|values|entries 或for ( var in obj )找到它
//       get : function(){return var},      //設定getter函數
//       set : function(value){...},        //設定setter函數
//       writable : boolean,                //可否使用'='設定值(是否可寫)
//       value :var                         //設定值
//     }
// */
// /* 
//     //definePropertys property
//     {
//       "attribute":{
//         configurable : boolean,          //可否改變enumerable,configurable,writable的值
//         enumerable : boolean,            //可否使用Object.keys|values|entries 或for ( var in obj )找到它
//         get : function(){return var},    //設定getter函數
//         set : function(value){...},      //設定setter函數
//         writable : boolean,              //可否使用'='設定值(是否可寫)
//         value :var                       //設定值
//       },
//       ...
//     }
// */

// Object.preventExtensions(obj)            // 不可再擴展（增加屬性）
Object.preventExtensions(obj)
// Object.isExtensible(obj)                 // 是否可擴展
Object.isExtensible(obj)                    // false
// Object.seal(obj)                         // 不可再擴展,不可修改特性
Object.seal(obj)
// Object.isSealed(obj)                     // 是否為不可再擴展,不可修改特性
Object.isSealed(obj)                        // true
// Object.freeze(obj)                       // 不可再擴展,不可修改特性,不可寫入（唯讀之意）
Object.freeze(obj)
// Object.isFrozen(obj)                     // 是否唯讀
Object.isFrozen(obj)                        // true


//bind,call,apply
function f (arg1, arg2) {
  console.log(this.value, arg1, arg2);
}
o1 = {value:1};
o2 = {value:2};
o3 = {value:3};
//bind(obj)                 //產生個新函數,其this為obj
newf = f.bind(o1);
newf(4,5);                  // 1 4 5
f.bind(o1)(4,5);            // 1 4 5
//call(obj,arg)             // 第一個參數為this,爾後依序帶入
f.call(o2,5,6);             // 2 5 6
//f.apply(obj,[arg])        // 第一個參數為this,第二參數為陣列當函數參數
f.apply(o3,[6,7]);          // 3 6 7


// Reflect 像Object 且更多變
// Reflect.apply(function,objthis,[arg])
Reflect.apply(f,o3,[6,7])   // 3 6 7
// Reflect.construct(class, [arg][,function OverwriteNewTarget(){...} ])            //如同 new class(),可複寫 new.target
Reflect.construct(Cls, ['John Cena'] ,function(){console.log('How are you?');});    //Hello John Cena How are you?
// Reflect.defineProperty(obj,'attributeName',property)                             //如 Object.defineProperty , 但返回 true,false,TypeError 而 Object.defineProperty 可能 TypeError
Reflect.defineProperty(obj,'a',{enumerable:false})                                  //false
Object.defineProperty(obj,'a',{enumerable:false})                                   //TypeError
// Reflect.deleteProperty(obj,'attributeName')                                      //如同 delete obj['attributeName'] ,但返回 true,false,TypeError
Reflect.deleteProperty(obj,'a')                                                     //false
// Reflect.get(obj,'attributeName'[,receiver])                                      //取得值
Reflect.get(obj,'a')                                                                //40
// Reflect.getOwnPropertyDescriptor(obj,'attributeName')                            //如同 Object.getOwnPropertyDescriptor ,但可能拋出TypeError
Reflect.getOwnPropertyDescriptor('string','s')                                      //TypeError
Object.getOwnPropertyDescriptor('string','s')                                       //undefined
// Reflect.getPrototypeOf(obj)                                                      //如同 Object.getPrototypeOf ,但可能拋出TypeError
Reflect.getPrototypeOf(obj)                                                         //{ hello: [Function: hello] }
Reflect.getPrototypeOf(1)                                                           //TypeError
// Reflect.has(obj,'attributeName')                                                 //如同 'in' 符號
Reflect.has(obj,'a')==='a' in obj                                                   //true
// Reflect.isExtensible(obj)                                                        //如同Object.isExtensible ,但可能拋出TypeError
Reflect.isExtensible(1)                                                             //TypeError
Object.isExtensible(1)                                                              //false
// Reflect.ownKeys(obj)                                                             //如同Object.keys 不受enumerable影響,symbol也會show
Reflect.ownKeys(obj)                                                                //[ 'a', 'b', 'c', Symbol(symbol string) ]
Object.keys(obj)                                                                    //[ 'a', 'c']
// Reflect.preventExtensions(obj)                                                   //如同Object.preventExtensions 返回true,false,TypeError
Reflect.preventExtensions(obj)                                                      //true
Object.preventExtensions(obj)                                                       //obj
// Reflect.set(obj, 'attributeName', value [, receiver])                            //如同 '=' 符號 返回true,false,TypeError
Reflect.set(obj, 'a', 10)                                                           //false
// Reflect.setPrototypeOf(obj, 'attributeName')                                     //如同 Object.setPrototypeOf 返回 true,false,TypeError
Reflect.setPrototypeOf(1, {})                                                       //TypeError
Object.setPrototypeOf(1, {})                                                        //1



// Proxy 類似hook 的概念
var proxy= new Proxy(obj, {
  get: function (target, key, receiver) {
    console.log("target:", target)
    console.log("key:", key)
    console.log("receiver is this proxy:", receiver===proxy) //true
    console.log("Reflect:", Reflect);
    return Reflect.get(target, key, receiver); //overwrite get,if no return no Reflect then return undefined
  },
  set: function (target, key, value, receiver) {
    console.log("target:", target)
    console.log("key:", key)
    console.log("value:", value)
    console.log("receiver is this proxy:", receiver===proxy)
    console.log("Reflect:", Reflect);
    return Reflect.set(target, key, value, receiver); //overwrite set,if no Reflect then set invalid
  }
})
/* 還可用在
//   //getPrototypeOf
//   //setPrototypeOf
//   //isExtensible
//   //preventExtensions
//   //getOwnPropertyDescriptor
//   //defineProperty
//   //has
//   //deleteProperty
//   //ownKeys
//   //apply
//   //construct
*/


// promise
new Promise (function (resolve, reject) {
  resolve('return1');   //如同 return
  reject('error1');     //如同 throw
}).then(function(arg) { // arg == 'return1'
  console.log(arg);     
  throw('error2'); 
  return 'return2';
}).catch(function(err) { // err == 'error2'
  console.log(err);
})
// return1
// error2


// async
function callme1(time) {
    return Math.random()
  }
function callme2(time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function(){
      resolve(Math.random())
    },time)
  })
}

async function asyncFunc (time) {
    result=await callme1(time)
    console.log(result)                                 // 隨機值
    console.log('ok1')
    result=await callme2(time)                          // 返回Promise所得到的隨機值 而非Promise物件
    console.log('typeof:',typeof(result))
    console.log(result)
    console.log('ok2')
    return "hello world"
}

asy=asyncFunc(3000)
console.log(typeof(asy))                                // async 函數返回 Promise物件
asy.then((result)=>{console.log(result)})               // hello world


// generator
result=[]
function * generator(a) {
  console.log('===start===')
  console.log('a:',a)
  b = yield 1
  console.log('b:',b)
  c = yield 2
  console.log('c:',c)
}
gen=generator("this is a")                              // 代入a變數,返回generator物件,尚未開始執行

console.log('===let go===')
result.push( gen.next() )                               // output:'===start==='  arg:代什麼都無效果
result.push( gen.next("this is b") )                    // 代入b變數
result.push( gen.next("this is c") )                    // 代入c變數
console.log(result)                                     // [{ value: 1, done: false }, { value: 2, done: false }, { value: undefined, done: true }]




// encodeURI(string)                                    // encode ASCII、number、~!()*' .          no encode
encodeURI(str1)                                         // 'http://www.google.tw/search?q=%E4%B8%AD%E6%96%87'
// encodeURIComponent(string)                           // encode ASCII、number、~!()*'@#$&=:/,;?+ no encode
str2=encodeURIComponent(str1)                           // 'http%3A%2F%2Fwww.google.tw%2Fsearch%3Fq%3D%E4%B8%AD%E6%96%87'
// decodeURI(string)                                    // decode ASCII、number、~!()*'            no decode
decodeURI(str2)                                         // 'http%3A%2F%2Fwww.google.tw%2Fsearch%3Fq%3D中文'
// decodeURIComponent(string)                           // decode ASCII、number、~!()*'@#$&=:/,;?+ no decode
decodeURIComponent(str2)                                // 'http://www.google.tw/search?q=中文'
//string.padStart(length [, padding])                   //string 使用 padding 填充字串開頭使 string.lenght==length, 預設padding==' '
str1.padStart(39)                                       //'       http://www.google.tw/search?q=中文'
str1.padStart(39,'h')                                   // 'hhhhhhhhttp://www.google.tw/search?q=中文'
str1.padStart(39,'he')                                  // 'hehehehhttp://www.google.tw/search?q=中文'
// string.padEnd(length [, padding])                    //string 使用 padding 填充字串末端使 string.lenght==length, 預設padding==' '
str1.padEnd(39)                                         // '       http://www.google.tw/search?q=中文'
str1.padEnd(39,'h')                                     // 'http://www.google.tw/search?q=中文hhhhhhh'
str1.padEnd(39,'he')                                    // 'http://www.google.tw/search?q=中文heheheh'
// [obj1,obj2,obj3,]                                    // 陣列末端','不報錯
[{a:1},{b:2},{c:3},]                                    // [ { a: 1 }, { b: 2 }, { c: 3 } ]
// [..."string"]                                        // 'string'.split('')
[..."string"]                                           // ["s","t","r","i","n","g"]
// [...[obj1,obj2,obj3]]                                // [obj1,obj2,obj3]
[...[{a:1},{b:2},{c:3}]]                                // [ { a: 1 }, { b: 2 }, { c: 3 } ]


//ArrayBuffer
ab=new ArrayBuffer(12)      
//new [Uint](8|16|32|8)Array(obj: ArrayBuffer)
u8a=new Uint8Array(ab)
u8a[0]=72
u16a=new Uint16Array(u8a.buffer)
u16a[1]=27756
dv=new DataView(u16a.buffer)
dv.setUint16(4,8303,true) //littleEnd
dv.setUint32(6,1466921580)
i16a=new Int16Array(ab)
i16a[5]=8548
i8a=new Int8Array(ab)
i8a[1]=101
str=String.fromCharCode.apply("", u8a)
buf=new Uint8Array([].map.call(str,function(c){return c.charCodeAt(0)}) )