ES6基本知识点

news2024/11/15 11:15:34

目录

1.对象优化

1.1 新增API

1.2 object.assign方法的第一个参数是目标对象,后面的参数都是源对象

1.3 声明对象简写

1.4 对象的函数属性简写

1.5 对象拓展运算符

2.map和reduce

2.1 数组中新增的map和reduce方法

 3 promise

3.1 promise封装异步操作

4.模块化

4.1 什么是模块化

4.2 export

4.3 import

4.4 测试代码


1.对象优化

1.1 新增API

ES6给Object新增了很多的新方法

如:

keys(obj):获取对象的所有key形成的数组

values(obj):获取对象的所有value形成的数组
entries(obj):获取对象的所有 key和 value形成的二维数组。格式:'[[k1,v1],[k2,v2]..]·

assign(dest....src):将多个src.对象的值拷贝到 dest中。(第一层为深拷贝,第二层为浅拷贝)
代码示例:

    const person={
      name:"jack",
      age:18,
      language:['java','js','css']
    }
    console.log(Object.keys(person));
    console.log(Object.values(person));
    console.log(Object.entries(person));

1.2 object.assign方法的第一个参数是目标对象,后面的参数都是源对象

    const target={a:1};
    const source1={b:2};
    const source2={c:3};
    Object.assign(target,source1,source2);
    console.log(target);

1.3 声明对象简写

    const age=18;
    const name='wangzezheng';
    const person1={age,name};
    console.log(person1);

1.4 对象的函数属性简写

    //对象的函数属性简写
    let person3 = {
      name: "jack",//以前:
      eat: function (food) {
        console.log(this.name +"在吃"+ food);
      },
    //箭头函数this不能使用,对象.属性
      eat2: food => console. log(person3.name +"在吃"+food),
      eat3(food){
        console. log(person3.name +"在吃"+food)
      }
    }
  
    person3.eat("香蕉");
    person3.eat2("苹果");
    person3.eat3("栗子");

1.5 对象拓展运算符

拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象。

    //拷贝对象
    const person={
      name:"jack",
      age:18,
      language:['java','js','css']
    }
    //合并对象
    let someone={...person};
    console.log(someone);
    let age={age:15}
    let name={name:'wang'}
    let person2={...age,...name}
    console.log(person2);

2.map和reduce

2.1 数组中新增的map和reduce方法

    let arr=['1','20','30','-1','89'];
    arr=arr.map(item=>item*2);
    console.log(arr);//[2, 40, 60, -2, 178]
    let result=arr.reduce((a,b)=>{
      console.log('上一次处理的:'+a);
      console.log('当前正在处理的:'+b);
      return a+b;
    });
    console.log(result);

 

 3 promise

3.1 promise封装异步操作

 

 

  <script>
    // $.ajax({
    //   url:"user.json",
    //   success(data){
    //     console.log("查询用户:",data);
    //     $.ajax({
    //       url:`user_core_${data.id}.json`,
    //       success(data){
    //         console.log("查询到课程:",data);
    //         $.ajax({
    //           url:`corse_score_10.json`,
    //           success(data){
    //             console.log("查询到的分数:",data);
    //           },
    //           error(error){
    //             console.log("出现异常了:",error);
    //           }
    //         })
    //       },
    //       error(error){
    //             console.log("出现异常了:",error);
    //           }
    //     })
    //   },
    //   error(error){
    //             console.log("出现异常了:",error);
    //   }
    // })

    // //promise封装异步请求
  //   let p=new Promise((resolve,reject)=>{
  //     $.ajax({
  //       url:"user.json",
  //       success:function(data){
  //         console.log("查询用户成功:",data);
  //         resolve(data);
  //       },
  //       error:function(err){
  //         reject(err);
  //       }
  //     });
  //   });

  //   p.then((obj)=>{
  //     return new Promise((resolve,reject)=>{
  //       $.ajax({
  //       url:`user_core_1.json`,
  //       success:function(data){
  //         console.log("查询用户课程成功:",data);
  //          resolve(data);
  //       },
  //       error:function(err){
  //         reject(err);
  //       }
  //     });
  //   })
  // }).then((data)=>{
  //   console.log("上一步的结果:",data);
  // })

function get(url,data){
  return new Promise((resolve,reject)=>{
    $.ajax({
        url:url,
        success:function(data){
          // console.log("查询用户课程成功:",data);
           resolve(data);
        },
        error:function(err){
          reject(err);
        }
      });
  })
}  

