ES6基础学习

ECMAScript 6是JavaScript语言的下一代标准

ES6就是ES2015。根据MCMA-262标准,实现的通用脚本语言规范

与js的关系:es是标准,而js是它的实现和扩展

js的组成:

ECMAScript,由ECMA-262定义,提供核心语言功能;

文档对象模型(DOM),提供访问和操作网页内容的方法和接口;文档对象模型DOM是针对XML但经过扩展用于HTML的应用程序编程接口(API)。DOM把整个页面映射为一个多层次节点结构。HTML或者XML页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据:所以也一般被看作两个部分domview和domevent,一个针对节点的操作和事件的操作

浏览器对象模型(BOM),提供与浏览器交互的方法和接口;BOM处理浏览器窗口和框架,人们习惯上把所有针对浏览器的JavaScript扩展算作是BOM的一部分:

1 弹出新浏览器窗口的功能。

2 移动、缩放和关闭浏览器窗口的功能。

3 提供浏览器所加载页面的详细信息的navigator对象。

4 提供浏览器所加载页面的详细信息的location对象。

5 提供用户分辨率详细信息的screen对象。

6 对cookies的支持。

7 像XMLHttpRequest和IE的ActionXobject这样的自定义对象。

ECMA规定了

语法:弱语言,区分大小写,注释与java一样,{}代表代码块

变量:var定义,后续es6新增let  const

关键字:break  case  catch  continue  default  delete  do  else  finally  for  function  if  in  instanceof  new  return  switch  this  throw  try  typeof  var  void  while  with

保留字:abstract  boolean  byte  char  class  const  debugger  double  enum  export  extends  final  float  goto  implements  import  int  interface  long  native  package  private  protected  public
short  static  super  synchronized  throws  transient  volatile

值类型:原始类型:Undefined、Null、Boolean、Number 和 String 型,es6新增Symbol

             引用类型:对象

typeof 运算符:值或对象的类型

  • undefined - 如果变量是 Undefined 类型的
  • boolean - 如果变量是 Boolean 类型的
  • number - 如果变量是 Number 类型的
  • string - 如果变量是 String 类型的
  • object - 如果变量是一种引用类型或 Null 类型的

强制转换:

  • Boolean(value) - 把给定的值转换成 Boolean 型;转换的值是至少有一个字符的字符串、非 0 数字或对象时,Boolean() 函数将返回 true。如果该值是空字符串、数字 0、undefined 或 null,它将返回 false。
  • Number(value) - 把给定的值转换成数字(可以是整数或浮点数);强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式相似,只是它转换的是整个值,而不是部分值。

    parseInt() 和 parseFloat() 方法只转换第一个无效字符之前的字符串,因此 "1.2.3" 将分别被转换为 "1" 和 "1.2"。

    用 Number() 进行强制类型转换,"1.2.3" 将返回 NaN,因为整个字符串值不能转换成数字。如果字符串值能被完整地转换,Number() 将判断是调用 parseInt() 方法还是 parseFloat() 方法

Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number("1.2") 1.2
Number("12") 12
Number("1.2.3") NaN
Number(new object()) NaN
  • String(value) - 把给定的值转换成字符串;可把任何值转换成字符串

对象:对象是由 new 运算符加上要实例化的对象的名字创建的。

Object 对象:ECMAScript 中的所有对象都由这个对象继承而来

 运算符:delete 对象(删除),void 运算符对任何值返回 undefined,++/--n(先操作再赋值),n--/++(先赋值)

位运算符:not => ~,and   => &,or=> |,xor=> ^,左移<<,右移>>,无符号右移>>>

逻辑运算符:逻辑not  => !  逻辑and => &&  逻辑or  =>  ||

关系运算符小于、大于、小于等于和大于等于

等号运算符:==,!=,===

