js宏编程--ES6介绍

WPS开放平台对JavaScript运行时做了说明：WPS宏编辑器集成了一个V8 引擎的 JavaScript 运行时，支持大部分ES6语法，因此宏编辑器支持JavaScript 标准内置对象，注意，JS内置对象和浏览器的内置对象是不同的，WPS宏编辑器集成的是JavaScript 运行时，而不是浏览器，因此WPS宏编辑器不支持浏览器的内置对象。JS标准内置对象具体参见https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects.
Js宏编程，首先得熟悉会使用Javascript，在此基础之上如果了解ES6，则会大幅提升Js宏编程的效率、代码可读性和可维护性。为此我们需要了解一点ES6的基本特性，ES6学习参考网站。

1、let与const

1）之前js使用var声明变量，会有两个怪象：

• 申明提前，变量在代码中未声明也可调用，只不过输出的是undefined；
• 变量至少是函数级别的变量，如下代码所示：

console.log(b);		// undefined
{
  let a = 10;
  var b = 1;
}
console.log(b);		// 1
console.log(a);		// ReferenceError: a is not defined.

2）let命令

let命令不会申明提前，只在它的声明代码块内有效，如上代码所示，因为a在代码块内，console.log(a)在代码块外，所以调用的时候报错：引用错误，变量a未定义。

3）const命令

const声明一个只读的常量。一旦声明，常量的值就不能改变。因为，一旦声明，常量值又不能修改，所以声明就必须立即初始化，否则没意义。

	const PI = 3.1415;
	console.log(PI);
	PI = 3;  // TypeError: Assignment to constant variable.

2、解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
本质上就是一种快速赋值语法糖，如下代码所示：

	let [a1,a2,a3] =  Range("A1:A10").Value2;			// 对应单元格值A1-A10
	console.log(typeof(a1), a1[0],a2[0],a3[0]);			// object-array, A1, A2, A3

1）for…of遍历

任何部署了 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

excel常见的遍历单元格即可用for…of遍历。

3、字符串扩展

模板字符串（template string）是增强版的字符串，用反引号 ` 标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

	var x = 1;
	var y = 2;
	
	console.log(`${x} + ${y} = ${x + y}`);			// "1 + 2 = 3"
	console.log(`${x} + ${y * 2} = ${x + y * 2}`);	// "1 + 4 = 5"
	
	var obj = {x: 1, y: 2};
	console.log(`${obj.x + obj.y}`);				// 3

4、字符串新增方法

1）实例方法：includes(), startsWith(), endsWith()

传统上，JavaScript 只有 indexOf 方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

2）实例方法：repeat()

repeat 方法返回一个新字符串，表示将原字符串重复 n 次。

'x'.repeat(3) 		// "xxx"
'hello'.repeat(2) 	// "hellohello"
'na'.repeat(0) 		// ""

3）实例方法：trimStart()，trimEnd()

ES2019 对字符串实例新增了 trimStart() 和 trimEnd() 这两个方法。它们的行为与trim() 一致， trimStart()消除字符串头部的空格，trimEnd() 消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

const s = '  abc  ';
s.trim() 			// "abc"
s.trimStart() 		// "abc  "
s.trimEnd() 		// "  abc"

5、ES6函数的扩展-箭头函数

ES6允许使用“箭头”（ => ）定义函数。在宏录制时，我们发现，里面会有大量箭头函数，比如：
这是选中C7:D14区域，并设置边框的宏，里面又很多=>箭头函数，并且是立即执行函数。

function Macro1()
{
	Range("C7:D14").Select();
	(obj=>{
		obj.Weight = xlThin;
		obj.LineStyle = xlContinuous;
	})(Selection.Borders.Item(xlEdgeLeft));
	(obj=>{
		obj.Weight = xlThin;
		obj.LineStyle = xlContinuous;
	})(Selection.Borders.Item(xlEdgeTop));
	(obj=>{
		obj.Weight = xlThin;
		obj.LineStyle = xlContinuous;
	})(Selection.Borders.Item(xlEdgeBottom));
	(obj=>{
		obj.Weight = xlThin;
		obj.LineStyle = xlContinuous;
	})(Selection.Borders.Item(xlEdgeRight));
	(obj=>{
		obj.Weight = xlThin;
		obj.LineStyle = xlContinuous;
	})(Selection.Borders.Item(xlInsideVertical));
	(obj=>{
		obj.Weight = xlThin;
		obj.LineStyle = xlContinuous;
	})(Selection.Borders.Item(xlInsideHorizontal));
	Selection.Borders.Item(xlEdgeLeft).ColorIndex = xlColorIndexAutomatic;
	Selection.Borders.Item(xlEdgeTop).ColorIndex = xlColorIndexAutomatic;
	Selection.Borders.Item(xlEdgeBottom).ColorIndex = xlColorIndexAutomatic;
	Selection.Borders.Item(xlEdgeRight).ColorIndex = xlColorIndexAutomatic;
	Selection.Borders.Item(xlInsideVertical).ColorIndex = xlColorIndexAutomatic;
	Selection.Borders.Item(xlInsideHorizontal).ColorIndex = xlColorIndexAutomatic;
}

6、数组的扩展

1）扩展运算符

扩展运算符（spread）是三个点（ … ）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

function add(x, y) {
  return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42

7、对象新增的方法

1）Object.is()

ES6 提出“Same-value equality”（同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。

Object.is('foo', 'foo') 			// true
Object.is({}, {})					// false

//  不同之处只有两个：一是 +0 不等于 -0 ，二是 NaN 等于自身。
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

2）Object.assign()

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);	// target {a:1, b:2, c:3}

如上只是ES6的一些比较基本的新特性，也是在JS宏编程中，使用频率比较高的特性，更多特性还是建议大家查阅ES6学习参考网站。