JavaScript新特性

 //重复声明:
 //在同一个作用域内,不可以使用 let重复声明同名的变量,这有助于避免出现命名冲突和不必要的错误
 // var a = "123";
 let a = "let123";       //let重复声明在这里就会报错预警了...(注释运行);
 // let a = "let321";       //let变量声明,会检查当前环境中是否存在同名变量,存在则不予运行;
 console.log(a);
 //{块级作用域}+变量提升+命名污染
 //使用 let声明的变量具有块级作用域,意味着变量的作用域限制在声明它的代码块内如: {花括号所包含的范围}
 let obj = "代码块外部obj";
 {
     //ES6允许你在代码块中使用 let 和 const 声明变量,
     //将变量的作用域限制在块级范围内,避免了传统的变量提升、重名污染问题.
     let obj = "{代码块内部obj} 二者不相互影响"
     let obj2 = "{代码块中的变量,外部也无法访问}"
     console.log(obj);
     console.log(obj2);
 }
 console.log(obj);
 // console.log(obj2);  //外部找不到obj2报错.

 //使用 var 声明的变量在循环体内部具有函数级作用域
 ///这意味着循环内部的变量会被提升到循环外部,从而导致循环迭代时可能出现意外的行为。
 for (var i = 0; i < 5; i++) {
     setTimeout(function() {
       console.log(i);           //输出:5 五次,因为循环结束时i的值为 5
     }, 100);
 }

 //ES6 中使用 `let` 声明变量可以在每次循环迭代时创建一个新的块级作用域,避免了循环作用域问题。
 for (let i = 0; i < 5; i++) {
     setTimeout(function() {
       console.log(i);           //输出 0、1、2、3、4每次循环迭代都会创建一个新的块级作用域.
     }, 100);
 }

 //结合了上面的let const就很容易了...
 //声明一个常量 PI 并初始化为 3.14159
 const PI = 3.14159;  
 // PI = 3.14;       //这行代码会报错,因为常量 PI 的值不能被修改;
 
 const person = {
   name: 'John',
   age: 30
 };
 person.age = 31;            // 对象的属性可以修改
 person.city = 'New York';   // 对象的属性可以新增
 // person = {};  // 这行代码会报错，因为常量 person 本身的引用不能被修改

 let numbers = [0,1,2,3];
 let [a,b,c,d=33,e=55,f] = [0,1,2,3];
 console.log(a);
 console.log(b);
 console.log(c);
 console.log("变量和数组下标都存在值,数组为准: "+d);			   //3
 console.log("如果声明变量下标大于数组,变量默认值: "+e);		  	  //55	
 console.log("如果声明变量下标大于数组,无变量默认值: "+f);		 //undefined
 
 //解构赋值可以简写,直接使用数组|对象进行赋值;
 let [a1,b1,c1,d1=33,e1=55,f1] = numbers;    //与上述一样效果;

let obj = {
    name : "张三",
    age : 18,
}
let { name,age = 19,gender,birthday=new Date() } = obj;
console.log("无匹配属性默认: "+gender);					//undefined
console.log("无匹配可自定义: "+birthday);					//默认标准时间
console.log("匹配优先采用对象属性值: "+age);				  //匹配优先采用对象属性值: 18

 /**对象解构作为函数参数 */
 let person = { firstName: "John", lastName: "Doe", age: 30 };
 function printPersonInfo({firstName,lastName,age}) { console.log(`Name: ${firstName} ${lastName}, Age: ${age}`); }
 
 printPersonInfo(person);        //Name: John Doe, Age: 30

 let point = [10, 20];
 function printCoordinates([x,y]) { console.log(`X: ${x}, Y: ${y}`); }
 printCoordinates(point);        //X: 10, Y: 20

 let person2 = { firstName: "John", lastName: "Doe" };
 function printPersonInfo({firstName = "Unknown", lastName = "Unknown", age = "Unknown"}) { 
     console.log(`Name: ${firstName} ${lastName}, Age: ${age}`); 
 }
 printPersonInfo(person2);       //Name: John Doe, Age: Unknown

 const age = 30;
 const name = 'Alice';
 const message = `我叫${name} 今年${age}岁,
 明年${age+1}岁,后年${age+2},还有 ${12-(age%12)+'年'}就是\`本命年\``;
 
 console.log(message);       //输出: 我叫Alice 今年30岁,
                             //      明年31岁,后年32,还有 6年就是`本命年`

/** REST参数的使用 */
//REST 参数使用三个点 ... 作为前缀，放在函数参数列表的最后
function show(a,b,...c){
    console.log(a);
    console.log(b);
    console.log(c+"\n"); 
}

show(1);                //未赋值参数默认: undefined
show(1,2,3,4);          //REST参数 ...c: 将后面接受的参数以数组的行驶进行存储

