精华内容
下载资源
问答
  • ES6语法

    2021-01-13 13:06:29
    ES6语法

    ES6语法糖

    var let const

    let

    1变量不可以重复声明

     let star = '小楊' 
     let star = "杨文阳"
     console.log(star) 输出结果报错
    

    2 块级作用域 只在代码块中有效 出代码块就失效
    如果在if else while for里面写let声明也存在块级作用域

    {
           let yang="杨" 
           console.log(yang)//正常输出    杨
        }
        console.log(yang)//报错
    

    3不存在变量提升
    变量提升指变量的声明之前去使用这个变量

    console.log(yang)//报错
    let yang="杨" 
    

    4 不影响作用域链

    {
        let yang="杨" 
         function fun(){
             console.log(yang) //正常输出    杨
         }
         fun();
    }
    

    const

    const 是声明常量 PS常量是指值不可以修改的量称为常量
    1 一定要赋初始值

    const yang;
    console.log(yang)//报错
    

    2一般常量使用大写(潜规则 如果小写也OK撒)
    3 一般常量的值不可以修改

        const  yang="杨"
        yang="阳"
        console.log(yang) //报错
    

    4也是块级作用域
    5对于数组和对象的修改 不算对常量的修改 不会报错
    PS 声明数组与对象时最好用const来声明

     const yang=['1','2']
        yang.push('3')
        console.log(yang) //输出 1 2 3
    

    变量的结构赋值

    允许按照一定模式从数组和对象提取值 对变量进行赋值 称为结构赋值

    数组结构

    const yang=['1','2','3']
    let [a,b,c]=yang;//进行赋值
    console.log(a)//1
    console.log(c)//3
    

    对象结构

    const yang={
        name:'杨',
        age:'18',
        sex:'男',
        habby:function(){
            console.log('发呆')
        }
    }
    //第一种
    let {name,age,sex,habby}=yang;//进行赋值
    console.log(age)//18
    console.log(name)//杨
    habby();//发呆
    console.log(habby)//输出该habby的表达式
    
    
    //第2种
    let {habby}=yang//进行赋值
    console.log(yang.name)//杨
    
    

    模板字符串 ``

    1 内容中可以出现换行符

    let str=`
    <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    `
    console.log(str)//输出结果为 定义的str这个表达式
    

    2 变量拼接
    变量拼接时使用${}的形式

    let yang ="杨洋"
    let out =`${yang}是一位演员`
    console.log(out) //杨洋是一位演员
    

    箭头函数

    let fun =function(){}
    let fun =()=>{
    }
    

    1 this指向永远指向函数声明时所在作用域下的值 是静态的
    2不可以作为构造函数实例化的对象

    let person=(name,age)=>{
      this.name=name;
      this.age=age
    }
    
    let me=new person('杨文阳',88);
    console.log(me)//报错
    

    3不可以使用arguments变量

    let fun =()=>{
        console.log(argument)
    }
    fun(1,2)//报错
    

    4箭头函数也可以简写
    4.1省略小括号 当形参只有一个时

    let add=(n)=>{
        return n+n
    }
    console.log(add(9))//18
    
    可以简写
    let add=n=>{
        return n+n
    }
    console.log(add(9))//18
    

    4.2 省略花括号 当代码只有一条语句时 return语句也要省略

    let add=(n)=>{
        return n+n
    }
    console.log(add(9))//18
    
    可以简写
    let add=(n)=>n+n
    console.log(add(9))//18
    
    展开全文
  • ES6 语法

    2019-08-11 11:27:37
    ES6 语法 本章主要讲解工作中最常用的 ES6 语法,包括 Module Class Promise 等语法,还会介绍使用 babel webpack rollup 来搭建 ES6 编译环境。 ES6 使用 开发环境已经普及使用 浏览器环境却支持不好( 需要开发...

    ES6 语法

    本章主要讲解工作中最常用的 ES6 语法,包括 Module Class Promise 等语法,还会介绍使用 babel webpack rollup 来搭建 ES6 编译环境。

    ES6 使用

    • 开发环境已经普及使用
    • 浏览器环境却支持不好( 需要开发环境编译 )
    • 内容很多,重点了解常用语法
    • 面试:开发环境的使用 + 重点语法的掌握

    问题

    • ES6 模块化如何使用,开发环境如何打包
    • Class 和 普通构造函数 有何区别 ?
    • Promise 的基本使用和原理
    • 总结一下 ES6 其它常用功能

    2-1 ES6 模块化语法

    ES6 模块化如何使用,开发环境如何打包

    知识点

    ES6 模块化如何使用,开发环境如何打包:

    • 模块化的基本语法
    • 开发环境的配置
    • 关于 JS 众多 模块化标准

    export 语法

    export 语法

    /*util1.js*/
    export default {
        a: 100
    }
    
    /*util2.js*/
    export function fn1() {
        alert('fn1')
    }
    export function fn2() {
        alert('fn2')
    }
    
    
    /*index.js*/
    import util1 from './util1.js'
    import {fn1, fn2} from './util2.js'
    
    console.log(util1)
    fn1()
    fn2()
    
    

    开发环境 - babel

    Babel是一个JavaScript编译器。官网

    使用技巧 可参考 React学习第一天 :webpack中使用Babel配置

    Vue第六天学习 :webpack中 babel 的配置

    开发环境 - webpack

    开发环境 - webpack - webpack 是一个模块打包器 官网

    详情 可参考我的博客:Vue第五天:webpackVue第六天学习:深入webpack 以及 React学习第一天:创建基本的webpack4.x项目

    rollup.js

    概述 (Overview) 中文文档 官网

    Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式,这些标准都包含在 JavaScript 的 ES6 版本中,而不是以前的特殊解决方案,如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数,而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现,但当前 Rollup 可以使你提前体验

    rollup 功能单一(极致) ,webpack 功能强大

    关于 JS 众多 模块化标准

    关于 JS 众多 模块化标准

    详情可参考我的博客:开发环境: 模块化

    发展过程

    • 没有模块化
    • AMD 成为 标准,require.js (也有 CMD【用的不多 】)
    • 前端打包工具,nodejs 模块化可以被使用
    • ES6 出现 ,想统一现在所有的模块化标准
    • nodejs 积极支持,浏览器尚未统一
    • 你可以自造 lib,但是不要自造标准

    问题解答

    • 语法:import export (注意有无 default)
    • 环境:babel 编译 ES6 语法,模块化可用 webpack 和 rollup
    • 扩展:说一下自己对模块化标准统一的期待

    2-2 Class 和 普通构造函数有何区别

    Class 和 普通构造函数有何区别

    我的博客:React学习第二天:了解 class

    知识点

    • JS 构造函数
    • Class 基本语法
    • 语法糖
    • 继承

    问题解答

    • Class 和 普通构造函数 有何区别 ?
      • Class在语法上更加贴合面向对象的写法
      • Class 实现继承更加易读、易理解
      • 更易于写 java 等后端语言的使用
      • 本质还是语法糖, 使用 prototype

    2-3 Promise 的基本使用

    Promise 的基本使用

    可参考我的博客:Promise 详细分析

    • Callback Hell
    • Promise 语法

    Callback Hell

    function loadImg(src, callback, fail) {
        var img = document.createElement('img')
        img.onload = function () {
            callback(img)
        }
        img.onerror = function () {
            fail()
        }
        img.src = src
    }
    
    var src = 'https://edu-image.nosdn.127.net/B34DC36428D2D51B8EF5EE2C83CE9BF2.png?imageView&thumbnail=241y34&quality=100'
    loadImg(src, function (img) {
        console.log(img.width)
    }, function () {
        console.log('failed')
    })
    

    Promise 语法

    function loadImg(src) {
        const promise = new Promise(function (resolve, reject) {
            var img = document.createElement('img')
            img.onload = function () {
                resolve(img)
            }
            img.onerror = function () {
                reject()
            }
            img.src = src
        })
        return promise
    }
    
    var src = 'https://edu-image.nosdn.127.net/B34DC36428D2D51B8EF5EE2C83CE9BF2.png?imageView&thumbnail=241y34&quality=100'
    var result = loadImg(src)
    
    result.then(function (img) {
        console.log(img.width)
    }, function () {
        console.log('faild')
    })
    
    result.then(function (img) {
        console.log(img.height)
    })
    

    问题解答

    • Promise 的基本使用和原理?
      • new Promise 实例,而且要 return
      • new Promise 时要传入函数,函数有 resolve, reject 两个参数
      • 成功时执行 resolve() 失败时执行 reject()
      • then 监听结果

    2-4 总结一下 ES6 其它常用功能

    知识点

    • let/const
    • 多行字符串/模板变量
    • 解构赋值
    • 块级作用域
    • 函数默认参数
    • 箭头函数

    let/const

    mark

    多行字符串/模板变量

    mark

    解构赋值

    mark

    块级作用域

    mark

    函数默认参数

    mark

    箭头函数

    mark

    mark

    展开全文
  • es6语法

    2018-07-12 13:12:03
    ES6语法ES6是JavaScript语言的新版本,它也可以叫做ES2015,之前学习的JavaScript属于ES5,ES6在它的基础上增加了一些语法,ES6是未来JavaScript的趋势,而且vue组件开发中会使用很多的ES6的语法,所以掌握这些常用...

    ES6语法

    ES6是JavaScript语言的新版本,它也可以叫做ES2015,之前学习的JavaScript属于ES5,ES6在它的基础上增加了一些语法,ES6是未来JavaScript的趋势,而且vue组件开发中会使用很多的ES6的语法,所以掌握这些常用的ES6语法是必须的。

    变量声明let和const

    let和const是新增的声明变量的开头的关键字,在这之前,变量声明是用var关键字,这两个关键字和var的区别是,它们声明的变量没有预解析,let和const的区别是,let声明的是一般变量,const申明的常量,不可修改。

    alert(iNum01) // 弹出undefined
    // alert(iNum02); 报错,let关键字定义变量没有变量预解析
    // alert(iNum03); 报错,const关键字定义变量没有变量预解析
    
    var iNum01 = 6;
    // 使用let关键字定义变量
    let iNum02 = 12;
    // 使用const关键字定义变量
    const iNum03 = 24;
    
    alert(iNum01); // 弹出6
    alert(iNum02); // 弹出12
    alert(iNum03); // 弹出24
    
    iNum01 = 7;
    iNum02 = 13;
    //iNum03 = 25; // 报错,const定义的变量不可修改,const定义的变量是常量
    
    alert(iNum01)
    alert(iNum02); 
    alert(iNum03);
    

    箭头函数

    可以把箭头函数理解成匿名函数的第二种写法,箭头函数的作用是可以在对象中绑定this,解决了JavaScript中this指定混乱的问题。

    // 定义函数的一般方式
    /*
    function fnRs(a,b){
        var rs = a + b;
        alert(rs);
    }
    fnRs(1,2);        
    */
    
    // 通过匿名函数赋值来定义函数
    /*
    var fnRs = function(a,b){
        var rs = a + b;
        alert(rs);
    }
    fnRs(1,2);
    */
    
    // 通过箭头函数的写法定义
    var fnRs = (a,b)=>{
        var rs = a + b;
        alert(rs);
    }        
    // fnRs(1,2);
    
    // 一个参数可以省略小括号
    var fnRs2 = a =>{
        alert(a);
    }
    fnRs2('haha!');
    
    
    // 箭头函数的作用,可以绑定对象中的this
    var person = {
        name:'tom',
        age:18,
        showName:function(){
            setTimeout(()=>{
                alert(this.name);
            },1000)            
        }
    }
    person.showName();
    

    模块导入import和导出export

    javascript之前是没有模块的功能的,之前做js模块化开发,是用的一些js库来模拟实现的,在ES6中加入了模块的功能,和python语言一样,python中一个文件就是一个模块,ES6中,一个js文件就是一个模块,不同的是,js文件中需要先导出(export)后,才能被其他js文件导入(import)

    // model.js文件中导出
    var person = {name:'tom',age:18}
    export default {person}
    
    // index.js文件夹中导入
    import person from 'js/model.js'
    
    // index.js中使用模块
    person.name
    person.age
    
    /*
    上面导出时使用了default关键字,如果不使用这个关键字,导入时需要加大括号:
    import {person} from 'js/model.js'
    */
    

    目前ES6的模块功能需要在服务器环境下才可以运行。

    对象的简写

    javascript对象在ES6中可以做一些简写形式,了解这些简写形式,才能方便我们读懂一些在javascript代码中简写的对象。

    let name = '李思';
    let age = 18;
    
    /*
    var person = {
        name:name,
        age:age,
        showname:function(){
            alert(this.name);
        },
        showage:function(){
            alert(this.age);
        }
    }
    */
    
    // 简写成下面的形式
    var person = {
        name,
        age,
        showname(){
          alert(this.name);
        },
        showage(){
          alert(this.age);
        }
    }
    
    person.showname();
    person.showage();
    展开全文
  • webstorm中es6语法报错,.vue文件中es6语法报错1.webstorm中es6语法报错,解决方法:打开 Settings =&gt; Languages &amp; Frameworks =&gt; Javascript把 Javascript Language version 改为 ECMAScript...

    webstorm中es6语法报错,.vue文件中es6语法报错

    1.webstorm中es6语法报错,解决方法:

    打开 Settings => Languages & Frameworks => Javascript
    把 Javascript Language version 改为 ECMAScript 6

    这样做所有的.js文件中es6不再报错,但是.vue文件中es6语法依然报错。

    2.  .vue文件中es6语法报错

    (1)打开 Settings => File Types 找到 HTML 添加 *.vue

    这样vue文件就相当于html文件,可以编辑css,js,也都有智能提示。但是,在.vue文件中es6语法还是报错。

    (2).粗暴:直接在<script>标签中添加type="text/ecmascript-6",.vue里面的代码会高亮并支持ES6。

    (3).将script标签添加 type=”es6” 属性

    <script type="es6">
    </script>

    然后打开 Settings => Language Injections 添加 XML Tag Injection,内容如下图。

     3.补充新功能:右键新建时出现.vue文件类型,就像新建html文件一样,方法:

    Setting-Editor-File and Code Templates 点击右上角的加号 添加vue文件 Name为vue File, Extension 为vue,下面的位置可以填写自定义的初始化模板内容。

    点击OK 返回,在项目中新建会出现vue文件 webstorm配置新建vue文件完成。

     

     

     

    以上这些只是为了学习做的总结,有部分摘自大牛原话,本人只是为了学习方便做的笔记,如有侵权,联系必删,致敬大牛!
    展开全文
  • es6 语法

    2017-01-16 10:45:00
    1.定义变量 使用let,const。let可以定义变量,相当于var,定义的变量只在局部范围...但是es6里利用解构这一特性,可以直接返回一个数组然后数组中的值可以自动解析到对应的接收的变量中。 3.for of 我们知道for ...
  • js手写apply(不能使用ES6语法) 参考前边手写call // apply和call的区别就是传参方式不同,apply第二个参数传的是数组 Function.prototype.myApply = function(context,args){ if(context === null || context === ...
  • ES6语法学习

    2021-01-06 16:34:49
    ES6语法学习

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,383
精华内容 7,753
关键字:

es6语法