[JavaScript知识库]ECMAScript6总结

一. 对字符串提供的相关操作

1. 判断 一个字符串是否以某个子串开头
   用 startsWith
   当startsWith只有一个参数的时候

 <script>
 console.log(url.startsWith("s"));//false
    console.log(url.startsWith("w"));//true
    console.log(url.startsWith("ww"));//true
    console.log(url.startsWith("www"));//true
    console.log(url.startsWith("www."));//true
 </script>

当startsWith有两个参数

 <script>
 console.log(url.startsWith("b",4));//true
    console.log(url.startsWith("w",4));//false
</script>

2. 判断字符串是否以某个子串结尾
   用endsWith
   当只有一个参数的时候

 <script>
 console.log(url.endsWith("com"));//true
    console.log(url.endsWith("om"));//true
    console.log(url.endsWith("m"));//true
    console.log(url.endsWith("o"));//false
</script>

当有两个参数的时候

 </script>
console.log(url.endsWith("com",10));//false
    console.log(url.endsWith("du.",10));//true
</script>

3. 判断一个字符串中是否有某个子串
   用 includes
   当只有一个参数的时候

 <script>
console.log(url.includes("www"));//true
    console.log(url.includes("baidu"));//true
    console.log(url.includes("com"));//true
    console.log(url.includes("xxx"));//false
</script>

当有两个参数的时候

 <script>
 console.log(url.includes("www",4));//false
    console.log(url.includes("baidu",4));//true
    console.log(url.includes("com",4));//true
</script>

4. 重复某个字符串
   用repeat

 <script>
 let str="What"
    console.log(str.repeat(10));//WhatWhatWhatWhatWhatWhatWhatWhatWhatWhat
</script>

5. 遍历字符串
   用 for of

 <script>
  for (let char of url) {
        console.log(char);
    }
</script>

6. 模板字符串

 <script>
  let name="wangcai"
    let age="100"
</script>

7. 普通的字符串拼接

<script>
 console.log(name+"今年"+age+"岁");//wangcai今年100岁
</script>

二.对数值的操作

1. 新的整形字面量

 <script>
  let num=10;  //十进制
    let num1=0x10  //表示十六进制  那么这个数换成十进制就是16 16+0
    let num2=0b100 //0b开头表示二进制 4
    let num3=0o17  //0o表示八进制 8+7=15
</script>

2. 判断一个数字是否是NaN
   用 isNaN

 <script>
  let a=1;
    let b=undefined;
    console.log(Number.isNaN(a));//false
    console.log(Number.isNaN(a+b));//true
 </script>

3. 检测其参数是否为最大值
   用isFinite

 <script>
 console.log(Number.isFinite(-Infinity));//负无穷 false
    console.log(Number.isFinite(111));//true
    console.log(Number.isFinite("111"));//false  移植后 这种的更为准确
    console.log(isFinite("111"));//true 默认的进行一个隐式类型转换
</script>

4. 截取前面数字
   用 parseFloat

 <script>
  console.log(parseFloat("100年以后"));//100
    console.log(parseFloat("100.5年以后"));//100.5
    console.log(parseFloat("100.555年以后"));//100.555
    console.log(parseFloat("100.555年以后3.1415926"));//100.555
</script>

5. 截取前面的数字 但是只能截取整数部分
   用parseInt

 <script>
 console.log(parseInt("100.555年以后3.1415926"));//100
    console.log(parseInt(10,8));//8
    console.log(parseInt(11,8));//9
</script>

三.对函数的拓展

主要就是箭头函数
普通函数：

 <script>
    var fn=function(){
        console.log("fn");
     }
 </script>

箭头函数：

<script>
    var fn= ()=>{
         console.log("fn");
    }
    fn()
</script>

如果函数有一个参数 ()就可以省略不写了
如果说是多个参数 必须写

<script>
 var fn=function(){
        console.log(123);
     }
     //如果说函数体只有一个语句  {}花括号可以不写
     var fn=()=>console.log(123);
    fn()
</script>

如果只有一个语句一个参数

<script>
var gn=function(a){
        console.log(a*2);
    }
    var gn=a=>console.log(a*2);
    gn(2)
</script>

如果说函数只有一条带return的语句 {}也可以不写 return也可以不写

<script>
  var fn=function(a){
        return a*2
     }
     console.log(fn(2));

    var fn=a=>a*2;
    console.log(fn(2));
</script>

1. 收集参数
   argument

 <script>
    function fn(a,b,c,d){
        console.log(arguments);
        // arguments把我们的参数收集过来了
        // arguments到底是不是一个数组？
        console.log(Array.isArray(arguments));//false  不是数组  伪数组
    }
    fn(1,2,3,4)
</script>

