Python: WEB开发-JS

var a, d // 只是声明，a d为undefined
let b
console.log(1,a,b)

a = 1
b = 'a string'
console.log(2,a,b)

//const c // 不可以
const c = 100 // 常量必须声明时赋值，之后不能再改
console.log(c)
//c = 200 // 不可以更改

console.log(x, y);  //x, y声明提升了。但没什么意义，仅作来判断

a = 5;     // 隐式声明,不会有提升
console.log(a); 

var x, y;  // 只是声明，动态弱类型语言，声明并不代表给定类型。声明提升
console.log(x, y);
a = 'abc';
console.log(a);
// ES javascript 超集 Typescript 中支持了类型

let z = 789; // 不会声明提升
console.log(z);
z = 123;
console.log(z);

// const c;   // 不可以
const c = 100 // 常量必须声明时赋值，之后不能再改。
// js中推荐如果此标识符不再改变指向的内容，推荐使用常量
console.log(c)
//c = 200     // 不可以更改

undefined undefined
5
undefined undefined
abc
789
123

function a() {
    x = 100; // global变量，不要用，不好，严格模式直接报错
    var y;   // 局部变量，作用域在函数中
    y = 200; // 局部变量
    let z = 300;
    console.log(x, y, z);
}

a();
console.log(x);
// console.log(z) //未声明变量z，报异常

//y = 200 // 不能声明提升
//let y = 200 // 不能声明提升
// var y = 300; a(); // var声明提升hoisting

// 类型转换
// 弱类型

// 字符串
console.log('====string====') // 都被隐式转换为string类型然后拼接
console.log(a = 3 + 8, typeof(a)) // 3hello string
console.log(a = null + 'hello', typeof(a)) // nullhello string
console.log(a = undefined + 'hello', typeof(a)) // undefinedhello string
console.log(a = true + 'hello', typeof(a)) // truehello string

// 数字
console.log('====number====')  // 都隐式转换为数值然后做数值加法
console.log(a = null + 8, typeof(a)) // 8 'number'
console.log(a = undefined + 8, typeof(a)) // NaN 'number' //undefined没法转换成一个对应的数字 Not a Number
console.log(a = true + 8, typeof(a)) // 9 'number'
console.log(a = false + 8, typeof(a)) // 8 'number'

// 布尔
console.log('====bool====') // 都隐式转换为数值
console.log(a = null + true, typeof(a)) // 1 'number'
console.log(a = null + false, typeof(a)) // 0 'number'
console.log(a = undefined + true, typeof(a)) // NaN 'number' //undefined没法转换成一个对应的数字
console.log(a = undefined + false, typeof(a)) // NaN 'number'
console.log(a = null & true, typeof(a)) // 0 'number' //位与&; 位或|
console.log(a = undefined & true, typeof(a)) // 0 'number'

// 短路 and &&    or ||   not !
console.log(a = null && true, typeof(a)) // null 'object' //逻辑运算符，null 直接就是false短路
console.log(a = false && null, typeof(a)) // false 'boolean'
console.log(a = false && 'hello', typeof(a)) // false 'boolean'
console.log(a = true && 'hello', typeof(a)) // hello string
console.log(a = true && '' && 'abc', typeof(a)) //  string
// 第一个：逻辑运算符，null 直接就是false短路
// 第二个：逻辑运算符，false短路返回false
// 第三个：boolean
// 第三个：字符串
// 第五个：返回的是空字符串，看不见。

// null
console.log('====null====')
console.log(a = null + undefined, typeof(a)) // NaN 'number'

// 短路补充  {} [] 都不能像Python一样把它当作False来看，它们都是对象，当真看
console.log(a = [] && 'abc', typeof(a)) // abc string
console.log(a = {} && 'abc', typeof(a)) // abc string

let test = "Python";
console.log(test.charAt(2)); // t 索引
console.log(test[2]); // t  索引 常用
console.log(test.toUpperCase()); // PYTHON
console.log(test.concat(".org")); // Python.org 字符串拼接
console.log(test.concat('-', "org") + '.cn'); // Python-org.cn 字符串拼接
console.log(test.slice(3)); // hon 切片,支持负索引
console.log(test.slice(3, 5)); // ho [3, 5)前包后不包
console.log(test.slice(-2, -1)); // o
console.log(test.slice(-2)); // on
console.log(test.repeat(3)); // PythonPythonPython 字符串重复
console.log(test.endsWith("n")); // true
console.log(test.endsWith("P")); // false
console.log(test.search("t")); // 2
console.log(test.length); // 6 长度


let url = "www.python.org";
console.log(url.split(".")); // [ 'www', 'python', 'org' ]
console.log(url.split(".", 2)); // [ 'www', 'python' ] 分割几次
console.log('a+b+c'.split(/\w/)) // [ '', '+', '+', '' ] 正则表达式分割
console.log(url.substr(7, 2)); // ho  返回字符串从何处开始,取多长 将废弃
console.log(url.substring(7, 10)); //hon 返回子串,从何处开始,到什么为止,前包后不包

let s = "python.hon";
console.log(s.indexOf("ho")); // 3
console.log(s.indexOf("ho", 4)); // 7
console.log(s.replace(".hon", ".com")); // python.com 字符串替换
s = "\tpyt hon \r\n";
console.log(s.trim()); // pyt hon 去除两端的空白字符
// trimLeft、trimRight是非标函数，少用

console.log(1 / 2);
console.log(1 / 0);
console.log(5 % 3);

// 整除 pareseInt Math.floor Math.ceil Math.round
console.log(parseInt(1 / 2), parseInt(3 / 2), parseInt(5 / 2)); // 0 1 2
console.log(parseInt(-1 / 2), parseInt(-3 / 2), parseInt(-5 / 2)); // -0 -1 -2
console.log('-'.repeat(30));