get("user.json")
  .then((data)=>{
    console.log("用户查询成功:",data);
    return get(`user_core_${data.id}.json`);
  })
  .then((data)=>{
    console.log("课程查询成功:",data);
    return get("corse_score_10.json");
  })
  .then((data)=>{
    console.log("课程成绩查询成功:",data);
  })
      


    
  </script>

4.模块化

4.1 什么是模块化

模块化就是把代码进行拆分,方便重复利用。类似java中的导包:

要使用一个包,必须先导包。

而Js 中没有包的概念,换来的是模块。
模块功能主要由两个命令构成:‘export`和`import'。

  • 'export`命令用于规定模块的对外接口。 出口命令用于规定模块的对外接口。
  • 'import'命令用于导入其他模块提供的功能。 “进口”命令用于导入其他模块提供的功能。
     

4.2 export

// const util={
//   sum(a,b){
//     return a+b;
//   }
// }
// export{util}

export const util={
  sum(a,b){
    return a+b;
  }
}
//util不仅可以导出对象,一切js变量都可以导出,比如:基本类型变量,函数,数组,对象。

4.3 import

import util from '../js/hello'

4.4 测试代码

import util from '../js/hello'

var a=util(1,2);
console.log(a);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/739033.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C# PaddleInference OCR 验证码识别

说明 C# PaddleInference OCR 验证码识别 自己训练的模型&#xff0c;只针对测试图片类型&#xff0c;准确率99% 效果 项目 VS2022.net4.8OpenCvSharp4Sdcb.PaddleInference 测试图片 代码 using OpenCvSharp; using Sdcb.PaddleInference.Native; using Sdcb.PaddleInfer…

mac笔记本安装java环境以及idea设置

系列文章目录 文章目录 系列文章目录安装java环境一、安装jdk二、下载安装IntelliJ IDEA三、安装maven四、安装git五、安装tomcat六、安装appenv配置文件七、有关idea的设置1、快捷键设置2、新建类的命名3、字体的大小&#xff0c;有关菜单栏的大小4、框内的tab最多能有多少个窗…

【2 beego学习 - 项目导入与项目知识点】

0 项目导入 1 在英文路径下新建一个同名的项目,拷贝其他数据到这个文件 bee new 同名项目名 cd 同名项目名 go mod tidy go get -u -v github.com/astaxie/beego go get 同名项目名/models2 拷贝部分的项目文件到新目录 bee run 运行的其他错误,按照提示安装文件 1 后端获取…

微软MFC技术中的消息队列及消息处理

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天来聊聊微软MFC技术中的消息队列及消息处理。 MFC应用程序中由Windows 系统以消息的形式发送给应用程序的窗口。窗口接收和处理消息之后&#xff0c;把控制返回给Windows。Windows系统在同一时间可显示多…

HashMap底层原理:数据结构+put()流程+2的n次方+死循环+数据覆盖问题

导航&#xff1a; 【Java笔记踩坑汇总】Java基础进阶JavaWebSSMSpringBoot瑞吉外卖SpringCloud黑马旅游谷粒商城学成在线MySQL高级篇设计模式常见面试题源码_vincewm的博客-CSDN博客 目录 一、底层 1.1 HashMap数据结构 1.2 扩容机制 1.3 put()流程 1.4 HashMap是如何计算…

电话号码的字母组合问题

解题思路&#xff1a; 当我第一眼看到这题的时候&#xff0c;我直接举出来一个列子“258”&#xff0c;直接套用多重for循环遍历可以罗列出来&#xff0c;但是根据数字组合的长度不能确定for循环的多少&#xff08;除非把所有for循环个数情况都罗列一遍&#xff09; 所以只能…

几种常用接口调用方式介绍

API&#xff0c;全称叫做Application Programming interface&#xff0c;也就是应用程序接口&#xff0c;API是一些预先定义的函数&#xff0c;我是学Java的&#xff0c;当我要使用这些函数的时候&#xff0c;便可以直接调用Java API&#xff0c;不用去访问源码&#xff0c;也不…

Linux设备驱动程序(四)——调试技术

文章目录 前言一、内核中的调试技术二、通过打印调试1、printk2、重定向控制台消息3、消息如何被记录4、开启及关闭消息5、速度限制6、打印设备编号 三、通过查询调试1、使用 /proc 文件系统①、在/proc中实现文件②、创建自己的 /proc 文件③、seq_file 接口 2、ioctl 方法 四…

Chatbot UI 和 ChatGLM2-6B 的集成

Chatbot UI 和 ChatGLM2-6B 的集成 0. 背景1. 部署 Chatbot UI2. 部署 ChatGLM2-6B3. 修改 ChatGLM2-6B 项目的 openai_api.py4. 修改 Chatbot UI 的配置5. 访问 Chatbot UI 0. 背景 尝试将 Chatbot UI 和 ChatGLM2-6B 的进行集成&#xff0c; ChatGLM2-6B 提供 API 服务&…

