前端 JavaScript 自測清單 1

<script src="example-url.js"></script>

<script type="text/javascript"></script>

<script async="async"></script>

alert(3 +
1
+ 2);

// 註釋文本
console.log("leo");

/*
這是多行註釋。
第二行註釋。
*/
console.log("leo");

// index.js
"use strict";
const v = "Hi!  I'm a strict mode script!";

// index.js
function strict() {
  'use strict';
  function nested() { 
    return "And so am I!"; 
  }
  return "Hi!  I'm a strict mode function!  " + nested();
}

"use strict";
leo = 17; // Uncaught ReferenceError: leo is not defined

"use strict";
delete Object.prototype; // Uncaught TypeError: Cannot delete property 'prototype' of function Object() { [native code] }

let name = "leo";
let name = "leo", age, addr;
let name = "leo", age = 27, addr = "fujian";

var foo = 42;    // foo is a Number now
foo = "bar"; // foo is a String now
foo = true;  // foo is a Boolean now

typeof "leo" // "string"
typeof undefined    // "undefined"
typeof 0     // "number"
typeof NaN   // "number"
typeof 10n   // "bigint"
typeof true  // "boolean"
typeof Symbol("id") // "symbol"
typeof [1,2,3,4]    // "object"
typeof Math  // "object"  (1) Math 是一個提供數學運算的內建 object。
typeof null  // "object"  (2) JavaScript 語言的一個錯誤，null 不是一個 object。null 有自己的類型，它是一個特殊值。
typeof alert // "function"  (3) alert 在 JavaScript 語言中是一個函數。

String(123);   // "123"
// Number方法 toString()/toExponential()/toFixed()/toPrecision() 也有同樣效果。
String(false); // "false"
// Boolean方法 toString() 也有同樣效果。
String(new Date()); // "Sun Jun 07 2020 21:44:20 GMT+0800 (中國標準時間)"
// Date方法 toString() 也有同樣效果。
String(leo);

const age = +"22"; // 22

const age = Number("22"); // 22
Number.parseFloat("22");  // 22
Number.parseInt("22");  // 22

// 布爾值
Number(false)     // 返回 0
Number(true)      // 返回 1
// 日期
const date = new Date();
Number(date);     // 返回 1591537858154
date.getTime();   // 返回 1591537858154，效果一致。
// 自動轉換
5 + null    // 返回 5         null 轉換為 0
"5" + null  // 返回"5null"   null 轉換為 "null"
"5" + 1     // 返回 "51"      1 轉換為 "1" 
"5" - 1     // 返回 4         "5" 轉換為 5

Boolean(1); // true
Boolean(0); // false
Boolean("hello"); // true
Boolean(""); // false
Boolean("0"); // true
Boolean(" "); // 空白, 也是 true (任何非空字符串是 true)

let sum = 1 + 2;
let age = +18;

let msg = "hello " + "leo"; // "hello leo"
let total = 10 + 20;  // 30
let text1 = "1" + "2"; // "12"
let text2 = "1" + 2;   // "12"
let text3 = 1 + "2";   // "12"
let text4 = 1 + 2 + "3";  // "33"
let num = +text1; //  12 轉換為 Number 類型

3 > 2 && 2 > 1
// return true
3 > 2 > 1
// 返回 false，因為 3 > 2 是 true，並且 true > 1 is false
// 加括號可以更清楚：(3 > 2) > 1

// 使用 ==，非嚴格等於，不關心值類型
// == 運算符會對比較的操作數做隱式類型轉換，再比較
'1' == 1; // true
// 使用 ===，嚴格相等，關心值類型
// 將數字值 -0 和 +0 視為相等，並認為 Number.NaN 不等於 NaN。
'1' === 1; // false

Object.is(value1, value2);

Object.is('foo', 'foo');     // true
Object.is(window, window);   // true
Object.is('foo', 'bar');     // false
Object.is([], []);           // false
var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo);         // true
Object.is(foo, bar);         // false
Object.is(null, null);       // true
// 特例
Object.is(0, -0);            // false
Object.is(0, +0);            // true
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true

if (!Object.is) {
  Object.is = function(x, y) {
    // SameValue algorithm
    if (x === y) { // Steps 1-5, 7-10
      // Steps 6.b-6.e: +0 != -0
      return x !== 0 || 1 / x === 1 / y;
    } else {
      // Step 6.a: NaN == NaN
      return x !== x && y !== y;
    }
  };
}

null == undefined;  // true
null === undefined; // false