等号由双等号(==)表示,当且仅当两个运算数相等时,它返回 true。非等号由感叹号加等号(!=)表示,当且仅当两个运算数不相等时,它返回 true。为确定两个运算数是否相等,这两个运算符都会进行类型转换。

•如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。
•如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。
•如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。
•如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。

在比较时,该运算符还遵守下列规则:
•值 null 和 undefined 相等。
•在检查相等性时,不能把 null 和 undefined 转换成其他值。
•如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。
•如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。

 ===全等:在检查相等性前,不执行类型转换。

全等号由三个等号表示(===),只有在无需类型转换运算数就相等的情况下,才返回 true。

 语句:if,do while,while, for ,for in(用于枚举对象的属性),break ,continue, switch

函数:关键字 function、函数名、一组参数,以及置于括号中的待执行代码。

          arguments 对象:函数代码中的参数集

          Function 对象(类):Function 类可以表示开发者定义的任何函数。

                 var function_name = new function(arg1, arg2, ..., argN, function_body)

         闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量

        1.使用全局变量是一个简单的闭包实例

        2.复杂闭包

var iBaseNum = 10;

function addNum(iNum1, iNum2) {
  function doAdd() {
    return iNum1 + iNum2 + iBaseNum;
  }
  return doAdd();
}

函数 addNum() 包括函数 doAdd() (闭包)。内部函数是一个闭包,因为它将获取外部函数的参数 iNum1 和 iNum2 以及全局变量 iBaseNum 的值。 addNum() 的最后一步调用了 doAdd(),把两个参数和全局变量相加,并返回它们的和。

这里要掌握的重要概念是,doAdd() 函数根本不接受参数,它使用的值是从执行环境中获取的。

 

1.变量声明const和let

  const为ECMAScript带来了定义常量的能力,它的值被设置完成后就不能再修改了。

  let 变量为ECMAScript修复了从前var因为代码习惯不佳而导致的代码作用域混乱等问题,同时实现了块状作用域中使用,最重要的两个特性就是提供了块级作用域与不再具备变量提升。

  es6新增了let命令,用来声明变量,用法类似于var,但是所声明的变量,只在let命令所在的代码内有效

  var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。 为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

 块级作用域:代码块所在区域 只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响

if(true){   tmp = 'abc'   let tmp; }

由于let声明了tmp ,这时代码块中tmp是绑定了这块区域,声明前引用这时会报错。

ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。 总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

2.模板字符串(Template String)

