ES6-ES11汇总

最新推荐文章于 2024-06-16 11:35:24 发布

wtt123_

最新推荐文章于 2024-06-16 11:35:24 发布

阅读量65

点赞数

文章标签： es6 javascript 开发语言

本文链接：https://blog.csdn.net/wtt123_/article/details/127570497

版权

1，用let定义变量

2，用const定义常量

3，变量的解构赋值

const zhao={
    name:'赵本山',
    age:78,
    xiaopin:function(){
        console.log("我可以演小品")
    }
};
let {name,age,xiaopin} =zhao;
console.log(name)

4，模板字符串

  //内容中可以直接出现换行符
    let str = `<ul>
                  <li>SV接口</li>
                </ul>`
    //变量拼接
    let lover = '魏翔';
    let out = `${lover}是我心目中最搞笑的演员`;
    console.log(out)

5，箭头函数

------它的this指向取决于函数的作用域，是静态的，在哪里定义的就是指向哪里，指向外层函数的值，函数体中使用到的this指本身，此时要是换成箭头函数，this指向上一级函数

  function getName(){
    console.log(this.name)
  }
  //箭头函数
  let getName2=()=>{
    console.log(this.name)
  }
  //设置window对象的name属性
  window.name='尚硅谷';
  const school={
    name:'khd'
  }
  //直接调用
  getName();  //---------输出尚硅谷
  getName2();   //---------输出尚硅谷

  //call方法调用
  getName.call(school) //---------输出khd
  getName2.call(school)  //---------输出尚硅谷

应用：

<body>
<div id="ad"></div>
</body>
<script>
    //获取元素
   let ad1=document.getElementById('ad');
   //绑定侦听事件
   ad1.addEventListener('click',function(){
    //定时器
    setTimeout(()=>{
        //此时的this在ad1.addEventListener('click',function(){}的函数体中定义的，
        //使用箭头函数后this的指向为ad1这个元素
       this.style.background='pink'
    },2000)
   })
</script>

6，rest参数

//  rest参数，用于获取函数的实参
//多个参数，rest参数必须放到最后
function fn(a,b,...args){
    console.log(a);
    console.log(b);
    console.log(args);
}
fn(1,2,3,4,5,6,7)
//输出结果 a:1,b:2,...args为数组：34567

7，...扩展运算符

//数组的合并
const k1=['舒服','阿斯加德'];
const k2=['哦啊的','是电脑'];
const k=[...k1,...k2]
console.log(k)
//数组的克隆
//将伪数组转换成真正的数组

8，生成器--- *

<script>
    // yield--函数代码的分隔符
   function * gen(){
    console.log(111);
    yield '考试的合法';
    console.log(222);
    yield '地方';
    console.log(333);
    yield '不合适接收';
   }
   let inter=gen();
  inter.next(); //输出111
  inter.next(); //输出222
  inter.next(); //输出333
</script>

  console.log(inter.next());
  console.log(inter.next());  //输出yield的内容
  console.log(inter.next());

9，promise

<script>
// resolve--成功的结果，reject--失败的结果
const p=new Promise(function(resolve,reject){
    setTimeout(function(){
        let data="成功";
        resolve(data);
        let error="失败";
        reject(error)
    },1000)
});
//调用Promise对象的then方法,有两个参数，成功的和失败的
p.then(function(value){
    console.log(value)
},function(reason){
    console.log(reason)
})
</script>

promise发送ajax请求

<script>
    const p=new Promise((resolve,reject)=>{
    //创建对象
    const xhr=new XMLHttpRequest();
    //初始化--以什么方式发送数据，向哪里发送数据
    xhr.open('GET','https://api.apiopen.top/getJoke');
    //发送数据
    xhr.send();
    //绑定事件，处理相应结果
    //在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200-299时，表示响应已就绪
    xhr.onreadystatechange=function(){
        //判断
        if(xhr.readyState==4){
            if(xhr.status>=200&&xhr.status<300){
                //成功
                resolve(xhr.response)
            }else{
                //失败
                reject(xhr.status)
            }
        }
    }
})
  
  //指定回调
  p.then(function(value){
    console.log(value)
  },function(reason){
    console.log(reason)
  })
</script>

10，set--集合（数组）

