es6_es6- - CSDN
es6 订阅
ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 [1]  。另外,一些情况下ES6也泛指ES2015及之后的新增特性,虽然之后的版本应当称为ES7、ES8等。 展开全文
ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 [1]  。另外,一些情况下ES6也泛指ES2015及之后的新增特性,虽然之后的版本应当称为ES7、ES8等。
信息
简    称
ES6
类    型
前端语言
通过日期
2015年6月
性    质
JavaScript语言的标准
正式名字
ECMAScript 2015(ES2015)
外文名
ECMAScript 6
ECMAScript 6发展历史
2000年,ECMAScript 4.0开始酝酿。这个版本最后没有通过,但是它的大部分内容被ECMAScript6继承了。因此,ECMAScript6制定的起点其实是2000年。2007年10月,ECMAScript 4.0草案发布,本来预计2008年8月发布正式版本。但是,各方对于是否通过这个标准,发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司,反对JavaScript的大幅升级,主张小幅改动;以JavaScript创造者Brendan Eich为首的Mozilla公司,则坚持当前的草案。2008年7月,由于对于下一个版本应该包括哪些功能,各方分歧太大,争论过于激烈,ECMA开会决定,中止ECMAScript 4.0的开发,将其中涉及现有功能改善的一小部分,发布为ECMAScript 3.1,而将其他激进的设想扩大范围,放入以后的版本,由于会议的气氛,该版本的项目代号起名为Harmony(和谐)。会后不久,ECMAScript 3.1就改名为ECMAScript 5。2009年12月,ECMAScript 5.0正式发布。Harmony项目则一分为二,一些较为可行的设想定名为 JavaScript.next继续开发,后来演变成ECMAScript 6;一些不是很成熟的设想,则被视为JavaScript.next.next,在更远的将来再考虑推出。2011年,ECMAScript 5.1发布后开始6.0版的制定。2013年3月,ECMAScript 6草案冻结,不再添加新功能。新的功能设想将被放到ECMAScript 7。2013年12月,ECMAScript 6草案发布。然后是12个月的讨论期,听取各方反馈。由于这个版本引入的语法功能太多,而且制定过程当中,还有很多组织和个人不断提交新功能。标准委员会最终决定,标准在每年的6月份正式发布一次,作为当年的正式版本。接下来的时间,就在这个版本的基础上做改动,直到下一年的6月份,草案就自然变成了新一年的版本。2015年6月,ECMAScript 6(ES6)正式通过,成为国际标准,正式名称是“ECMAScript 2015”(简称ES2015)。2016年6月,小幅修订的“ECMAScript 2016”(简称ES2016或ES7)标准发布,相当于ES6.1版,因为两者的差异非常小(只新增了数组实例的includes方法和指数运算符),基本上是同一个标准 [1]  。
收起全文
  • 你必须知道的ES6语法

    2020-03-02 10:26:29
    初步掌握 ES6 中常用和核心的语法,并能运用到实际开发中。 通过每节一个语法的方式,详细解析ES6中重要语法的使用和应用场景,如解构赋值,箭头函数等热门语法,课程内容短小,侧重实战和学员动手能力,通过本...
  • ES6简介 1.什么是ES6? ES的全称是ECMAScript,它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。 年份 版本 2015年6月 ES2015 2016年6月 ES2016 2017年6月 ES2017 2018年6月 ES2018 … ...

    ES6简介

    1.什么是ES6?

    • ES的全称是ECMAScript,它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。
    年份 版本
    2015年6月 ES2015
    2016年6月 ES2016
    2017年6月 ES2017
    2018年6月 ES2018
    • ES6实际上是一个泛指,泛指ES2015及后续的版本。(每年的6月更新一次,区别以年份命名,如:ES2015)。

    2.为什么要使用ES6?

    • 因为JavaScript本身存在的缺陷,如:

      (1)变量提升特性增加了程序运行时的不可预测性。

      (2)语法过于松散,实现相同的功能,不同的人可能会写出不同的代码。

    ES6的新增语法

    1.let

    • let是ES6中新增的用于声明变量的关键字。

    (1)let声明的变量只在所处的块级有效。

    if(true){
      let a = 10;
    }
    console.log(a);		//报错,a is not defined
    

    注意:在一个大括号中,使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性。

    • let可以防止循环变量变成全局变量。
    for(var i = 0; i<2; i++){
      
    }
    console.log(i);		//输出结果为:2
    
    for(let i = 0; i<2; i++){		//虽然这个i没有写在大括号中,但是它却和这个for循环绑定在一起,块级作用域外是访问不到这个变量的
      
    }
    console.log(i);		//输出结果为:报错,i is not defined
    
    

    (2)不存在变量提升。

    console.log(a);		//报错,a is not defined
    let a = 20;
    

    (3)暂时性死区(在块级作用域内使用let声明的变量会被整体绑定在这个块级作用域内,不受外部代码影响)。

    //例子1:
    var num = 10;
    if(true){
      console.log(num);		
      let num =20;				//因为在块级作用域内使用了let关键字声明变量,所以这个变量和整个块级作用域进行了绑定,所以执行console.log(num)时,会报num没有定义的错误
    }
    //例子2:
    var tmp = 123;
    if(true){
      tmp = 'abc';		//因为该块级作用域使用了let tmp;所以tmp和该块级作用域整体进行了绑定,没先声明就赋值就会出现错误(因为没有变量提升的功能)。如果只有tmp = 'abc';那么就会隐式声明,该tmp变量会成为全局变量。如果只有var tmo =123;和tmp = 'abc';那么就会修改tmp的值。
      let tmp;
    }
    //拓展:
    function test(){
      console.log(a);		//会报错,因为a = 3存在隐式声明,而隐式声明没有变量提升的功能,所以会报错
      
      a = 3;
      
    }
    
    
    
    
    

    (4)不可重复声明。

    • 简单面试题:
    var arr = [];
    for(var i = 0; i < 2; i++){
      arr[i] = function(){
        console.log(i);
      }
    }
    arr[0]();		//输出结果为:2
    arr[1]();		//输出结果为:2
    

    在这里插入图片描述

    • 解题关键:变量i是全局的,函数执行时输出的都是全局作用域下的值。
    var arr = [];
    for(let i = 0; i < 2; i++){
      arr[i] = function(){
        console.log(i);
      }
    }
    arr[0]();		//输出结果为:0
    arr[1]();		//输出结果为:1
    

    在这里插入图片描述

    • 解题关键:每次循环都会产生一个块级作用域,每个块级作用域中的变量都是不同的,函数执行时输出的是自己上一级(循环产生的块级作用域)作用域中的i值。

    • 注意:

    let num = 10;
    if (true) {
      console.log(num);
    }		//如果在大括号内没有用let声明变量,但大括号外面用let声明了该变量,那么大括号是可以使用大括号外面声明的该变量的(跟var一样)
    
    

    2.const

    • 作用:声明常量,常量就是值(内存地址)不能变化的量。

    (1)具有块级作用域。

    if(true){
      const a = 10;
    }
    console.log(a);		//报错,a is not defined
    

    (2)声明常量时必须赋值(否则就会报错)。

    const PI;		//报错,Missing initializeri in const declaration
    

    (3)常量赋值后,值不能修改。

    const PI = 3.14;
    PI = 100;		//报错,Assignment to constant variable
    
    const ary = [100,200];
    arr[0] = 'a';
    arr[1] = 'b';
    console.log(arr);		//输出结果为:['a','b']
    arr = ['a','b'];		//报错,Assignment to constant variable
    

    (4)不可重复声明。

    3.let、const、var的区别

    • 使用var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。
    • 使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。
    • 使用const声明的是常量,在后面出现的代码中不能再修改该常量的值。
    var let Const
    函数级作用域 块级作用域 块级作用域
    变量提升 不存在变量提升 不存在变量提升
    值可更改 值可更改 值不可更改
    • 如果存储的值不需要变化,推荐使用const。比如:函数的定义、对象、数学公式中的一些恒定不变的值。

    4.解构赋值

    • ES6中允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构。
    • 解构赋值的拷贝是浅拷贝,即如果一个键的值是复合类型的值(数组、对象、函数),那么解构赋值拷贝的是这个值的引用(即地址),而不是这个值的副本。
    (1)数组解构
    • 数组解构允许按照一一对应的关系从数组中提取值,然后将值赋值给变量。
    let [a,b,c] = [1,2,3];
    console.log(a);		//输出结果为:a
    console.log(b);		//输出结果为:b
    console.log(c);		//输出结果为:c
    
    • 如果解构不成功,变量的值为undefined。
    let [a] = [];				//a的值为undefined
    let [a,b] = [1];		//a的值为1,b的值为undefined
    
    (2)对象解构
    • 对象解构允许使用变量的名字匹配对象的属性,匹配成功则将对象属性的值赋值给变量。
    let person = {name:'andy', age:22};
    let {name,age} = person;
    console.log(name);		//输出结果为:'andy'
    console.log(age);			//输出结果为:22
    
    let person = {name:'andy', age:22};
    let { name:myName, age:myAge} = person;		//myName和myAge属于别名
    console.log(myName);		//输出结果为:'andy'
    console.log(myAge);			//输出结果为:22
    

    5.箭头函数

    • 箭头函数是ES6新增的定义函数的方式。
    () => {}
    const fn = () => {}		//通常将箭头函数赋值个一个变量,变量名字就是箭头函数的名字
    
    • 函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号。
    //有return返回值的情况:
    //传统的函数:
    function sum(num1,num2){
      reutrn num1 + num2;
    }
    //箭头函数:
    const sum = (num1,num2) => num1 + num2;
    
    //没有return返回值的情况:
    //传统的函数:
    function fn(){
      console.log('Hello!');
    }
    //箭头函数:
    const fn = () => console.log('Hello!');
    
    • 如果形参只有一个,则可以省略小括号。
    //传统的函数:
    function fn(v){
      return v;
    }
    //箭头函数:
    const fn = v => v;
    
    • 箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this。
    const obj = { name: 'andy'};
    function fn(){
      console.log(this);		//输出结果为:{ name: 'andy'}
      return () => {
        console.log(this);	//输出结果为:{ name: 'andy'}
      }
    }
    const resFn = fn.call(obj);
    resFn();		//尽管调用的是window下的resFn函数,但因为它是箭头函数,它没有自己的this关键字,如果使用this,则指向箭头函数定义位置的this。由于箭头函数定义位置的this已经被修改为obj,所以此时箭头函数的this就指向obj对象。
    
    
    
    • 箭头函数面试题:
    var obj = {
      age: 22,
      say: () => {
        alert(this.age);	//该this定义在obj对象内,但因为obj对象不能产生作用域,所以箭头函数中的this指向的是window,但由于window下面没有定义age变量,所以输出结果为undefined。	
      }
    }
    obj.say();
    
    

    6.剩余参数

    • 剩余参数允许将一个不定数量的参数表示为一个数组。
    function sum(first,...args){
      console.log(first);	//10
      console.log(args);	//[20,30]
    }
    sum(10,20,30);
    //注意:箭头函数使用不了argument
    
    • 剩余参数和解构配合使用。
    let students = ['andy','Mary','lebron'];
    let [s1,...s2] = students;
    console.log(s1);		//输出结果为:'andy'
    console.log(s2);		//输出结果为:['Mary','lebron']
    

    ES6的内置对象扩展

    1.Array的扩展方法

    (1)扩展运算符(展开语法)
    • 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。(扩展运算符后面可以跟表达式)

    注意:用扩展运算符对数组或者对象进行拷贝时,只能扩展和深拷贝第一层的值,对于第二层极其以后的值,扩展运算符将不能对其进行打散扩展,也不能对其进行深拷贝,即拷贝后和拷贝前第二层中的对象或者数组仍然引用的是同一个地址,其中一方改变,另一方也跟着改变。

    let ary = [1,2,3];
    ...ary;		//1,2,3
    console.log(...ary);	//1 2 3
    console.log(1,2,3);		//1 2 3
    
    let n = {a:2,b:4};
    let m = {...n};
    m		//{a:2,b:4}
    //深拷贝
    n.a = 6;
    console.log(n);		//{a:6,b:4}
    console.log(m);		//{a:2,b:4}
    
    • 扩展运算符可以应用于合并数组。(注意:如果用户自定义的属性放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉)
    //方法一:
    let ary1 = [1,2,3];
    let ary2 = [4,5,6];
    let ary3 = [...ary1, ...ary2];	//[1,2,3,4,5,6]
    //方法二:
    ary1.push(...ary2);		//[1,2,3,4,5,6]
    
    //用户自定义的属性放在扩展运算符后面
    const a = {
      x: 5,
      y: 6,
      n: 7,
      m: 8
    }
    let ary = {..a,x:1,y:2};
    console.log(ary);		//输出结果为:{x:1,y:2,n:7,m:8}
    
    • 扩展运算符可以将类数组(伪数组)或可遍历对象转换为真正的数组。
    let oDivs = document.getElementsByTagName('div');
    oDivs = [...oDivs];
    
    (2)构造函数方法:Array.from()
    • 将类数组(伪数组)或可遍历对象转换为真正的数组。
    let arrayLike = {
      '0': 'a',
      '1': 'b',
      '2': 'c',
      'length': 3
    };
    let arr = Array.from(arrayLike);		//['a','b','c']
    
    • 该方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
    let arrayLike = {
      '0': 1,
      '2': 2,
      'length': 2
    };
    let newAry = Array.from(arrayLike,item => item * 2);	//[2,4]
    
    (3)实例方法:find()
    • 用于找出第一个符合条件的数组成员。如果找到就返回该元素值;如果没有找到就返回undefined。
    let ary = [{
      id: 1,
      name: 'andy'
    },{
      id: 2,
      name: 'Mary'
    }];
    let target = ary.find(item => item.id == 2);	//item.id==2就是循环体,就是查找条件,return和大括号省略了
    console.log(target);		//输出结果为:{id: 2, name: 'Mary'}
    
    
    (4)实例方法:findIndex()
    • 用于找出第一个符合条件的数组成员的位置,如果没有找到就返回-1。
    let ary = [1,5,10,15];
    let index = ary.findIndex(value => value > 9);
    console.log(index);		//输出结果为:2
    
    (5)实例方法:includes()
    • 表示某个数组是否包含给定的值,返回布尔值。
    let a = [1,2,3].includes(2);		
    console.log(a);		//true
    let b = [1,2,3].includes(4);
    console.log(b);		//false
    

    2.String的扩展方法

    (1)模版字符串
    • 模版字符串是ES6新增的创建字符串的方式,使用反引号定义。
    let name = `andy`;
    
    • 模版字符串中可以解析变量。
    let name = 'andy';
    let sayHello = `hello,my name is ${name}`;	
    console.log(sayHello);		//输出结果为:hello,my name is andy
    
    • 模版字符串中可以换行。
    let result = {
      name: 'andy',
      age: 22
    };
    let html = `
    		<div>
    				<span>${result.name}</span>
    				<span>${result.age}</span>
    		</div>
    `;
    console.log(html);		//输出结果也是换行的
    
    • 在模版字符串中可以调用函数。
    const fn = () => {
      return '我是andy!'
    }
    let html = `你好,${fn()}`;
    console.log(html);		//输出结果为:你好,我是andy!
    
    (2)实例方法:startsWith()和endsWith()
    • startsWith():表示参数字符串是否在原字符串的头部,返回布尔值。
    • endWith():表示参数字符串是否在原字符串的尾部,返回布尔值。
    let str = 'Hello world!';
    let a = str.startsWith('Hello');
    console.log(a);		//输出结果为:true
    let b = str.endsWith('!');
    console.log(b);		//输出结果为:true
    
    (3)实例方法:repeat()
    • repeat()方法表示将字符串重复n次,返回一个新字符串。
    let a = 'x'.repeat(4);
    console.log(a);		//输出结果为:'xxxx'
    let b = 'hello'.repeat(2);
    console.log(b);		//输出结果为:'hellohello'
    

    3.Set数据结构

    • ES6提供了新的数据结构Set。它类似于数组,也是用来存储数据的,但它的成员的值都是唯一的,没有重复的值。
    • Set本身是一个构造函数,实例化该构造函数就是生成Set数据结构。
    const s = new Set();
    
    • Set函数可以接受一个数组作为参数,用来初始化。
    const set = new Set([1,2,3,4,5]);
    
    • Set数据结构有size属性,可以返回Set数据结构中存储了多少数据。
    const s = new Set([1,2,3]);
    console.log(s.size);		//输出结果为:3
    
    • 通过Set数据结构,可以实现数组去重。
    const a = ['a','a','b','b'];
    const s = new Set(a);
    var ary = [...s];
    console.log(ary);		//输出结果为:['a','b']
    
    • 实例方法:

      (1)add(value):添加某个值,返回Set结构本身。

      (2)delete(value):删除某个值,返回一个布尔值表示删除是否成功。

      (3)has(value):返回一个布尔值,表示该值是否为Set的成员。

      (4)clear():清除所有成员,没有返回值。

      const s = new Set();
      s.add(1).add(2).add(3);
      console.log(s);		//输出结果为:3
      const a = s.delete(3);
      console.log(a);		//输出结果为:true
      cosnt b = s.has(2);
      console.log(b);		//输出结果为:true
      s.clear();
      console.log(s.size);	//输出结果为:0
      
    • 遍历:

      Set结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值。(通过遍历,才可以取到Set数据结构中的值)

      const s = new Set(['a','b','c']);
      s.forEach(value => console.log(value));		//依次输出a、b和c
      

    注意:forEach()方法无法在所有元素都传递给调用的函数之前终止遍历,所以没有返回值,不能使用return。


    微信公众号也会定期更新,觉得文章写得还可以的,可以加个关注!点个赞!谢谢!

    在这里插入图片描述

    展开全文
  • ES6最常用语法

    ES6常用特性

    let,const

    ES5只有全局作用域和函数作用域,没有块级作用域,let则为JavaScript新增了块级作用域,用它所声明的变量,只在let命令所在的代码块内有效。

    {
        {
            let a = 1;
            let b = 1;
            console.log(a);// 1
            console.log(b);// 1
        }
        console.log(a);// a is not defined
        console.log(b);// 1
        for (let i = 0; i < 10; i++) {
            //...
        }
        console.log(i); // i is not defined
        for (var j = 0; j < 10; j++) {
            //...
        }
        console.log(j);//10
    }

    const也用来声明常量, 一旦声明,常量的值就不能改变。

    const PI = 3.1415926
    PI = 3.14;// Assignment to constant variable

    默认参数

    ES6之前处理默认参数,基本使用以下方法

    function toDecimal(number, precision) {
        var precision = precision||2;
        var temp = 1;
        for (let i = 0; i < precision; i++) {
            temp = temp * 10;
        }
        return Math.round(number * temp)/temp;
    }

    ES6则可以采用如下写法

    function toDecimal(number, precision = 2) {
        var temp = 1;
        for (let i = 0; i < precision; i++) {
            temp = temp * 10;
        }
        return Math.round(number * temp)/temp;
    }

    模板对象

    ES6之前拼接字符串对象,一般使用如下方式

    var firstName = 'Fei';
    var lastName = 'Zhang';
    console.log('your name is ' + firstName + ' ' + lastName + '.');

    ES6中可以使用${}的方式来做

    var firstName = 'Fei';
    var lastName = 'Zhang';
    console.log('your name is ${firstName} %{lastName}.');

    多行字符串

    ES6之前字符串换行,一般使用\n

    var strTemp = 'abcdefg\n'+
        'hijklmn\n';
    console.log(strTemp);

    ES6只需要反引号即可

    var strTemp = ·abcdefg
        hijklmn·;
    console.log(strTemp);

    箭头函数=>

    =>可以是function写法简洁清晰很多

    function(i){ return i + 1; } // ES5
    (i) => i + 1; // ES6
    
    function(x, y) {
        x++;
        y--;
        return x + y;
    }
    (x, y) => {x++; y--; return x+y}
    

    当使用匿名函数时,不需要额外定义变量指向this

    // ES5
    var obj = this;
    foo(function(){
        obj.foo1();
    });
    // ES6
    foo(()=>{this.foo1();});

    解构(Destructuring)

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值。

    let cat = 'cat'
    let dog = 'dot'
    let zoo = {cat: cat, dog: dog} // es5
    let zoo1 = {cat, dog} // es6
    // 也可以反过来写
    let {cat1, dog1} = zoo;

    rest参数(…变量名)

    rest参数搭配的变量是一个数组,可以使用数组的一切操作

    function sum(...values){
        let temp = 0;
        for (var value of values){
            temp = temp+ value;
        }
        return temp;
    }
    展开全文
  • 全面学习vue.js配置,es6命令,解构赋值,symbol类型,set,weakSet,Map,WeakMap,Iterator遍历器,Generator函数结构,Promise对象,async函数,箭头函数,class类,proxy代理,Decorator修饰器,model模块,二进制...
  • 【新】ES6精讲 ECMAscript6精通系列——基础篇 本课程作为福利,感谢很久以来同学们的支持!!
  • ES6-新增特性一览

    2019-02-28 15:10:00
    ecma-263是ES6规范的官网文档,该文档是英文版,而且里面洋洋洒洒写了每个特性的实现步骤,容易看晕。这里推荐@阮一峰老师的ECMAScript 6 入门和es6features项目,以下每个特性详细案例描述也是外链该项目内容。 以下...

    ecma-263是ES6规范的官网文档,该文档是英文版,而且里面洋洋洒洒写了每个特性的实现步骤,容易看晕。这里推荐@阮一峰老师的ECMAScript 6 入门es6features项目,以下每个特性详细案例描述也是外链该项目内容。

    以下默认陈述的是ES6标准,部分标注ES7、ES8标准是为了表明其最终发布时间(严谨)。其实大部分在2015年6月(ES6发布时间)都进入了草案阶段(Stage 2),故在babel等转译工具下,都可以使用这些特性在前端工程项目中。

    1. let/const取代var

    2. 字符串模板

    3. 对象解构

    • Destructuring
    • enhanced object literals({foo} === {foo:foo})

    4. 新数据类型Symbol

    5. 新数据结构Map/Set/WeakMap/WeakSet

    6. Proxy、Reflect

    7. 扩展

    • Array
      • Array.from()
      • Array.of()
      • Array.copyWithin()
      • Array.find()
      • Array.findIndex()
      • Array.fill()
      • Array.includes()ES7
    • Object
      • Object.keys()
      • Object.values()ES8
      • Object.entries()ES8
      • Object.assign()
      • Object. is()
    • Function
    • Number
      • Number.isNuN()
      • Number.isFinite()
      • Number.parseInt()
      • Number.parseFloat()
      • Number.isInteger()
      • Number.isSafeInteger()
    • Math
      • Math.max(x, y)
      • Math.trunc(x)
      • Math.sign(x)
      • Math.acosh(x)
      • Math.asinh(x)
      • Math.atanh(x);
      • Math.cbrt(x)
      • Math.clz32(x)
      • Math.cosh(x)
      • Math.expm1(x)
      • Math.fround(x)
      • Math.hypot(...values)
      • Math.imul(x, y)
      • Math.log1p(x)
      • Math.log10(x)
      • Math.log2(x)
      • Math.tanh(x)

    8. 异步

    • Promise
      • Promise.prototype.then
      • Promise.prototype.catch
      • Promise.prototype.finallyES9
      • Promise.all()
      • Promise.rece()
    • Iterator
      • Iterator接口
      • for of
    • Generator
      • yield*
    • async/awaitES8

    9. Class类

    • class
    • extends
    • decoratorES7

    10. Module

    • import
    • export

    参考文档

    展开全文
  • ES6

    2020-03-23 12:43:53
    ECMAScript和JavaScript的关系: ECMAScript是JavaScript的标准,JavaScript是ECMAScript的实现 严格上说JavaScript和服务端没任何关系,服务端用的ECMAScript ECMAScript发展史: 1996年11月 javaScript创造者...

    ECMAScript和JavaScript的关系:

    ECMAScript是JavaScript的标准,JavaScript是ECMAScript的实现
    严格上说JavaScript和服务端没任何关系,服务端用的ECMAScript

    ECMAScript发展史:

    1996年11月 javaScript创造者Netscape公司将javaScript提交给ECMA(欧洲计算机制造联合会)

    1997年 ECMA发布262号标准文件的第一版(ECMA-262 1th),用于规定浏览器脚本语言标准ECMAScript 1.0

    1998年6月 ECMAScript 2.0 发布

    1999年12月 ECMAScript 3.0 发布

    2000年 ECMAScript 4.0 开始酝酿, ECMAScript 6.0 的制作开始了

    2007年10月 ECMAScript 4.0 草案发布

    2008年7月 ECMAScript 4.0 开发被终止,其中的小部分功能放入 ECMAScript 3.1 ,其他的过于激进的功能放入以后的版本,该项目代号为Harmony,不久,ECMAScript 3.1 更名为 ECMAScript 5.0

    2009年12月 ECMAScript 5.0 发布 ,Harmony项目分为可行的设想方案JavaScript.next(后来的ES6)和激进的设想方案JavaScript.next.next。JavaScript.next中的方案会成为下一个JavaScript版本,而JavaScript.next.next就是为更下一版的JavaScript准备的

    2011年6月 ECMAScript 5.1 发布

    2013年3月 ECMAScript 6.0 草案冻结

    2013年12月 ECMAScript 6.0 草案发布

    2015年6月 ECMAScript 6.0 正式发布 ,历时15年

    ES6知识总结

    1.let命令和const命令

    在ES6之前,都是用 var声明,但是它会变量提升成为全局变量
    let:
    1.不具备变量提升
    2.let不可以重复声明
    3.for循环中,循环条件作为一个块级作用域
    const 常量:
    1.常量定义时,必须初始化,否则报错
    2.特点跟let一致

    2.解构

    可以简化书写的长度,提升效率

    let [a,b,c] = [1,2,3];
    	     console.log(a,b,c);    //1,2,3
    let[length] = [1,2,3];//获取arr数组的长度
    		console.log(length); //3	     
    
    3.字符串模板

    字符串插入变量和表达式:
    变量名写在‘${}’ 中,也可以放入 JavaScript 表达式

    let name = `李四`;
    let str = `我的名字叫${name}`;
    console.log(str);  //我的名字叫李四
    
    4.箭头函数
    //    参数 => 函数体  
    
        var fn  =  a=>a+1;     
    	fn(1);
    	
    
        var fn1  =  (a,b) => a+b   //多个参数 需要用括号 括起来   
    	fn1(1,3);
    	
    
        var fn2  =  () => 123;  
        fn2();
        //  没有参数 前面是一个括号   等同于:function fn2(){ return 123 }
    	
    	
    	var fn3 = (a,b) => {
    	 let result = a+b;
    	 return result;
    	}
    	fn3(4,6)
    	//当箭头函数函数体有多行语句,用 {} 包裹起来 
    
    
    5.扩展运算符和rest运算符

    扩展运算符 就是三个点…

    //数组
        const a = [1, 2]
        const b = [...a, 3, 4]
        console.log(b) //[1, 2, 3, 4]
        
        //对象
        const c = {first: 1, second: 2}
        const d = {...c, third: 3}
        console.log(d)  //{first: 1, second: 2, third: 3}
    

    rest运算符 数组或者对象除了某几项的其他项

    //数组
        const a = [1, 2,3,4,5]
        const  [b,...num]=a
        console.log(num) //[2, 3, 4, 5]
    
    6.Promise

    Promise 可以将异步操作同步表达出来
    特点:对象的状态不受外界影响; 状态一旦改变就不会在变;

    const promise = new Promise(function(resolve, reject) {
      // ... some code
    
      if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });
    

    resolve函数的作用,将Promise对象的状态从未完成变成成功(pending变成resoled)
    reject函数的作用,将Promise对象的状态从未完成变成失败(pending变成rejected)

    Promise实例生成后,可以用then方法分别指定resolved状态和``rejected`状态的回调函数
    then方法可以接受两个回调函数作为参数

    promise.then(() => {
            console.log('resolved.');
        },() => {
            console.log('rejected.');
    
        });
    
    7.Set

    Set数据结构类似数组,但是成员没有重复值。

    let setArr = new Set(['a', 'b', 'c', 'c']);
    
        console.log(setArr);  //{"a", "b", "c"}
    

    数据操作

     let setArr = new Set(['a', 'b', 'c', 'c']);
    
        // 增加 add
    
        setArr.add('d');
        console.log(setArr);  //{"a", "b", "c", "d"}
    	//查找has
    	console.log(setArr.has('d'));//true
    	// 删除 delete 
    	setArr.delete('d')
    	// 全部删除clear
    	setArr.clear();
    

    遍历操作

    keys() 返回键名
    values() 返回键值
    entries() 返回键值对
    forEach() 使用回调函数遍历成员

    let setArr = new Set(['a', 'b', 'c', 'c']);
    
    
        for (let item of setArr.keys()) {
            console.log(item);
        }
        //a b c
    
    7.Map

    Map数据结构类似对象,其键值可以是任何类型 [值-值]
    数据操作

    let json = {
            name: 'every',
            sex: 'man'
        }
    
        var map = new Map();
    
        //加值 set
        map.set('a', json);
        map.set(json, 'a');
        console.log(map);  //{"a" => {…}, {…} => "a"}
     	//查找 has
        console.log(map.has('a')); //true
        console.log(map.has(json)); //true
         //删除 delete
        console.log(map.delete('a')); //true
        console.log(map);  //{{…} => "a"}
        //清除 clear
        console.log(map.clear()); //undefined
    

    遍历操作和Set差不多

    展开全文
  • 在线转换 Babel 提供一个REPL在线编译器,可以在线将 ES6 代码转为 ES5 代码。转换后的代码,可以直接作为 ES5 代码插入网页运行。
  • ES6_30分钟速读_新特性

    2018-05-17 12:12:00
    ECMAScript 2015 FeaturesES6 包含了以下这些新特性:Arrows 箭头函数Classes 类Enhanced Object Literals 增强的对象字面量Template Strings 模板字符串Destructuring 解构Default + Rest + Spread 默认参数+不定...
  • ES6是什么?

    2017-02-17 18:33:58
    ES6 就是ECMAScript 6是新版本JavaScript语言的标准。虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法。目前ES6也是使用最多的最新的javaScript语言标准...
  • Es6(...)

    2019-04-28 11:29:40
    1  含义扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...
  • es6之扩展运算符 三个点(...)es6之扩展运算符 三个点(...)对象的扩展运算符数组的扩展运算符总结 es6之扩展运算符 三个点(…) 对象的扩展运算符 理解对象的扩展运算符其实很简单,只要记住一句话就可以: ...
  • 本套课程讲解了运行环境已支持的 ES6 特性,而忽略掉未支持的特性,随着 Node.js 、babel 和浏览器等 ES6 运行环境的逐步支持,本套视频课程的内容也会补充。这样授课的好处是可以让学员直接在开发中实际的应用 ES6 ...
  • 用babel将es6转换成es5

    2016-07-19 18:21:50
    ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码...
  • 转载自AlloyTeam:前端开发者不得不知的ES6十大特性 ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。 本文...
  • 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性进行兼容,那么浏览器肯定无法识别我们的...
  • 文章目录什么是ES6为什么要使用ES6 什么是ES6 ES的全称是 ECMAScript, 它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。 ES6 实际上是一个泛指,泛指 es2015 即后需的版本 为什么要使用ES6 每一次标准的...
  • ES6数组去重的三个简单办法 简单说一下利用ES6实现数组去重的三个办法。 第一种: 利用Map对象和数组的filter方法 贴上相关代码 打印后的结果 通过打印我们发现,确实实现了我们想要的效果。那么下面简单来解释一下...
  • 深入浅出ES6

    2020-07-15 23:34:04
    欢迎来到ES6深入浅出!JavaScript的新版本离我们越来越近,我们将通过每周一节的系列课程一起探索 ECMAScript 6新世界。ES6中包含了许多新的语言特性,它们将使JS变得更加强大,更富表现力。在接下 来的几周内,我们...
  • ES6环境的搭建

    2018-10-17 10:46:17
    es6作为ECMAScript第六个版本,相对es5增加了很多新特性(如果有想了解es6新特性的,可以看es6新特性),但es6还是要依赖于es5而生存,所以今天要讲的是es6的环境搭建。 1、先新建一个文件夹(我取的名字是zwh-es6...
1 2 3 4 5 ... 20
收藏数 153,772
精华内容 61,508
关键字:

es6