/** REST参数和Arguments对象的区别: */
function showa(a,b){
    console.log(a);
    console.log(b);
    console.log(arguments.length+"\n"); 
}
showa(1);                   //arguments长度1
showa(1,2,3,4);             //arguments长度4    arguments对象相当于是一个参数列表的对象 可以获取函数所有的参数,以对象形式存储;

/** ES6扩展运算符 */
//『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』
const odeity = ["蒙德","璃月","稻妻","须弥","枫丹","纳塔"];
console.log(odeity);    //数组形式输出
console.log(...odeity); //x,x,x形式输出

/** 扩展运算符常用于对数组的操作使用: */
//数组合并
const nums1 = [1,2,3];
const nums2 = [4,5,6];
console.log("两个数组元素拆出来并放在新的数组对象中: "+[...nums1,...nums2]);

//数组克隆: 
const str1 = ["E","G"];
const str2 = [...str1];
console.log("克隆新数组:"+str2+",需要注意基本数据类型copy元素值,引用数据类型copy元素地址");

//伪数组对象--转数组
//有部分的对象但是存储方式是数组形式的可以通过 ...obj 转换成数组,比如 arguments
function show(){ 
    console.log(arguments); 
    console.log(...arguments); 
}
show("a","b","c","d","e","f","g",);     //对象也可以通过 扩展运算符 转化为多个变量

 //初始化一些变量|函数;
 let name = "wsm";
 let age = 18;
 let i = 1;
 function say(){ console.log(`我叫${name},今年${age}`); }
 
 //字面量创建对象:
 //属性|函数简写: 如果已存在(变量|函数),和字面量对象内部(属性|方法)同名且值相同则可以直接引用;
 //原始写法:     var obj = { name:name,age:age,say:say}
 let obj = { name,age,say }
 console.log(obj.name);  //wsm
 console.log(obj.age);   //18
 console.log(obj);       //{ name: 'wsm', age: 18, say: [Function: say] }
 obj.say();              //我叫wsm,今年18
 
 //函数定义简写: 字面量对象中定义函数可以省略 function;
 //原始写法: var obj2 = { newName:"540",name:name,newSay: function(){ console.log(`我叫${this.name},新名字是${this.newName}`) } }
 let obj2 = { newName:"540",name,newSay(){ console.log(`我叫${this.name},新名字是${this.newName}`) } }
 console.log(obj2);
 obj2.newSay();
 
 //计算属性名:  允许使用已存在变量值,作为字面量对象的属性名(动态属性名)
 //拼接属性名:  允许使用已存在变量值,多个变量[拼接]为字面量对象的属性名(动态属性名)
 let obj3 = { name:"540", [name+i]:"540i号" }
 console.log(obj3);      //{ name: '540', wsm1: '540i号' }   属性名是对象的值|多个对象值组合,可以用于动态属性名;

//定义原始函数、箭头函数
function originalFun(){
    console.log("定义普通函数");
}
const arrowsFun = ()=>{ console.log("定义箭头函数"); }
originalFun();
arrowsFun();

/箭头函数高级使用:
//只有一个形参的时候，可以省略小括号
const arrowsParamFun = x =>{ return x }
console.log("箭头函数返回值："+arrowsParamFun("one"));

//只有一行代码的时候，可以省略 return
//只有一行代码的时候，我们可以省略大括号
const arrowsParamFun2 = x =>  x;
console.log("箭头函数返回值："+arrowsParamFun2("one"));

/Foreach遍历数组对象:
//forEach() 是 JavaScript 中的一个数组方法,用于遍历数组的每个元素,并且可以使用箭头函数:
let arrs = ['one', 'two', 'tree'];
//普通函数使用
arrs.forEach(function (item, index) {
    //执行过程中可以修改原数组
    arrs[index] = arrs[index] + "X";
    console.log(`第${index + 1}元素:${item}`);
});
//箭头函数使用
arrs.forEach((item, index) => console.log(`第${index + 1}元素:${item}`));

//这种写法对于刚接触的朋友会很炸裂,慢慢接受一下就好了🆗
//我们都知道函数有返回值 return {可以是一个对象}👇👇👇

const ObjFun = ()=>{ return {a:123}; };         //该函数返回一个对象,而 ()=>{} 仅有一行代码可以省略 return {  }
const ObjFun2 = ()=> {a:123};

console.log(ObjFun());
console.log(ObjFun2());                         //返回undefined 因为: {a:123} JS无法判断{}是函数代码块|对象的作用域,所以无法判断为对象返回; 

//但,难道: ()=>{ return {对象} } 就只能这样写了吗? 🚫还可以升级🆙
const ObjFun3 = ()=> ({a:123});
console.log(ObjFun3());                         //使用({对象})标识对象的作用域进行返回完成🎉

//Demo: 箭头函数返回一个对象,name需要作为参数传递(最简化)
//方案一:
const objname = (pname)=> ({name:pname});
console.log(objname("张三"));                   //🎉完成,箭头函数简介大大提高了开发效率！但还可以升级;

