ECMAScript6总结

最新推荐文章于 2024-09-25 23:09:48 发布

可乐就是力量阿

最新推荐文章于 2024-09-25 23:09:48 发布

阅读量172

点赞数

文章标签： es6

本文链接：https://blog.csdn.net/Gu200084/article/details/119952816

版权

本文详细讲解了JavaScript中字符串的起始判断、结束判断、子串查找，数值的整型字面量、NaN检查、数值截取，以及函数的箭头语法、数组和对象的高级操作，包括解构赋值、Set和Map、迭代器和生成器。

摘要由CSDN通过智能技术生成

文章目录

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

判断一个字符串是否以某个子串开头
用 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>

判断字符串是否以某个子串结尾
用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>

判断一个字符串中是否有某个子串
用 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>

重复某个字符串
用repeat

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

遍历字符串
用 for of

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

模板字符串

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

普通的字符串拼接

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

二.对数值的操作

新的整形字面量

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

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

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

检测其参数是否为最大值
用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>

截取前面数字
用 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>

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

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

三.对函数的拓展

普通函数与箭头函数的区别:
主要是this指向不同
普通函数this指向window
箭头函数this指向谁调用就指向谁

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

 <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>

收集参数
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>

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>

四.对数组的拓展

遍历数组的方式：

for循环
forEach
for in
for of

遍历对象的方式：

for in
Object.keys
Object.values
Object.entries

命名式编程的方法

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>

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>

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

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

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

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

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

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

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

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

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

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

五.对对象的拓展

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

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

目标对象和源对象合并

<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>

六.展开运算符

展开数组

<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>

展开对象

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

展开伪数组

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

可变参数

<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

就是两种数据解构

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);

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

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

迭代器
在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

生成器
生成器：生成迭代器 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>