ES6 常用语法

ECMAScript 6 简称ES6, 在2015年6月正式发布~  ECMAScript 是JavaScript语言的国际标准。

一, 变量声明 const  let  var

ES6以前 var关键字来声明变量,无论声明在何处都存在变量提升这个事情,会提前创建变量;

作用域也只有全局作用域以及函数作用域~ 所以变量会提升在函数顶部或全局作用域顶部;

let 关键字表示变量,const 表示常量。都是块级作用域,比如一个函数内部,代码块{}内部;

    // var 变量提升
    console.log(age);
    var age = 18;
    console.log(age);

    // 声明变量
    // const  let
    console.log(age);  // age is not defined
    let age = 18;
    console.log(age);

    const a = 1;
    const a = 2;  //  Identifier ‘a‘ has already been declared

    let a = 1;
    let a = 2;  // Identifier ‘a‘ has already been declared

    function test() {
        console.log(age); // age is not defined
        let  age = 18;
        console.log(age);
    }
    test()

var let const

二,模板字符串

ES6引入了反引号``,使用 ${} 的方式

// 模板字符串, 可进行简单的运算
    let name = "glh";
    let age = 18;
    let hobby = ["妹子1", "妹子2"];

    let html = `
            <ul>
                <li>${name}</li>
                <li>${age + 2}</li>
                <li>${hobby}</li>
            </ul>`;

    let ele1 = document.getElementById("app");
    let ele = document.getElementsByClassName("app")[0];
    console.log(ele);
    console.log(ele1);
    ele.innerHTML = html;
    ele.innerText = ‘sdfsfss‘

三,箭头函数

箭头函数,是函数的快捷写法,类比Python的匿名函数 lambda。

最直观的三个特点

  -- 不需要function关键字来创建函数

  -- 省略return关键字

  -- 继承当前上下文的this关键字

 // 箭头函数和this
    function f(x) {
        return x+1
    }

    let aa = x => x+1;
    console.log(aa(2));

    // 关于this
    function f1() {
        console.log(this)
    }

    f1(); //this: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

    let obj1 = {
        f1:f1
    };
    obj1.f1();  //this: {f1: ƒ}

    let obj2 = {
        obj: obj1
    };
    obj2.obj.f1();  // this: {f1: ƒ}
     // this取决去函数的最近调用着

箭头函数和this

四,数据解构

数据的解构类似于我们python里面的**解包

  // 数据的解构
    let arry = [1, 2, 3];
    let obj = {name: ‘glh‘, age: 18};
    let objArry = [
        {name: ‘glh‘, age: 18},
        {name1: ‘hudapao‘, age1: 28}
        ];
    let [a, b, c] = arry;
    console.log(a);
    console.log(b);
    console.log(c);
    let {name, age} = obj;  // 解构取对象的键对应的值
    console.log(name);
    console.log(age);
    let [{name, age}, {name1, age1}] = objArry;
    console.log(name);
    console.log(name1);
    console.log(age);
    console.log(age1);

数据的解构

五,类

// 类 类的继承
    class Foo{
        // 类的构造方法
        constructor(){
            this.name = "glh";
            this.gender = "   man   "
        }
        says(say){
            console.log(this.name + this.gender + "说" + say)
        }
    }
    foo = new Foo();
    foo.says(6666)

类的继承

  // 类的继承
    class Son extends Foo{
        constructor(name, gender){
            super();
            this.name = name;
            this.gender = gender;
        }
    }
    son = new Son("儿子", "man man");
    son.says(7777)

六, import 和 export

import 导入模块、export导出模块

// main.js
// 导出多个声明
export var name = "ggg"
export var age = "18"
export function aa() {
    return 1
}
// 批量导出
export {name, age, aa}

// test.js
import {name, age, aa} from "./main"
console.log(name)
console.log(age)
console.log(aa())
// 整个模块导入 把模块当做一个对象
// 该模块下所有的导出都会作为对象的属性存在
import * as obj from "./main"
console.log(obj.name)
console.log(obj.age)
console.log(obj.aa())
       

名字导出

// 一个模块只能有一个默认导出
// 对于默认导出 导入的时候名字可以不一样
// main.js
var app = new Vue({

});
export default app
// test.js
// import app from "./main"
import my_app from "./main"

默认导出

原文地址:https://www.cnblogs.com/glh-ty/p/9616117.html

时间: 2024-10-08 12:09:47

ES6 常用语法的相关文章

ES6常用语法

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. 虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了... 在我们正式讲解ES6语法之前,我们得先了解下Babel. Babel Babel是一个广泛使用的ES6转码器,可以将

ES6常用语法总结

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015.也就是说,ES6就是ES2015.虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.今天就来总结一下在工作中es6常用的属性方法 1.let ES6新增了let命令,用来生命变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 1 2 3 4 for (l

ES6常用语法:

1.变量声明let与const(注意与var的区别) /** * 声明变量let和const */ //let声明的变量不存在预解析 //报错 flag is not defined console.log(flag); let flag = 123; //let声明的变量不允许重复(在同一个作用域内) //报错Identifier 'flag' has already been declared let flag = 123; let flag = 456; console.log(flag)

ES6常用语法简介import export

let与var用法区别 //var var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10 ------------------------------ //let var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); //

ES6常用语法简介

//var var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10 ------------------------------ //let var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 6 ---------

ES6常用语法(二)

arrow functions (箭头函数) 函数的快捷写法.不需要 function 关键字来创建函数,省略 return 关键字,继承当前上下文的 this 关键字 // ES5 var arr1 = [1, 2, 3]; var newArr1 = arr1.map(function(x) { return x + 1; }); // ES6 let arr2 = [1, 2, 3]; let newArr2 = arr2.map((x) => { x + 1 }); 注意:当你的函数有且

2-6 ES6常用语法

原文地址:https://www.cnblogs.com/ZHONGZHENHUA/p/9153706.html

第79篇 Vue第一篇 ES6的常用语法

01-变量的定义 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // var somedody; // console.log(somebody); // var somebody = &qu

总结常见的ES6新语法特性

总结常见的ES6新语法特性 ES6给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数(=>).class等等.用一句话来说就是: ES6给我们提供了许多的新语法和代码特性来提高javascript的体验 不过遗憾的是,现在还没有浏览器能够很好的支持es6语法,点这里查看浏览器支持情况,所以我们在开发中还需要用babel进行转换为CommonJS这种模块化标准的语法. 因为下面我会讲到一些es6新特性的例子,如果想要