//方案二: 结合上面学习的 `字面量对象`:同名参数对象之间引用,如果参数名和对象名相同则👇👇👇
const objname2 = (name)=> ({name});
console.log(objname2("张三三"));                  //太强了👍❗

{ a: 123 }
undefined
{ a: 123 }
{ name: '张三' }
{ name: '张三三' }

//使用箭头函数 ... 动态传递参数,并使用;
const agrufun = (...params)=>{
    console.log();
    process.stdout.write("传入参数"+params.length+"个,分别是：");
    params.forEach(element => process.stdout.write(element+" ") );		//箭头函数通常作为回调函数使用;
}

agrufun();
agrufun("123");
agrufun("1","2","3");

//在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值
name = "全局变量";
const funw = function(){ console.log(this.name); }
const objw = { name:"objw变量",funw }

funw();         //输出: 全局变量
objw.funw();    //输出: objw变量 		this.name指向引用对象objw;

 //假设存在：函数x、函数y|x是y的回调函数
 //就是：将函数x，作为参数传递函数y
 y(x,...){ 
   //执行函数,
   //在特定的位置执行x() 函数;
 }
 //如果x函数需要参数,可以定义在...也在y()函数中一起传递过来;

//定义X函数: 用于加法运算;
function x(a,b){
    console.log(a+b);
}
//定义y函数: 作为计算器验证判断参数是否是数值;
function y(callback,a,b){
    console.log("y函数的代码: 判断a,b是否是数值...");
    callback(a,b);
}

x(1,1);             //普通调用x 但不安全;
y(x,1,1);           //为了保证参数是数值,函数y进行验证正常callback回调x函数进行计算;

//定义全局属性|方法;
a = "global属性";
function callback(){ console.log(this.a) }

//定义对象: 对象内部引用全局的方法;
var obj = { a:"obj属性",callback:callback };
//调用方法:
obj.callback();               //obj属性
callback();                   //global属性,以上还算正常;

/**正片开始
 * 定义函数: 参数是一个回调函数; 
 */
function func(callback){
    callback();
}
//调用函数传递回调函数是对象.函数 obj.callback
func(obj.callback);          //global属性

<script>
    /**箭头函数不会创建自己的this它只会从自己的作用域链的上一层沿用this */
    //在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值
    name = "全局变量";
    const funw = function(){ console.log(this.name); }
    const objw = { name:"objw变量",funw }

    funw();         //全局变量
    objw.funw();    //objw变量: this指向引用的对象;

//
    //箭头函数不会创建自己的this，它只会从自己的作用域链的上一层沿用this
    JTname = "{全局箭头属性}"
    const fn = () => console.log(this.JTname);
    fn()
	
    {
        //作用域中调用箭头函数: 箭头函数优先使用作用域中的变量
        JTname = "{作用域箭头属性}";
        fn();
    }
</script> 

全局变量
objw变量
{全局箭头属性}
{作用域箭头属性}

/** Set集合 
 *  Set集合类似于数组，但是成员的值都是唯一的 */
{
    let objs = new Set();
    let nums = [1, 2, 3, 3, 2, 4];
    nums.forEach(o => objs.add(o));     //add()方法向 Set 结构加入成员

    console.log(objs);                  //Set(4) { 1, 2, 3, 4 }: 结果表明 Set 结构不会添加重复的值
    console.log("集合元素个数：" + objs.size);
}

/** Set常用方法: 
 *  Set可以接受一个【数组】或 具有 iterable 接口的其他数据结构作为参数 */
{
    let objs = new Set([1, 1, 2, 3]);

    objs.clear();                   //清空Set集合元素 Set(0) {}  
    console.log(objs);
    console.log(objs.add(1));  		//Set(1) { 1 }
    console.log(objs.add('1'));   	//Set(2) { 1, '1' }	1和'1' 是两个不同的值
    								//Set内部判断算法叫做“Same-value-zero equality” 类似于 === 恒等判断; 
    console.log(objs.has(1));       //true  元素存在
    console.log(objs.has(2));       //false 元素不存在
    console.log(objs.delete(1));    //true  删除成功
    console.log(objs.delete(2));    //false 元素不存在删除失败
}

/** Set的遍历： */
{
    let objs = new Set([1, 1, 2, 3]);
    //由于 Set 结构没有键名，只有键值,所以keys方法和values方法的行为完全一致
    for (let item of objs.keys()) { console.log(item); }
    for (let item of objs.values()) { console.log(item); }
    //entries方法返回的遍历器同时包括键名和键值，每次输出一个数组，它的两个成员完全相等
    for (let item of objs.entries()) { console.log(item); }
    //Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值
    objs.forEach((value, key) => console.log(key + ' : ' + value))
}

