js宏编程--ES6介绍

Posted 2023-04-03 老马历写记

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学习参考网站。

JS面向对象

JS面向对象

• 一、面向对象编程介绍
• • 1.1面向对象编程 OOP（object oriented programming）
  • 1.2面向过程和面向对象的对比
• 二、ES6中的类和对象
• • 2.1对象
  • 2.2类 class
  • 2.3创建类
  • 2.4类constructor构造函数
  • 2.4类中添加方法
• 三、继承
• • 3.1子类继承父亲方法
  • 3.2ES6中的类和对象

一、面向对象编程介绍

1.1面向对象编程 OOP（object oriented programming）

1.2面向过程和面向对象的对比

二、ES6中的类和对象

面向对象

2.1对象

2.2类 class

2.3创建类

2.4类constructor构造函数

2.4类中添加方法

 <script>
        //创建class类 
        class Star {
            constructor(uname, age) {
                this.uname = uname;
                this.age = age;
            }
            Sing(sang) {
                console.log(this.uname + sang);
            }

        }
        //利用类创建对象
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 20);
        console.log(zxy);
        console.log(ldh);
        ldh.Sing('冰雨'); //刘德华冰雨
        console.log(ldh);
        //（1）类里面所有的函数不需要写function
        //（2）多个函数方法之间不需要添加逗号分隔，
    </script>

三、继承

  <script>
        //1.类的继承
        // class Father {
        //     constructor() {

        //     }
        //     money() {
        //         console.log(100);
        //     }
        // }
        // class Son extends Father {

        // }
        // var son = new Son();
        // son.money();
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;

            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        class Son extends Father {
            constructor(x, y) {
                super(x, y); //调用了父类的构造函数

            }
        }
        var son = new Son(1, 2);
        var son1 = new Son(1, 3);
        son.sum();
        son1.sum();
    </script>

3.1子类继承父亲方法

 <script>
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y
            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        //子类继承父类加方法 同时扩展减法
        class Son extends Father {
            constructor(x, y) {
                super(x, y); //利用super调用父类的构造函数
                //super必须在子类this前调用
                this.x = x
                this.y = y;


            }
            subtract() {
                console.log(this.x - this.y);
            }
        }
        var son = new Son(5, 3);
        son.subtract();
        son.sum();
    </script>

3.2ES6中的类和对象

使用类注意事项

constructor里面的this指向的是创建的实例对象