2. rest参数(拓展参数)
   …args 整体也叫rest参数 他的作用也是收集参数

<script>
 function fn(...args){
        // 参数进来后被收集到args里
        console.log(args);
        console.log(Array.isArray(args));//true
        // args是一个 实打实的 数组
        console.log(arguments);
    }
    fn(1,2)
</script>

四.对数组的拓展

遍历数组的方式：

1. for循环
2. forEach
3. for in
4. for of

遍历对象的方式：

1. for in
2. Object.keys
3. Object.values
4. Object.entries

命名式编程的方法

1. find
   在一个数组里找到第一个满足条件的元素 并返回 若没有 则是undefined

<script>
 let arr=[1,2,3,4,5]
    let res=arr.find(function(item){
        return item>4
    })
    console.log(res);//5
    let res1=arr.find(function(item){
        return item>5
    })
    console.log(res1);//undefined
 </script>

2. findIndex
   在一个数组里找到第一个满足条件的元素 并返回索引 若没有 则是-1

<script>
    let res2=arr.findIndex(function(item){
        return item>4
    })
    let res3=arr.findIndex(function(item){
        return item>5
    })
    console.log(res2);//4 代表找到了 索引为4的就是
    console.log(res3);//-1 代表没找到
 </script>

3. map
   返回一个加工后的数组 加工条件在你的return

<script>
   let arr=[1,2,3,4,5]
    let res=arr.map(item=>item*2)
    console.log(res);
</script>

4. filter
   对数组进行过滤，返回符合我们条件的数组

<script>
  let res1=arr.filter(item=>item>2);
    console.log(res1);
</script>

5. some
   表示一个数组里面只要有一个满足条件 那么返回值就是true

<script>
 let arr=[1,2,3,4,5]
    let res=arr.some(item=>item>4)
    console.log(res);//true
</script>

6. every
   表示所有都得满足条件 如果有一个不满足 则为false

<script>
  let res2=arr.every(item=>item>1);
    console.log(res2);//false//false
</script>

7. includes
   和字符串的差不多 如果数组里面包含的有这个元素 那么则为true

<script>
 let arr=[1,2,3,4,5]
    console.log(arr.includes(2));//true
    console.log(arr.includes(6));//false
</script>

五.对对象的拓展

1. 属性的简写
   当属姓名和属性值相同的时候 可以只写一个

<script>
let name="wc";
    let age="18";
    let obj={
        // 变量当属性值
        name,
        age
    }
    console.log(obj);
 </script>

2. 目标对象和源对象合并

<script>
  let obj={job:"student"}
    let obj1={name:"xq"}
    let obj2={age:"18"}
    let obj3={id:14258}
    // Object.assign方法的第一个参数 表示目标对象 后面的表示源对象 把源对象合并到目标对象里面
    console.log(Object.assign(obj,obj1,obj2,obj3));
</script>

六.展开运算符

1. 展开数组

<script>
let arr1=[1,2,3]
    let arr2=[4,5,6]
    console.log(...arr1);
    console.log(arr1);
    let arr3=[...arr1,...arr2]
    console.log(arr3);
    console.log(...arr3);
</script>

2. 展开对象

<script>
 let obj1={name:"zhangsan",age:18};
    console.log(obj1);
    let obj2={name1:"李四",age1:18};
    let obj3={...obj1,...obj2}
    // 因为属性名一致的时候会覆盖
    // 我们对象中  不存在重复属性
    console.log(obj3);
</script>

3. 展开伪数组

<script>
  function f1(a,b,c){
        console.log(arguments);
        console.log(...arguments);
    }
    f1(1,2,3)
</script>

4. 可变参数

<script>
  function gn(...args){
        console.log(...args);
    }
    gn(1,2,3,4,5,6)
    gn(1,2,3,4)
    gn(1,2,)
</script>

七.解构赋值

解构赋值是一种新的赋值方式
解构 解开 构造

<script>
 let [a1,a2,a3]=[1,2,3];

    // 解构赋值 你必须保证 =两侧的数据类型 保持一致
    console.log(a1,a2,a3);


    // 用解构赋值完成交换
    let a=1;
    let b=2;
    [a,b]=[b,a];
    console.log(a,b);


    // 解构赋值中如果你只要某个位置的值
    let [,,c]=[4,5,6]
    console.log(c);
    // 需要注意的是 我们=前面的 最终都是变量

    let {name,age}={name:"Wc",age:"18"}
    console.log(name,age);

    // 如果说你这个数据 没有解构出来 那么结果是什么？ undefined
    let [e,d,f]=[1,2];
    console.log(f);
</script>

八.class修饰的类

新的声明方式 叫class 专门用于声明类

<script>
  class Fahter{

    }
    // class用于声明一个类 这里的话 我们的Father就是一个类 而f就是一个对象
    let f=new Father();