/** Set使用小技巧： */
{
    //通过结构赋值+Set 快速数组去重
    let nums = [1, 1, 2, 2, 3];
    nums = [...new Set(nums)];
    console.log(nums);          //[ 1, 2, 3 ]

    //Array.from(Set): 快速将Set数据结构转换成数组
    let items = Array.from(new Set([1, 1, 2, 2, 3]));
    console.log(items);         //[ 1, 2, 3 ]

    //快速去除字符串重复字符 并通过 [数组].join('') 拼接数组元素
    let strs = [...new Set('aABBBCC')].join('');
    console.log(strs);          //aABC

    //因为Set的唯一去重的特性可以快速实现: 并集（Union）、交集（Intersect）和差集（Difference）
    let a = new Set([1, 2, 3]);
    let b = new Set([4, 3, 2]);

    // 并集
    let union = new Set([...a, ...b]);
    // Set {1, 2, 3, 4}

    // 交集
    let intersect = new Set([...a].filter(x => b.has(x)));
    // set {2, 3}

    // （a 相对于 b 的）差集
    let difference = new Set([...a].filter(x => !b.has(x)));
    // Set {1}
}

//Map的使用：
{
    let objm = new Map();
    //set().set(支持链式编程添加元素) K,V可以是任何数据结构
    objm.set("name", "wsm").set("age", 18);
    console.log(objm.get("name"));      //wsm
    console.log(objm.has("name"));      //true
    console.log(objm.size);             //2
    console.log(objm);                  //Map(2) { 'name' => 'wsm', 'age' => 18 }

    //删除指定key的元素,没有key则返回false
    console.log(objm.delete("name2"));   //false
    console.log(objm.delete("name"));    //true    
    console.log(objm.size);              //1

    objm.clear();                        //清空所有元素
    console.log(objm);                   //Map(0) {}
    
    /** Map可以使用数组(或任何具有 Iterator 接口且每个成员都是一个双元素的数组的数据结构) 作为参数 */
    const map1 = new Map([
        ['name', '张三'],
        ['title', 'Author']
    ]);
    console.log(map1);

    const set = new Set([
        ['foo', 1],
        ['bar', 2]
    ]);
    const m1 = new Map(set);
    const m2 = new Map(m1);
    console.log(m1);        //Map(2) { 'foo' => 1, 'bar' => 2 }
    console.log(m2);        //Map(2) { 'foo' => 1, 'bar' => 2 } 
}

//Map的循环遍历:
{
    const map = new Map([['name', 'wsm'], ['age', 18],]);
    //返回键名的遍历器
    for (let key of map.keys()) { console.log(key); }
    //返回键值的遍历器
    for (let value of map.values()) { console.log(value); }
    //遍历 Map 的所有成员
    for (let [key, value] of map) { console.log(key, value); }

    //返回所有成员的遍历器 可以设置数组格式|[k,v] 格式
    for (let item of map.entries()) { console.log(item[0], item[1]); }
    for (let [key, value] of map.entries()) { console.log(key, value); }
}

//Map小技巧：数据类型之间的转换
{
    //Map转换数组
    const myMap = new Map().set('key', 'value').set({ 'key': 'key对象结构' }, 'value');
    console.log([...myMap]);                //[ [ 'key', 'value' ], [ { key: 'key对象结构' }, 'value' ] ]

    //Map转换对象
    //如果Map 所有的键都是字符串，它可以无损地转为对象
    //如果有非字符串的键名，那么这个键名会被转成字符串，再作为对象的键名
    const objmap = new Map().set('name', 'wsm').set('age', 18);
    function strMapToObj(strMap) {          //通过定义一个函数来实现;
        let obj = Object.create(null);
        for (let [k, v] of strMap) { obj[k] = v; }
        return obj;
    }
    console.log(strMapToObj(objmap));       //[Object: null prototype] { name: 'wsm', age: 18 }

    //对象转换Map直接通过Object.entries()
    let obj = { "a": 1, "b": 2 };
    console.log(new Map(Object.entries(obj)));

    //Map 转为 JSON
    //Map 的键名都是字符串，这时可以选择转为对象 JSON
    function strMapToJson(strMap) { return JSON.stringify(strMapToObj(strMap)); }   //使用递归遍历JSON.stringify();
    let JsonMap = new Map().set('yes', true).set('no', false);
    console.log(strMapToJson(JsonMap));

    //Map 的键名有非字符串，这时可以选择转为数组 JSON
    let arrayMap = new Map().set('key', 'value').set({ 'key': 'key对象结构' }, 'value');
    function mapToArrayJson(map) { return JSON.stringify([...map]); }
    console.log(mapToArrayJson(arrayMap));

    //JSON 转为 Map
    //JSON 转为 Map，正常情况下，所有键名都是字符串
    function objToStrMap(obj) {     //定义objToStrMap将对象转换为 Map 的函数
        let strMap = new Map();
        for (let k of Object.keys(obj)) { strMap.set(k, obj[k]); }
        return strMap;
    }
    function jsonToStrMap(jsonStr) { return objToStrMap(JSON.parse(jsonStr)); }
    console.log(jsonToStrMap('{"yes": true, "no": false}'));

    //特殊情况: 整个JSON就是一个数组，且每个数组成员本身，又是一个有两个成员的数组
    function jsonToMap(jsonStr) { return new Map(JSON.parse(jsonStr)); }
    console.log(jsonToMap('[[true,7],[{"foo":3},["abc"]]]'));
}