精确时钟同步协议ptp/IEEE-1588v2协议-------(2)主从时钟之间的消息交互与时钟同步过程

本文目录 1、主时钟和从时钟之间的消息交互流2、延时delay和偏移offset的计算2.1、延时delay的计算2.2、偏移offset的计算 主时钟和从时钟之间&#xff0c;通过sync, follow up, delay request, delay response这四条消息&#xff0c;完成时钟同步过程。PTP时钟同步系统能工作的…

word绘制横向表格

最近写小论文&#xff0c;表格太宽需要绘制横向表格&#xff0c;找了半天教程说的都不是很详细&#xff0c;我学习了一下决定自己写个教程。 我要在一和二之间创建一个横向表格。首先在一后面添加一个分节符号。布局->分隔符->分节负下一页。 再在二之前添加一个分节符号…

新耀东方|安全狗亮相2023第二届上海网络安全博览会

7月5日至7日&#xff0c;“新耀东方-2023第二届上海网络安全博览会暨高峰论坛”在上海顺利举办。此次大会由上海市信息网络安全管理协会、国家计算机网络应急技术处理协调中心上海分中心、(ISC)2上海分会、上海市普陀区科学技术委员会、上海市网络安全产业示范园共同主办。 作为…

左神算法之中级提升(2)

目录 [案例1】 【题目描述】 【思路解析1】 【思路解析2】 【代码实现】 【案例2】 【题目描述】 【思路解析】 【代码实现】 【案例3】 【题目描述】 【思路解析】 【代码实现】 【案例4】 【题目描述】今日头条2018面试题 第四题 【输入描述】 【思路解析】 【…

对于没有任何基础的初学者,云计算该怎样学习?

想学习任何一门专业技能&#xff0c;可以按下面这一套逻辑梳理&#xff01; 1&#xff09;了解基本内容 云计算这个技术是做什么的&#xff1f;适用哪些场景&#xff1f;有什么优点和缺点&#xff1f; 同时建议先找技术大纲&#xff0c;至少要学哪些技能点&#xff0c;可以网…

Layui之入门

目录 一、layui介绍 1.是什么 2.谁开发的 3.特点 二、layui&#xff0c;easyui和bootstrap的区别 1.layui、easyui与bootstrap的对比 2. layui和bootstrap对比&#xff08;这两个都属于UI渲染框架&#xff09; 3. layui和easyui对比 三、基础使用 四、登录注册实例讲解 …

医院陪诊小程序开发|陪诊小程序定制|陪诊服务app成品

陪诊小程序的功能开发对于陪诊行业有以下好处&#xff1a;   提高服务效率&#xff1a;陪诊小程序可以提供在线预约功能&#xff0c;方便用户随时预约合适的陪诊人员&#xff0c;减少了繁琐的人工沟通和安排工作&#xff0c;提高了服务效率。   增加服务范围&#xff1a;通…

基于matlab将图像标记器多边形转换为标记的块图像以进行语义分割(附源码)

一、前言 此示例演示如何将存储在对象中的多边形标签转换为适用于语义分割工作流的标记阻止图像。 可以使用计算机视觉工具箱中的图像标记器应用来标记太大而无法放入内存和多分辨率图像的图像。有关详细信息&#xff0c;请参阅在图像标记器&#xff08;计算机视觉工具箱&…

uniapp zjy-calendar日历,uni-calendar日历增强版

一、zjy-calendar简介 zjy-calendar日历是对uniapp uni-calendar日历的增强&#xff0c;支持圆点和文字自定义颜色。 二、使用方法 源使用说明&#xff1a;https://uniapp.dcloud.net.cn/component/uniui/uni-calendar.html 1、下载导入 https://ext.dcloud.net.cn/plugin?…

web-php

目录 基础 注释 php程序的组成 php的数据类型 php代码的运行 代码 显示时间 输出账户名和密码 后端对前端的数据进行验证处理代码 连接数据库的代码 前后端代码相结合验证&#xff0c;实现登录接口验证 login.html login.php register.html register.php error…

大模型调用工具魔搭GPT——一键调用魔搭社区上百个AI模型的API

为了让模型开发变得更容易,阿里云在发布会现场推出了一款令开发者耳目一新的工具:ModelScopeGPT(魔搭GPT)。它能够通过担任“中枢模型”的大语言模型一键调用魔搭社区其他的AI模型,实现大模型和小模型协同完成复杂任务。 这类智能调用工具被业界普遍看好。ModelScopeGP…