</script>

构造函数 constructor当我们new的时候就会自动的调用constructor这个函数

<script>
  class Father{
        // 在constructor中可以给对象添加私有属性了
        // 比如我现在这个Fahter类中有私有属性name和age
        constructor(name,age){
            this.name=name;//私有属性name
            this.age=age;//私有属性age
            this.say=function(){//私有方法say
                console.log("say...");
            }
            console.log("构造函数被调用了");
        }
    }
    let f=new Father("wc",100);
    console.log(f);//这个f是father类的对象
    f.say();
</script>

<script>
    class Monitor extends Student{
        constructor(name,age,position){
            // 目前来说 你继承Student了  那么肯定就要有Student里面的私有属性
            // 姓名 job age 
            // 那么在这里面你去哪里给他赋初值？
            super(name,age)
            // 这个super你就把他看作父级的构造函数 
            // 它主要就用来构造你从父级哪里继承过来的东西
            this.position=position;
            // 这个position是子级子级的私有属性 不是从父级继承过来的

            // 作为班长来说 你肯定有自己的方法
            this.addMetting=function(){
                console.log("开会了");
            }
        }
    }

    let mon1=new Monitor("李四",18,"班长");
    console.log(mon1);
    mon1.say();
    mon1.getName();
    mon1.addMetting();
</script>

static
static静态变量 他修饰的东西 只能用类.调用不能用对象打点调用
当你的子级中有和父级重名的属性或方法，那么优先使用自己的

九.Set和Map

就是两种数据解构

1. Set
   (1)添加

<script>
    let s=new Set();
    s.add("z1")
    s.add("z2")
    s.add("z3")
    console.log(s);
</script>

有一个特点 就是说它里面的存的东西 不会重复 就算你重复添加也没有用

<script>
s.add("z3")
    console.log(s);
</script>

(2)查

  console.log(s.has("z3"));//判断s里面有没有z3 true

(3)删
直接delete删

 s.delete("z3")
    console.log(s);

(4) 清空
清空整个容器里面的所有

  s.clear();
    console.log(s);

WeakSet：和Set区别 就是 你Set数据类型里面存的 都是基础数据类型
而WeakSet存的都是引用数据类型

 let ws=new WeakSet();
    ws.add({"name":"zhangsan"})
    ws.add({"name":"zhangsan1"})
    ws.add({"name":"zhangsan2"})
    console.log(ws);

2. Map
   它里面存的是键值对
   (1)增

    let m=new Map();
    m.set("name","张三")
    m.set("name1","张三1")
    m.set("name2","张三2")
    console.log(m);

打印出来一个 以为我们前面的属性名一致了
而在Map数据类型中 属性名不能相同
(2)查

 console.log(m.get("name"));
    console.log(m.get("name1"));
    console.log(m.get("name2"));

(3)删

 m.delete("name")
    console.log(m);

(4)改
就是重新设置

    m.set("name1","李四")
    console.log(m);

(5)遍历 还用for of

十.迭代器和生成器（了解）

1. 迭代器
   在JS中 Array Set Map String 是可以迭代的
   通过构造器创建出来上面的这几个对象 都叫可迭代对象
   只有可迭代对象 才能用for of进行遍历

  let arr=new Array("a","b","c","d")
    // 这个arr是对象 由于他是Array创造出来的 所以叫可迭代对象
    // 那么可以用for of遍历
    for (const item of arr) {
        console.log(item);
    }

迭代器是专门用于迭代对象 所有的可迭代对象都有一个方法 叫做next方法
调用这个next方法的话 会返回一个对象 这个对象里面有两个属性 一个叫value 一个叫done
value表示当前迭代出来的值 done则表示是否迭代完毕 如果完毕 done的值就是true

2. 生成器
   生成器：生成迭代器 generator是生成器的意思
   如果你在你的function 和 函数名之间 加了一个* 那么此时这就是一个生成器

<script>
unction *generator(){
        // 如果是普通函数  当我们调用的时候 代码就会立即全部执行
        // 但是如果是生成器的话 你就可以让代码分步执行

        // 在生成器里面 产出数据
        yield "v1"
    }

    // 我们调用生成器 产生一个迭代器
    let it=generator();

    console.log(it.next());//{value: "v1", done: false}
    // 每调用一次next()那么他就会迭代一次
    console.log(it.next());//{value: undefined, done: true}
</script>

写一个生成器

<script>
  function *app(){
        yield "v1"
        yield "v2"
        yield "v3"
        yield "v4"
    }
    let it=app();
    console.log(it.next());//{value: "v1", done: false}
    console.log(it.next());
    console.log(it.next());
    console.log(it.next());
    console.log(it.next());//value: undefined, done: true
    //true表示迭代完成
</script>