Software_programmign_Web_JS

2019-12-19

---

---

 

程序中，一等公民是指一个可以传入函数，可以从函数返回，且可以赋值给变量的值。JS函数是一等公民。

ES6, 将类设计为一等公民，允许通过多种方式使用类的特性，可以将类作为参数传入函数中。

 

 

 

Underscore.js 

ref : https://underscorejs.org/

 

_(arr).first()  : 第一个;  _(arr).first(3) : 前三个 

last()   last(n)

=====

initial()   默认传入1，  除掉一个后的剩余的数组；  initial(n) 返回数组中的除去最后n个元素的所有元素。

rest() 对 Initial() 反向

数组 交并差

union 去重， 一个数组的去重需要使用 uniq() 方法

=================================

 

 

 

 

 Javascript  _union.property.apply (this, arrOfArrs);

---

 

 

 ======

zip()  zipper,   接受多个输入数组并一个元素对应一个元素第合并它们到一个输出数组中。

输出的数组是一个数组的数组，内层包含被合并的元素。

 

 ====

移除无效数据  compact()

移除掉数组所有 Javascript 认为是 false 的值，被移除的值包括布尔值 false, 数字0，

空白字符串， 还有特殊值 NaN （ not a number，无效数字，例如 1/0 ） undefined, null.

====

消除掉一个数据集合中多重嵌套的数组， flattern() 方法。默认去除数组中所有的，甚至多重的嵌套数组。

 

 将其参数 shallow 设置为 true

 

 

使用 without() 方法， 去除特定值

 ==

indexOf()  返回一个特定子字符串在一个更大的字符串中出现的位置。

第二个参数来指定开始位置。

lastIndexOf() 从数组的反向搜索。

-------

针对有序数组，

uniq()  indexOf()  都接受一个可选的布尔型参数，如果这个参数是true， 这么函数假定数组是有序的。

对于大型数据集来说，这个假定带来的性能优化是非常显著的。

sortedIndex（） 函数，也假定输入数组是有序的，它能找到某个特定的值插入到输入数组后还能保持数组有序的插入

位置。

 

 自定义的排序函数也可以传给 sortedIndex()

======

range() 常见一个带有特定个数的元素数组