console.log(Math.floor(1 / 2), Math.floor(3 / 2), Math.floor(5 / 2)); // 0 1 2
console.log(Math.floor(-1 / 2), Math.floor(-3 / 2), Math.floor(-5 / 2)); // -1 -2 -3
console.log('-'.repeat(30));

console.log(Math.ceil(1 / 2), Math.ceil(3 / 2), Math.ceil(5 / 2)); // 1 2 3
console.log(Math.ceil(-1 / 2), Math.ceil(-3 / 2), Math.ceil(-5 / 2)); // -0 -1 -2
console.log('-'.repeat(30));

// round 正数四舍五入；  负数四舍六入，五向上
console.log(Math.round(1 / 2), Math.round(3 / 2), Math.round(5 / 2)); // 1 2 3
console.log(Math.round(-1 / 2), Math.round(-3 / 2), Math.round(-5 / 2));  // -0 -1 -2

let a = 0;
console.log(a++); // 0 a++ 先用后加
console.log(a++); // 1
console.log(++a); // 3 ++a 先加后用
console.log(a); // 3

i = 0;
a = ++i + i++ + i++ + i; // 等价于 (++i) + (i++) + (i++) + i
console.log(a); //  / 1 + 1 + 2 + 3 =7

console.log(100 > 200); // false
console.log(100 > "200"); // false
console.log(300 > "200"); // true
console.log(1000 > "200"); // true
console.log("1000" > 200); //  true
console.log("100" > "200"); // false
console.log("1000" > "200"); // false
console.log("-".repeat(30));

// 类型转换失败 为false
console.log(1000 > "200a"); // false
console.log(1000 > "0a"); // false
console.log(1000 > "a"); // false
console.log(1000 > NaN); // false
console.log(1000 < NaN); // false

//宽松比较
console.log(100 == 200); // false
console.log(100 == "200"); // false
console.log(200 == "200"); // true
/ /严格比较 ===
console.log(200 === "200"); // false

条件表达式?真值:假值

等价于简单的if...else结构

if (条件表达式) {
    真值
}
else { 
    假值
}

// python中 真值 if test else 假值  c/javascript中 test?真值:假值
// ?: 是三元运算符，三目
let a = 50;
console.log(a > 100?'>100':'<=100');
console.log(a > 100?'>100':(a > 50?'>50':'<=50'));

let v;
v = 6, true; // python中，逗号优化级高于=。类c中，逗号优化级低于=
console.log(v); // 6

let a = 4 + 5,
  b = true,
  c = a > 20 ? "t" : "f";
console.log(a, b, c); // 9 true 'f'

function test() {
  return 3, a + b, c = a++; // 逗号表达式，返回最后一个表达式的值
}

console.log(test()); // 9
console.log(c); // 9
console.log(a); // 10

console.log('a' instanceof String); // false
console.log(1 instanceof Number); // false

//构造实例
let a = new String('a');
console.log(a, a instanceof String,) ; // [String: 'a'] true
console.log(b = new Number(1), b instanceof Number) ; // [Number: 1] true

console.log([] instanceof Array) // true
console.log([] instanceof Object) // true
console.log({} instanceof Array)  // false
console.log({} instanceof Object) // true

console.log(typeof 'a', typeof 'a' == 'string');  // string true
console.log(typeof 1, typeof 1 == 'number'); // number true
console.log(typeof a, typeof a == 'string'); // object false
console.log(typeof b, typeof b == 'number'); // object false
console.log(typeof a, typeof a === 'object'); // object true

x = 42; //隐式声明
var y = 43;
let z = 60;
myobj = new Number();
myobj.h = 4; // create property h
console.log(delete x); // returns true (can delete if declared implicitly)
console.log(delete y); // returns false (cannot delete if declared with var)
console.log(delete z); // returns false
console.log(delete Math.PI); // returns false (cannot delete predefined properties)
console.log(delete myobj.z); // returns true (can delete user-defined properties)
console.log(delete myobj); // returns true (can delete if declared implicitly)
console.log("~~~~~~~~~~~~~~~~~~~~");

var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
for (let i = 0; i < trees.length; i++) console.log(trees[i]); // for循环中只有一条语句，{}可以省略
console.log("==================");
delete trees[3]; // 数组中元素被删除，但空着的位置是undefined
for (var i = 0; i < trees.length; i++) console.log(trees[i]);

true
false
false
false
true
true
~~~~~~~~~~~~~~~~~~~~
redwood
bay
cedar
oak
maple
==================
redwood
bay
cedar
undefined
maple

// Custom objects
let mycar = {
  color: "red",
  year: 1998,
};
console.log("color" in mycar); // returns true
console.log("model" in mycar); // returns false
console.log("year" in mycar); // true

console.log('~~~~~~~~~~~~~~~~~~~~')

let trees = new Array("redwood", "bay", "cedar", "oak", "maple");
console.log(0 in trees); // returns true ，0在数组对象的index中
console.log(3 in trees); // returns true ，3在数组对象的index中
console.log(6 in trees); // returns false，6不在数组对象的index中
console.log("bay" in trees); // return false，bay不是属性，它是值
console.log("length" in trees); // returns true，length是对象的属性
console.log('~~~~~~~~~~~~~~~~~~~~')
delete trees[3];
console.log(3 in trees); // return false
for(var i=0;i<trees.length;i++)
 console.log(trees[i]);

//in 判断的是属性在不在，数组来说索引和length都是属性

~~~~~~~~~~~~~~~~~~~~
true
true
false
false
true
~~~~~~~~~~~~~~~~~~~~
false
redwood
bay
cedar
undefined
maple

var trees = new Array("redwood", "bay", "cedar", "oak");
for (var i = 0; i < trees.length; i++) 
    console.log(trees[i]);
console.log("=============");

trees.pop();
for (var i = 0; i < trees.length; i++) 
    console.log(trees[i]);

redwood
bay
cedar
oak
=============
redwood
bay
cedar

