ES6基本知识

Es6知识点

  1. ES5 变量

    var 声明

    1.可以重复声明 不报错

    var a=12;
    var a=5;
    alert(a) //5
    

    2.无法限制修改

    PI(圆周率)可以修改PI
    

    3.没有块级作用域(语法块)

    {
    	变量=123
    }
    for(...){
    	var a=12
    }
    alert(a) 12
    

    ES6语法 let const 不能重复声明

    let 是变量

    let a=12;
    a=5
    alert(a)  5
    

    const 常量

    const a=12
    a=5
    alert(a) 报错
    

    两者皆为块级作用域 更容易合作开发

    if(true){
        let a=1;
        const b=1;
    }
    alert (a=1)报错 未定义
    alert (b=1)报错 未定义
    
  2. 函数

    箭头函数

    1.如果只有一个参数()可以省

    resp=>{
    console.log(resp)
    }
    let show=(n1,n2)=>{
        alert(n1+n2)
    }
    

    2.如果只有一个返回值

    (a)=>a*2
    等价
    (a)=>{
        return a*2
    }
    

    3.this的指向问题(重点)

    普通函数:根据调用我的人(谁调用我,我的this就指向谁)
    
    箭头函数:根据所在的环境(我再哪个环境中,this就指向谁)
    

    4.Es6的传参问题 …args 必须放最后

    let show=(a,b,...args)=>{
       
        alert(a,b,...args)
    }
        
    show(12,23,54,)
    

    5.展开数组

    let arr=[1,2,3];
    ...arr;
    let show=(a,b,c)=>{
        alert(a)
        alert(b)
        alert(c)
    }
    show(1,2,3)
    等价于
    show(...arr)
    

    6.解构赋值(两边结构一致)语法糖

    //原始
    let arr=[1,2,3]
    let a=arr[0];
    let b=arr[1];
    let c=arr[2]
    
    //一一对应,右边的给左边 
    let [a,b,c]=[1,2,3]
    let {a,c,d}={a:12,c:13,d:14}
    
    //----------------------------------------
    let{{a,b},[n1,n2,n3],num,str}=
       {{a:1,b:2},[1,2,3],12,"str"}
    let{json,arr,num,str}=
       {{a:1,b:2},[1,2,3],12,"str"}
       
    console.log(a,b,c,n1,n2,n3,num,str)
    console.log(json,arr,num,str)
    
    //-----------------------------------------
    let {a,b}={12,13}
    console.log(a,b)报错 因为右边不是个东西 非数组,非对象,非json
    //将值打印出来
    
  3. 数组

    数组新方法

    map                  映射        一个对一个
    [12,99,78]
    ["不及格","优秀","良好"]
    let score=[12,99,78]
    //返回一个新数组
    let result=score.map(item=>item>=60?"及格":"不及格")
    alert(result)
    //-------------------------------------------
    let arr=[12,5,6]
    let result=arr.map((item)=>{
        return item*2 //数值乘以2
    })
    alert(result)
    
    reduce               汇总        一堆出来一个
    [19,59,99]  算总分 平均分
    let arr=[19,59,99] 
    tmp 中间值
    item 数值
    index 下标
    总分
    let sum=arr.reduce((tmp,item,index)=>{
        return tmp+item
    )}
    alert(sum)
    平均分
    let average=arr.reduce(function(tmp,item,index){
        if(index!=arr.length-1){
        return tmp+item
        }else{
         return (tmp+item)/index
        }
    })
    alert(average)
    
    filter               过滤器            选择过滤
    let arr=[19,59,99] 
    let result=arr.filter(item=>{
        //return true;//全部保留
        //return false //全部不保留
     /* 本身就是boolen值
             if(item>20){
                return true;
                }else{
                return false;
                }
    	*/ 
    	等价于
        return item>20
    })
    
    //------------------------------------------
         let objs=[
             {name:"杨乐乐",age:18},
             {name:"谷咕咕",age:22},
             {name:"阿姜",age:21},
             {name:"周某人",age:22},
         ]
        let result=objs.filter(json=>json.age=22)
        console.log(result)
         返回/*
            {name:"周某人",age:22},
            {name:"谷咕咕",age:22},
            */
    
    
    forEach              迭代          循环遍历
    let arr=[1,2,3]
    let result=arr.forEach((item,index)=>{
        alert(item +index)
    })
    
  4. 字符串

    字符串操作

    (1)多了两个新方法
    startsWith
    let str="http://baidu.com"
    if(str.startsWith("http://")){
        alert("普通网址")
    }   //是一个网址 返回值时boolen类型
    
    
    endsWith 进行邮箱的验证,文件类型的扩展名都可以
    (2)字符串模板 不需要换行符,可以折行

    字符串拼接 反单引号

    let str=`abc`;
    let str2=`a${str}bc`
    alert(str2)//aabcbc
    
    
  5. 面向对象

  6. promise-承诺

    异步 同步
    操作之间没关系,同时进行多个操作。回调地狱,一直使用ajax请求 同时能做一件事。一个再走下一个
    代码复杂 代码简单

    promise==消除异步操作

    用同步的方式书写异步代码

    let p=new Promise(function(resolve,reject){
        /*	 resolve 成功推荐
       		 reject  失败回调
        */
        $.ajax({
            url:'aaa.txt',
            dataType:'json',
            success:(arr)=>{
            resolve(arr);
        		},
             error:(err)=>{
            reject(err);
       		 }
        })
    })
    p.then(function(){
        alert("成功回调")
    },function(){
        alert("失败回调")  
           });
    
    
    

    好处显现

    let p=new Promise(function(resolve,reject){
        /*	 resolve 成功推荐
       		 reject  失败回调
        */
        $.ajax({
            url:'aaa.txt',
            dataType:'json',
            success:(arr)=>{
            resolve(arr);
        		},
             error:(err)=>{
            reject(err);
       		 }
        })
    })
    let p1=new Promise(function(resolve,reject){
        /*	 resolve 成功推荐
       		 reject  失败回调
        */
        $.ajax({
            url:'bbb.txt',
            dataType:'json',
            success:(arr)=>{
            resolve(arr);
        		},
             error:(err)=>{
            reject(err);
       		 }
        })
    })
    Promise.all([
        p,p1
    ]).then(function(arr){
        let [res1,res2]=arr;
        //arr数组作为结果
        console.log(res1) //aaa.txt文件内容
         console.log(res2)//bbb.txt文件内容
        alert('全部成功了')
    },function(){
        alert('至少一个失败了')
    })
    
    

    简化操作 封装promise

    function createPromise(url){
        return new Promise(function(resolve,reject){
          $.ajax({
            url:url,
            dataType:'json',
            success:(arr)=>{
            resolve(arr);
        		},
             error:(err)=>{
            reject(err);
       		 }
        })
        } )
    }
    Promise.all([
       createPromise('aaa.txt')
       createPromise('bbb.txt')
    ]).then(function(arr){
        let [res1,res2]=arr;
        //arr数组作为结果
        console.log(res1) //aaa.txt文件内容
        console.log(res2)//bbb.txt文件内容
        alert('全部成功了')
    },function(){
        alert('至少一个失败了')
    })
    
    

    更进一步 jquery的封装promise

    let p=$.ajax({url:'aaa.txt',dataType:'json'})
    返回的是promise对象
    直接
    Promise.all([
      $.ajax({url:'aaa.txt',dataType:'json'})
      $.ajax({url:'bbb.txt',dataType:'json'})
    ]).then(function(arr){
        let [res1,res2]=arr;
        //arr数组作为结果
        console.log(res1) //aaa.txt文件内容
        console.log(res2)//bbb.txt文件内容
        alert('全部成功了')
    },function(){
        alert('至少一个失败了')
    })
    
    

    最简单大致的写法

    Promise.all([ajax1,ajax2]).then(success=>{},error=>())
    
    
    封装为一个promise方法
    console.log(111);
        let promise = new Promise((resolve, reject) => {
            setTimeout(function () {
                console.log(222);
                resolve("hello word")
            },3000)
        })
        
    promise.then((data)=>{
    		console.log(333);
    		console.log(data);
    }).catch(()=>{
    console.log(444);//错误进入
    })
    /*
    111
    222
    333
    hello word
    */
    
    

    Promise.race([]) 优先加载速度快的

  7. generator

  8. 模块化

    在一个单独的js文件中export抛出模块

    export  function show(){
        console.log("模块化执行show的方法")
    }
    
    export let show1=()=>{
        console.log("模块化执行show1的方法")
    }
    
    
    import {show,show1} from './js/es6'
    show();
    show1();
    //分别执行控制台打印的内容
    
    

    1、export
    一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个 JS 文件,里面使用export命令输出变量。

    export写法一般如下:

    var firstName = 'name';
    var lastName = 'last';
    var year = 1996;
    
    export { firstName, lastName, year };
    
    

    通常情况下,export输出的变量就是本来的名字,但是可以使用as关键字重命名。例:

    function v1() { ... }
    function v2() { ... }
    
    export {
      v1 as streamV1,
      v2 as streamV2,
      v2 as streamLatestVersion
    };
    
    

    上面代码使用as关键字,重命名了函数v1和v2的对外接口。重命名后,v2可以用不同的名字输出两次。

    2、import
    使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。例:

    import { firstName, lastName, year } from './profile.js';
    
    function setName(element) {
      element.textContent = firstName + ' ' + lastName;
    }
    
    

    当然,如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名,这也是上文说通常情况下,export输出的变量名不变的原因。例:

    import { lastName as surname } from './profile.js';
    
    

    另外,注意import命令具有提升效果,会提升到整个模块的头部,首先执行。

    3、export default
    从前面的例子可以看出,使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。这就产生一个问题,使用模块者不愿阅读文档,不想知道变量名。此时就要用到export default命令,为模块指定默认输出。

    person.js文件
    export default {
        firstName:'first',
        lastName:'last',
        age: 11
    }
    此时import导入写成:
    
    import person from 'person'; 
    
    console.log(person.age)  //11
    
    

    本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字。

    4、总结拓展
    export default 向外暴露的成员,可以使用任意变量名来import
    在一个模块中,export default 只允许向外暴露一次。
    在一个模块中,可以同时使用export default 和export 向外暴露成员
    export可以向外暴露多个成员,同时,如果某些成员,在import导入时不需要,可以在import时不写。
    使用export导出的成员,必须严格按照导出时候的名称,来使用{ }按需接收