当我们使用普通的字符串时,会使用单引号或双引号来包裹字符串的内容,在ES2015的模板字符串中使用反勾号`。  

  const str=`something`   

   (1)支持元素注入:        const str="hello world"        const str1=`String:${str}`         //=>String:hello world

   (2)支持换行: const sql=` select * from Users where FirstName='mike' limit 5; `

3.函数

普通函数:

  function(count){ 。。。}

  function(count = 100){。。。}

箭头函数:

当你的函数有且仅有一个参数的时候,是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return

 el.on('click',evt=>{...})  ==el.on('click'function(evt){...})

 或[1,2,3].map(x => x + 1) //等同于:[1,2,3].map((function(x){  return x + 1 }).bind(this))

 或const foo = () => {const a = 20;const b = 30;return a + b}


var 变量名/函数名 = (参数,参数)=>{代码块}

如果return的是一个对象{id:id,age:age},那么箭头右边要用括号包起来().

箭头函数有几个使用注意点。

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象,就是说箭头函数中,没有this。如果你在箭头函数中使用了this,那么该this一定就是外层的this

(2)不可以使用arguments对象(即函数中的参数集合),该对象在函数体内不存在。

(3)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

4.解析结构

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 let a=1;let b=2;let c=3   ==》 let [a,b,c] = [1,2,3]; 表示从数组中提取值,按照对应位置,对变量赋值 let [head, ...tail] = [1, 2, 3, 4];

head // 1 tail // [2, 3, 4] 如果解构不成功,变量的值就等于undefined。

对于 Set 结构,也可以使用数组的解构赋值 let [x, y, z] = new Set(['a', 'b', 'c']); x // "a"

事实上,只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值 解构赋值允许指定默认值。 let [x, y = 'b'] = ['a']; // x='a', y='b'

1.数组的解构赋值:let [a, b, c] = [1, 2, 3];

2.对象的解构赋值: 解构不仅可以用于数组,还可以用于对象 let { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb"

3.字符串的解构赋值: 字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象 const [a, b, c, d, e] = 'hello'; a // "h"

4.数值和bool值的解构赋值: 解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。 let {toString: s} = 123; s === Number.prototype.toString // true

5.函数参数的解构赋值: function add([x, y]){   return x + y; } add([1, 2]); // 3

等等。。。

5.  ...运算符

有两种作用:1.扩展运算符

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];

对象也可以用展开运算符。

不确定props到底还有多少数据会传进来,就会利用...运算符来处理剩余的数据

const { size, ...others } = props;  <button {...others} size={size} /> 或者函数上: function(a,b,...num){。。。}

6.Promise 承诺

主要是为了解决由于回调或者嵌套导致的代码爆炸。如ajax请求里又有ajax请求

Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。这是比较官方的说法。

Promise本质是一个构造函数。

https://blog.csdn.net/hyupeng1006/article/details/80351174

ES 6中原生提供了Promise对象,Promise对象代表了某个未来才会知道结果的事件(一般是一个异步操作),并且这个事件对外提供了统一的API,可供进一步处理。
使用Promise对象可以用同步操作的流程写法来表达异步操作,避免了层层嵌套的异步回调

1.promise有三种状态:Pending(进行中…),Resolved(已完成),Rejected(已失败),只有异步操作的结果可以决定当前是哪种状态,任何其他的操作都无法改变这个状态
2.状态变化之后两种:pending->resolved和pending->rejected,一旦发生,状态凝固,不会改变

Promise实例生成以后,可以用then方法分别指定Resolved状态和Reject状态的回调函数

let pro = new Promise(function(resolve,reject){
                if(true){
                     resolve('操作成功');//此时resolve函数会返回值
                 }
                 else{
                    reject('操作失败');
                 }
             }); 
             pro.then(requestA) //可以通过return传参给requestB
                   .then(requestB) 
                   .then(requestC)
                   .catch(requestError);

与ajax

/*定义一个使用promise的ajax请求,这里依赖jquery参数中请求url为必填参数*/
const ajaxPromise=  param => {
  return new Promise((resovle, reject) => {
    $.ajax({
      "type":param.type || "get",
      "async":param.async || true,
      "url":param.url,
      "data":param.data || "",
      "success": res => {
        resovle(res);},
      "error": err => {
        reject(err);}
    })
  })
}
/* 第一个请求*/
let step1 = () => {
    ajaxPromise({
      "url":"",
    }).then(res => {
        console.log("第一个请求正确返回==>"+res);  
        step2(res);  
    }).catch(err => {
        console.log("第一个请求失败");  
    })
}
/* 第二个请求*/
let step2 = (res) => {
    ajaxPromise({
      "type":"get",
      "url":"",
      "data":{"name":res}
    }).then(res => {
        console.log("第二个请求正确返回==>"+res);  
    }).catch(err => {
        console.log("第二个请求失败==>"+err);  
    })
}
step1();

 

7.新的数据结构

==相等运算符和===等同运算符都是用来检测两个值是否相等,相等返回true,不等返回false;==是相等运算符,它采用比较宽松的同一性定义(即允许进行类型转换)来检测两个运算数是否相等;===是等同运算符,它采用严格的同一性定义检测两个运算数是否完全等同。

值类型数据结构:  

String 字符串  

Number 数值  

Boolean 布尔型(true与false)  

Null 空值  

Undefined 未定义值

Symbol (ECMAScript 6 新定义)

引用类型数据结构:

 Object 对象  

Array 数组

 RegExp(Regular Expression with pattern)正则表达式  

Date 日期  

Error 错误

(1)Set有序集合     Array表示一系列元素的有序集合,其中每一个元素都会带有自身处在这个集合内的位置并以自然数作为标记,即带有下标。无序集合可以把它当成没有排序概念的数组,并且元素不可重复 const set=new Set()   //const set=new Set([1,2,3])

set.forEach(item=>{ console.log(item) }) //=>1 2 3 4 set.forEach(item=>{ console.log(item*this.foo) },{foo:2}) //=>2 4 6 8

Set属性:size---返回成员总数

Set操作方法:add(value)---返回Set、delete(value)---返回布尔、has(value)---返回布尔、clear()---无返回值

Set遍历方法:keys()---返回键(索引)的遍历器、values()---返回值的遍历器、

                       entries---返回键值对的遍历器、forEach(callback())---遍历每个成员,并通过回调函数基于数据做点什么

(2)WeakSet

WeakSet与Set的区别: a.WeakSet不能包含值类型元素,否则会抛出一个TypeError; b.WeakSet不能包含无引用的对象,否则会自动清除出集合; c.WeakSet无法被探知其大小,也无法被探知其中所包含的元素

类似于Set,只是它的成员只能是对象,没有size,不能遍历

(3)Map映射类型 const map=new Map() //const map = new Map([['foo', 1 ], [ 'foo', 2 ]])

for(const [key,value] of map){ console.log(`${key}:${value}`) } //=>foo:1 bar:2 map.forEach((value,key,map)=>{ console.log(`${key}:${value}`) })

广义上的键值对集合,键的范围不局限于字符串,对象也可以当作键

Map操作方法:set(key,value)---设置成员、get(key)---读取指定键的值,若无返回undefined,has(key) 、 delete(key) 、clear() 这些方法和 size 属性

(4)WeakMap WeakMap的键会检查变量引用,只要其中任意一个引用被解除,该值对就会被删除

WeakMap 相对于普通的 Map,也是键值对集合,只不过 WeakMap 的 key 只能是非空对象(non-null object)。WeakMap 对它的 key 仅保持弱引用,也就是说它不阻止垃圾回收器回收它所引用的 key。WeakMap 最大的好处是可以避免内存泄漏。一个仅被 WeakMap 作为 key 而引用的对象,会被垃圾回收器回收掉。

WeakMap 拥有和 Map 类似的 set(key, value) 、get(key)、has(key)、delete(key) 和 clear() 方法,但没有 size 属性,也没有任何与迭代有关的方法。

 8.Symbol

ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefinednull、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

Symbol 值通过Symbol函数生成:let s = Symbol();  typeof s //Symbol  let s1 = Symbol('foo');

注意,Symbol函数的参数只是表示对当前 Symbol 值的描述,因此相同参数的Symbol函数的返回值是不相等的

// 没有参数的情况
let s1 = Symbol();
let s2 = Symbol();

s1 === s2 // false

// 有参数的情况
let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false

1.symbol不能与其他类型的值进行运算,会报错
2.symbol可以显式转为字符串

3.symbol值也可以转布尔值,但不能转数值

symbol重要的功能是 可以作为标识符,用于对象的属性名,就能保证不会出现同名的属性。

let mySymbol = Symbol();

// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';
Symbol 值必须放在方括号之中。

1.Symbol属性名的遍历:Object.getOwnPropertySymbols方法返回一个数组,成员是当前对象的所有用作属性名的 Symbol 值。

另一个新的 API,Reflect.ownKeys方法可以返回所有类型的键名,包括常规键名和 Symbol 键名。

2.Symbol.for(),Symbol.keyFor()方法

9.代理 Proxy

    Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写原生方法

这里的代理相当于spring中的动态代理:即可以理解为在真正通过代理对象来调用真实对象的方法的时候,我们可以在该方法前后添加自己的一些操作

var proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});

let obj = Object.create(proxy);
obj.time // 35

var person={name:“john”,age:23}

var proxy = new Proxy(person, {

  get: function(target, property) {

    target[“age”] = 35;   

    return target[“age”] ;  

} });

proxy .name// 35

proxy对象是obj对象的原型,obj对象本身并没有time属性,所以根据原型链,会在proxy对象上读取该属性,导致被拦截。拦截读取属性行为

Proxy 支持的拦截操作一览,一共 13 种:

—get(target, propKey, receiver):拦截对象属性的读取,比如proxy.foo和proxy['foo']。
-set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = v或proxy['foo'] = v,返回一个布尔值。
-has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。
-deleteProperty(target, propKey):拦截delete proxy[propKey]的操作,返回一个布尔值。
-ownKeys(target):拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环,
返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。 -getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。 -defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。 -preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值。 -getPrototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象。 -isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值。 -setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。 -apply(target, object, args):拦截 Proxy 实例作为函数调用的操作,比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。 -construct(target, args):拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)。

 

var handler = {
    get: function(target, name) {
        if (name === 'prototype') {
            return Object.prototype;
        }
        return 'Hello, ' + name;
    },

    apply: function(target, thisBinding, args) {
        return args[0];
    },

    construct: function(target, args) {
        return {value: args[1]};
    }
};

var fproxy = new Proxy(function(x, y) {
    return x + y;
}, handler);

fproxy(1, 2)                                      // 1
new fproxy(1, 2)                                  // {value: 2}
fproxy.prototype === Object.prototype             // true
fproxy.foo === "Hello, foo"                       // true

上面声明了一个变量/函数fproxy,并且为其添加了一个拦截器对象handler,

那么对fproxy进行一些操作行为的时候,会优先被这个拦截器捕获,进行特定处理后输出结果

var fproxy = new Proxy(target,handler);            //一个Proxy实例

construct:构造一个新的fproxy时会触发拦截器的该方法,new fproxy(1,2)===>return {value : args[1]}===>{value : 2}

apply:函数执行时会触发拦截器的该方法,fproxy(1,2)===>return args[0]===>1

get:读取属性值的时候会触发拦截器的该方法,fproxy.foo===>foo对应该方法的参数name,return 'Hello, '+name;===>"Hello, foo"

set:设置属性值的时候会触发拦截器的该方法。

备注:

let obj = Object.create(fproxy);

这里为obj设置了原型fproxy,那么obj继承了fproxy的所有属性,obj.foo===>fproxy.foo===>"Hello, foo"

10.反射Reflect

Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API。Reflect不是构造函数, 要使用的时候直接通过Reflect.method()调用, Reflect有的方法和Proxy差不多, 而且多数Reflect方法原生的Object已经重新实现了。

1.将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到Reflect对象上。

2.将用 老Object方法 报错的情况,改为返回false

3.让Object操作都变成函数行为。某些Object操作是命令式,比如name in objdelete obj[name],而Reflect.has(obj, name)Reflect.deleteProperty(obj, name)让它们变成了函数行为。

4.Reflect对象的方法与Proxy对象的方法一一对应,只要是Proxy对象的方法,就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法,完成默认行为,作为修改行为的基础。

 确保对象的属性能正确赋值,广义上讲,即确保对象的原生行为能够正常进行,这就是Reflect的作用

Reflect Api:与代理一致

 

Reflect.get(target,name,receiver)------------读取target对象(必须是对象)的name属性值,若无返回undefined,

                                                                   若name属性有get声明,那么name函数中的this指向receiver对象。

Reflect.set(target,name,value,receiver)----设置target对象(必须是对象)的name属性值为value,

                                                                   若name属性有set声明,那么name函数中的this指向receiver对象。

注意:当Proxy和Reflect同时使用时,为一个Proxy实例赋值时,触发set拦截,若set拦截方法体内又有

           Reflect.set(target,name,value,receiver),那么这又会触发拦截器的defineProperty拦截,前提是反射操作

           传入了receiver参数!!!

Reflect.has(obj,name)---------------------------返回布尔值,表示obj对象中有没有name属性。

11.类语法(Class)

 js实现类

function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);

es6实现类

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

es6中Point 本身指向构造方法。类的数据类型就是函数,通过new 来创建实例。

类的所有实例共享一个原型对象。产生的实例,它们的原型都是Point.prototype,所以__proto__属性是相等的。即我们通过prototype添加属性或方法时,其他的实例也可以调用。

 Class 可以通过extends关键字实现继承

   类的 prototype 属性和__proto__属性

prototype是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象。它是显示修改对象的原型的属性。__proto__是一个对象拥有的内置属性(请注意:prototype是函数的内置属性,__proto__是对象的内置属性),是JS内部使用寻找原型链的属性

 

12.Iterator

 

具备Iterator接口的原生数据结构:

Array---Map---Set---String---TypedArray---NodeList对象---函数的arguments对象。

实用场景:

解构赋值:let [x,y] = new Set([1,2,3])                             //x=1;y=2

扩展运算符:[...iterable]                                                 //将实现Iterator接口的对象转化为数组

yield*:yield*[2,3,4]---yield 2;yield 3;yield 4;                   //generator函数内部

....

实现了Iterator接口的数据类型,都会有一个属性[Symbol.iterator],固定写法,它是一个函数,返回一个遍历器对象

13.生成器(Generator)

如果某个方法之前加上星号(*),就表示该方法是一个 Generator 函数。

一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式,定义不同的内部状态(yield在英语里的意思就是“产出”)

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

 调用遍历器对象的next方法,使得指针移向下一个状态

hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }

由于 Generator 函数返回的遍历器对象,只有调用next方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

 

14.模块化代码(Module)

 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入.

如:import { stat, exists, readFile } from 'fs';
实质是从fs模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高

 
export {firstName, lastName, year}; 也可以分别export var year = 1958;,也可以通过as 进行重命名 export命令除了输出变量,还可以输出函数或类

 export default命令,为模块指定默认输出。

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

exportexport {add as default};
// 等同于
// export default add;

// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';

import命令可以为该匿名函数指定任意名字,而不需要知道函数名

 

原文地址:https://www.cnblogs.com/tansuiqing/p/10191673.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


原文连接:https://www.cnblogs.com/dupd/p/5951311.htmlES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范,为同步加载方案如seaJS。ES6在语言规格的层面上,实现了模块功能,而且...
以为Es6,javascript第一次支持了module。ES6的模块化分为导出(export)与导入(import)两个模块,其中在项目中,我们会经常看到一种用法import * as obj from,这种写法是把所有的输出包裹到obj对象里。示例一 1 2 3 4 5 6 7 // index.js export function fn1(data){ console.log(1) } export f.
视频讲解关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。async-await和Promise的关系经常会看到有了 async-await、promise 还有必要学习吗、async await优于promise的几个特点,接收了这些信息后,就蒙圈了。现在才知道...
TypeScript什么是TypeScript?TypeScript是由微软开发的一款开源的编程语言TypeScript是JavaScript的超集,遵循最新的ES5 ES6规范,TypeScript扩展了JavaScript的语法TypeScript更像后端 Java c# 这样的面向对象语言可以让js开发大型企业项目谷歌也在大力支持TypeScript的推广,React ,VUE 都集成了TypeScriptTypeScript安装安装-- 安装npm install -g type
export class AppComponent { title = 'Tour of heroes'; hero: Hero = { id: 1, name: '张三' };}export class Hero { id: number; name: string;}就是这一段,看起来有点晕,这里是实例化一个Hero类型的对象hero,还是创建一个变量?后面是赋值,但是不知道什么意思?hero: Hero = { id: 1, na.
用 async/await 来处理异步昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,是时候学习一下了。先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数async function timeout() {return 'hello world'
es6的语法已经出了很长的时间了,在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法,但是依旧有很多开发在写代码的时候,依旧没有用es6的语法,而是习惯使用老的语法,这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势,让大家从根本上了解es6语法的优势基本用法数组解构让我们一起先来看数组解构的基本用法:let [a, b, c] ...
参考链接1 参考链接2写法1 - 使用 function 关键字function greeter(fn: (a: string) =&gt; void) { fn("Hello, World");}function printToConsole(s: string) { console.log(s);}greeter(printToConsole);(a: string) =&gt; void上述语法的含义:表示一个函数,接收一个字符串作为输入参数,没有返回参数。可
ES6简介-ECMAScript是javascript标准-ES6就是ECMAScript的第6个版本-ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。ES6新增加的功能:1.let
ES6  在ES5的基础上增加了一些新的特性和写法,特别在函数写法上,增加了箭头函数 1.正经的函数写法//普通的传递值的写法functionsum1(x,y){returnx+y;}constres=sum1(2,3);console.log(res);//传递对象的方式,调用时需要传递一个对象过去function
ES5及ES6es表示ECMASCript,他是从es3,es5,es6,es5是2009.12月发布的,es6是2015.6月发布的。vue2完全支持es5的(vue3完全支持es6的),react完全支持es6es5的新特性严格模式(对应的相反的称为怪异模式)'usestrict'//一般用于相关的设计上面书写一个严格模式底下的代码就需要按照严格模
ES5的严格模式所谓严格模式,从字面上就很好理解,即更严格的模式,在这种模式下执行,浏览器会对JS的要求更苛刻,语法格式要求更细致,更符合逻辑。怪异模式:就是我们之前一直使用的开发模式,就叫怪异模式。因为很多时候出来的结果是非常怪异的,所以才称之为怪异模式。'usestrict'//一般用
相同点export与exportdefault均可用于导出常量、函数、文件、模块可在其它文件或模块中通过import+(常量|函数|文件|模块)名的方式,将其导入,以便能够对其进行使用不同点一、在一个文件或模块中,export、import可以有多个,exportdefault仅有一个//model.jsle
24.class类 25.class中的extend 26.super关键字 27.super应用 28.class属性 30.静态成员和实例成员 31.构造函数问题 32.构造函数原型 33.原型链 34.js查找机制 35.原型对象中this指向 36.扩展内置对象方法 37.call方法 38.借用父构造函数
什么是ES6ES的全称是ECMAScript,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。泛指2015年发布的es2015版极其后续版本ES6中新增语法letES6中新增的用于声明变量的关键字。注意:使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特
命名修饰符let:不能重复声明变量、块级作用域leta=1;leta=2;//报错const:初始化常量,必须给初始值,否则报错、在同一个作用域内,const定义的常量不能修改其值、块级作用域consta=10a=100//报错,不能重复声明解构constobj={name:'jack'age:18sex:'
ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。1{2leta=10;3varb=1;4}56a//ReferenceError:aisnotdefined.7b//1上面代码在代码块之中,分别用let和var声明了两个变量。然后在代码块之外调用
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatib
一,RegExp构造函数es5中,RegExp构造函数的参数有两种情况。1,参数是字符串,第二个参数表示正则表达式的修饰符(flag)。2,参数是一个正则表达式,返回一个原有正则表达式的拷贝。es6中,如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符。而
一、字符的Unicode表示法JavaScript允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的Unicode码点。表示法只限于码点在\u0000~\uFFFF之间的字符,超过该范围需要用两个双字节表示ES6改进:将码点放入大括号,就能正确解读该字符。转换参考:https://blog.csdn.net/hezh1994/ar