if (cond1){

}
else if (cond2) {

}
else if (cond3) {

}
else {

}

switch (expression) {
    case label_1:
        statements_1
        [break;]
    case label_2:
        statements_2
        [break;]

    ...
    default:
        statements_def
        [break;]
}

let x = 5; // 换成1试一试
switch (x) {
  case 0:
    console.log("zero");
    break;
  case 1:
    console.log("one");
  case 2:
    console.log("two");
  case 3:
    console.log("three");
    break;
  case 5:
  case 4:
    console.log("four");
  default:
    console.log("other");
  // break;
}

four
other

#如果x = 2，执行结果为
two
three

// C风格for循环
for ([initialExpression]; [condition]; [incrementExpression]) //setup执行一次; 每次比较, true才会进行循环;  每次做完循环体后要做的事post
{
    statement
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}
console.log("-".repeat(30));

for (var x = 0, y = 9; x < 5; x++, y--) {
  console.log(`${x * y}`);
}
console.log("-".repeat(30));

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

// for (;;); // for循环版死循环 等价for(;;){}

while (condition)
    statement

do
    statement
while (condition);

// while (1){  //死循环
//   ;
// }
// while (true);

// do {;} while(true) //死循环

let x = 5;
while (x--) {
  console.log(x);
}
console.log("~~~~~~~~~~");
do {
  console.log(x); // 从-1开始
} while (x++ < 5);

4
3
2
1
0
~~~~~~~~~~
-1
0
1
2
3
4
5

for (let i = 1; i < 10; i++) {
  line = "";
  for (let j = 1; j <= i; j++) {
    line += j + "*" + i + "=" + j * i + " ";
    // line += `${j}*${i}=${i*j?'t':'f'} `
  }
  console.log(line);
}

for (variable in object) {
    statements
}

// 数组
let arr = [10, 20, 30, 40];

console.log(arr[1]); // 20
console.log(10 in arr); // false in属性
console.log(0 in arr); // true arr[0]
console.log("length" in arr); // true
console.log("-".repeat(30));

for (let x in arr) { // 遍历对象属性
  console.log(x); // 返回索引(属性)
}
console.log("-".repeat(30));

for (let index in arr) {
  console.log(`${index} : ${arr[index]}`); //插值
}
console.log("-".repeat(30));

// C风格
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
console.log("-".repeat(30));

// 对象
let obj = {
  a: 1,
  b: "hello",
  c: true,
};

console.log(obj.a);
console.log(obj["b"]); // 对象属性当索引访问
console.log(obj.d); // undefined
console.log("-".repeat(30));

for (let x in obj) {
  console.log(x); // 属性名
}
console.log("-".repeat(30));

for (let key in obj) {
  // 返回数组的index
  console.log(`${key} : ${obj[key]}`);
}

20
false
true
true
------------------------------
0
1
2
3
------------------------------
0 : 10
1 : 20
2 : 30
3 : 40
------------------------------
10
20
30
40
------------------------------
1
hello
undefined
------------------------------
a
b
c
------------------------------
a : 1
b : hello
c : true

let arr = [1, 2, 3, 4, 5];
let obj = {
  a: 1,
  b: "hello",
  c: true,
};

for (let i of arr) { //返回数组元素
  console.log(i);
}

// for (let i of obj) { // 异常，不可以迭代
//   console.log(i);
// }

function sum(arr) {
  for (let x in arr) {// 遍历index或对象属性
    console.log(x, typeof x, arr[x]);
  }
  console.log("------------------");
  for (let x of arr) {// 遍历元素
    console.log(x, typeof x);
  }
  console.log("------------------");
  for (let x = 0; x < arr.length; x++) {// 自己定义索引数值遍历
    console.log(x, typeof x, arr[x]);
  }
}

sum([3, 6, 9]);

0 string 3
1 string 6
2 string 9
------------------
3 number
6 number
9 number
------------------
0 number 3
1 number 6
2 number 9

