精华内容
参与话题
问答
  • es6新特性

    2017-11-07 21:52:11
    es6


    ##块作用域构造Let and Const

    Block-Scoped Constructs Let and Const(块作用域构造Let and Const)

    1、块级作用域:{ },用大括号定义块级作用域。
    2、let是一种新的变量申明方式,它允许你把变量作用域控制在块级里面。因此没有变量提升,变量需声明后使用。
    3、const声明一个只读的常量,声明后值不能更改;当声明常量的值为对象时,常量存储的为空间地址,对象可以添加属性。
    ##模板文本、多行字符串

    Template Literals (模板文本)in ES6
    Multi-line Strings (多行字符串)in ES6

    1、多行字符串(模板字符串):(—``—这里是两个反点)用两个反点将所需编写的字符包起来即可。
    2、模板文本:${ },在多行字符串中用;模板文本不会被当做文本,模板文本中可以放变量。
    例:

        for(let i=0;i<ary.length;i++){
            str=`
                <div>
                    <ul>
                        <li>${ary[i].attrOne}</li>
                        <li>${ary[i].attrTwo}</li>
                        <li>${ary[i].attrThree}</li>
                    </ul>
                </div>
                `
        }
    

    注:上面示例中,反引号代替所有的拼接字符串中的引号,并用模板文本将ary中的每项的三个属性值插到编写的字符串中。
    ##增强的对象文本
    Enhanced Object Literals (增强的对象文本)in ES6
    ##解构赋值
    Destructuring Assignment (解构赋值)in ES6
    解构赋值:允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。
    ###数组的解构赋值:
    语法:let [variable1,variable2,…variableN]=array;

    	例:let [a,b,c]=[1,2,3,4];
    	console.log(a,b,c)      //1,2,3
    

    1、左边还可以用连续逗号的方式跳过右侧对应的值。

    	例:let [a,,c]=[1,2,3,4];
    	console.log(a,c)        //1,3
    

    2、嵌套赋值

    	例:let [a,[b,c]]=[1,[2,3],4];
    	console.log(a,b,c)      // 1,2,3
    

    3、与剩余运算符连用

    	例:let [a,...b]=[1,2,3,4];
    	console.log(a,b)       // 1,[2,3,4]
    

    4、当解构赋值为空,或过界时,返回undefined

    	例:let [a] = [];
    	console.log(a);       // undefined
    	   let [a,b]=[1];
    	console.log(a,b);     // 1 undefined
    

    5、解构赋值时,可以设置默认值,但默认值只有在undefined时起作用

    	例:let [a,b=3]=[1];
    	console.log(a,b);     // 1,3
    

    注:数组解构赋值时,注意顺序问题。

    ###对象的解构赋值:

    语法:let [variable1,variable2,…variableN]=array;

    例:let {name:xxx}={name:'yan'};
    console.log(xxx);          // yan
    

    1、可以通过声明与对象属性值相同名称的变量来获取对象的属性值

    	例:let {a}={a:4};
    	console.log(a);             // 4
    

    2、可嵌套(可与数组嵌套)

    	例:let {a,b}={a:1,b:{c:2}};
    	console.log(a,b)            // 1 { c: 2 }
    	   let {a,b:{c}}={a:1,b:{c:2}};
    	console.log(a,c);           //  1,2
    	   let [a,{b}]=[1,{b:2}];
    	console.log(a,b);           //  1,2
    

    3、当解构赋值为空,或过界时,返回undefined

    	例:let {a} = { };
    	console.log(a);             // undefined
    

    4、解构赋值时,可以设置默认值,但默认值只有在undefined时起作用

    	例:let {a=1} = { };
    	console.log(a);             // 1
    

    ###函数的解构赋值(默认参数):

    Default Parameters(默认参数) in ES6

    1、传参(jQuery为例)

       jQuery.ajax = function ({
          url : "/getList",
          async : true,
          cache : true,
          dataType : 'json',
          success(result){console.log(result)}
         })
    

    2、返回值

    	function example() {
    	    return [1, 2, 3];
    	}
    	let [a, b, c] = example();
    

    解构赋值的用途:

    (1)交换变量的值

    	let x = 1;
    	let y = 2;
    	
    	[x, y] = [y, x];
    

    (2)从函数返回多个值

    函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。

    	// 返回一个数组
    	
    	function example() {
    	  return [1, 2, 3];
    	}
    	let [a, b, c] = example();
    	
    	// 返回一个对象
    	
    	function example() {
    	  return {
    	    foo: 1,
    	    bar: 2
    	  };
    	}
    	let { foo, bar } = example();
    

    (3)函数参数的定义

    解构赋值可以方便地将一组参数与变量名对应起来。

    	// 参数是一组有次序的值
    	function f([x, y, z]) { ... }
    	f([1, 2, 3]);
    	
    	// 参数是一组无次序的值
    	function f({x, y, z}) { ... }
    	f({z: 3, y: 2, x: 1});
    

    (4)提取 JSON 数据

    解构赋值对提取 JSON 对象中的数据。

    	let jsonData = {
    	  id: 2,
    	  status: "OK",
    	  data: [7, 9]
    	};
    	
    	let { id, status, data: number } = jsonData;
    	
    	console.log(id, status, number);
    	// 2, "OK", [7, 9]
    

    (5)函数参数的默认值

    	jQuery.ajax = function (url, {
    	  async = true,
    	  beforeSend = function () {},
    	  cache = true,
    	  complete = function () {},
    	  crossDomain = false,
    	  global = true,
    	  // ... more config
    	}) {
    	  // ... do stuff
    	};
    

    指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || ‘default foo’;这样的语句。

    (6)遍历 Map 结构

    任何部署了 Iterator 接口的对象,都可以用for…of循环遍历。Map 结构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便。

    	const map = new Map();
    	map.set('first', 'hello');
    	map.set('second', 'world');
    	
    	for (let [key, value] of map) {
    	  console.log(key + " is " + value);
    	}
    	// first is hello
    	// second is world
    	如果只想获取键名,或者只想获取键值,可以写成下面这样。
    	
    	// 获取键名
    	for (let [key] of map) {
    	  // ...
    	}
    	
    	// 获取键值
    	for (let [,value] of map) {
    	  // ...
    	}
    

    (7)输入模块的指定方法

    加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

    const { SourceMapConsumer, SourceNode } = require("source-map");
    

    箭头函数

    Arrow Functions (箭头函数)in ES6

    去掉function关键字, 参数有一个可以省略小括号,小括号和大括号之间有一个箭头
    如果没有大括号则直接是返回值,有大括号必须写return;
    ##Classes

    Classes(类) in ES6
    ##Promises
    Promises in ES6

    1. promise是什么?
    • promise是一个构造函数,用来生成promise实例。
    • 接受一个函数(下面以fn代指此函数)作为形参,fn又接受resolve和reject两个函数作为形参。
    1. promise解决什么问题?
    • 链式写法解决回调地狱
    1. promise的方法有哪些?
    • all( )
    • race( )
    • then( )
    • catch( )
    • resove( )
    • reject( )

    Modules

    Modules(模块) in ES6

    展开全文
  • ES6 新特性

    千次阅读 多人点赞 2019-08-11 20:31:12
    现在使用主流的前端框架中,如ReactJS、Vue.js、angularjs等,都会使用到ES6新特性,作为一名高级工程师而言,ES6也就成为了必修课,所以本套课程先以ES6新特性开始。 1.1、了解ES6 ES6,是ECMAScript 6的简称,...

    1 、ES6 新特性

    现在使用主流的前端框架中,如ReactJS、Vue.js、angularjs等,都会使用到ES6的新特性,作为一名高级工程师而言,ES6也就成为了必修课,所以本套课程先以ES6的新特性开始。

    1.1、了解ES6

    ES6,是ECMAScript 6的简称,它是 JavaScript 语言的下一代标准,己于 2015 年 6 月正式发 布。
    它的目标是使 JavaScript语言可以用于编写复杂的大型应用程序,成为企业级开发语言。

    1.1.1.什么是ECMAScript?

    来看下前端的发展历程:

    • web1.0时代:

      最初的网页以 HTML为主,是纯静态的网页。网页是只读的,信息流只能从服务的到客户端单向流通。开发人员
      也只关心页面的样式和内容即可。

    • web2.0时代:

      1995 年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
      1996 年,微软发布了JScript,其实是JavaScript的逆向工程实现。
      1997 年,为了统一各种不同script脚本语言,ECMA(欧洲计算机制造商协会)以JavaScript为基础,制定了
      ECMAscript 标准规范。JavaScript和JScript都是 ECMAScript 的标准实现者,随后各大浏览器厂商纷纷实现了
      ECMAScript 标准。

    所以,ECMAScript是浏览器脚本语言的规范,而各种我们熟知的js语言,如JavaScript则是规范的具体实现。

    1.1.2.ECMAScript的快速发展

    而后,ECMAScript就进入了快速发展期。

    • 1998 年6月,ECMAScript 2.0 发布。

    • 1999 年12月,ECMAScript 3.0 发布。这时,ECMAScript 规范本身也相对比较完善和稳定了,但是接下来的事情,就比较悲剧了。

    • 2007 年10月。。。。ECMAScript 4.0 草案发布。
      这次的新规范,历时颇久,规范的新内容也有了很多争议。在制定ES4的时候,是分成了两个工作组同时工作的。

      一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。
      一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。

    ECMAScript 4 的很多主张比较激进,改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会
    议,决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1,而ES4的内容,则延续到了后来的
    ECMAScript5和6版本中

    • 2009 年12月,ECMAScript 5 发布。
    • 2011 年6月,ECMAScript 5.1 发布。
    • 2015 年6月,ECMAScript 6,也就是 ECMAScript 2015 发布了。 并且从 ECMAScript 6 开始,开始采用年号来做版本。即 ECMAScript 2015,就是ECMAScript6。
    • 2016 年 6月,小幅修订的《ECMAScript 2016标准》 (简称 ES2016)如期发布, 这个版本可以看作是 ES6.1版,因为两者的差异非常小(只新增了数组实例的 includes 方法 和指数运算符),基本上可以认为是同 一个标准 。
    • 2017 年 6 月发布了ES2017 标准。

    因此, ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版本以后的 JavaScript 的下一代 标准,涵盖了 ES2015、ES2016、 ES2017 等,而 ES2015 则是正式名称,特指当年发布的正式 版本的语言标准

    1.2、let 和 const 命令

    • var
      之前,我们写js定义变量的时候,只有一个关键字: var
      var 有一个问题,就是定义的变量有时会莫名奇妙的成为全局变量。
      例如这样的一段代码:
    for (var i = 0; i < 5; i++){
      console.log(i);
    }
    console.log("循环外:" + i)
    

    运行打印的结果是如下:
    在这里插入图片描述
    可以看出,在循环外部也可以获取到变量 i的值,显然变量i的作用域范围太大了,在做复杂页面时,会带来很大的问题。

    • let
      let 所声明的变量,只在 let 命令所在的代码块内有效。
      我们把刚才的 var 改成 let 试试:
    for (let i = 0; i < 5; i++){
      console.log(i);
    }
    console.log("循环外:" + i)
    

    结果:
    在这里插入图片描述这样,就把变量的 i的作用域控制在了循环内部。

    • const
      const 声明的变量是常量,不能被修改,类似于java中final关键字。
      const a = 1;
      console.log("a = ", a);
      //给a重新赋值
      a = 2;
      console.log("a = ", a);
    

    在这里插入图片描述
    可以看到,变量 a的值是不能修改的。

    1.3、字符串扩展

    在ES6中,为字符串扩展了几个新的API:
    includes() :返回布尔值,表示是否找到了参数字符串。
    startsWith() :返回布尔值,表示参数字符串是否在原字符串的头部。
    endsWith() :返回布尔值,表示参数字符串是否在原字符串的尾部。
    实验一下:

    < script>
      let str = "hello heima";
      console.log(str, " 中是否包含了heima => ", str.includes("heima"));
      console.log(str, " 中是否包含了baima => ", str.includes("baima"));
      console.log(str, " 中是否以h开头 => ", str.startsWith("h"));
      console.log(str, " 中是否以a开头 => ", str.startsWith("a"));
      console.log(str, " 中是否以a结束 => ", str.endsWith("a"));
      console.log(str, " 中是否以h结束 => ", str.endsWith("h"));
    </script>
    

    在这里插入图片描述

    • 字符串模板
      ES6中提供了`来作为字符串模板标记。我们可以这么玩:
    < script>
      let str = `
      hello
      itheima
      itcast
      `;
      console.log(str);
    </script>
    
    

    在这里插入图片描述
    在两个 `之间的部分都会被作为字符串的值,可以任意换行。

    1.3 、解构表达式

    什么是解构? – ES6中允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构 (
    Destructuring)。

    1.3.1、数组解构

    比如有一个数组:

    let arr = [1,2,3] 
    

    之前,我想获取其中的值,只能通过角标。ES6可以这样:

       let arr = [1,2,3]
      const [x,y,z] = arr;// x,y,z将与arr中的每个位置对应来取值
      // 然后打印
      console.log(x,y,z);
      const [a] = arr; //只匹配1个参数
      console.log(a);
    

    结果:
    在这里插入图片描述

    1.3.2、对象解构

    例如有个person对象:

    const person = {
      name:"jack",
      age:21,
      language: ['java','js','css']
    }
    

    我们可以这么做:

    //  解构表达式获取值
    const {name,age,language} = person;
    // 打印
    console.log(name);
    console.log(age);
    console.log(language);
    

    结果:
    在这里插入图片描述
    如过想要用其它变量接收,需要额外指定别名:
    在这里插入图片描述

    {name:n} :name是person中的属性名,冒号后面的n是解构后要赋值给的变量。
    

    1.4、函数优化

    在ES6中,对函数的操作做了优化,使得我们在操作函数时更加的便捷。

    1.4.1、函数参数默认值

    在ES6以前,我们无法给一个函数参数设置默认值,只能采用变通写法:

     function add(a , b) {
        // 判断b是否为空,为空就给默认值1
        b = b || 1;
        return a + b;
     }
      // 传一个参数
      console.log(add(10));
    

    现在可以这么写:

    function add(a , b = 1) {
      return a + b;
    }
    // 传一个参数
    console.log(add(10));
    

    1.4.2、箭头函数

    ES6中定义函数的简写方式:
    一个参数时:

    var print = function (obj) {
      console.log(obj);
    }
    // 简写为:
    var print2 = obj => console.log(obj);
    

    多个参数:

    //  两个参数的情况:
    var sum = function (a , b) {
      return a + b;
    }
    // 简写为:
    var sum2 = (a,b) => a+b;
    

    // 没有参数时,需要通过()进行占位,代表参数部分

    let sayHello = () => console.log("hello!");
    sayHello();
    

    代码不止一行,可以用 {} 括起来。

    var sum3 = (a,b) => {
      return a + b;
    }
    // 多行,没有返回值
    let sayHello = () => {
      console.log("hello!");
      console.log("world!");
    }
    sayHello();
    

    1.4.3、对象的函数属性简写

    比如一个Person对象,里面有eat方法:

    let person = {
      name: "jack",
      // 以前:
      eat: function (food) {
        console.log(this.name + "在吃" + food);
     },
      // 箭头函数版:
      eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
      // 简写版:
      eat3(food){
        console.log(this.name + "在吃" + food);
     }
    }
    

    1.4.4、箭头函数结合解构表达式

    比如有一个函数:

    const person = {
      name:"jack",
      age:21,
      language: ['java','js','css']
    }
    function hello(person) {
      console.log("hello," + person.name)
    }
    

    如果用箭头函数和解构表达式

    var hi = ({name}) =>  console.log("hello," + name);
    hi(person)
    

    1.5、map和reduce

    ES6中,数组新增了map和reduce方法。

    1.5.1、map

    map() :接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。
    举例:有一个字符串数组,我们希望转为int数组

    let arr = ['1','20','-5','3'];
    console.log(arr)
    let newArr = arr.map(s => parseInt(s));
    console.log(newArr)
    

    在这里插入图片描述

    1.5.1、reduce

    reduce() :接收一个函数(必须)和一个初始值(可选),该函数接收两个参数:

    • 第一个参数是上一次 reduce处理的结果
    • 第二个参数是数组中要处理的下一个元素

    reduce() 会从左到右依次把数组中的元素用reduce处理,并把处理的结果作为下次reduce的第一个参数。如果是
    第一次,会把前两个元素作为计算参数,或者把用户指定的初始值作为起始参数
    举例:

    const arr = [1,20,-5,3] 
    

    没有初始值:
    在这里插入图片描述
    指定初始值:
    在这里插入图片描述

    1.6 、扩展运算符

    扩展运算符(spread)是三个点(…), 将一个数组转为用逗号分隔的参数序列 。
    用法:

      console.log (...[1, 2, 3]); //1 2 3
      console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
      function add(x, y) {
        return x + y;
     }
      var numbers = [1, 2];
      console.log(add(...numbers)); // 3
      // 数组合并
      let arr = [...[1,2,3],...[4,5,6]];
      console.log(arr); //[1, 2, 3, 4, 5, 6]
      // 与解构表达式结合
      const [first, ...rest] = [1, 2, 3, 4, 5];
      console.log(first, rest) //1  [2, 3, 4, 5]
      //将字符串转成数组
      console.log([...'hello']) //["h", "e", "l", "l", "o"]
    

    1.7、Promise

    所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法
    上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样
    的方法进行处理。
    我们可以通过Promise的构造函数来创建Promise对象,并在内部封装一个异步执行的结果。
    语法:

    const promise = new Promise(function(resolve, reject) {
     // ... 执行异步操作
     if (/* 异步操作成功 */){
      resolve(value);// 调用resolve,代表Promise将返回成功的结果
    } else {
      reject(error);// 调用reject,代表Promise会返回失败结果
    }
    });
    

    这样,在promise中就封装了一段异步执行的结果。
    如果我们想要等待异步执行完成,做一些事情,我们可以通过 promise的then方法来实现,语法:

    promise .then(function(value){
      // 异步执行成功后的回调
    });
    

    如果想要处理promise异步执行失败的事件,还可以跟上catch:

    promise .then(function(value){
      // 异步执行成功后的回调
    }).catch(function(error){
      // 异步执行失败后的回调
    })
    

    示例:

    const p = new Promise(function (resolve, reject) {
      // 这里我们用定时任务模拟异步
      setTimeout(() => {
        const num = Math.random();
        // 随机返回成功或失败
        if (num < 0.5) {
          resolve("成功!num:" + num)
       } else {
          reject("出错了!num:" + num)
       }
     }, 300)
    })
    // 调用promise
    p.then(function (msg) {
      console.log(msg);
    }).catch(function (msg) {
      console.log(msg);
    })
    

    结果:
    在这里插入图片描述
    在这里插入图片描述

    1.8 、set和map

    ES6提供了Set和Map的数据结构。
    Set,本质与数组类似。不同在于Set中只能保存不同元素,如果元素相同会被忽略。和java中的Set集合非常相似。
    构造函数:

    // Set 构造函数可以接收一个数组或空
    let set = new Set();
    set.add(1);// [1]
    // 接收数组
    let set2 = new Set([2,3,4,5,5]);// 得到[2,3,4,5]
    

    方法:

    *set.add(1);//  添加
    set.clear();// 清空
    set.delete(2);// 删除指定元素
    set.has(2); // 判断是否存在
    set.forEach(function(){})//遍历元素
    set.size; // 元素个数。是属性,不是方法。*
    

    map,本质是与Object类似的结构。不同在于,Object强制规定key只能是字符串。而Map结构的key可以是任意对象。即:
    object 是 <string,object>集合
    map 是<object,object>集合
    构造函数:

    // map 接收一个数组,数组中的元素是键值对数组
    const map = new Map([
     ['key1','value1'],
     ['key2','value2'],
    ])
    // 或者接收一个set
    const set = new Set([
     ['key1','value1'],
     ['key2','value2'],
    ])
    const map2 = new Map(set)
    // 或者其它map
    const map3 = new Map(map);
    

    方法:

    map .set(key, value);// 添加
    map.clear();// 清空
    map.delete(key);// 删除指定元素
    map.has(key); // 判断是否存在
    map.forEach(function(key,value){})//遍历元素
    map.size; // 元素个数。是属性,不是方法
    map.values() //获取value的迭代器
    map.keys() //获取key的迭代器
    map.entries() //获取entry的迭代器
    用法:
    for (let key of map.keys()) {
    console.log(key);
    }
    或:
    console.log(...map.values()); //通过扩展运算符进行展开
    

    1.9、class(类)的基本语法

    JavaScript 语言的传统方法是通过构造函数定义井生成新对象。ES6中引入了class的概念,通过class关键字自定义
    类。
    基本用法:

    < script>
      class User{
        constructor(name, age = 20){ // 构造方法
          this.name = name; // 添加属性并且赋值
          this.age = age;
       }
        sayHello(){ // 定义方法
          return "hello";
       }
        static isAdult(age){ //静态方法
          if(age >= 18){
            return "成年人";
         }
          return "未成年人";
       }
     }
      let user = new User("张三");
      // 测试
      console.log(user); // User {name: "张三", age: 20}
      console.log(user.sayHello()); // hello
      console.log(User.isAdult(20)); // 成年人
    </script>
    

    类的继承:

    < script>
      class User{
        constructor(name, age = 20){ // 构造方法
          this.name = name; // 添加属性并且赋值
          this.age = age;
       }
        sayHello(){
          return "hello"; // 定义方法
       }
        static isAdult(age){ //静态方法
          if(age >= 18){
            return "成年人";
         }
          return "未成年人";
       }
     }
      class ZhangSan extends User{
        constructor(){
          super("张三", 30); //如果父类中的构造方法有参数,那么子类必须通过super调用父类的构造
    方法
          this.address = "上海";//设置子类中的属性,位置必须处于super下面
       }
     }
      // 测试
      let zs = new ZhangSan();
      console.log(zs.name, zs.address);
      console.log(zs.sayHello());
      console.log(ZhangSan.isAdult(20));
      < /script>
    

    1.10、Generator函数

    Generator 函数是 ES6 提供的 一种异步编程解决方案,语法行为与传统函数完全不同 。
    Generator函数有两个特征: 一是 function命令与函数名 之间有一个星号: 二是 函数体内部使用 yield吾句定义不同的
    内部状态。
    用法:

    < script>
      function* hello () {
        yield "hello";
        yield "world";
        return "done";
     }
      let h = hello();
     
      console.log(h.next()); //{value: "hello", done: false}
      console.log(h.next()); //{value: "world", done: false}
      console.log(h.next()); //{value: "done", done: true}
      console.log(h.next()); //{value: undefined, done: true}
    </script>
    

    可以看到,通过hello()返回的h对象,每调用一次next()方法返回一个对象,该对象包含了value值和done状态。直到遇到return关键字或者函数执行完毕,这个时候返回的状态为ture,表示已经执行结束了。

    1.10.1、for…of循环

    通过for…of可以循环遍历Generator函数返回的迭代器。
    用法:

    < script>
      function* hello () {
        yield "hello";
        yield "world";
        return "done";
     }
      let h = hello();
      for (let obj of h) {
        console.log(obj);
     }
     < /script>
    // 输出:
    hello
    world
    

    1.11、修饰器(Decorator)

    修饰器(Decorator)是一个函数, 用来修改类的行为。 ES2017 引入了这项功能, 目前 Babel 转码器己经支持。
    使用:

    < script>
      @T //通过@符号进行引用该方法,类似java中的注解
      class User {
        constructor(name, age = 20){
          this.name = name;
          this.age = age;
       }
     }
     
      function T(target) { //定义一个普通的方法
        console.log(target); //target对象为修饰的目标对象,这里是User对象
        target.country = "中国"; //为User类添加一个静态属性country
     }
      console.log(User.country); //打印出country属性值
    </script>
    

    运行报错:
    在这里插入图片描述
    原因是,在 ES6中,并没有支持该用法,在ES2017中才有,所以我们不能直接运行了,需要进行编码后再运行。
    转码的意思是:将ES6或ES2017转为ES5执行。类似这样:

    // 转码前
    input .map(item =>item + 1);
    //转码后
    input.map(function (item) {
      return item + 1;
    })
    
    展开全文
  • es6新特性有哪些

    2020-05-09 21:44:24
    1、常用的es6新特性: let && const;let 命令也用于声明对象,但是作用域为局部;iterable 类型。为了统一集合类型,ES6 标准引入了新的 iterable 类型,Array、Map 和 Set 都属于 iterable 类型,具有 ...

    ES6特性你了解多少? 如果遇到一个东西不知道是ES6还是ES5,你改如何区分?

    1、常用的es6新特性:
    let && const;let 命令也用于声明对象,但是作用域为局部;iterable 类型。为了统一集合类型,ES6 标准引入了新的 iterable 类型,Array、Map 和 Set 都属于 iterable 类型,具有 iterable 类型的集合可以通过新的for … of 循环来遍历。

    2、es6 比 es5 增加了很多特殊的方法,如果你遇到了这些特殊的方法, 你就可以确定它是 es6。如果你的代码中没有引用这些特殊的方法,那我们就可以认为他是es5 的。所以前提你需要了解 es6 的语法才能做判断,高频使用的特性有箭头函数、解构赋值、let、const。

    3、ES6 的继承和 ES5 的继承有什么区别?

    es5 的继承是通过原型或者是构造函数机制来实现,es6 用过 class 关键字定义类,里面有构造方法,类之间通过 extends 关键字实现,子类必须在 constructor 方法中调用 super 方法。

    4、let 和 const 的优点?

    let 和 const 有了块级作用域,变量声明不会提升相比于 var。

    5、ES6 generator 是什么,async / await 实现原理?

    generator 函数就是一个封装的异步任务,也就是异步任务的容器,执行Generator 函数会返回一个遍历器对象,async 函数的实现, 就是将Generator 函数和自动执行器,包装在一个函数里。

    6.手写实现promise, promise.all和 promise.race

    手写promise

    
    
    class Promsie {
        constructor(fn) {
            //三个状态
            this.status = 'pending',
            this.resolve = undefined;
            this.reject = undefined;
            let resolve = value => {
                if (this.status === 'pending') {
                    this.status = 'resolved';
                    this.resolve = value;
                }
            };
            let reject = value => {
                if (this.status === 'pending') {
                    this.status = 'rejected';
                    this.reject = value;
                }
            }
            try {
                fn(resolve, reject)
            } catch (e) {
                reject(e)
            }
        }
        then(onResolved, onRejected) {
            switch (this.status) {
                case 'resolved': onResolved(this.resolve); break;
                case 'rejected': onRejected(this.resolve); break;
                default:
            }
        }
    
    }
    
    

    手写promise.all
    Promise.all() 它接收一个promise对象组成的数组作为参数,并返回一个新的promise对象。

    当数组中所有的对象都resolve时,新对象状态变为fulfilled,所有对象的resolve的value依次添加组成一个新的数组,并以新的数组作为新对象resolve的value。
    当数组中有一个对象reject时,新对象状态变为rejected,并以当前对象reject的reason作为新对象reject的reason。

       function promiseAll(promises) {
                if (!Array.isArray(promises)) {
                    throw new Error("promises must be an array")
                }
                return new Promise(function (resolve, reject) {
    
                    let promsieNum = promises.length;
                    let resolvedCount = 0;
                    let resolveValues = new Array(promsieNum);
                    for (let i = 0; i < promsieNum; i++) {
                        Promise.resolve(promises[i].then(function (value) {
                            resolveValues[i] = value;
                            resolvedCount++;
                            if (resolvedCount === promsieNum) {
                                return resolve(resolveValues)
                            }
                        }, function (reason) {
                            return reject(reason);
                        }))
    
                    }
                })
            }
    
    

    手写实现promise.race
    Promise.race() 它同样接收一个promise对象组成的数组作为参数,并返回一个新的promise对象。

    与Promise.all()不同,它是在数组中有一个对象(最早改变状态)resolve或reject时,就改变自身的状态,并执行响应的回调。

     function promiseRace(promises) {
                if (!Array.isArray(promises)) {
                    throw new Error("promises must be an array")
                }
                return new Promise(function (resolve, reject) {
                    promises.forEach(p =>
                        Promise.resolve(p).then(data => {
                            resolve(data)
                        }, err => {
                            reject(err)
                        })
                    )
                })
            }
    
    
    展开全文
  • 1.接下来介绍一下ES6在Object加的方法 assign() 1.作用:将多个对象{} 合并成一个独立对象。 2.使用方式: Object.assign(合并的对象,传入合并中的对象....) let user = {name:'无敌人',age:19}; let page =...

    1.接下来介绍一下ES6在Object新加的方法  assign() 

     1.作用:将多个对象{}  合并成一个独立对象。

     2.使用方式: Object.assign(合并的对象,传入合并中的对象....)

     let user = {name:'无敌人',age:19};
     let page = {pageSize:10,currentPage:1};
     let newObj = {};
    
     Object.assign(newObj,user,page);

     

    2.首先es6新增了许多新知识。比如数组型的:Set、Map,

       Set:和传统es5的数组Array类似。都是存放数据的,最大的特点就是会自动过滤相同的值。

                 在实战开发经常被用到,过滤重复值。

     使用方式:let setList = new Set({...});

    let setList = new Set(['星期一','星期二','星期三','星期三'])
    console.log(setList);

     出入结果是:{"星期一", "星期二", "星期三"}

      我们发现重复的星期三被过滤掉了。

      Map: 在以前我们放出的对象key都是字符串才可以,这对我们开发产生了一些局限性,而map出现,则解决这个问题,它的key不只局限在意字符串中,还可以对象,数组,复杂类型为key 、而且也是可以顾虑重复值的 (除非空{}对象的key。因为他们内存栈中的地址是不一样的)

    使用方法 : let mapList = Map({[key,value],[...]...});

    //定义昨晚Key的对象
    let setList = new Set(['星期一','星期二','星期三','星期三']);
    let user = {'name':'无敌人'};
    let item = [1,2,3];
    
    let mapList = new Map([
                       [setList,'我是value1'],
                       ['name','我是value2'],
                       [user,'我是value3'],
                       [item,'我是value4']
                   ]);
    console.log(mapList);

     

    展开全文
  • Es6新特性有哪些

    2020-04-21 09:48:56
    箭头操作符 =>; 对类class的支持(constructor构造函数); 不定参数...x;let和const关键字; for of遍历; 模块的支持import; promise异步函数的处理模式...在ES6中,可以使用解构从数组和对象提取值...
  • 使用ES6新特性async await进行异步处理

    万次阅读 多人点赞 2018-07-12 15:56:30
    我们往往在项目中会遇到这样的业务需求,就是首先...那是相当恶心的,下面我就来讲一下如何使用ES6新特性async await进行异步处理,使上述情况就好像写同步代码一样,首先我们先举个例子: 先写上json文件: cod...
  • 1.默认参数 function sum(a,b=0){ } sum(10)不给b传惨默认b等于0 2.模板文本 var a=10 console.log(`a的值是${a}`) 能解析里面的变量值 3.解构赋值 var arr=[1,2] const [a,b]=arr ...varfn=...
  • ES6新特性

    2017-03-03 12:44:19
    ES6中引入了箭头函数符来代替function,也就是说在定义方法的时候可以不再写function,=>的左边即为函数名和参数,右边即为执行操作和返回值。 例如: function(i){return i + 1; } //ES5 (i) => i + 1 //ES6 如果...
  • 正确使用const 和let 替代 var const : 定义常量,此常量不允许出现赋值的操作 let : 定义变量,会出现临时死区 使用模板字符串${this.data} 模板字符串的使用: 用``进行包裹,$开头,{}进行变量的二次包裹。...
  • es6es6新特性

    2018-07-17 18:17:53
    {块}; var 和let 的区别; alert(a); var a=1;//un; let a=1;//报错;;一般他的作用域只在块里;     var a=1; var a=2; alert(a); //换let 的话包不能重复声明;     1:for( var i=0;...f...
  • ES6新特性概览

    2015-06-09 09:41:50
    ES6(ECMAScript 6)是即将到来的版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中...
  • es6新特性分享

    2018-04-28 09:50:21
    1、字符串查找es5使用是indexOf() 返回字符第一次出现的位置int值es6新增了3个方法:includes()/startsWith()/endWith()返回bool值includes => 是否包含字符startsWith => 首字母是否包含字符endWith => 末尾是否...
  • 接回来说道我们的ecmascript6,也就是ecmascript的第六个版本,它新增了很多...下面我总结了一些经常会用到的es6新特性: 一、let和const 二、模板字符串 三、es6在es5原有函数上的扩展 四、es6在对象上的扩展 ...
  • ES6最新语法let const 命令,跟var的区别变量解构赋值新增字符串方法模板字符串symbol类型proxy代理set方法 let const 命令,跟var的区别 1、var 的作用域是分全局和函数作用域两种,也叫全局变量和局部变量; 2、...
  • ES6 新特性范例大全

    2017-04-07 11:57:57
    ECMAScript6(ECMAScript 2015 ,ES5,ES2016)技术已经在前端圈子很流行了,他给...主要针对ES6 新特性收集了相关范例代码,他可以让你快速了解这个新的javascript规范。 箭头函数 function() 函数的简写表示法
  • 新特性 let、const let 定义的变量不会被变量提升,const 定义的常量不能被修改,let 和 const 都是块级作用域 ES6前,js 是没有块级作用域 {} 的概念的。(函数作用域、全局作用域、eval作用域) ES6后,...

空空如也

1 2 3 4 5 ... 20
收藏数 6,417
精华内容 2,566
关键字:

es6新特性