ECMAScript 6进阶(正常人都理解了)

新增字符串操作方法

let str="hello word!!!";
    console.log(str.includes("h"));//判断字符串有没有h返回true
    console.log(str.startsWith("e"));//判断字符串头部有没有e返回false
    console.log(str.endsWith("d"));//判断字符串尾部有没有d返回false
    console.log(str.repeat(6));//将字符串遍历6次
    console.log(str.padStart(20,"你好"));//第一个参数是总长度 第二个是补到该长度的文字 补在开头
    console.log(str.padEnd(20,"你好"));//第一个参数是总长度 第二个是补到该长度的文字 补在尾部
    console.log(str.trimStart());//消除开头的空格
    console.log(str.trimEnd());//消除结尾的空格

数组的扩展 …arr

    let arr=[];
    arr.push(...[1,2,3,4,5,6])
    console.log(arr)//[1, 2, 3, 4, 5, 6]
    arr.push(1)
    console.log(arr)// [1, 2, 3, 4, 5, 6, 1]
    arr.push([4,2,3,6])
    console.log(arr)//[1, 2, 3, 4, 5, 6, 1, Array(4)]
    console.log(1,2,...[3,4,5,6,7]);
    console.log(...(1>2?[1]:[2]));//2 可放置表达式
    console.log([...[],1]);//[1]
    //可作为函数调用
    function add(x,y){
        return x+y;
    }
    let arr1=[8,9]
    console.log(...arr1);//8 9    将数组遍历出来
   console.log(add(...arr1))

Array.from()方法

将类数组对象转换为真正的数组
from()还可以接受第二个参数，用来对每个元素进行处理

 let arr=document.querySelectorAll("li"); //获取到所有的li标签
 console.log( Array.from(arr));
 let a=Array.from(arr,ele=>ele.textContent);
 console.log(a) 

of方法

0f()将任意的数据类型转换成数组

console.log(Array.of(3,11,20,[1,2,3],{id:1}));

数组的遍历方法

    //对键名的遍历
    let arr=[1,2,3,4];
    for(let a of arr.keys()){
        console.log(a); // 0123
    }
    //对键值的遍历
    for(let a of arr.values()){
        console.log(a);// 1234
    }
    //对键值对的遍历
    for(let a of arr.entries()){
        console.log(a);// 01 12 23 34
    }

对象的扩展

 const name="填",age=1;
//普通的写法
 const obj={
	this.name=name;
	this.age=age;
	show:function(){
		console.log(this.name)
	}
}
//简写
    const obj={
        name, //这种简写 需属性跟原本属性相符 才可进行匹配数据 要不然会找不到
        age,
        show(){
            console.log(this.name)
        }
    }
    obj.show()

对象的新增方法

Object.is()方法

    console.log('abc'==="abc"); //true
    console.log(Object.is('abc','abc'));//true
    console.log({}==={});//false 想必这里有点疑问 为什么两个都是[]会返回false呢 因为这里的两个对象 都引用了不同的内存地址 所有才会返回false
    console.log(Object.is({},{}));//false
    console.log(NaN===NaN);//false
    console.log(Object.is(NaN,NaN));//true
    console.log(+0===-0);//true
    console.log(Object.is(-0,+0));//false

区别：===和Object.is的区别就是 ===在进行NaN判断时会等于false Object在判断-0+0是否相等会返回false

Object.assign()方法

    const target={a:1}
    const source1={b:2}
    const source2={c:3}
    Object.assign(target,source1,source2) //target为目标对象  source1为源对象 source2为源对象 可以为多个源对象
    console.log(target) //a:1 b:2 c:3

 const target1={a:1,b:1,c:2}
    const source3={b:2}
    const source4={c:3}
    Object.assign(target1,source3,source4)
    console.log(target1);//a:1 b:2 c:3

后面的对象属性会覆盖前面的对象属性

数组的遍历方法

 //对键名的遍历
    let arr=[1,2,3,4];
    for(let a of arr.keys()){
        console.log(a); // 0123
    }
    //对键值的遍历
    for(let a of arr.values()){
        console.log(a);// 1234
    }
    //对键值对的遍历
    for(let a of arr.entries()){
        console.log(a);// 01 12 23 34
    }

对象的遍历方法

    let object ={id:1,name:"填"}
   console.log(Object.keys(object))//(2) ['id', 'name']
   console.log(Object.values(object))//(2) [1, '填']
   console.log(Object.entries(object))//[Array(2), Array(2)]

includes（）返回布尔类型 判断数组中是否包含给的值

let a=[1,2,3,4,5,6,7,8]
console.log(a.includes(8));//true
console.log(a.includes("8"));//false

set对象

是一个无序 没有重复值的集合 （没有键）

 let arr=[1,2,3];
    // console.log([...arr]);
    let set=new Set([...arr,6]);
     console.log(set);
    //  let set1=new Set();
    //  set1.add(1)
    //  console.log(set1);
    //返回有多少个元素
   console.log(set.size);
   //添加元素进去 
   console.log(set.add(5));//Set(5) {1, 2, 3, 4, 5}
   //删除
   console.log(set.delete(5));//true
   //返回set里是否有该成员
   console.log(set.has(5));//false
   //清除所有成员 没有返回值
//    console.log(set.clear())//undefined
   for(let item of set.keys()){
    console.log(item);//1,2,3,4 set中key方法和values方法显示的内容一样
   }
   for(let item of set.values()){
    console.log(item);//1,2,3,4
   }
   for(let item of set.entries()){
    console.log(item);// [1,1],[2,2],[3,3],[4,4] set没有键 因此返回的键值是这样子的
   }

去重

   let a=[1,2,3];
   let b=[2,3,4];
   let c=[5,6,7];
   let set1=new Set([...a,...b,...c]) 
 
   console.log(...set1);
   let a1="asdfsfaa";
   let set2=new Set(a1);
   let a3=[...set2].join(""); //join是数组的方法 给每个序列的数字加上字符
   console.log(a3);

map对象

map对象的键值都可以是任意数据类型的

 let age="age1";
    let map=new Map([[age,1]]);
    map.set(name,"张三");
   console.log(map.get("name"));//类型不对也会返回undefined
    console.log(map.size); //返回个数 1
     console.log(map.has(name)); //判断是否有该键 true
  //   console.log(map.delete(name));//删除键所对应的值 true
  //   console.log(map.clear(name));//清除所有对象 返回undefined
     for(let i of map.keys()){
        console.log(i); //这里name会返回空值 因为是个对象 为空
     }

     for(let i of map.values()){
        console.log(i);
     }
     for(let i of map.entries()){
        console.log(i);
     }
     console.log(map);

Module语法

export和import命令
export为导出对应的属性和方法

//这里定义了要导出的属性
 export const name="张三";
 export const age=1;

使用import导出

<script type="module">
 import {name,age} from './Module.js'   //不可以忽略括号
 console.log(name,age) //张三 1
</script>

使用import命令时 需要知道所加载的变量名和函数名

使用export default命令

export default在模块中只能使用一次 默认导出适合导出一个值，且在导入时可以自定义名称，语法更简洁。

 export default function email1(){
    return "123"
 }
 -----------------------------------
  export  const email="123456789@qq.com";
  export const email;

使用import导出

<script type="module">
    import name from './Module.js'; //名字可以自定义 因为default只能使用一次 因此import命令后面不用加大括号
    console.log(name()); //123
    ---------------------------------
    import name from './Module.js';
     console.log(name); //123456789@qq.com
</script>