热门文章

暂无图片
编程学习 ·

Java中的反射(1)

Java中的反射 一、概念: 1、反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法和属性;这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制。 2、反射 (Reflection) 是 Java 的特…
暂无图片
编程学习 ·

常用的运行脚本

常用的运行脚本1、java -Xmx1430m -cp "scenic_area_cas-1.0-SNAPSHOT.jar" scenery.extend.extendMain2、指定lib运行java -Djava.ext.dirs="./lib" -Xmx2048m -cp "subwaystationcompare-1.0-SNAPSHOT.jar" com.sogou.compareMain3、hadoop j…
暂无图片
编程学习 ·

个推图可视化应用实践

个推资深前端开发专家 东风图可视化应用是数据可视化的一个重要组成部分。图指的是知识图谱(Knowledge Graph),此概念于2012年由Google正式提出,旨在帮助Google优化搜索引擎返回的结果,提升用户搜索质量及体验。个推作为专业的数据智能服务商,在图可视化应用方面也进行了…
暂无图片
编程学习 ·

kafka+zookeeper消息队列

软件包提取码:u3s1 kafka: 起初是做采集日志的,和zookeeper一起才能做消息队列,可持久化。kafka broker(server): 消息中间件处理的节点 一个Kafka节点就是一个broker(server) topic = vhost -类消息 对消息进行分类主题-个类型-个主题topic可以有多个 partition = que…
暂无图片
编程学习 ·

