lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法？

国庆刚刚结束，我们开始一波新的学习进程吧。 ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。作为前端必备技能，我们来快速开始吧

接下来我会总结一些工作中常用也比较核心的es6+的语法知识，后面又要慢慢开始工作之旅了，希望在总结自己经验的过程中大家会有所收获～

正文

1. let和const

let

用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，即let声明的是一个块作用域内的变量。

特点：

• 不存在变量提升
• 暂时性死区——只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响
• 不允许重复声明
• 块级作用域——被{}包裹的，外部不能访问内部

应用案例与分析：

// 使用var

上面使用let的代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算所以最后能正常输出i的值。

注意： 1. for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域，所以我们可以在循环体内部访问到i的值。 2. let和var全局声明时，var可以通过window的属性访问而let不能。

const

const声明一个只读的常量。一旦声明，常量的值就不能改变。const实际上保证的是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

因此，我们使用const时，不能只声明而不初始化值，否则会报错：

const 

const的其他特性和let很像，一般推荐用它来声明常量，并且常量名大写。

2. 数值的扩展

ES6 在Number对象上，新提供了Number.isFinite()和Number.isNaN()两个方法。

Number.isFinite()

Number.isFinite()用来检查一个数值是否为有限的（finite），即不是Infinity。 注意，如果参数类型不是数值，Number.isFinite一律返回false。

Number

Number.isNaN()

用来检查一个值是否为NaN,如果参数类型不是NaN，Number.isNaN一律返回false

Number.isFinite和Number.isNaN与传统的全局方法isFinite()和isNaN()的区别在于，传统方法先调用Number()将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效，Number.isFinite()对于非数值一律返回false, Number.isNaN()只有对于NaN才返回true，非NaN一律返回false。

isFinite

Number.parseInt(), Number.parseFloat()

ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变,这样做的目的，是逐步减少全局性方法，使得语言逐步模块化

Number.isInteger()

Number.isInteger()用来判断一个数值是否为整数；JavaScript 内部，整数和浮点数采用的是同样的储存方法，所以 25 和 25.0 被视为同一个值；如果参数不是数值，Number.isInteger返回false；由于 JavaScript 数值存储为64位双精度格式，数值精度最多可以达到 53 个二进制位，如果数值的精度超过这个限度，第54位及后面的位就会被丢弃，这种情况下，Number.isInteger可能会误判。

Number

Math.trunc()

Math.trunc方法用于去除一个数的小数部分，返回整数部分;对于非数值，Math.trunc内部使用Number方法将其先转为数值;对于空值和无法截取整数的值，返回NaN

Math

Math.cbrt()

Math.cbrt方法用于计算一个数的立方根;对于非数值，Math.cbrt方法内部也是先使用Number方法将其转为数值

Math

Math.hypot()

Math.hypot方法返回所有参数的平方和的平方根

Math

有了这个api，我们算一个n维勾股定理是不是很方便了呢？

指数运算符

ES2016 新增了一个指数运算符（**）。这个运算符的一个特点是右结合，而不是常见的左结合。多个指数运算符连用时，是从最右边开始计算的。

// 相当于 2 ** (3 ** 2)

es6+还扩展了更多的数值api，感兴趣的可以自己去学习研究。

3. 数组的扩展

扩展运算符

扩展运算符（spread）是三个点（...），将一个数组转为用逗号分隔的参数序列

应用：

1. 复制数组

const 

1. 合并数组

const 

注：这两种方法都是浅拷贝，使用的时候需要注意。

1. 将字符串转化为数组

使用扩展运算符能够正确识别四个字节的 Unicode 字符。凡是涉及到操作四个字节的 Unicode 字符的函数，都有这个问题。因此，最好都用扩展运算符改写。