null > 0;  // false 1
null >= 0; // true  2
null == 0; // false 3
null < 1;  // true  4

undefined > 0;  // false  1
undefined > 1;  // false  2
undefined == 0; // false  3

// 語法
window.alert(message);
alert(message);
// 示例
alert('hello leo!');

let result = window.prompt(text, value);

let result = window.confirm(message);

condition ? exprIfTrue : exprIfFalse

let getUser = function(name){
 return name === 'leo' ? 'hello leo!' : 'unknow user';
}
// 可以簡寫如下：
let getUser = name => name === 'leo' ? 'hello leo!' : 'unknow user';
getUser('leo'); // "hello leo!"
getUser('pingan'); // "unknow user"

a1 = true  && true      // t && t 返回 true
a2 = true  && false     // t && f 返回 false
a3 = false && true      // f && t 返回 false
a4 = false && (3 == 4)  // f && f 返回 false
a5 = "Cat" && "Dog"     // t && t 返回 "Dog"
a6 = false && "Cat"     // f && t 返回 false
a7 = "Cat" && false     // t && f 返回 false
a8 = ''    && false     // f && f 返回 ""
a9 = false && ''        // f && f 返回 false

o1 = true  || true      // t || t 返回 true
o2 = false || true      // f || t 返回 true
o3 = true  || false     // t || f 返回 true
o4 = false || (3 == 4)  // f || f 返回 false
o5 = "Cat" || "Dog"     // t || t 返回 "Cat"
o6 = false || "Cat"     // f || t 返回 "Cat"
o7 = "Cat" || false     // t || f 返回 "Cat"
o8 = ''    || false     // f || f 返回 false
o9 = false || ''        // f || f 返回 ""

n1 = !true              // !t 返回 false
n2 = !false             // !f 返回 true
n3 = !''                // !f 返回 true
n4 = !'Cat'             // !t 返回 false

n1 = !!true                   // !!truthy 返回 true
n2 = !!{}                     // !!truthy 返回 true: 任何 對象都是 truthy 的…
n3 = !!(new Boolean(false))   // …甚至 .valueOf() 返回 false 的布爾值對象也是！
n4 = !!false                  // !!falsy 返回 false
n5 = !!""                     // !!falsy 返回 false
n6 = !!Boolean(false)         // !!falsy 返回 false

condi1 && confi2
// 轉換為
!(!condi1 || !condi2)

condi1 || condi2
// 轉換為
!(!condi1 && !condi2)

function A(){ console.log('called A'); return false; }
function B(){ console.log('called B'); return true; }
console.log( A() && B() );
// logs "called A" due to the function call,
// then logs false (which is the resulting value of the operator)
console.log( B() || A() );
// logs "called B" due to the function call,
// then logs true (which is the resulting value of the operator)

var n = 0;
var x = 0;
while (n < 3) {
  n++;
  x += n;
}

let i = 3;
while(i) console.log(i --);

var result = '';
var i = 0;
do {
   i += 1;
   result += i + ' ';
} while (i < 5);

for (begin; condition; step) {
  // ……循環體……
}

for (let i = 0; i < 3; i++) {
  console.log(i);
}

var i = 0;
for (; i < 3; i++) {
    console.log(i);
}

for (var i = 0;; i++) {
   console.log(i);
   if (i > 3) break;
}

var i = 0;
for (;;) {
  if (i > 3) break;
  console.log(i);
  i++;
}

function testBreak(x) {
  var i = 0;
  while (i < 6) {
    if (i == 3) {
      break;
    }
    i += 1;
  }
  return i * x;
}

outer_block:{
  inner_block:{
    console.log ('1');
    break outer_block;      // breaks out of both inner_block and outer_block
    console.log (':-(');    // skipped
  }
  console.log ('2');        // skipped
}

block_1:{
  console.log ('1');
  break block_2;            // SyntaxError: label not found
}
block_2:{
  console.log ('2');
}

i = 0;
n = 0;
while (i < 5) {
   i++;
   if (i === 3) {
      continue;
   }
   n += i;
}

var i = 0, 
    j = 8;
checkiandj: while (i < 4) {
   console.log("i: " + i);
   i += 1;
   checkj: while (j > 4) {
      console.log("j: "+ j);
      j -= 1;
      if ((j % 2) == 0)
         continue checkj;
      console.log(j + " is odd.");
   }
   console.log("i = " + i);
   console.log("j = " + j);
}

(i > 5) ? console.log(i) : continue; // continue 不允許在這個位置

