21-ES6语法知识二

第二十一章.ES6语法知识二

• for…in

 let arr = [4,5,6,7];

for(let key in arr){
    console.log(key , arr[key]);
}
//0 4
//1 5
//2 6
//3 7    数字会打印出索引值  key value

 let obj = {
      name : "mint",
      age : 20,
      sex : "男",
      university : "外经贸"
 };
   
 //for in循环可以遍历出 原型 上面的属性
 for (let key in obj){
      console.log(key, obj[key]);
 };
//name mint
//age 20
//sex 男
//university 外经贸

• for…of

 let arr = [88,99,66,77];

 for (let number of arr) {
      console.log(number);
  }

 let obj = {
      name : "mint",
      age : 20,
      sex : "男",
      university : "外经贸"
 };
 
for (let objElement of Object.keys( obj )) {
      console.log(objElement);
 }
 //TypeError: objois not iterable obj不是一个可遍历的东西

• 对象便遍历的方法––固定写法

/*Object.keys()
 *Object.values()
 *object.entries()
 */
 
 let obj = {
      name : "mint",
      age : 20,
      sex : "男",
      university : "外经贸"
 };
 
  for (let x of Object.entries( obj )) {
      console.log(x);
   }
   
	//name mint
 	//age 20
 	//sex 男
 	//university 外经贸

    //解构赋值写法
    for (let [key,value] of Object.entries( obj )) {
      console.log(key,value);
    }
	//["name","mint"] 

• Symbol

  /*
    基础数据类型
    * number
    * string
    * boolean
    * undefined
    * null
    * symbol
    *bigInt(暂时不用了解)

    引用数据类型
    * object
    * */

let a = Symbol();
let b = Symbol();

console.log(a);//Symbol
console.log(b);//Sybol
console.log(a === b);//false 两个不同Symbol数据绝是不相等

let obj = {
      "name" : "皮卡鸭"
    };

    obj[ Symbol() ] = "巴拉巴拉吧";

    console.log(obj);

    console.log(obj["name"]);

/*
    *
    * 两个symbol数据绝不相等
    *
    * */

    let d = {
      a : 10,
      b : 20,
      c : 30
      //......
    };

    let xxx = Symbol();
    let yyy = Symbol();

    d[xxx] = 40;
    d[yyy] = 50;

    console.log(d);

	console.log( d[xxx] );//40
    console.log( d[yyy] );//50
    console.log( d[Symbol()] );//undefined 每个Symbol不一样，Symbol取值取不到

//想取到Symbol值，通常写法就是先定义变量是Symbol数据，用变量的形式取扩展，第二种方式就是for..of去遍历可以取到

//Symbol是独一无二的，不用担心这个值被覆盖了，扩展起来很香

• Set

 /*
    * 数据结构 Set
    *
    * */

    let x = new Set( [1,2,3,4,5,6] );//Set需要传入一个数组，组成一个Set数据结构
    console.log(x);//Set(3) {1,2,3} 带有迭代器 Entries 

/*最大作用 -- 去重*/
    let arr = [1,2,3,3,2,1];
    let s = new Set(arr);//[1,2,3]

let arr = [1,2,3,"3",2,1];
let newArr = [...new Set(arr)];

console.log(newArr);//[1,2,3,"3"] 得到取过重的新数组

 let a = [1,2,3,2,1];

 let set = new Set(a);

 set.add(4);
 set.delete(2);
 set.add(2);
 // set.clear();

 console.log(set);
 console.log( set.entries() );//
  for (let x of set.entries()) {
      console.log(x);
  }

• Map

 //来看一下这个例子
 let a = "name";
 let b = "age";
 let c = {x:10};
 let d = {y:20};
 let obj = {};

 obj[5] = "sssss"
 obj[a] = "mint";
 obj[b] = 16;
 obj[c] = "hahahahh"; //obj["[object Object]"] = "hahahahh";
 obj[d] = "nuenuenunue"; //obj["[object Object]"] = "nuenuenunue";

 console.log(obj);//{5: "sssss", name: "Sherry", age: 16, [object Object]: "nuenuenunue"}