[...

1. 实现了 Iterator 接口的对象

let 

上面代码中，querySelectorAll方法返回的是一个NodeList对象。它不是数组，而是一个类似数组的对象。扩展运算符可以将其转为真正的数组，原因就在于NodeList对象实现了 Iterator 。

Array.from()

Array.from方法用于将类对象转为真正的数组：类似数组的对象和可遍历的对象（包括 ES6 新增的数据结构 Set 和 Map）。

实际应用中我们更多的是将Array.from用于DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。

// NodeList对象

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array

Array.of()

Array.of方法用于将一组值，转换为数组。Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

Array

数组实例的 copyWithin()

数组实例的copyWithin()方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

它接受三个参数:

• target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
• start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

[

数组实例的 find() 和 findIndex()

数组实例的find方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

// find

数组实例的 fill()

fill方法使用给定值，填充一个数组。fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

new 

数组实例的 includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值。该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

[

数组实例的 flat()，flatMap()

flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。flatMap()方法对原数组的每个成员执行一个函数，然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。flatMap()只能展开一层数组。flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this。

[

4. 函数的扩展

函数参数的默认值

function 

注意点：

• 参数变量是默认声明的，所以不能用let或const再次声明
• 使用参数默认值时，函数不能有同名参数
• 参数默认值不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的
• 参数如果传入undefined，将触发该参数等于默认值，null则没有这个效果。 关键点

函数的 length 属性

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真；如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。

(

作用域

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域。等到初始化结束，这个作用域就会消失。在不设置参数默认值时，是不会出现的。

箭头函数

由于箭头函数的用法比较简单，我们来看看注意点：

• 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
• 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
• 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

不适合场景：

// 定义对象的方法，且该方法内部包括this,

5. 对象的扩展

对象的扩展运算符

对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中;等同于使用Object.assign()方法

let 

Object.is()

用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致;不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

+

Object.assign()

用于对象的合并，将源对象的所有可枚举属性，复制到目标对象; 如果只有一个参数，Object.assign会直接返回该参数; 由于undefined和null无法转成对象，所以如果它们作为参数，就会报错; 其他类型的值（即数值、字符串和布尔值）不在首参数，也不会报错。但是，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。

// 合并对象

注意点：

• Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用
• 对于嵌套的对象，遇到同名属性，Object.assign的处理方法是替换，而不是添加
• Object.assign可以用来处理数组，但是会把数组视为对象

Object

• Object.assign只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制

const 

应用场景：

• 为对象添加属性和方法
• 克隆/合并对象
• 为属性指定默认值

Object.keys()

返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键名

Object.values()

返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值。注意：返回数组的成员顺序：如果属性名为数值的属性，是按照数值大小，从小到大遍历的

const 

Object.entries()

返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值对数组;如果原对象的属性名是一个 Symbol 值，该属性会被忽略

const 

Object.fromEntries()

Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象

Object

应用场景：

• 将键值对的数据结构还原为对象，因此特别适合将 Map 结构转为对象
• 配合URLSearchParams对象，将查询字符串转为对象

Object

6. symbol

ES6 引入了一种新的原始数据类型Symbol，表示唯一的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。Symbol 值通过Symbol函数生成。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

注意点：

• Symbol函数前不能使用new命令，否则会报错
• 由于 Symbol 值不是对象，所以不能添加属性。本质上，它是一种类似于字符串的数据类型
• Symbol函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，方便区分
• Symbol函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的Symbol函数的返回值是不相等的
• Symbol 值不能与其他类型的值进行运算，会报错
• Symbol 值作为对象属性名时，不能用点运算符
• 在对象的内部，使用 Symbol 值定义属性时，Symbol 值必须放在方括号之中
• Symbol 值作为属性名时，该属性还是公开属性，不是私有属性
• Symbol 作为属性名时属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。但是，它也不是私有属性，使用Object.getOwnPropertySymbols方法可以获取指定对象的所有 Symbol 属性名。

Symbol.for()，Symbol.keyFor()

Symbol.for()接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值。如果有，就返回这个 Symbol 值，否则就新建并返回一个以该字符串为名称的 Symbol 值。Symbol.keyFor方法返回一个已登记的 Symbol 类型值的key

let 

7. set和map数据结构

set

ES6提供了新的数据结构Set,类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。

实例属性和方法：

• add(value)：添加某个值，返回Set结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• has(value)：返回一个布尔值，表示该值是否为Set的成员。
• clear()：清除所有成员，没有返回值。

s

遍历操作：

• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员

Set的遍历顺序就是插入顺序，这个特性有时非常有用，比如使用Set保存一个回调函数列表，调用时就能保证按照添加顺序调用。

应用场景：

// 数组去重

map

类似于对象，也是键值对的集合，各种类型的值（包括对象）都可以当作键。Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。

实例属性和方法:

• size属性: 返回Map结构的成员总数
• set(key, value): set方法设置key所对应的键值，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键,set方法返回的是Map本身，因此可以采用链式写法
• get(key) : get方法读取key对应的键值，如果找不到key，返回undefined
• has(key) : has方法返回一个布尔值，表示某个键是否在Map数据结构中
• delete(key) : delete方法删除某个键，返回true。如果删除失败，返回false
• clear() : clear方法清除所有成员，没有返回值

遍历方法和set类似，Map结构转为数组结构，比较快速的方法是结合使用扩展运算符（...）：

let 

数组转map：

new 

Map转为对象:

function 

对象转为Map

function 

8. Proxy 和 Reflect

关于Proxy 和 Reflect的介绍，我会单独写个完整的模块来介绍及其应用。

9. promise对象

Promise是异步编程的一种解决方案，简单说就是一个容器，里面保存着某个未来才会结束的事件的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。

特点： * 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。 * 一旦状态改变，就不会再变，任何时候都可以得到这个结果。整个过程不可逆。

使用：

• 基本用法 ``` js // 实现异步加载图片 function loadImageAsync(url) { return new Promise(function(resolve, reject) { var image = new Image();
  image.onload = function() { resolve(image); };
  image.onerror = function() { reject(new Error('图片加载失败')); };
  image.src = url; }); } // 使用 loadImageAsync('http://xxxx/api').then((data) => { // some code }).catch(err => console.log(err)) ``` resolve函数将Promise对象的状态从“未完成”变为“成功”，即Pending => Resolved，并将异步操作的结果作为参数传递出去；reject函数将Promise对象的状态从“未完成”变为“失败”，即Pending => Rejected，并将异步操作报出的错误作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。then方法的第一个参数是Resolved状态的回调函数，第二个参数（可选）是Rejected状态的回调函数。

then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

• Promise.all()
  Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。只有Promise.all内的所有promise状态都变成fulfilled，它的状态才会变成fulfilled，此时内部promise的返回值组成一个数组，传递给Promise.all的回调函数。只要Promise.all内部有一个promise被rejected，Promise.all的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
• Promise.race()
  Promise.race方法同样是将多个Promise实例，包装成一个新的Promise实例。只要Promise.race中有一个实例率先改变状态，Promise.race的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给Promise.race的回调函数。

实现请求超时处理：

const 

• Promise.resolve() 将现有对象转为Promise对象。如果参数是Promise实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例；如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为Resolved；需要注意的是，立即resolve的Promise对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。

setTimeout

• finally() finally方法用于指定不管Promise对象最后状态如何，都会执行的操作。它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行

10. async函数

async函数就是Generator函数的语法糖,async函数的await命令后面，可以是Promise对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。async函数的返回值是Promise对象，你可以用then方法指定下一步的操作。进一步说，async函数完全可以看作多个异步操作，包装成的一个Promise对象，而await命令就是内部then命令的语法糖。

应用案例：

1.指定时间后返回数据

function 

注意事项：

• await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try...catch代码块中
• 多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发

let 

• await命令只能用在async函数之中，如果用在普通函数，就会报错

应用场景：

1. 按顺序完成异步操作

async 

11. class

通过class关键字，可以定义类。ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。类的数据类型就是function，类本身就指向构造函数。构造函数的prototype属性，在ES6的“类”上面继续存在。类的所有方法都定义在类的prototype属性上面。另外，类的内部所有定义的方法，都是不可枚举的.

class 

constructor方法

方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。constructor方法默认返回实例对象（this），可以指定返回另外一个对象

注：类的构造函数，不使用new是没法调用的，会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

不存在变量提升

this的指向

类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错

// 解决this指向问题

Class的继承

Class之间可以通过extends关键字实现继承，子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，如果不调用super方法，子类就得不到this对象。

class 

Class的取值函数（getter）和存值函数（setter）

与ES5一样，在Class内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为

class 

Class的静态方法

如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

class 

12. 修饰器Decorator

类的修饰

修饰器是一个用来修改类的行为的函数。其对类的行为的改变，是代码编译时发生的，而不是在运行时。

function 

方法的修饰

修饰器不仅可以修饰类，还可以修饰类的属性,修饰器只能用于类和类的方法，不能用于函数，因为存在函数提升。如果同一个方法有多个修饰器，会像剥洋葱一样，先从外到内进入，然后由内向外执行。

修饰类的属性时，修饰器函数一共可以接受三个参数，第一个参数是所要修饰的目标对象，第二个参数是所要修饰的属性名，第三个参数是该属性的描述对象。

// 下面的@log修饰器，可以起到输出日志的作用

13. module

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

export

如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量

// lib.js

export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，import也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了ES6模块的设计初衷。

import

使用export命令定义了模块的对外接口后，其他 JS 文件就可以通过import命令加载这个模块。import命令具有提升效果，会提升到整个模块的头部，首先执行。是因为import命令是编译阶段执行的，在代码运行之前。如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次

// main.js

export default 命令

为模块指定默认输出

// a.js

最后

由于工作中90%以上的业务都可以用以上的es6新特性解决，后期会不断优化完善，并出一个完全使用es6完成的实战项目。更多前端问题在公众号《趣谈前端》加入我们一起讨论吧！

更多推荐

• 15条前端必备的性能优化方法，你知道哪些
• 前端开发中79条不可忽视的知识点汇总
• 如何用css3实现惊艳面试官的背景动画（高级附源码）？