QT的::和:记录

******1.:一般指继承. Class 派生类 : 基类 (1)表示结构体内 位域的定义(即该变量占几个bit空间) (2)构造函du数后面的冒号起分割作用,是类给成员变量赋值的方法,初始化列表,更适用于成员变量的常量const型。 (3)public:和private:后面的冒号,表示后面定义的所有成员都是…
暂无图片
编程学习 ·

异步FIFO学习

这里写自定义目录标题一、概述二、异步FIFO的设计基础2.1 FIFO指针2.2 格雷码的使用2.2.1 二进制码存在的问题2.2.2 格雷码计数器2.3 空满条件的判断三、异步FIFO设计实现3.1 fifo13.2 fifomem3.3 sync_r2w3.4 sync_w2r3.5 rptr_empty3.6 wptr_full 一、概述 在大规模ASIC或FPG…
暂无图片
编程学习 ·

springboot 整合xcf 发布 webservice

Spring Boot集成webService在pom添加依赖<!--WerbService CXF依赖 start--> <dependency><groupId>org.apache.cxf</groupId><artifactId>cxf-rt-frontend-jaxws</artifactId> </dependency> <dependency><groupId>org.…
暂无图片
编程学习 ·

Vue之处理边界情况

处理边界情况All the features on this page document the handling of edge cases,meaning unusual situations that sometimes require bending Vue’s rules a little. Note however, that they all have disadvantages or situations where they could be dangerous.特殊情…
暂无图片
编程学习 ·

