IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> js高级-es6语法 -> 正文阅读

[JavaScript知识库]js高级-es6语法

ES6介绍

es6式js语言下一代标准,已经在2015年6月正式开始发布了也叫es2015.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用,成为企业级开发语言.

let 命令和const命令

重点应用和概念

var 和let 的区别
1.var 能变量提升,不受块级作用域的影响,能重复定义。
2.let 不能变量提升,受块级作用域的影响,不能重复定义.

let 和 const的区别
他们唯一的区别就是const在声明的时候必须要赋值,且不能重新赋值

块级作用域

块级作用域是es6开始提出的概念,es6中明确声明了大括号就能形成块级作用域.

let 和const的相同点

1.let和const都不能变量提升

  console.log(arr);//报错
      let arr;
      console.log(concc);//报错
      const concc=123;

2.let和const都受块级作用域的影响

//let
 for(let i=0;i<5;i++){
      setTimeout(function(){
        console.log('i',i);
      })
    }
    //const
     {const arr=0}
    console.log(arr);//报错说没声明

变量的解构赋值

知识点:

1.解构:结构分解,s从一个整体的变量里分解出一部分来使用

2.数组解构

让一个数组中的元素与另一个数组中的元素一一对应

 //数组结构
      let arr=[1,2,3,4]
      let [a,b,c,d]=arr;
      console.log("数组中的解构",a);

3.对象解构

因为对象是无序的,所以我们不能用前面数组解构的思想来看,我们通过绑定对应的属性名来获取属性值

 //对象解构
      let obj={
        username : "lisi",
        age : 20
      }
      let {username ,age}=obj;
      console.log("我是对象解构",username);

4.函数参数解构和默认值

在es6里面,我们可以给形参默认设置值,没有实参的传入的时候,可以让他等于默认值

//函数解构
      function test({username="小编",miao="嘎嘎帅"}={}){
        console.log(username+miao);
      }
      test()

对象的扩展

1.属性和方法的简洁表示法

 let username='小编'
      let obj={
        username ,//当属性名和属性值都相同的时候,可以简写成这样
        say(){
          console.log(this.username+"嘎嘎帅");//简单方法的简写
        }
      }
      obj.say()

2.变量做属性名

  let key ='username';
     let obj={
       [key] : '小编',
       say(){
         console.log(this[[key]]+"嘎嘎帅");
       }
     }
     obj.say();

3.合并对象
方法 : Object.assign

 let obj1={
        username : '李四',
        say(){
          console.log(this.username+"嘎嘎帅");
        }
      }
      let obj2={
        username : '小编'
      }
      let obj=Object.assign(obj1,obj2)//如有重复的属性会让下面的属性中的属性值覆盖上面的
      obj.say()

箭头函数

1.箭头函数的常见表达式

let test=()=>{}//这就是箭头函数

2.箭头函数的this指向

前面已经说过箭头函数不绑定this,他会找上下文的this来给自己使用

let test={
        say:()=>{
          console.log(this,"小编嘎嘎帅");//this指向的window,可是是obj调用的这个函数
        }
      }
      test.say()

3.箭头函数不能做构造函数
箭头函数本身没有this, 所以不能拿来做构造函数的

 var test=(name ,miao)=>{
        this.name=name;
        this.miao=miao;
      }
      let obj=new test('小编','嘎嘎帅');//直接报错
      console.log(obj);

4.箭头函数的arguments对象不可用
arguments是实参列表

var test=(name ,miao)=>{
    
        console.log(arguments);//报错,没有这个东西
        this.name=name;
        this.miao=miao;
      }
     test(1,2);

Promise(背诵)

知识点:

promise定义
promise使用步骤
async await异步变同步
promise是异步编程的一种解决方案, 可以用来解决回调地狱的问题

(1) 什么是promise

promise中文意思承诺

promise有三种状态:

pending 正在进行中
resolved 成功
rejected 失败
状态一旦改变,就无法再次改变状态,这也是它名字 promise-承诺 的由来,一个promise对象状态只能改变一次

我们可以使用promise来保存将来的数据

(2) promise的使用步骤

创建promise对象
存储成功或失败的数据
获取promise对象的数据

<!DOCTYPE html>
<html lang="en"> 
<body>
    <script type="module">
      let num = window.prompt("请输入数字");

      // 1.创建promise对象
      const obj = new Promise((resolve, reject) => {
        // num > 10定位成功, 否则失败
        if (num > 10) {
          // 2.成功时用resolve保存数据
          resolve({msg:'sucess',num});
        } else {
          // 3.失败时用reject保存数据
          reject({ msg: 'error', num });
        }
      });

      // 3.获取数据 then()获取成功的数据, catch()获取失败的数据
      obj.then((res)=> {
        console.log('成功', res);
      }).catch(err=> {
          console.log('失败',err);
      }) 
    </script>
</body> 
</html>

es6模块化

//index.js
export default {
    username : '小编',
    say(){
        console.log(this.username+"嘎嘎帅");
    }
}
export let username ="小编"
//index.html
<script type="module">
      import * as obj from "./index.js";//as取名
      console.log(obj);
    </script>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-02-16 12:59:54  更:2022-02-16 13:00:48 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 10:42:16-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码