const add = function(x, y){
    return x + y;
};
console.log(add(4, 6)

const sub = function fn(x, y) {
    return x -y;
}
console.log(sub(5, 3))
// console.log(fn(3, 2)) // fn 只能用在函数内部

const sub = function fn(n) {
    if (n===1) return n;
    return n + fn(--n) // fn 只能在函数内部使用
    // return n===1?n:n+fn(--n)
}
console.log(sub(4))

console.log(add(4,6))
// 匿名函数
function add(x, y){ // 声明提升
    return x + y;
};

// console.log(sub(5, 3)); // sub 未定义
// 有名字的函数表达式
const sub = function (x,y){
    return x - y;
};
console.log(sub(5, 3));

let map = function (func, iterable) {
  let newArr = [];
  for (let v of iterable) {
    newArr.push(func(v))
  }
  return newArr;
}

console.log(map(function(x) { return x + 1}, [1, 2, 3]));

let map = function (func, iterable) {
  let newArr = [];
  for (let index in iterable) {
    newArr[index] = func(iterable[index]);
  }
  return newArr;
}

console.log(map(function(x) { return x + 1}, [1, 2, 3])); //[ 2, 3, 4 ]
console.log(map(function(x) { return x++}, [1, 2, 3])); //[ 1, 2, 3 ]
console.log(map(function(x) { return ++x}, [1, 2, 3])); //[ 2, 3, 4 ]
console.log(map(function(x) { return x += 1}, [1, 2, 3])); //[ 2, 3, 4 ]

const add = (x, y) => x + y
console.log(add(4, 5)) // 9

// 缺省值
const add1 = (x, y=5) => x + y
console.log(add1(4, 7)) // 11
console.log(add1(4)) // 9

const add = (x=6, y) => x + y

console.log(add()) // NaN
console.log(add(1)) // NaN
console.log(add(y=2, z=3)) // 5
console.log(add(3, 4, 5, 6)) // 7

const sum = function (...args){
    let result = 0;
    console.log(...args) // 3 6 9 参数解构
    for (let x in args){
        result += args[x]
    };
    return result
};

console.log(sum(3, 6, 9)) // 18

(function (p1, ...args) {
  console.log(p1);
  console.log(args);
  console.log("----------------");
  console.log(arguments); // 对象
  for (let x of arguments) // 该对象可以使用of
    console.log(x);
})("abc", 1, 3, 5);

abc
[ 1, 3, 5 ]
----------------
[Arguments] { '0': 'abc', '1': 1, '2': 3, '3': 5 }
abc
1
3
5

((x, ...args) => {
    console.log(args);
    console.log(x);
    console.log(arguments);
})(...[1,2,3,4])

[ 2, 3, 4 ]
1
[Arguments] {
  '0': {},
  '1': [Function: require] {
    resolve: [Function: resolve] { paths: [Function: paths] },
    main: {
      id: '.',
      path: 'D:\\project\\pyproj\\trae',
      exports: {},
      filename: 'D:\\project\\pyproj\\trae\\index.js',
      loaded: false,
      children: [],
      paths: [Array],
      [Symbol(kIsMainSymbol)]: true,
      [Symbol(kIsCachedByESMLoader)]: false,
      [Symbol(kIsExecuting)]: true
    },
    extensions: [Object: null prototype] {
      '.js': [Function (anonymous)],
      '.json': [Function (anonymous)],
      '.node': [Function (anonymous)]
    },
    cache: [Object: null prototype] {
      'D:\\project\\pyproj\\trae\\index.js': [Object]
    }
  },
  '2': {
    id: '.',
    path: 'D:\\project\\pyproj\\trae',
    exports: {},
    filename: 'D:\\project\\pyproj\\trae\\index.js',
    loaded: false,
    children: [],
    paths: [
      'D:\\project\\pyproj\\trae\\node_modules',
      'D:\\project\\pyproj\\node_modules',
      'D:\\project\\node_modules',
      'D:\\node_modules'
    ],
    [Symbol(kIsMainSymbol)]: true,
    [Symbol(kIsCachedByESMLoader)]: false,
    [Symbol(kIsExecuting)]: true
  },
  '3': 'D:\\project\\pyproj\\trae\\index.js',
  '4': 'D:\\project\\pyproj\\trae'
}

const add = (x, y) => {console.log(x, y);return x + y;};
console.log(add(...[100, 200])); // 300
console.log(add(...[100, 200, 300, 3, 5, 3])); // 300
console.log(add(...[100])); // NaN

const add = (x, y) => {return x,y};  // ,逗号表达式的值等于最后一个
console.log(add(4,100)); // 100

a = ((x = 5), (y = 6), true);
console.log(a); //true

b = (123, true, (z = "test"));
console.log(b); // test

function c() {
  return (x = 5), (y = 6), true, "ok";
}

console.log(c()); // ok

throw new Error('new error');
throw new ReferenceError('Ref Error');
throw 1;
throw 'not ok';
throw [1, 2, 3];
throw {'a':1};
throw () => {}; // 函数

// py: try except finally; raise
// js: try catch finally; throw

try {
    console.log('try begin~~~~')
    // throw new Error('这是个异常') // 抛出异常
    throw new ReferenceError('引用异常') // 抛出异常
    console.log('try end~~~~')
} finally {
    console.log('fin')
}

try begin~~~~
fin
D:\project\pyproj\trae\t1.js:7
    throw new ReferenceError('这是个异常') // 抛出异常
    ^

ReferenceError: 这是个异常
    at Object.<anonymous> (D:\project\pyproj\trae\t1.js:7:11)

try {
    console.log('try begin~~~~')
    // throw new Error('这是个异常') // 抛出异常
    throw new ReferenceError('引用异常') // 抛出异常
    console.log('try end~~~~')
} catch { //这个异常被捕获并匹配上了
    console.log('cath U')
} finally {
    console.log('fin')
}

try begin~~~~
cath U
fin

// py: try except finally; raise
// js: try catch finally; throw

try {
    console.log('try begin~~~~')
    // throw new Error('这是个异常') // 抛出异常
    throw new ReferenceError('引用异常') // 抛出异常
    // throw 1 // 抛出异常
    // throw ()=>{} // [] 'abc' 这些都是对象，对象都可以抛出，不建议这么做
    console.log('try end~~~~')
} catch (err) { //这个异常被捕获并匹配上了 err就是这个异常对象，没有类型
    console.log('cath U')
    console.log(err)
    console.log(typeof err) // object
    console.log(err.name) // 异常的名字。 ReferenceError
    console.log(err.constructor.name) // 每个对象里都会有个构造器，构造器的名字。 ReferenceError
    console.log(err.message) // 异常的描述。引用异常
    console.log(err.stack) // 异常的栈信息，异常的调用栈，异常的调用链，异常的传播路径

} finally {
    console.log('fin')
}

try begin~~~~
cath U
ReferenceError: 引用异常
    at Object.<anonymous> (D:\project\pyproj\trae\t1.js:7:11)
    at Module._compile (node:internal/modules/cjs/loader:1554:14)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:170:5)
    at node:internal/main/run_main_module:36:49
object
ReferenceError
ReferenceError
引用异常
ReferenceError: 引用异常
    at Object.<anonymous> (D:\project\pyproj\trae\t1.js:7:11)
    at Module._compile (node:internal/modules/cjs/loader:1554:14)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:170:5)
    at node:internal/main/run_main_module:36:49
fin

var obj = {
    property_1: value_1, // property_# 可以是一个标识符...
    2: value_2, // 或一个数字...
    ["property" +3]: value_3, // 或一个可计算的key名...
    // ...,
    "property n": value_n // 或一个字符串
};

let a = 1;
let b = 'abc';
let c = [1, 2, 3];
let d = x => x * 2;

