ES6 (ECMAScript) Detailed several practical characteristics

ES6 ECMAScript

Generator functions:
Function Generator

Keyword the let , const and var
const keywords define constants (if the value of a variable does not change, can also be used to define variables)
const the PI = 3.14; constant defines
NOTE: Once a constant is defined as the value does not change ( values can not be changed)

Block-level scope: let
keyword let-defined variables
to note the difference between the time points :( and let use var)
A, let defined variables can not be repeated, but modified redeclaration value of the variable
b, let the functions that can not be in the of variable lift
C, let {} a variable used internally, can not access the external declaration let
d, let the variable lift no variables declared
variables E, let declared before the variable is declared unavailable, this phenomenon is called "temporary dead zone."
f, let only the role of internal let {} is a block-level scope in
let applications: Get index tab elements
// instance
let considerations in the use of js
// let use
let more convenient to get the current index in the circulation
this key point and this change
represents this current object
this in an event It represents an event triggered by representation in the method caller (if the caller uncertain method, generally pointing to the window object )
Object Oriented Code Explanation
changed this point:
the bind () function to change this points to an anonymous
call () or apply () method to change non this anonymous function of the function calls directed to this point and change
differences: the second fixed number of parameters apply to call the second parameter is an array
Detailed change the code pointed to this problem

Destructuring assignment
resolution structure assignment
destructuring assignment comprising: destructuring assignment string, the object destructuring assignment, array destructuring assignment, assignment function parameters deconstruction

Deconstruction string assignment:

   [a,b,c] = "dhj3";
   console.log( a,b,c )   // d h j

解构赋值作用:
1、可以一次性定义多个变量
2、可以实现两个变量的交换
3、可以让一个函数返回多个值
4、可以作用在函数的参数上
Use structure assignment

//应用
The practical application of structure assignment
for…of es6新增的遍历 forEach不是es6新增的
遍历数组,可以是for of

var arr = [1,2,3,4,5];
for( var i of arr ){
    console.log(  i  )
}

for…in 与 for of区别
for in可以遍历对象,for of不能遍历对象
for of可以用来遍历map集合,for in不能遍历map集合
for in遍历数组得到的是数组的下标,for of遍历数组得到的是数组的元素
for in遍历键 for of遍历值
字符串模板
字符串模板中既可以识别变量 又 可以识别函数
使用 ${ 变量或函数调用 }
注意 :使用了字符串模板后 就不需要说使用 + 做拼接

//实例
String splicing operation

箭头函数
定义 : () => { 函数体 } 不支持bind方法绑定this指向

var fn = (形参) => {  函数体  }

var obj = { show: ()=>{  console.log(this)  } } obj.show();  // 思考输出啥呢??

普通函数中的this 指向事件的触发者或方法的调用者
箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象 (箭头函数中的this来自于它的父级)

练习 : 下面的this都指向哪里?

document.onclick = () => {  alert(this)   }   //window
document.onclick = function(){    box()   };  //widnow
var box = function(){  alert(this)   };
var box = function(){alert(this)}     //document
document.onclick = box;

document.onclick = () => {
    setTimeout(    function(){  alert(this)   }.bind(this)   )    //window
}

Array.from
Array.from 将一个具有length长度属性的伪数组(类数组 、集合) 转成数组
用法 :
Array.from( 对象 );

Array.from( arguments / set / 通过标签名获取的集合等 ); 不能转map集合

扩展 :
Array.of()
Array.of 方法用于将一组值,转换为数组。

var arr = Array.of(  34,2,5,6,7,8 );

扩展 :
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
可枚举属性 : js中的可枚举属性 就是 json对象(键值对)

const object1 = {
      a: 1,
      b: 2,
      c: 3
    };
    
const object2 = Object.assign({c: 4, d: 5}, object1);

console.log(object2);

set 集合 和 map集合
set集合 定义 :

var set = new Set();

set特点 : 自动去重 数据不会进行类型转换

数组去重 :

var arr = [12,12,34,12,34,23,23,12,12];
 Array.from(  new Set( arr ) )  //数组去重

Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例
史上最短的数组去重方案 : [… new Set( arr )]

set集合操作方法 :
add() 向集合中添加一个数
delete() 删除集合中的一个数
has() 判断集合中是否含有某个数
clear() 清空集合
使用 forEach或forof遍历set集合
Functions operate on each of the array

defining a set of map:
var = new new map the Map ()
method of operating the map:
SET () is a set of assignment map
get () Gets the value of the key according to
delete () Delete data
has () determines whether a key containing
clear () Clear
Use map collection
extended Symbol type
definitions: var = variable Symbol ();
action: a Symbol type tag as a property of the object, object attribute protect traversal used for in this object attribute type fail to Symbol
 Symbol type

Constructor class - object class which belongs instanceof determines create a constructor

class   构造函数名{

}

Guess you like

Origin blog.csdn.net/ZHANGJIN9546/article/details/92967306