switch(expression) {
  case 'value1':
    // do something ...
    [break]
   
  default:
    // ...
    [break]
}

let a = 2;
switch (a) {
  case 1: // (*) 下面這兩個 case 被分在一組
  case 2:
    console.log('case is 1 or 2!');
    break;
  case 3:
    console.log('case is 3!');
    break;
  default:
    console.log('The result is default.');
}
// 'case is 1 or 2!'

function f(n){
    let a ;
    switch(n){
        case 1:
            a = 'number';
            break;
        case '1':
            a = 'string';
            break;
        default:
            a = 'default';
            break;
    }
    console.log(a)
}
f(1);   // number
f('1'); // string

let a = 2 + 2;
switch (a) {
 case 3:
    console.log( 'Too small' );
  case 4:
    console.log( 'Exactly!' );
  case 5:
    console.log( 'Too big' );
  default:
    console.log( "I don't know such values" );
}
// Exactly!
// Too big
// I don't know such values

function f(n){
  switch (n) {
    case 2:
      console.log(2);
      break;
    default:
      console.log('default')
      break;
    case 1:  
      console.log('1');
      break;
  }
}
f(1); // 1
f(2); // 2
f(3); // default

// 以下定義會報錯
function f(n){
    switch(n){
        case 1:
            let msg = 'hello';
            console.log(1);
            break;
        case 2: 
            let msg = 'leo';
            break;
        default: 
            console.log('default');
            break;
    }
}
// Error: Uncaught SyntaxError: Identifier 'msg' has already been declared

function f(n){
    switch(n){
        case 1:{ // added brackets
            let msg = 'hello';
            console.log(msg);
            break;
        }
        case 2: {
            let msg = 'leo';
            console.log(msg);
            break;
        }
        default: 
            console.log('default');
            break;
    }
}

function getUser(name){
 return 'hello ' + name;
}
getUser('leo"); // 函數調用

let getUser = function(name){
 return 'hello ' + name;
}

let fun = function f(n){
    return n < 3 ? 1 : n * f(n - 1);
}
fun(3);  // 3
fun(5);  // 60

fun(3);  // 3

console.log(fun());  // Uncaught ReferenceError: fun is not defined
let fun = function(){return 1};

console.log(fun());  // 1
function fun(){return 1};

let fun = function(){
 let name = 'leo';
}
fun();
console.log(name); // Uncaught ReferenceError: name is not defined

let name = 'leo';
let fun = function(){
 let text = 'Hello, ' + name;
  console.log(text);
}
fun(); // Hello, leo

let name = 'leo';
let fun = function(){
  let name = 'pingan8787';
 let text = 'Hello, ' + name;
  console.log(text);
}
fun(); // Hello, pingan8787

// ES6 之前，沒有設置默認值
function f(a, b){
    b = b ? b : 1;
    return a * b;
}
f(2,3);  // 6
f(2);    // 2
// ES6，設置默認值
function f(a, b = 1){
    return a * b;
}
f(2,3);  // 6
f(2);    // 2

function f (a, ...b){
    console.log(a, b);
}
f(1,2,3,4); // a => 1 b => [2, 3, 4]

let fun = function(){
    console.log(arguments);
    console.log(arguments.length);
}
fun('leo'); 
// Arguments ["leo", callee: ƒ, Symbol(Symbol.iterator): ƒ] 
// 1

let argumentConcat = function(separator){
 let result = '', i;
  for(i = 1; i < arguments.length; i ++){
   result += arguments[i] + separator;
  }
  return result;
}
argumentConcat(',', 'leo', 'pingan'); //"leo,pingan,"

let sum = function(a, b){
 return a + b;
};
let res = sum(1, 2);
console.log(res); // 3

// 函數表達式
fun();  // Uncaught ReferenceError: fun is not defined
let fun = function(){console.log('leo')};
// 函數聲明
fun();  // "leo"
function fun(){console.log('leo')};

// 有1個參數
let f = v => v;
// 等同於
let f = function (v){return v};
// 有多個參數
let f = (v, i) => {return v + i};
// 等同於
let f = function (v, i){return v + i};
// 沒參數
let f = () => 1;
// 等同於
let f = function (){return 1};
let arr = [1,2,3,4];
arr.map(ele => ele + 1);  // [2, 3, 4, 5]

function Person(){
  this.age = 0;
  setInterval(() => {
    this.age++;
  }, 1000);
}
var p = new Person(); // 定時器一直在執行 p的值一直變化