var obj = {
    'a': 100, // 引号不省略明确使用该字符串为属性名
    b:b,     // 引号可以省，但但依然转换为字符串为属性名
    [b]:[b],  // 计算b的值然后转换为字符串为属性名
    3:200,  // 将3转换为字符串为属性名
    [a]:200,
    c, //等价于c:c
    d, //等价于d:d
}
console.log(obj);
console.log(obj.d(10));
// for (let s in obj)
//     console.log(s, typeof (s), obj[s], typeof (obj[s]));

{
  '1': 200,
  '3': 200,
  a: 100,
  b: 'abc',
  abc: [ 'abc' ],
  c: [ 1, 2, 3 ],
  d: [Function: d]
}
20
1 string 200 number
3 string 200 number
a string 100 number
b string abc string
abc string [ 'abc' ] object
c string [ 1, 2, 3 ] object
d string [Function: d] function

function Point(x, y) {
    this.x = x; // 对于类的实例来说，this永远指向实例自身
    this.y = y;
    console.log('Point ~~~~')
}
console.log(Point);
let p1 = new Point(4, 5); // 构造出基于Point类型的实例
console.log(p1);

[Function: Point]
Point ~~~~
Point { x: 4, y: 5 }

function Point(x, y) {
    this.x = x; // 对于类的实例来说，this永远指向实例自身
    this.y = y;
    console.log('Point ~~~~')
    this.showme = function(self) {console.log(this, this.x, this.y); console.log(this === self)};
}
console.log(Point);
let p1 = new Point(4, 5); 
// new构造出基于Point类型的实例; 
// 如果没有new就是普通函数Point被调用一次，特别注意this就不是你想要的了
console.log(p1);
console.log(p1.showme);
p1.showme(p1);
console.log('---------------')

[Function: Point]
Point ~~~~
Point { x: 4, y: 5, showme: [Function (anonymous)] }
[Function (anonymous)]
Point { x: 4, y: 5, showme: [Function (anonymous)] } 4 5
true
---------------

 function Point(x, y) {
    this.x = x; // 对于类的实例来说，this永远指向实例自身
    this.y = y;
    console.log('Point ~~~~')
    this.showme = function() {console.log(this, this.x, this.y)};
}
function Point3D(x, y, z) {
    Point.call(this, x, y); // call把当前实例this注入
    this.z = z;
    console.log('Point3D ++++')
    this.showme = function() {console.log(this, this.x, this.y, this.z)}; // 覆盖
}
let p2 = new Point3D(10, 11, 12);
console.log(p2);
p2.showme();

Point ~~~~
Point3D ++++
Point3D { x: 10, y: 11, showme: [Function (anonymous)], z: 12 }
Point3D { x: 10, y: 11, showme: [Function (anonymous)], z: 12 } 10 11 12

// 基类定义
class Point {
    constructor(x, y) /*构造器*/ {
        this.x = x;
        this.y = y;
    }
    show() /*方法*/ {
        console.log(this, this.x, this.y);
    }
}

let p1 = new Point(10, 11)
p1.show()
// 继承
class Point3D extends Point {
    constructor(x, y, z) {
        super(x, y);
        this.z = z;
    }
}

let p2 = new Point3D(20, 21, 22);
p2.show()

/* 执行结果
Point { x: 10, y: 11 } 10 11
Point3D { x: 20, y: 21, z: 22 } 20 21
*/

class Point{
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    show(){
        console.log(this.x, this.y);
    }
}
console.log(Point, typeof Point);
let p1 = new Point(40, 50);
console.log(p1)
p1.show();
console.log('++++++++++++++')

// 子类
class Point3D extends Point{ 
    // 如果自己不实现构造器，默认会提供一个，而且内部使用super的构造器
    constructor (x, y, z) { // 子类不写也罢，写了就得用super，不但要写super，还要写在最前面
        // Must call super constructor in derived class before accessing 'this' or returning from derived constructor
        super(x, y); // 新语法通过super调用父类构造器，使用的还是当前的this
        this.z = z;
    }
}

let p2 = new Point3D(10, 11, 12);
console.log(p2);
p2.show();

[class Point] function
Point { x: 40, y: 50 }
40 50
++++++++++++++
Point3D { x: 10, y: 11, z: 12 }
10 11

// this 的坑

var school = {
    name: 'js',
    getName: function() {
        console.log('~~~~');
        console.log(this);
        console.log(this.name);
        console.log('~~~~');
        return function() { // 普通函数在内部使用this的话，往往就是global对象
            console.log('++++');
            console.log(globalThis); // 全局对象 nodejs 中叫golabal; 浏览器中 window; ES6 globalThis
            console.log(this === globalThis); // true
            console.log(this.name);
            console.log('++++');
        }
    }
}

let fn = school.getName(); // 函数定义时 this 指向的是定义时的作用域
fn();

~~~~
{ name: 'js', getName: [Function: getName] }
js
~~~~
++++
<ref *1> Object [global] {
  global: [Circular *1],
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  },
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  },
  queueMicrotask: [Function: queueMicrotask],
  structuredClone: [Getter/Setter],
  atob: [Getter/Setter],
  btoa: [Getter/Setter],
  performance: [Getter/Setter],
  fetch: [Function: fetch],
  navigator: [Getter],
  crypto: [Getter]
}
true
undefined
++++

function Point(x, y) {
    this.x = x;
    this.y = y;
    console.log('P ++++');
}

let p3 = Point(1, 2);  //没有new，就是普通函数调用，this指向的是全局对象
// console.log(p3.x); // 异常报错 TypeError: Cannot read properties of undefined (reading 'x')
console.log(p3); // undefined 没有返回值，所以是undefined
console.log(globalThis.x); // 1
console.log(globalThis.y); // 2

const arr = [1, [2, 3], 4];
const [a, [b, c], d] = arr;  // 一一对应
console.log(a, b, c, d); //1 2 3 4