「干货教程」朋友圈装X神器!超级辅助-微信跳一跳

简介这个外挂原理比较简单,通过adb驱动链接到手机,通过图片识别实现模拟用户操作,通过计算方块像素实现得到下一个方块的坐标,跳到下一个点的位置设一个随机数.**环境配置首先我们先把adb驱动给配置好右键单击此电脑高级系统设置双击Path点击浏览把adb文件夹包含进来,也可以复制…
暂无图片
编程学习 ·

计算机网络基础 笔记

VRP基础 快捷键CTAL+A 把命令光标移动到当前命令行的最前端CTAL+C 停止当前命令的运行CTAL+Z 回到用户视图CTAL+] 终止当前连接或切换连接Backspace 删除光标左边的第一个字符方向左 or Ctrl+B 光标左移一位方向右 or Ctrl+F 光标右移一位TAB 输入一个不完整的命令并按TAB键,就…
暂无图片
编程学习 ·

哈夫曼编码

哈夫曼编码 输入一个字符串文本 #include <stdio.h> #include <stdlib.h> #include <string.h>#define cmax 0x3f3f3f3f // 宏定义一个较大的数,作为比较数据 #define cmaxsize 10000 // 宏定义数组的长度 // ---构建哈夫曼树 // ---定义哈夫曼…
暂无图片
编程学习 ·

JS Array

一、鉴别数组 typeof Array :Object (不可取) array instanof(Array) :true (可取) 二、转换方法 array.toString()返回字符串 array.valueOf() 返回数组本身 三、栈方法 pop()从尾部删除最后一个数据,并返回该值 push()在尾部加入新值,并返回加入后的…
暂无图片
编程学习 ·

路径乱码 ${pageContext.request.contextPath}

Maven web.xml 默认web-app的版本问题解决方案:<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://xmlns.jcp.org/xml/ns/javaee"xsi:schemaLocat…
暂无图片
编程学习 ·

简洁全面的单例模式整理

单例实现 保证一个类仅有一个实例,并提供一个访问它的全局访问点。 1.静态内部类 public class Singleton {private static class SingletonHolder {private static final Singleton INSTANCE = new Singleton();}private Singleton() {}public static final Singleton getIns…
暂无图片
编程学习 ·

Python基础语法:print()、input()函数与变量

知识:print()、input()函数与变量————————————————————————————————————————1、print()与引号的使用print(This is a egg) #》》This is a egg print(This \s a egg) #》》Thiss a egg print("Thiss a egg") #可以打印&quo…
暂无图片
编程学习 ·

java/php/net/python基于JavaWeb的货车租赁系统

本系统带文档lw1万字+答辩PPT+查重 如果这个题目不合适,可以去我上传的资源里面找题目,找不到的话,评论留下题目,或者站内私信我, 有时间看到机会给你发3.4系统UML用例分析 1管理员用例 管理员登录后可进行个人中心、员工管理、企业分类管理、合作企业管理、系统管理、车辆…
暂无图片
编程学习 ·

java 中常用框架、intell idea的使用、爬虫系统

***intell idea的使用设置mavende本地仓库:file-》settings-〉build-》build tools-〉maven-》配置maven的环境,maven home directory,user setting files,local repository***java 中常用框架**mycat:数据库操作;https://www.cnblogs.com/fyy-hhzzj/p/9044775.htmlmycat分布式…