[JavaScript知识库]Javascript基础复习

Basic

Primitive types

• Boolean (true, false)
• Number (12, 1.618, -46.7, 0, etc.)
• String (“hello”, “world!”, “12”, etc.)
• Null (no value)
• Undefined (declared but not yet assigned a value)
• Symbol
• BigInt

Const,let and var

TDZ: from the start of the block until the initialization has completed.

block:{}

/**Example 1:hoist ***/
x = 1; 
console.log(x + " " + y); // '1 undefined'
var y = 2; // Declare and Initialize y
console.log(num);//Cannot access 'num' before initialization
let num="fasd";
/**Example 2:scope ***/
function varTest() {
  var x = 1;
  {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}
/**Example3: TDZ**/
function go(n) {
  // n here is defined!
  console.log(n); // Object {a: [1,2,3]}

  for (let n of n.a) { // ReferenceError,n.a先找block内的再找function内的
    console.log(n);
  }
}

go({a: [1, 2, 3]});

Symbol

• Symbol.for(key)

  Searches for existing Symbols with the given key and returns it if found. Otherwise a new Symbol gets created in the global Symbol registry with key.

• Symbol.keyFor(sym)

  Retrieves a shared Symbol key from the global Symbol registry for the given Symbol.

Operators

1. “==” forces the arguments to be of the same type before comparing them

   use a===b

2. '+'触发隐式类型转换

Function

• Arrow Function:
  • Does not have its own bindings to this or super, and should not be used as methods.
  • Can not be used as constructors.(new)
• Traditional Function:
  • 每次调用都会创建this和arguments

//一个参数时()可省略
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相当于：(param1, param2, …, paramN) =>{ return expression; }

//常用函数
setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[]): number//timeout default:0

Ouput

console.log();
alert("");//generate a pop-up notification with the given content

Object

Declaration

let person={
    name:"ycy",
    age:29,
    color:"red"
};
let {name,age}=person;//Object destructuring is a shorthand to obtain multiple properties at once.

Array

let a=[1,2,3];
//改变数组
a.splice(1,1,4);//于p1删除p2个元素并在p1插入=>[1,4,3]
//不改变数组
a.concat(1,[2,3],[5,[6,7]])//[1,4,3,1,2,3,5,[6,7]]//flatten array,but not arrays of arrays
a.map(x=>x+3);//return [4,7,6] but not change
a.foreach(value=>sum+=value);
a.filter(x=>x>2);//return [4,3]
a.reduce((x,y)=>x+y);//8,reduce right process from right-to-left

Other function

Closure

this is determined by the enclosing lexical context

Global Context

function f1() {
  return this;
}
// In a browser:
f1() === window; // true
// In Node:
f1() === globalThis; // true

Class Context

Within a class constructor, “this” is a regular object.

All non-static methods within the class are added to the prototype of “this”

Inside Object

Object有自己的Execution context,但没有this.

When a function is called as a method of an object, “this” is set to the object the method is called on.

var obj = {
  bar: function() {
    var x = (() => this);
    return x;
  },
  doSomethingLater : function (){
    setTimeout(function(){
        this.count++;
        console.log(this);
    }, 300);
  }
};
var fn = obj.bar();
console.log(fn() === obj); // true
// But caution if you reference the method of obj without calling it
var fn2 = obj.bar;
// Calling the arrow function's this from inside the bar method()
// will now return window, because 把函数拉到下面去了
console.log(fn2()() == window); // true
obj.doSomethingLater(); 
//In a browser:window,In Node:Timeout {...}

DOM

Document Object Model: how your browser interprets the HTML “tree”

<ul id="shopping list">
    <li>milk</li>
</ul>

• Create and add elements on the fly

  const list=document.getElementById("shopping list");
  const newEL=document.createElement("li");
  newEl.innerHTML="apples";
  list.appendChild(newEl));
  

• Change the contents/style of an element

  const list=document.getElementById("shopping list");
  list.style.color="red";
  

• Give elements actions by adding event listeners

  const button=document.getElementById("button");
  button.addEventListener("click",()=>{
      addParagraph("");
  });//common events include load, click, input, mouseover
  

Promise

实现promise.all

/**
 * @param {Array<any>} promises - notice input might have non-Promises
 * @return {Promise<any[]>}
 */
function all(promises) {
  return new Promise((resolve,reject)=>{
    if(!Array.isArray(promises))reject(new TypeError("参数错误"));
    let results=[];
    if(promises.length==0)resolve(promises);
    promises.forEach(promise=>{
      Promise.resolve(promise).then(value=>{
        results.push(value);
        if(results.length===promises.length)
          resolve(results);
      },err=>reject(err));
    })
  }
  )
}