const [e, f] = arr;
console.log(e, f); //1 [ 2, 3 ]

const [g, h, i, j = 18] = arr;
console.log(g, h, i, j); //1 [ 2, 3 ] 4 18

const [k, ...l] = arr;  //剩余必需在最后
console.log(k, l); //1 [ [ 2, 3 ], 4 ]

var data = {
    a: 100,
    b: [
        {
            c: 200,
            d: [],
            a: 300
        },
        {
            c: 1200,
            d: [1],
            a: 1300
        },
    ],
    c: 500
}

// 提取3个a出来
var { a: m, b: [{ a: n }, { a: n1 }] } = data;
console.log(m, n, n1) //  100 300 1300

setInterval(function[, delay]); // 间隔多少毫秒就执行函数一次，循环执行
setTimeout(function[, delay]); // 等待多少毫秒就执行函数一次，结束
delay  // 延时，缺省0，立即执行
function // 延时到的时候执行的函数

setInterval(() => {
        console.log("+++++")
    }, 3000)
console.log("abc")
setInterval(() => {
    console.log("~~~~")
}, 3000)
console.log("xyz")

/* 执行结果：有并行效果
abc
xyz
+++++
~~~~
+++++
~~~~
+++++
~~~~
*/

let p1 = new Promise((resolve, reject) => { //成功有成功的结果，失败有失败的理由
    /** 参数说明
     * resolve, reject 这是形参，代表未来有js引擎提供注入2个对应的函数
     * resolve 单参函数；reject 单参函数
     * 这两个函数互斥，用了其中一个，另一个再用也没有任何用处
     * 执行器是一个程序员写好的函数，内部先交给Promise做的事情，最后一定要选择resolve或者reject中的一个调用一下
     * 调用时他们都是单参函数，resolve(value)调用返回fulfiled状态表示成功； reject(reason)调用返回rejected状态表示失败
     * 如果executor执行时抛出异常，promise返回rejected状态
     * 创建Promise会立即执行executor
     */
    console.log("executor 执行了");
    setTimeout(() => {
        console.log('3s pass');
        resolve('sucess'); //成功了
    }, 3000); //不阻塞，立即返回
    console.log("executor bye~~~");
  });

// Promise { '成功了' } 等价于 Promise { <fulfiled> '成功了' }  尖括号中是状态，fulfiled 表示成功，rejected 表示失败
// Promise { <rejected> '任务失败了' }
// Promise { <pending> } 准备着报告结果，正在执行中
setInterval(() =>{
    console.log(p1, '++++'); // __str__ 表达
}, 1000) // 每隔1s 执行一次

/* 执行结果：
executor 执行了
executor bye~~~
Promise { <pending> } ++++
Promise { <pending> } ++++
3s pass
Promise { 'sucess' } ++++
Promise { 'sucess' } ++++
Promise { 'sucess' } ++++
*/

let p1 = new Promise((resolve, reject) => { //成功有成功的结果，失败有失败的理由
    /** 参数说明
    * resolve, reject 这是形参，代表未来有js引擎提供注入2个对应的函数
    * resolve 单参函数；reject 单参函数
    * 这两个函数互斥，用了其中一个，另一个再用也没有任何用处
    * 执行器是一个程序员写好的函数，内部先交给Promise做的事情，最后一定要选择resolve或者reject中的一个调用一下
    * 调用时他们都是单参函数，resolve(value)调用返回fulfiled状态表示成功； reject(reason)调用返回rejected状态表示失败
    * 如果executor执行时抛出异常，promise返回rejected状态
    * 创建Promise会立即执行executor
    * Promise { '成功了' } 等价于 Promise { <fulfiled> '成功了' }  
      Promise { <rejected> '任务失败了' }
      Promise { <pending> } 准备着报告结果，正在执行中
    */
    console.log("executor 执行了");
    setTimeout(() => {
        console.log('3s pass');
        // resolve('成功了');
        reject('失败了');
    }, 3000); //不阻塞，立即返回
    console.log("executor bye~~~");
  });

/* then只是设置回调函数，立即返回，异步的
* then返回一个新Promise对象，p1执行结束了，返回fulfiled或者rejected状态了
*/
let p2 = p1.then(
    value => {console.log('成功回调执行', value); return 1111;}, // 函数，处理fulfiled状态
    reason => {console.log('失败回调执行', reason); return 2222}, // 函数，处理rejected状态
)
setInterval(() =>{
    console.log(p1, '++++'); // __str__ 表达
    console.log(p2, '----'); // __str__ 表达
}, 1000) // 每隔1s 执行一次

/* 执行结果：
executor 执行了
executor bye~~~
Promise { <pending> } ++++
Promise { <pending> } ----
Promise { <pending> } ++++
Promise { <pending> } ----
3s pass
失败回调执行 失败了
Promise { <rejected> '失败了' } ++++
Promise { 2222 } ----
Promise { <rejected> '失败了' } ++++
Promise { 2222 } ----
Promise { <rejected> '失败了' } ++++
Promise { 2222 } ----
*/

//....
let p2 = p1.then(
    // undefined, undefined 在then中没有对p1的成功或失败的处理函数定义，p1成功就是p2成功，p2的状态和value和p1一样
    // value => {console.log('成功回调执行', value); return 1111;}, // 函数，处理fulfiled状态
    // reason => {console.log('失败回调执行', reason); return 2222}, // 函数，处理rejected状态
)
setInterval(() =>{
    console.log('p1 +++', p1); // __str__ 表达
    console.log('p2 ---', p2); // __str__ 表达
}, 1000) // 每隔1s 执行一次

/* 执行结果：
executor 执行了
executor bye~~~
p1 +++ Promise { <pending> }
p2 --- Promise { <pending> }
p1 +++ Promise { <pending> }
p2 --- Promise { <pending> }
3s pass
p1 +++ Promise { '成功了' }
p2 --- Promise { '成功了' }
p1 +++ Promise { '成功了' }
*/