/*
    * 数据类型：Map
    *
    *    普通对象的key不能是对象，Map的key可以是任意数据类型
    * */
    let a = "name";
    let b = "age";
    let c = {x:10};
    let d = {y:20};

    let m = new Map();

    m.set( a , "mint" );
    m.set( b , 18 );
    m.set( c , "hhhhhhh" );
    m.set( d , "nnnnnnnn" );

    console.log(m);//08-Map.html?_ijt=hdcjjq5lqas34g7mfpeem9b3dh:46 Map(4) {"name" => "mint", "age" => 18, {…} => "hhhhhhh", {…} => "nnnnnnnn"}
    console.log( m.get(c) );//用get()方法取值 hhhhhhh

//Map解决了对象不能用对象作为键值的缺点，Map没毛病~

• 乘性运算

let a = 2**3;

let b = 3;
b **= 3;

console.log(a);//8
console.log(b);//27

• 位运算

let a = 2;
let b = 3;

console.log(a | b);//3
console.log(a & b);//2
console.log(a ^ b);//1 异或运算 两位不同返回1，相同返回0

// 会舍去小数
let a = 2.44;
console.log(a | 0);//2

• parseInt、parseFloat

	let width = "200px";

    // console.log(width + 200); //200px200

    console.log( parseInt(width) + 200 + 'px' ); // 400px
   //从第一位非空格开始数，读到非数字结束
    console.log( parseInt("300px200") ); //300
    console.log( parseInt("    300px200") ); //300
    console.log( parseInt(" a   300px200") ); //NaN
    console.log( parseInt("+300px200") ); //300
    console.log( parseInt("-300px200") ); //-300
    console.log( parseInt("- 300px200") ); //NaN
    console.log( parseInt("-300.2px200") ); //-300

    console.log( parseFloat("-300.2px200") ); //-300.2

    console.log(NaN === NaN); //false

    console.log( isNaN(3) );//false
    console.log( isNaN(NaN) );//true
    console.log( isNaN("300") );//false
    console.log( isNaN("皮卡") );//true


    //ES6 建议调用 parseInt parseFloat isNaN的时候通过Number来调用
    console.log( Number.parseInt("300px") ); //300
    console.log( Number.parseFloat("300.2px") ); //300.2
    console.log( Number.isNaN(NaN) ); //true

    //第一个参数传入一个字符串，第二个参数传入进制
    console.log( parseInt( "110", 2) ); //6  把110当二进制来看得到10进制结果

    console.log( [1, 2, 3].map(parseInt) );//1 NaN NaN

 	[1,2,3].map( (item,index,arr)=>{
      console.log(item, index, arr);
    } );
    //1 0
    //2 1
    //3 2
        
   //错误思维 打印 1 2 3 返回一个数组 [1,2,3]
  console.log(paseInt(1));
  console.log(paseInt(2));
  console.log(paseInt(3));


    //事实上                没有0进制默认为10进制   
    console.log( parseInt(1,0) ); // 10进制   1
    console.log( parseInt(2,1) ); // 1进制    NaN
    console.log( parseInt(3,2) ); // 2进制    NaN
    //1进制比2小转不了返回NaN 同理2进制比3小准不了也返回NaN

• 对象简写

//正常写法
let age = 18;

let obj = {
      name : "Jam",
      age : age,//age ： age
      say : function(){
        console.log("Hello! 我是"+ this.name +"老师,今年"+this.age+"岁");
      },
      sex : "男"
    };

//简写
let obj = {
		name: "Sherry",
		age, //属性和值恰好一样，可以省略
		say() {   
		    //对象的属性的值是函数的时候可以简写
            console.log("Hello! 我是" + this.name + "老师,今年" + this.age + "岁");
		},
		sex: "男"
	};

	obj.say();