rang( 相邻差值【默认1】，起始值【0】，个数）

在生成匹配一个 y轴值的数组的 x 轴值的数组的 x轴值的时候很有用。

 

 

============================== Object=========================

来源于 REST 接口的数据中更是 JS 对象， JSON 数据格式。

keys() 创建一个完全由对象的属性名构成的数组。

values() 创建一个完全由对象的属性值构成的数组， 如果存在重复值， 以最后一个为准。

 

 

 

 

 

 ==========================================

pairs() 方法创建一个二位数组，外层数组的每一个元素都是由对象的一个属性名和对应属性值构成的一个数组。

 

将一个数组反向为一个对象，可以使用 object() 方法

 

 可以使用 invert() 方法将属性名和属性值对调. 自动转换。invert() 有重复键的时候只保留最后一个

 

 ===============================

清理子集对象    会直接修改原有对象

pick() 方法来选取一个对象中的特定属性， 传入属性名列表。

 

omit() 方法忽略掉特定属性， 传入属性名列表。

================================

更新属性      会直接修改原有对象

extend() 会更新和添加属性

default() 不会更新已有的属性，会添加一个对象中缺失的属性。

如果需要以不修改输入参数的方式使用 extend() 和 defaults(), 应该使用一个空白对象作为第一个参数。

 

---

---

2019-12-22

可以使用迭代器的 next() 方法返回值，也可以在生成器内部使用 yield 关键字来生成值，如果给迭代器的 next() 的方法

传递参数，则这个参数的值就会替代生成器内部上一条 yield 语句的返回值。

如果要实现更多像 异步编程这样的高级功能，则这种给迭代器传值的能力就变得至关重要。

 

 

 

 第一次调用 next() 方法时无论传入什么参数都会被丢弃。

由于传给 next() 方法的参数会替代上一次 yield 的返回值， 而在第一次调用 next() 方法前不会执行

任何 yield 语句，因此在第一次调用 next() 方法时传递参数使毫无意义。

 

第二次调用next() 方法传入数值4作为参数， 它最后被赋值给生成器函数内部的变量 first。在一个含参 yield

语句中，表达式右侧等价于第一次调用next() 方法后的下一个返回值，

表达式左侧等价于第二次调用 next() 方法后，在函数继续执行前得到的返回值。

第二次调用next() 方法传入的值为4， 它会被赋值给变量first, 函数继续执行。

第二条yield 语句在第一次yield 的结果加上2，最终的返回的值为6.

第三次调用next()方法时，传入5， 这个值被赋值给second, 最后用于第三条 yield语句并最终返回数值8.

 

==========================

throw() 方法

除了给迭代器传递数据外， 还可以给它传递错误条件。

通过 throw() 方法， 当迭代器恢复执行时可令其抛出一个错误。这种主动抛出错误的能力对于

异步编程而言至关重要，也能为你提供模拟结束函数执行的两种方法（返回值或者抛出错误）

从而增强生成器内部的编程弹性。

将错误对象传给 throw() 方法后，在迭代器继续执行时其会被抛出。

 

 

 

 try-catch 代码块包裹着第二条 yield 语句，尽管该语句本身没有错误，但在给变量

second 赋值前还是会主动抛出错误，catch 代码块捕获错误后将 second 变量赋值为6，

下一条 yield 语句继续执行后返回9.

 

---

---

2019-12-22  16:22:51 

ES5 模拟 class

 

 =====================================

Class 语法

 

 自有属性是实例中的属性，不会出现在原型上，且只能在类的构造函数或方法中创建，

此例中的name就是一个自有属性。

建议在构造函数中创建所有自有属性，从而只通过移除就可以控制类中的自有属性。

---

---

 

与函数不同的是，类属性不可被赋予新值， PersonClass.prototype 就是一个只可读的类属性。

• 函数声明可以被提升，而类声明与let声明类似，不能被提升；真正执行声明语句之前，它们会一直存在与临时死区中。
• 类声明中的所有代码将自动运行在严格模式下，且无法强行让代码脱离严格模式执行。
• 在自定义类型中，需要通过Object.defineProperty() 方法手工指定某方法为不可枚举，而在类中，所有方法都是不可枚举的。
• 每个类中都有一个名为[[Construct]]的内部方法， 通过关键字 new 调用那些不含 [[Construct]]的方法会导致程序抛出错误。
• 使用除关键字 new 以外的调用类的构造函数会导致程序抛出错误。
• 在类中修改类名会导致程序出错。

 

 

 

 ===================

单例

先创建一个匿名类表达式，然后立即执行。这种模式可以使用类语法创建单例，且

不会再作用域中暴露类的引用，其后的小括号表明正在调用一个函数，且可以传参数给这个函数。

 

 

======

可计算成员名称

类方法和访问器属性也支持使用可计算名称，就像在对象字面量中一样，用方括号

包裹一个表达式即可使用可计算名称。

 

=====

通过在方法名前附加一个星号（*）的方式来定义生成器。类中，也可以将任何方法定义成生成器。

如果用对象来表示集合， 有希望通过简单的方法迭代集合中的值，那么生成器方法就派上用场了。

数组，set集合及 Map 集合为开发者们提供了多个生成器方法来与集合中的元素交互。

 

如果你的类是用来表示值的集合的，为它定义一个默认迭代器会更有用，通过Symbol.iterator 定义生成器

方法即可为类定义默认迭代器

 

 

用可计算名称创建了一个代理 this.items 数组 values() 迭代器的生成器方法。

任何管理一系列值的类都应该引入默认迭代器， 因为一些与特定集合有关的操作需要所操作集合含有一个迭代器。

 

如果不介意在对象的实例中出现添加的方法和访问器属性，则可以将它们添加到类的原型中，

如果你希望它们只出现在类中，需要使用静态成员。

 

---

---

2020-01-18 19:54:52

动态生成元素  li. textContent

    function addMessage(element, message){
                var messageElement = document.createElement("li");
                messageElement.textContent = message;
                element.appendChild(message);
            }

            var first = document.getElementById("first");
            addMessage(first,"Page loading.")

            function addMessage(element, message){
                var messageElement = document.createElement("li");
                messageElement.textContent = message;
                element.appendChild(messageElement);
            }

            var first = document.getElementById("first");
            addMessage(first,"Page loading.")

            document.body.addEventListener("mousemove", function(){
                var secondUL = document.getElementById("second");
                addMessage(secondUL,"Event: mousemove");
            })

            document.body.addEventListener("click", function(){
                var second = document.getElementById("second");
                addMessage(second,"Event: click");
            })

 ================

2020-02-06

 

---

---

 

2020-02-08  19:29:53

注意 Map 的 entry 遍历

1. keys() ;  2. values()

 

 

 

Set 的 unit, intersect, difference ,  与 延展预算符相关

1. 并集

注意是对 原始数组的 filter ,然后 new Set([  ] ) 构造

 

 

 

2. 并集

注意是使用延展运算符将 Set转换为数组,以便调用数组的 的 filter ,然后 new Set([  ] ) 构造

 

 3. 差集

以单方面示例