let p1 = new Promise((resolve, reject) => { //成功有成功的结果，失败有失败的理由
    console.log("executor 执行了");
    setTimeout(() => {
        console.log('3s pass');
        // resolve('成功了');
        reject('失败了');
    }, 3000); //不阻塞，立即返回
    console.log("executor bye~~~");
  });

/* then只是设置回调函数，立即返回，异步的
* then返回一个新Promise对象，p1执行结束了，返回fulfiled或者rejected状态了
* 在成功或失败的架设函数中，返回值很重要。如果没有写就是return undefined，等价于resolve(undefined)
*/
let p2 = p1.then(
    // 1 undefined, undefined 在then中没有对p1的成功或失败的处理函数定义，p1成功就是p2成功，p2的状态和value和p1一样
    // 2 undefined, reason =>{} 失败定义 p1成功则p2成功；p1失败则p2成功了，return Promise.resolve(undefined)
    // value => {console.log('成功回调执行', value); return 1111;}, // 函数，处理fulfiled状态
    undefined,
    reason => {console.log('失败回调执行', reason); return Promise.resolve(undefined)}, // 函数，处理rejected状态
)
setInterval(() =>{
    console.log('p1 +++', p1); // __str__ 表达
    console.log('p2 ---', p2); // __str__ 表达
}, 1000) // 每隔1s 执行一次

/* 执行结果：
executor 执行了
executor bye~~~
p1 +++ Promise { <pending> }
p2 --- Promise { <pending> }
p1 +++ Promise { <pending> }
p2 --- Promise { <pending> }
3s pass
失败回调执行 失败了
p1 +++ Promise { <rejected> '失败了' }
p2 --- Promise { undefined }
p1 +++ Promise { <rejected> '失败了' }
p2 --- Promise { undefined }
*/

let p1 = new Promise((resolve, reject) => { //成功有成功的结果，失败有失败的理由
    console.log("executor 执行了");
    setTimeout(() => {
        console.log('3s pass');
        // resolve('成功了');
        reject('失败了');
    }, 3000); //不阻塞，立即返回
    console.log("executor bye~~~");
  });

/* then只是设置回调函数，立即返回，异步的
* then返回一个新Promise对象，p1执行结束了，返回fulfiled或者rejected状态了
* 在成功或失败的架设函数中，返回值很重要。如果没有写就是return undefined，等价于resolve(undefined)
*/
let p2 = p1.then(
    // 1 undefined, undefined 在then中没有对p1的成功或失败的处理函数定义，p1成功就是p2成功，p2的状态和value和p1一样
    // 2 undefined, reason =>{} 失败定义 p1成功则p2成功；p1失败则p2成功了，return Promise.resolve(undefined0)
    // 2 value =>{}, undefined 成功定义，p1成功则p2 resolve(undefined); p1失败不处理，则p2跟随p1状态
    // undefined,
    // reason => {console.log('失败回调执行', reason); return Promise.resolve(undefined)}, // 函数，处理rejected状态
    value => {console.log('成功回调执行', value); return undefined;}, // , undefined
).catch(
    reason => {console.log('失败回调执行', reason); return Promise.resolve(undefined)} // 函数，处理rejected状态
)
setInterval(() =>{
    console.log('p1 +++', p1); // __str__ 表达
    console.log('p2 ---', p2); // __str__ 表达
}, 1000) // 每隔1s 执行一次

/* 执行结果：
executor 执行了
executor bye~~~
p1 +++ Promise { <pending> }
p2 --- Promise { <pending> }
p1 +++ Promise { <pending> }
p2 --- Promise { <pending> }
3s pass
失败回调执行 失败了
p1 +++ Promise { <rejected> '失败了' }
p2 --- Promise { undefined }
p1 +++ Promise { <rejected> '失败了' }
p2 --- Promise { undefined }
*/

let p1 = new Promise((resolve, reject) => { //成功有成功的结果，失败有失败的理由
    console.log("executor 执行了");
    setTimeout(() => {
        console.log('3s pass');
        // resolve('成功了');
        reject('失败了');
    }, 3000); //不阻塞，立即返回
    console.log("executor bye~~~");
  });

/* then只是设置回调函数，立即返回，异步的
* then返回一个新Promise对象，p1执行结束了，返回fulfiled或者rejected状态了
* 在成功或失败的架设函数中，返回值很重要。如果没有写就是return undefined，等价于resolve(undefined)
*/
let p2 = p1.then(
    // 1 undefined, undefined 在then中没有对p1的成功或失败的处理函数定义，p1成功就是p2成功，p2的状态和value和p1一样
    // 2 undefined, reason =>{} 失败定义 p1成功则p2成功；p1失败则p2成功了，return Promise.resolve(undefined0)
    // 2 value =>{}, undefined 成功定义，p1成功则p2 resolve(undefined); p1失败不处理，则p2跟随p1状态
    // undefined,
    // reason => {console.log('失败回调执行', reason); return Promise.resolve(undefined)}, // 函数，处理rejected状态
    // value => {console.log('成功回调执行', value); return Promise.reject(777);}, // , undefined
    // 3 value =>{},reason =>{}
    value => {console.log('成功回调执行', value); 
        // return Promise.resolve(undefined) //默认调用
        // return Promise.reject(777)
    },
    reason => {console.log('失败回调执行', reason); 
        // return Promise.resolve(undefined) //默认调用
    }
)
setInterval(() =>{
    console.log('p1 +++', p1); // __str__ 表达
    console.log('p2 ---', p2); // __str__ 表达
}, 1000) // 每隔1s 执行一次

/* 执行结果：
executor 执行了
executor bye~~~
p1 +++ Promise { <pending> }
p2 --- Promise { <pending> }
p1 +++ Promise { <pending> }
p2 --- Promise { <pending> }
3s pass
失败回调执行 失败了
p1 +++ Promise { <rejected> '失败了' }
p2 --- Promise { undefined }
p1 +++ Promise { <rejected> '失败了' }
p2 --- Promise { undefined }
*/