<script>
    let arr=[1,2,2,5,6,8,5,4,3];
    //数组去重
    let result=[...new Set(arr)];
    // console.log(result);---1,2,5,6,8,4,3
    //交集
    let arr1=[2,5,6,6,7,3,9];
    let result1=[...new Set(arr)].filter(item=>{
        let result2=new Set(arr1) //去重后成集合
        if(result2.has(item)){
            return true;
        }else{
            return false;
        }
    });
    // console.log(result1)---2,5,6,3
    //并集
    let union=[...new Set([...arr,...arr1])]
    console.log(union)--//合并后去重
    //差集-交集取反
    // 1集合有而2集合没有极为
</script>

<script>
let s =new Set();
let s1=new Set(['接口','事件','回调']);
//元素个数
console.log(s1.size);
//增加新的元素
s1.add('函数');
//删除元素
s1.delete('事件');
//检测
console.log(s1.has('接口'));
//清空
s1.clear();

for(let v of s1){
    // of:指的是值
    // in:指的是索引值
    console.log(v)
}
</script>

11，Map

<script>
    let m =new Map();
    //添加元素
    m.set('name','邯郸');
    m.set('change',function(){
        console.log('环境水电费')
    });
    //删除
    m.delete('name');
    //获取，通过get方法
    console.log(m.get('change'));
    //清空
    m.clear()
</script>

12,数值扩展

<script>
    //检测是否为NAN
    console.log(Number.isNaN(123))
    //字符串转化为整数
    console.log(Number.parseFloat('3.516回复'))
    console.log(Number.parseInt('456是否'))
    //将小数部分抹掉
    console.log(Math.trunc(3.5))
    //Math.sign判断一个数是正数负数还是0
    console.log(Math.sign(545));
    console.log(Math.sign(0));
    console.log(Math.sign(-156));
</script>

13，对象方法

<script>
    //Object.is判断两个值是否完全相等
    console.log(Object.is(120,120))
    console.log(Object.is(NaN,NaN))
    //对象的合并
    const c1={
        host:'192.255.555.55',
        port:3306,
        name:'root',
        test:'ted'
    }
    const c2={
        host:'896.56.88.13',
        port:3658,
        name:'sdkj'
    }
    //隐藏c1的值,但是不同的值会显示出来
    console.log(Object.assign(c1,c2));
    //Object.setPrototypeOf设置原型对象以及Object.getPrototypeOf获取原型对象
    const school={
        name:'邯郸学院'
    }
    const cities={
        xiaoqu:['北京','上海','深圳']
    }
    Object.setPrototypeOf(school,cities)
    console.log(school)
    console.log(Object.getPrototypeOf(school))  
</script>

14.模块化

是指将大的程序文件差分成许多小的文件，并把小文件组合起来

通用的导入方式：

<script>
    //引入1.js的模块内容
    //把1.js文件所暴露的内容全部存入m1的变量中
    import * as m1 from '/路径/1.js'
</script>

解构赋值方式：

    //解构赋值方式--变量名重复，可以使用别名的方式
    import {school,teach} from '/路径/1.js'
    import {school as c1,xuexiao} from '/路径/2.js'

// 分别暴露
export let school='邯郸学院';
export function xuexiao(){
    console.log("数据开发")
};

//统一暴露
 let school='邯郸学院';
 function xuexiao(){
    console.log("数据开发")
}
export {school,xuexiao}

//默认暴露
export default{
    school:'邯郸学院',
    xuexiao:function(){
        console.log("数据开发")
    }
}

15，判断一个数组中包不包含某个值

    const mingzhu=['西游记','三国演义','红楼梦','水浒传'];
    console.log(mingzhu.includes('三国演义'))--- true
    //**代表幂运算
    console.log(2**10)  即2的10次方

16，async和await

await返回的是promise成功的值，若失败了，则会抛出异常，用try catch进行捕获

17，ES8中对象方法的扩展

<script>
const school={
    name:'邯郸学院',
    cities:['北京','上海','深圳'],
    xueke:['前端','JAVA','大数据']
}
//获取对象所有的键
console.log(Object.keys(school));
//获取对象所有的值
console.log(Object.values(school))
//entries得到的是一个数组(键和值)
console.log(Object.entries(school));
// 创建map
const m =new Map(Object.entries(school))
console.log(m)
</script>