/** WeakRef弱引用的引用场景: 解决内存泄漏 */
//对象关联内存泄漏问题:
{   //node --expose-gc   
    //global.gc();
    //假设有一个a b对象: a和b有关系,需要通过a找到b则:
    var a = {};
    var b = { 'obj':new Array(1000) };
    a.ab = b;       //直接讲b的引用到a的属性ab中
    //如果b对象使用完毕回收 b=null
    //因为b还被a.ab引用所以 b值虽然为null但是内存空间仍然无法回收;
    process.memoryUsage();      //查看环境内存使用情况
    b = null;                   //仅仅是将b变量引用的地址置空,但堆空间依然存在
    global.gc();                //手动调用垃圾回收
    console.log(a.ab);          //因为可达性分析算法堆依然有内存指向所以 Array(1000) 并不会被回收;
    process.memoryUsage();
}

//使用MeakMap解决内存泄漏
{   //node --expose-gc
    //global.gc();
    //假设有一个a b对象: a和b有关系,需要通过a找到b则:
    var a = {};
    var b = { 'obj':new Array(1000) };
    a.ab = new WeakRef(b);      //a.ab 执行的一个WeakRef弱引用对象;            
    b = null;                   //b空引用                    
    global.gc();                //手动垃圾回收
    a.ab.deref();               //垃圾回收后值undefined
}

 /** ES5|ES6⬆️之前，通过定义构造函数方式创建对象： 
  *  1.创建一个构造函数定义类的属性
  *  2.函数名.prototype定义类原型中类的方法
  *  3.new 构造函数(...)创建构造函数返回的类实例 */
 function Point(x, y) {
     this.x = x;
     this.y = y;
 }
 
 Point.prototype.toString = function () {
 return '(' + this.x + ', ' + this.y + ')';
 };
   
 var p = new Point(1, 2);
 console.log(p);                             //Point { x: 1, y: 2 }

 /** ES6新增Class关键字创建对象：
  *  1.使用Class关键字定义类
  *  2.constructor中this.属性定义类属性
  *  3.Class{}中直接 函数名(){ 定义类中的方法 } 
  *    函数不需要加function 开头,方法与方法之间不需要','逗号分隔加了会报错 */
 class Point {
     constructor(x, y) {
         this.x = x;
         this.y = y;
     }
 
     toString() { 
         return '(' + this.x + ', ' + this.y + ')'; 
     }
 }
 //  4.与ES6之前一样也是通过 new 关键字创建类的实例对象
 var p = new Point(1, 2);
 console.log(p);                             //Point { x: 1, y: 2 }

 /** Class 本质是对构造函数的一层包装 
 *  Class类名 与 构造函数名有相同的属性,有原型链的特性 
 *  因为有原型链的存在所以也可以像以前一样通过原型链定义方法,但不建议 */
 console.log(Point.prototype.constructor);                      //[class Point]
 console.log(Point.prototype === p.__proto__);                  //true
 console.log(Point.prototype.constructor === Point);            //true
  
 console.log(".name属性返回构造函数名"+Point.name);                //Point
 console.log(".length属性返回构造函数形参个数"+Point.length);       //2 对应类两个属性

 /** Class最终还是和构造函数有所不同
 *  实例化对象必须通过 new 类名()
 *  Class类定义的函数不可枚举便利 */
 // let w =  Point(5,4);       报错: cannot be invoked without 'new'
 let w = new Point(5,4);
 for (const key in w) { console.log(key); }      //只有x、y

 {
     //方式一：类赋值myClass对于不常用的类 myClass=null 则可以快速回收my的类资源;
     const myClass = class my{  
         //省略构造器...
         fun(){ console.log("my只在Class{ 可以使用,代指当前类对象 }: "+my.name); }
      }
 
     // let myC = new my();      报错,对外展示的类名是对象名
     let myC = new myClass();
     myC.fun();
 
 
     //方式二: 匿名类,快速定义快速回收不会占用内存
     const myClass2 = new class { 
         constructor(name){ this.name=name }
         fun(){ console.log(this.name+"是一个理解执行的类,直接返回一个类对象"); } 
     }("wsm");
     myClass2.fun();
 }

 /** constructor构造器 */
 class MyClass{
     //无论是否手动定义,JavaScript引擎会默认添加一个空参构造器
     constructor(){
         console.log("执行构造器");
         return ["修改构造器返回对象实例this"]; 
     }    
 }
 let myc =  new MyClass();
 console.log(myc);                  //[ '修改构造器返回对象实例this' ]
 console.log(typeof myc);           //object类型
 console.log(myc instanceof Array); //true

 /** Class和constructor中的this */
 {
     class MyClass{
         //无论是否手动定义,JavaScript引擎会默认添加一个空参构造器
         constructor(name,age){
             this.name = name;
             this.age = age;
         }
         wb(){ console.log(this) }
         show(){ console.log(`我叫${this.name},今年${this.age}`); }
         showJT = ()=>{  console.log(`我叫${this.name},今年${this.age}`); }
     }
 
     let myc = new MyClass('wsm',19);
     myc.wb();
     myc.show();
     myc.showJT();
 
     //通过对象解构赋值 myc对象的show 方法解构出来在外面执行
     let {wb} = myc
     wb();               //undefined: 因为现在wb已经相当于没有任何引用的一个普通函数执行了
 }