var myPromise = new Promise(function(resolve, reject){ 
    console.log('do sth.')
    setTimeout(()=>{
      console.log('~~~~~')
      resolve('ok');
      //reject('error');
    }, 3000); // 延时3秒执行一次结束
  })

  let pro1 = myPromise.then( 
    value => {/*如果成功则显示结果*/
      console.log(1, 'successful');
      return 1111;
    },
    reason => {/*如果失败则显示原因*/ 
      console.log(2, 'failed');
      return 2222;
    }
  )

  let pro2 = myPromise.catch(reason=>{
    console.log(3, reason)
  })

  // 开始链式调用
  pro2.then( 
    value => console.log(4, value), // value是什么？
     reason => console.log(5, reason) // reason是什么？
  ).then(
    value => {
      console.log(6, value) // 已经不是pro2对象了，value是什么
      return Promise.reject('pro2 => new Promise object rejected');
     }
  ).catch(
    reason => {
      console.log(7, reason);
       return Promise.resolve(reason + ' *')
    }
  ).then(
    value => console.log(8, value), // value是什么？
    reason => console.log(9, reason) // reason是什么？
  ) // 返回的是什么？

  /*执行结果
  do sth.
  ~~~~~
  1 'successful'
  4 'ok'
  6 undefined
  7 'pro2 => new Promise object rejected'
  8 'pro2 => new Promise object rejected *'
  */

class Serialization {
    constructor() {
        console.log('Serialization constructor~~~');
        if (typeof (this.stringify) !== 'function') {
            throw new ReferenceError('should define stringify.');
        }
    }
}
class Point extends Serialization {
    constructor(x, y) {
        console.log('Point Constructor~~~~');
        super(); // 调用父构造器
        this.x = x;
        this.y = y;
    }
    stringify() {
        return `<Point x=${this.x}, y=${this.y}>`
    }
}
class Point3D extends Point {
    constructor(x, y, z) {
        super(x, y);
        this.z = z;
    }
    stringify() {
        return `<Point x=${this.x}, y=${this.y}, z=${this.z}>`
    }
}

p = new Point(4, 5);
console.log(p.stringify())
p3d = new Point3D(7, 8, 9);
console.log(p3d.stringify());

/* 执行结果
Point Constructor~~~~
Serialization constructor~~~
<Point x=4, y=5>
Point Constructor~~~~
Serialization constructor~~~
<Point x=7, y=8, z=9>
*/

const SerializationMixin = Sup => class extends Sup {
    constructor(...args) {
        console.log('SerializationMixin constructor~~~');
        super(...args);
        if (typeof (this.stringify) !== 'function') {
            throw new ReferenceError('should define stringify.');
        }
    }
}

class Point {
    constructor(x, y) {
        console.log('Point Constructor~~~~');
        this.x = x;
        this.y = y;
    }
}

class Point3D extends SerializationMixin(Point) {
    constructor(x, y, z) {
        super(x, y); // super是Serialization(Point)包装过的新类型
        this.z = z;
    }
    stringify() {
        return `<Point3D ${this.x}.${this.y}.${this.z}>`;
    }
}

let p3d = new Point3D(70, 80, 90);
console.log(p3d.stringify());

/*执行结果
SerializationMixin constructor~~~
Point Constructor~~~~
<Point3D 70.80.90>
*/

// 缺省导出
export default class A{
    constructor(x){
        this.x = x;
    }
    show(){
        console.log(this.x);
    }
}

// 导出函数
export function foo(){
    console.log('foo function');
}

// 导出常量
export const CONSTA = 'aaa'

import {CONSTA, foo} from "./moda";
import * as mod_a from "./moda";

function * counter(){
    let i = 0; 
    while(true) 
        yield (++i);
}

g = counter();
console.log(g.next().value);

#presets：
babel-preset-env 当前环境支持的代码，新target
#可以替代下面的几个

#ES2015转码规则
npm install --save-dev babel-preset-es2015

#react转码规则
npm install --save-dev babel-preset-react

#ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3

// 缺省导出 匿名函数
export default function(){
    console.log('default export function')
}

// 缺省导入
import defaultFunc from '/.moda'
defaultFunc();



// 缺省导出 命名函数
export default function xyz(){
    console.log('default export function')
}

// 缺省导入
import defaultFunc from './moda'
defaultFunc();

// 缺省导出类
export default class {
    constructor(x) {
        this.x = x;
    }
    show() {
        console.log(this.x);
    }
}

// 命名导出 函数
export function foo() {
    console.log('regular foo()');
}

// 函数定义
function bar() {
    console.log('regular bar()');
}

// 变量常量定义
let x = 100;
var y = 200;
const z = 300;

// 导出
export { bar, x, y, z };

// as 设置别名
import defaultCls, { foo, bar, x, y, z as CONST_C } from './moda';

foo();
bar();
console.log(x); // x只读，不可修改，x++异常
console.log(y); // y只读
console.log(CONST_C);
new defaultCls(1000).show();

import * as newmod from './mod';

newmod.foo();
newmod.bar();
new newmod.default(2000).show();

// import DefaultCls, {foo, constV as v, x, y} from './t1.js';

// foo()
// console.log(v, x, y);

// let a = new DefaultCls('abc');
// // a.show();
// console.log(a.x);

import * as newMod from './t1.js';  // 导入所有放入对象中
console.log(newMod);
console.log(new newMod.default('abc').x)
console.log(newMod.x, newMod.y, newMod.constV)
newMod.foo()
/* 执行结果 npx babel src -d lib; node lib/t2.js
{
  constV: 1234,
  default: [class A],
  foo: [Function: foo],
  x: 2345,
  y: 3456
}
abc
2345 3456 1234
foo function
*/