JavaScript

// event.eventPhase
capturing=1; target=2; bubbling=3

EventTarget.addEventListener(type, listener, useCapture)

let areas = {
  "24": "CS",
  "30": "CA",
  "23": "SZ",
  "22": "TX",
  "ok": "yes, ok",
  "okk": "yes, okk"
};
for(let area in areas) {
  alert(area); // 22, 23, 24, 30, ok, okk
}

function Person() { this.name = 'okk'; }
Person.prototype.getName = function() { return this.name; }
var person = new Person();
Object.defineProperty(person, 'age', {
  writable: true, configurable: true,enumerable: true, value: 22
});
console.log(Object.keys(person)); // ['name', 'age']
for(item in person){console.log(item)}; // name age getName

// 1. 不会遍历到对象属性及其原型属性
Array.prototype.getLength = function() { return this.length; };
let arr = ['a', 'b', 'c'];
arr.name = 'Ok';
Object.defineProperty(arr, 'prop', {
  enumerable: true, value: 22, writable: true, configurable: true
});
for(let i of arr) { console.log(i); } // a,b,c

// 2. 与 Object.keys 配合遍历对象
let person = { name: 'Ok', age: 22, area: 'tx' }
for(var key of Object.keys(person)) { console.log(person[key]); } // ok 22 tx

// 3. 配合 entries 输出数组索引和值/对象的键值
let arr = ['a', 'b', 'c'];
for(let [index, value] of Object.entries(arr)) { console.log(index, ':', value); } // 0:a, 1:b, 2:c

let obj = {name: 'Ok', age: 22, city: 'tx'};
for(let [key, value] of Object.entries(obj)) { console.log(key, ':', value); } // name:Ok, age:22, city:tx

class ExplicitIterator { // 显式迭代器实现 => 实现可迭代接口 iterable
  [Symbol.iterator](){ return { next(){ // 调用默认迭代器工厂函数返回实现迭代器接口的迭代器对象
    return { done: false, value: 'ExplicitIterator' }
  } } }
}
let e = new ExplicitIterator();
console.log(e[Symbol.iterator]()); // {next: ƒ}

function * generatorFn() {}
let g = generatorFn();
console.log(g, g.next()); // generatorFn{<closed>} {value: undefined, done: true}

function * generatorFn01() {}
function * generatorFn02() { return 'generatorFn02' }
let g01 = generatorFn01(), g02 = generatorFn02();
console.log(g01.next(), g02.next()); // {value: undefined, done: true} {value: 'generatorFn02', done: true}

// ES6 斐波那契数列 => F0=0, F1=1, Fn=Fn-1+Fn-2
let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1
    return {
      next () {
        [ pre, cur ] = [ cur, pre + cur ]
        return { done: false, value: cur }
      }
    }
  }
}

for (let n of fibonacci) {
  if (n > 1000) break
  console.log(n);
}

// 不需要大写成 Window 和 Location => 构造函数
console.log(window.location === document.location) // true

// default => window.location.search = "?usr=zs&age=23";
const getQueryVariable = function (variable) {
  let params = window.location.search.length > 0 ? window.location.search.substring(1) : "", args = {};
  for (let item of params.split("&").map(item => item.split("="))) {
    let key = decodeURIComponent(item[0]), value = decodeURIComponent(item[1]);
    if (key == variable) return value
  }
  return false
};
getQueryVariable("usr");
getQueryVariable("age");

// default => window.location.search = "?usr=zs&age=23";
let searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.toString(), searchParams.has("usr"), searchParams.get("age")); // usr=zs&age=23 true 23

navigator.geolocation.getCurrentPosition(position => console.log(position.coords.latitude, position.coords.longitude));

var regexp = /IcedAmericano/g, new Regexp("IcedAmericano","g");

/simple characters 简单字符 + metacharacter 元字符/flags 修饰符

let reg2 = new RegExp('zs','m'), test2 = 'okokokokokokok', test22 = 'zsokokokokokzs';
console.log(reg2.exec(test2), reg2.exec(test22)); // null, [ 'zs', index: 0, input: 'zsxzyxxxzzzyyyzs', groups: undefined ]

let reg3 = /^_(x)_(y)$/, test3 = '_x_y';
console.log(reg3.exec(test3), reg3.exec(''), kong.exec(test3)); // [ '_x_y', 'x', 'y', index: 0, input: '_x_y', groups: undefined ] 空字符串返回 null 空字符串正则匹配exec返回 [ '', index: 0, input: '_x_y', groups: undefined ]

console.log('abc'.replace('b',"[$`-$&-$']")); // a[a-b-c]c
console.log('hello world'.replace(/(\w+)\s(\w+)/,"$2 $1")); // world hello

let field = { "pos_1": "dc", "pos_2": "fullstack", "pos_3": "hardware" }, replaceInfo = '<span id="pos_1"></span><span id="pos_2"></span><span id="pos_3"></span>'.replace(/(<span id=")(\w+)(">)(<\/span>)/g, function(match, $1, $2, $3,$4) { return $1+$2+$3+field[$2]+$4 });
console.log(replaceInfo); // <span id="pos_1">dc</span><span id="pos_2">fullstack</span><span id="pos_3">hardware</span>

class Hello {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log('Hello I am ', this.name);
  }
  afterHello() {
    setTimeout(function() {
      console.log('Hi!, I am', this.name)
    });
  }
}
let ia = new Hello('Okk');
ia.sayHello(); 
ia.afterHello();