/** Class中的属性: 
*   除了constructor构造器中定义属性ES新特性：还可以在类的顶层定义属性、属性名表达式定义 */
{
    let word = "word";
    class MyClass {
        xname = 'w';
        ["hello" + word] = "初始化";
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
    	//函数名也可以使用 [表达式声明]
    }

    let myc = new MyClass("wsm", 18);
    console.log(myc);               // MyClass { xname: 'w', helloword: '初始化', name: 'wsm', age: 18 }
}

/** 早期JS私有属性|方法 */
{
    class MyClass {
        _xname = '_私有属性';
        [Symbol] = "Symbol私有属性";
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }

        _show() { return "_私有方法"; }
        [Symbol]() { console.log("Symbol私有方法"); }
    }

    let myc = new MyClass("wsm", 18);
    console.log(myc);
    console.log(myc._xname);
    console.log(myc._show());
    //Symbol 属性不具有枚举性且值唯一，类的外部并不能直接获取Symbol值...
}

/** ES6的#私有属性|方法 */
{
    class MyClass {
        #xname = '#私有属性';
        #show() { return "_私有方法"; }
        pubShow() {
            console.log(this.#xname);
            return this.#show();
        }
    }
    let myc = new MyClass();
    console.log(myc);
    myc.pubShow();
    // console.log(myc.#xname);        //编辑器报错: 没有找到对应属性|方法
    // console.log(myc.#show());           
}

/** ES6的#私有属性|方法: getter\setter */
{
    class MyClass {
        #name = '#私有属性';
        get getName() { return this.#name }
        set setName(value) { this.#name = value }
    }
    let myc = new MyClass();
    console.log(myc);           //MyClass {}
    console.log(myc.getName);   //#私有属性
    myc.setName = "#set修改私有属性"; console.log(myc.getName); //#set修改私有属性
}

{
    class MyClass {
        static sname = 'static属性';
        static show() {
            //"静态方法中的this指向的是MyClass: this===MyClass: "
            console.log(this === MyClass);
            return "static 方法";
        }
    }
	//静态属性属于类 不需要实例化对象直接通过 类名.属性|方法名
    console.log(MyClass);               //[class MyClass] { sname: 'static属性' }
    console.log(MyClass.sname);         //static属性
    console.log(MyClass.show());        //true static 方法
}

/** 静态代码块 static { } 需要定义在类的内部 */
{
    class MyClass {
        //...省略其他代码...
        static sname = 'static属性';
        static {
            try {
                console.log("static{ } 在类加载时最先且只执行一次,可以在程序加载时候动态设置初始值");
                this.sname = "static{初始值}"
            } catch {
                console.log("static 初始化失败");
            }
        }
    }
    console.log(MyClass.sname);     // ... static{初始值}
}

/** 类的继承extends 
 *  Class 可以通过`extends`关键字实现继承：子类继承父类的属性|方法、静态属性方法 但 不能继承私有属性|方法 */
{
    //父类
    class A {
        #prva = '私有属性A'
        static sta = '静态属性A';
        constructor(a) { this.a = a; }

        #prvfun() { return "私有方法A" }
        static stfun() { return "静态方法A" }
        publicfunction() { return "普通共有方法A" }
        publicfunctionS() { return "普通共有方法AA" }
    }

    //子类：子类除了可以继承父类的属性方法....还可以有自己的属性方法\\\
    class B extends A {
        constructor(a, b) {
            //子类构造函数中只有调用super()之后，才可以使用this关键字，否则会报错
            //子类实例的构建必须先完成父类的继承，只有super()方法才能让子类实例继承父类
            super(a);
            this.b = b;
        }
        publicfunctionS() { return "普通共有方法BB" }
    }

    let objB = new B('a', 'b');
    console.log(B);             //子类继承了父类的static静态属性方法
    console.log(B.sta);
    console.log(B.stfun());

    console.log(objB.a);        //继承了父类的属性|方法,对于同名方法子类重写的父类的方法
    console.log(objB.b);
    console.log(objB.publicfunction());
    console.log(objB.publicfunctionS());
}

[class B extends A]
静态属性A
静态方法A

a
b
普通共有方法A
普通共有方法BB

/** super() 函数使用： */
{
    //父类
    class A {
        constructor(a) {
            this.a = a;
            console.log("A构造器执行");
        }
    }

    //子类：子类除了可以继承父类的属性方法....还可以有自己的属性方法\\\
    class B extends A {
        constructor(a, b) {
            super(a);       //新建子类实例时，父类的构造函数必定会先运行一次
            this.b = b;
            console.log("B构造器执行");
        }
    }

    let objB = new B('a', 'b');
    //A构造器执行
    //B构造器执行
}

/** super虽然代表了父类的构造函数，但是内部调用和返回的是子类的this  */
{
    //父类
    class A {
        xname = "Aclass";
        constructor() {
            console.log(new.target.name);   //new.targe 返回当前类名
            console.log(this.xname);        
        }
    }

    //子类
    class B extends A {
        xname = "Bclass";
        constructor() { super(); }
    }
    let objA = new A(); // A Aclass
    let objB = new B(); // B Aclass ?为什么返回的xname是Aclass? super中的thsi是父类?
}

console.log(B.__proto__ === A);                     //true
console.log(Object.getPrototypeOf(B) === A);        //true
console.log(B.prototype.__proto__ === A.prototype); //true

//方式一
//Symbol是JavaScirpt的基本数据类型,所以并不能使用`new`
{
    let sy1 = Symbol();
    console.log('数据类型: ' + typeof sy1);      									//数据类型:symbol
}

//方式二: 函数接受一个字符串参数,表示对Symbol实例的描述
{
    let sy1 = Symbol('wsm');
    let sy2 = Symbol('wsm');
    console.log('Symbol(相同描述信息的值返回结果并不相同): ' + (sy1 === sy2));      	//false
}

//方式三: 有时候为了重新使用同一个Symbol值,Symbol.for()
//函数接受字符串参数,搜索内存堆中有没有以该参数作为名称的Symbol值,没有则创建|有则直接引用;
{
    let sy1 = Symbol.for('wsm');
    let sy2 = Symbol.for('wsm');
    console.log('Symbol.for(搜索创建指向同一块内存空间结果): ' + (sy1 === sy2));     	 //true
    console.log('Symbol.keyFor返回一个已登记的 Symbol 类型值的key:' + Symbol.keyFor(sy1));    //wsm
}

/**注意： */
//Symbol 值不能与其他数据进行运算会报错，但是Symbol值可以显式转为字符串
//Symbol 值也可以转为布尔值，但是不能转为数值
let sym = Symbol('sym');
// console.log("Symbol拼接" + sym);                         注释报错影响运行;
console.log("Symbol拼接" + String(sym));
console.log("Symbol拼接" + sym.toString());
console.log("Symbol可以转换成Boolean: " + Boolean(sym));
// console.log("但不可以转换成Number: " + Number(sym));       注释报错影响运行;

//因为 JS可以通过 对象.属性名 形式给对象添加新属性
//所以 当我们需要给对象新增一个临时属性|方法，很有可能新属性|方法同名覆盖了对象原有值;
{
    let a = { name: "wsm", age: 18 }
    a.name = "误操作覆盖的值";
    console.log(a);
}

//使用 Symbol唯一性特点解决命名冲突
//注意 使用Symbol作为属性名不能使用 .点运算符
//因为 .点运算符后面总是字符串,并不会读取Symbol作为标识名所指代的那个值
{
    let a = { name: "wsm", age: 18 }
    a[Symbol('sym')] = "[新增的属性名值0]";
    a[Symbol('sym')] = "[新增的属性名值1]";
    a[Symbol.for('sym')] = "[.for新增的属性名值0]";
    a[Symbol.for('sym')] = "[.for新增的属性名值1]";     //Symbol.for 的值是同一个内存空间所以后面的值会覆盖前面;
    console.log(a);
}

//方式二
//Symbol可以在声明时候定义在对象内部但是,但是貌似就不方便访问了...
{
    let sym = Symbol('sym');
    let obj = {
        name: 'wsm',
        sym: '.sym的值0',               //这里的sym并不是声明的Symbol类型,而是单纯的字符串;
        sym: '.sym的值1',               //对象定义相同的属性名会覆盖之前的值;
        [Symbol()]: '[symbol的值0]',
        [Symbol()]: '[symbol的值1]',
    }
    console.log(obj);

    //方式三: 
    //Object.defineProperty(对象,属性名,{配置信息}) 
    //Object 的静态方法可以直接在一个对象上定义一个新属性,通过配置设置属性值、可见...
    Object.defineProperty(obj, sym, { value: '[symbol的值2]', enumerable: true });
    console.log(obj);
    console.log("对象.xxx拼的是字符串sym: " + obj.sym);
    console.log("对象[xxx]中获取的是Symbol值: " + obj[sym]);
}

/** Symbol 属性名的遍历： */
{
    let obj = {
        name: 'wsm',
        sym: '.sym的值0',
        [Symbol()]: '[symbol的值0]',
        [Symbol()]: '[symbol的值1]',
    }
    //`for...in`、`for...of`遍历对象时候 Symbol属性名不会出现在循环中
    for (const key in obj) { console.log("属性名: " + key + "\t属性值: " + obj[key]); }

    console.log("JSON.stringify 将一个 JavaScript 对象或值转换为 JSON 字符串" + JSON.stringify(obj));
    console.log("Object.keys 静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组:" + Object.keys(obj));
    console.log("Object.getOwnPropertyNames 静态方法返回一个自身对象所有属性包含不可枚举属性,但不包含Symbol的数组:" + Object.keys(obj));
    console.log("Object.getOwnPropertySymbols 静态方法返回一个给定对象自有所有 Symbol属性的数组" + Object.getOwnPropertySymbols(obj));
}

//对于这样一组属性值不需要任何作用,但是需要属性名进行一定规范的属性可以使用Symbol当作其值确保唯一
const LOG = {};
LOG.LEVELS = {
    DEBUG: Symbol('debug'),
    INFO: Symbol('info'),
    WARN: Symbol('warn'),
};
console.log(LOG.LEVELS.DEBUG, 'debug message');
console.log(LOG.LEVELS.INFO, 'info message');


//Symbol每一个符号都是唯一的，这意味着您必须始终使用枚举本身来比较枚举
function getError(levers) {
    switch (levers) {
        case LOG.LEVELS.DEBUG:
            return console.log("debug");
        case LOG.LEVELS.INFO:
            return console.log("info");
        case LOG.LEVELS.WARN:
            return console.log("warn");
        default:
            return console.log("throw new Error");
    }
}
//只能使用LOG.LEVELS 才能正确返回值
getError("debug");                 //throw new Error
getError(LOG.LEVELS.WARN);         //warn

/** Symbol的内置属性: */
/** JS底层很多的实现类都是通过Symbol属性进行规定的: instanceof 
    instance of JS的内置属性用来判断对象的类型; */
{   console.log([] instanceof Array); }
/** 而对于对象类型 */
{
    class Wsm{ constructor(name){ this.name=name } }
    let w1 = new Wsm("wsm");
    console.log(w1 instanceof Wsm);
}
/** 其实底层的 instanceof 就相当于调用了对象的 `Symbol.hasInstance属性`而我们也可以同Symbol来自定义函数执行 */
{
    class Wsm{ 
        constructor(name){ this.name=name }
        static [Symbol.hasInstance](param){
            console.log("自定义instanceof");
            return param.constructor === this;
        }
    }
    let w1 = new Wsm("wsm"); 
    console.log(w1 instanceof Wsm);     //自定义instanceof  true
}

/** Iterator迭代器的使用: */
{
    //for...of:
    let arr = ['a', 'b', 'c'];
    for (const iteam of arr) { console.log(iteam); }

    //[Symbol.iterator].next() 函数:
    let iter = arr[Symbol.iterator]();
    console.log(iter.next()); // { value: 'a', done: false }
    console.log(iter.next()); // { value: 'b', done: false }
    console.log(iter.next()); // { value: 'c', done: false }
    console.log(iter.next()); // { value: undefined, done: true }
}
//有一些场合会默认调用 Iterator 接口（即Symbol.iterator方法
//对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法
//扩展运算符（...）也会调用默认的 Iterator 接口、Array.from()、Map()、Promise....

{
    class MyIterable {
        constructor(name, age, interests) {
          this.name = name;
          this.age = age;
          this.interests = interests;
        }
      
        [Symbol.iterator]() {
          // 保存类实例的引用
          let index = 0;
          const self = this;  
          return {
            next: function () {
              if (index < Object.keys(self).length) {
                //获取属性并返回属性名和对应的值 done为false
                const key = Object.keys(self)[index++];
                return { value: { key, value: self[key] }, done: false };
              } else {
                index = 0; // 重置索引
                return { done: true }; 
            }
            }
          };
        } 
    }
      //使用自定义类和迭代器: 我们可以对不同数据类型有了自己的控制
      const myObj = new MyIterable("John", 30, ["Reading", "Traveling"]);
      for (const { key, value } of myObj) { console.log(`${key}: ${value}`); }
      let iter = myObj[Symbol.iterator]();
      console.log(iter.next()); // { value: 'a', done: false }
      console.log(iter.next()); // { value: 'b', done: false }
      console.log(iter.next()); // { value: 'c', done: false }
      console.log(iter.next()); // { value: undefined, done: true }
}