说来又过了一个学期，匆匆忙忙好像也没有干出一些特别具体的事情。然而身边朋友多有收获，看着下不去的肚子和上不去的能力，不免唏嘘。

过去一短时间生活上主要在搞足球和搞对象啦。好歹小组出线，小组赛全勤，也算一个不小的成就。但是仔细感觉，身体上并没有更加有力量感，反而不断被右膝盖的酸痛感困扰。回顾三场小组赛，印象最深的是对阵传媒，韩国小哥风一样的速度近乎于日本中村小友，踢完那场足足在床上躺了一天。大约童年缺钙，落下了如今这条给不上力量的右膝盖。其他两个球队多是找感觉，没啥好说的。

其他时间主要在看看一些在线课程和书。

之前发过一条朋友圈：

一开始只是想要写的快一点，于是有了React，后面又想跟上潮流，于是有了webpack、eslint，内容多一点于是有了Router和flux，后来发现还有一个Redux好像更装逼，于是噼里啪啦又加加加………

大概也说明了自己在研究的一条技术栈，其实也就是：

React + React-Router + Redux + Webpack + ES6

其实我还是挺喜欢写写代码的，不然真心觉得对不起这么贵的键盘，想来也是划算，千把块钱买个键盘大约能保持个两三年的打字的热情，千把块钱扔健身房里大概就能推个二十公斤。

其实React去年就已经接触到，作为一个View层真的很方便，而且我有点愚钝，其实也因为涉及到项目规模太小，至今没能体会到AngularJS里面双向绑定出现的性能问题，不过当时赶时髦，还是研究了一段时间。对于React我唯一的感觉就是不如AngularJS里面的directive来的方便。打个比方，我想要做一个tabs，直接把ng的directive放在ul上就可以了，在React里面还是定义一两个组件才能完成，虽然核心的代码差不多，但是还是觉得略有多余。不过话又说回来，ng里面那一大堆link啊compile确实挺烦。

后面为了管理数据，我从Flux切换到了Redux，还有一大堆中间件，特别对于中间件，到目前为止还搞得不是很清楚。最近做了一个很蠢的ftp的文件管理的应用，功能很傻，登录进去，读出ftp文件列表，文件夹可以继续点进去，文件可以下载（批量下载还没有尝试），在当前目录下可以实现批量文件上传。一开始想要通过浏览器的location来管理cwd，后来还是放弃了，自己写了cwd的reducer，手动来管理前进后退。

还有一个觉得挺有意思的就是webpack-dev-server的proxy功能。说来也是丢人，感觉人家都在搞什么前后端分离啥的，我也没有那么高级的追求，就想着写代码时候，tomcat上面跑一个后台，webpack再跑一个前台，真方便。没有用http-proxy是因为今后可能还是主要用java来写后台，node上面就没有特别花心思。然后发现前面说到的proxy功能正好可以满足我想要的。折腾了好久，终于搞明白怎么弄，之前我一直傻不拉几的在webpack里面设置，有一点错误。而且http-proxy在转的时候，如果通过同一个server.js就会发现你其实还是在不断地重新webpack，还不如跑一个node后台，另外一个文件专门跑一个webpack-dev-server，这样重启node后台的时候并不会影响到前台，会方便很多。但是我在这方面上做的还是比较浅，如果说错了请各位指导。

最后一个就是ftp的中文编码问题，因为ftp用的是iso-8859-1，java上面用setControlEncoding可以解决大部分的问题。然而在node上似乎大部分的包都没有考虑中文问题，ftp这个包里面都用了binary，读出来可以解码，但是搞了变天没法传中文进去。后来发现jsftp可以在ftp.raw的namespace下发ftp命令，这样就是可以通过ftp.raw.opts('utf8 on', callback)来传中文，相当方便，感觉在node上没有找到其他更好的方法，如果有大牛知道，务必请指点我一下。

说来，过不了几个月就要找工作了，去本专业还是试一试当个初级码农，略有困惑，求个醍醐灌顶？请拍砖。

概述

Array对象用于在单个的变量中存储多个值。

创建

• new Array() 返回一个空数组，length字段为0
• new Array(size) 返回一个非空数组，其元素为size个undifined
• new Array(ele0,ele1,ele2,...,elen)返回一个非空数组，其元素为ele0,ele1,ele2,...,elen
• Array() 将其作为函数调用时，效果与使用new运算符将其当做构造函数来调用时的效果一样
• [ele0,ele1,ele2,...,elen] 当然这样用是最常用的

属性

• constructor 返回对创建次对象的数组函数的引用
• length 设置或返回数组中元素的数目
• prototype 向Array对象添加属性和方法

其中，值得注意的是length属性，不仅可以取得当前Array对象中元素的数目，也可以设置当前Array对象可以容纳元素的数目，如果设置其length值小于当前的对象的元素数目，则会删去超出长度的元素。

1
2
3
4
5
6
7

let arr = new Arrary(1,2,3);
console.log(arr.length, arr);
arr.length = 2;
console.log(arr.length, arr);
//2 [1, 2]
arr.length = -1;
//invalid array length

方法

主要分为3类：

• 数组操作
• 数组递归
• 数组查找
• 数组遍历

数组操作

数组递归

数组查找

数组遍历

前言

重头学js吧，按照winter的说法学呗，全部打印出来，一个一个去学，去研究。希望这一次的js学习笔记能够坚持下去，有空就写一篇。

概述

在JavaScript中String对象用于处理字符串文本。

创建

1
2

new String(s);
String(s);

其中，参数s可以是原始字符串值，也可以是一个String对象。

• 当String()和new一起作为构造函数使用时，它返回一个新创建的String对象。
• 当单独调用String()时，它将s转化成原始的字符串，并返回转换后的值。

属性

• constructor: 对创建该对象的函数的引用
• length: 字符串的长度
• prototype: 原型，可以像String对象添加属性和方法

方法

主要分为3类：

• HTML标签类
• 字符串操作
• 字符串查找

HTML标签类

个人感觉没啥用，毕竟现在都要用css来做样式了。

字符串操作

主要实现字符串的大小写转化、拆分、连接等方法。

值得注意的是slice()、substr()、substring()都是用来实现字符串的拆分，他们的区别主要在方法的对第二参数、负参数和第二参数小于第一参数的理解上。

• slice()和substring()的第二个参数表示结束位置，substr()表示子串长度。
• 第一参数为负时，slice()和substr()表示从字符串尾开始计算位置，substring()视为0；第二参数为负时，slice()表示从字符串尾开始计算位置，substr()认为截取长度为0，返回空字符串，substring()视为0。
• 第一参数大于第二参数时，slice()结算为正值后，若开始位置在结束位置后返回空串，其他正常，substring()交换参数进行拆分。

总的来说，slice()和substr()思想类似，功能区别在第二参数，substring()对负值的理解比较差。

字符串查找

实现了接受一个正则表达式或一个位置，对字符串进行查找的方法。

值得注意的是match()返回的是匹配的值的数组，search()返回的是匹配的值的位置。

最近一直在研究React，在了解完React的一些写法和Flux构建之后，自然开始想要让自己的代码更加模块化一点，或者说组件化一点。我希望自己今后的目录应该是图1这个样子。

图中项目采用了Flux构架，因此会有actions|stores|utils，并且不同Router会映射到不同pages，而体现组件化的就是components文件夹，其结构如图2所示。

可以看到里面包含两个组件，每个组件又包含了不同逻辑、视图。我觉得这样来进行应用的编写更能够凸显图3中对于组件化的定义。

这样一来就需要采用一些比较自动化的构建工作流，既然采用了React，那么就必然绕不开webpack，而就在前一年，gulp又那么火，所以我这里主要有两种情况，分别由于我不同的目的。

##webapck
关于webpack的介绍如下：

Webpack是一个前端资源加载/打包工具，只需要相对简单的配置就可以提供前端工程化需要的各种功能，并且如果有需要它还可以被整合到其他比如 Grunt / Gulp 的工作流。

我的配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var indexPath = path.resolve(__dirname, 'src/index.js');
var outputPath = path.resolve(__dirname, 'public');
module.exports = {
  entry: [
    'webpack/hot/dev-server',
    indexPath
  ],
  output: {
    path: outputPath,
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  'display-error-details': true,
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015,presets[]=stage-0']
      },
      {
        test: /.less$/,
        loader: ExtractTextPlugin.extract('css!less')
      },
      {
        test: /\.(jpg|png|mp3|svg)$/,
        loaders: ['file?name=assets/[name].[ext]']
      }
    ]
  },
  plugins: [
    // new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin("commons", "commons.js"),
    new webpack.ProvidePlugin({
      'React': path.resolve(__dirname, "node_modules/react/react"),
      'ReactDOM': path.resolve(__dirname, "node_modules/react-dom/dist/react-dom"),
      "jQuery": path.resolve(__dirname, "node_modules/jquery/dist/jquery"),
      "$": path.resolve(__dirname, "node_modules/jquery/dist/jquery")
    }),
    new ExtractTextPlugin("[name].css?[hash]-[chunkhash]", {
      allChunks: true,
      disable: false
    }),
    new HtmlWebpackPlugin({
      title: 'React Blog in ES6',
      template: './src/index.html'
    })
  ]
};

首先是在entry上定义入口文件，然后再output定义生成文件，loaders里面是对于不同的文件的采用的loader。

对于React需要用到babel来进行转化，并且preset应该有react、es2015和stage-0。这样就可以在文件中按照es6的写法来写react了，会方便很多，因为es6提供了很多新的语法糖，还是挺适合React的。

另外，对于不同styles可以采用不同loader，比如我采用的less那么就需要使用css和less的loader。对于一些静态文件，比如图片、svg等，则需要用到fileloader。

最后就是一些插件，CommonsChunkPlugin用来将一些反复依赖的到第三方插件全部打包到一个common文件中，并且可以别名的形式出现，这样就不需要再文件中反复出现import React from 'react'这样的引用，顺便可以在eslint中将这些规则关闭，可以节省一定的代码量。ExtractTextPlugin和HtmlWebpackPlugin这两个插件可以生成html文件并且自动引用样式文件。

这样一来，在package.json文件中，只要在scripts就可以这样写：

"scripts": {
    "build": "webpack --progress --colors --watch",
    "dev": "webpack-dev-server --progress --hot --inline --colors --content-base build",
    "dist": "NODE_ENV=production webpack --progress --colors"
}

就可以很方便地进行热开发已经最后的部署等操作。

##基本方法

• RegExp
  主要有test()和exec()两个方法。
  • test()：如果给定字符串匹配这个模式，返回true，反之亦然。
  • exec()：返回一个数组，数组中的第一个条目是第一个匹配；其他是反向引用。
• String
  主要有match()和search()，另外replace()和split()也支持正则作为传入参数。
  • match()：返回一个包含字符串中所有匹配的数组，其他是反向引用。
  • search()：返回字符串中出现的第一个匹配的位置，然而全局匹配正则表达式在search()时并不起作用。
  • replace()和split()都支持正则的匹配。

##简单模式

• 元字符
  有(、[、{、\、^、$、|、)、?、*、+、.。需要用\进行转义，在非字面量表示的时候所有的反斜杠要用两个反斜杠来替换。

• 简单类
  /[bcf]at/匹配所有的bat、cat和fat。

• 负向类
  /[^bc]at/匹配所有含有at但是不以b和c开头的字符串。

• 范围类
  [a-z]表示所有小写字母，[num[1-4]]这样的形式很方便。

• 组合类
  是有集中其他的类组合而成的字符类。

• 量词

  • {n,m}表示至少n次，至多m次
  • ?等价于{0,1}
  • *等价于{0,}
  • +等价于{1,}
  • {n}等价于{n,n}

##复杂模式
通过分组、反向引用、前瞻等一些强大的正则表达式功能，可以方便地使用正则表达式进行复杂的字符串操作。

• 分组

  var str = "dogdog";
  var regDog = /(dog)+/;
  str.match(regDog);
  

  可以匹配字符串中多次出现的dog。并且，分组可以嵌套，通过嵌套和不同的组合可以实现复杂的分组。

• 反向引用

在表达式计算完成后，每个分组都被存放在一个特殊的地方以备将来使用，这些存储在分组中的特殊值，我们称之为反向引用。反向引用是按照从左到右的左括号字符的顺序进行创建和编号的。
例如，(A?(B?(C?)))将包含三个反向引用：(A?(B?(C?)))、(B?(C?))、(C?)。

反向引用主要有三种使用方式。

1. reg.$1

   var str = "dagdbgdcg"
   var reg = /(dag)(dbg)(dcg)/;
   str.match(reg);
   console.log(RegExp.$1);
   

2. /(reg)\1/

   var str = "dagdagdog"
   var reg = /(dag)\1/;
   str.match(reg);
   console.log(RegExp.$1);
   

3. replace(reg,”$2 $1”)

   var str = "1234 2345"
   var reg = /(\d{4}) (\1)/;
   var newStr = str.replace(reg, "$2 $1");
   

这里需要注意的是对于2种的\1的使用，是匹配出来的值，而不是匹配方式。另外，在左括号后加上?:可以创建非捕获分组，即可不存储反向引用的结果。

• 候选
  |是正则表达式的候选操作符。

  var str = "蛤蛤和长者";
  var reg = /蛤蛤|长者/g;
  str = str.replace(reg,"*****");
  
  var str = "蛤蛤和长者";
  var reg = /蛤蛤|长者/g;
  //这里的sMatch是reg匹配到的结果数组中的元素
  str = str.replace(reg,function(sMatch){return sMatch.replace(/./g,"*")});
  

• 前瞻

  • 正向前瞻bed(?=room)表示查询接下来出现的是括号中的内容
  • 负向前瞻room(?！red)表示查询接下来出现的不是括号中的内容。
  • 并且，前瞻不会出现在反向引用的结果中，分组不会考虑前瞻的存在。

• 边界
  ^:行开头
  $:行结尾
  \b:单词边界
  \B:非单词的边界

• 多行模式
  /m表示多行模式，多行模式会改变^和$的边界行为，是的\n前后也为边界。

##对象冒充

原理：构造函数使用this关键字给所有属性和方法赋值（采用类声明的构造函数方式）。以为构造函数只是一个函数，可以使ClassA的构造函数成为ClassB的方法，然后调用它。ClassB就会收到ClassA的构造函数中定义的属性和方法。这里，其实是把ClassA作为常规函数来建立继承机制，而不是作为构造函数。需要注意的是，所有的新属性和新方法都必须在删除了新方法之后定义，否则，新属性和新方法可能会被继承到的属性和方法覆盖。

并且，对象冒充可以支持多重继承，同样的，如果继承的不同类中存在相同的方法和属性，也会存在前者被后者被覆盖的问题。

随着对象冒充的流行，ECMAScript为Function对象加入了call()和apply()。

• call()
call()的第一个参数是obj，说明fun.call(obj,arg1,arg2)的fun()中的this关键字的值是obj，这样就可以将call()和对象冒充结合起来，将对象冒充的中赋值、调用和删除替换掉。

  function ClassB(sColor, sName) {
      //this.newMethod = ClassA;
      //this.newMethod(sColor);
      //delete this.newMethod;
      ClassA.call(ClassB,sColor);
  
      this.name = sName;
      this.sayName = function()｛
          console.log(this.name);
      ｝;
  }
  

• apply()
apply()方法有两个参数，用作this的对象和要传递给函数的参数的数组。

##原型链

原理：prototype对象是一个模板，要实例化的对象都是以这个模板为基础，prototype对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制。

function ClassA() {
};

ClassA.prototype.color = "red";

function ClassB() {
};

**ClassB.prototype = new ClassA();**

与对象冒充相似，子类的所有属性和方法必须出现在prototype属性被赋值后，因为prototype属性被替换成了新对象。
原型链的弊端是不支持多重继承，prototype会被覆盖。

混合方式

创建类的最好方式是用构造函数方式定义属性，用原型方式定义方法，同样，对于继承，也是用对象冒充继承构造函数属性，用原型链继承函数的方法。

##定义

• 对象：属性的无序结合，每个属性存放一个原始值、对象或者函数。每个对象由类定义，定义了对象的接口（开发者访问的属性和方法），内部工作（使属性和方法发挥作用的代码）。
• 实例：程序使用类创建对象时，生成的对象叫做类的实例。每个实例的行为相同，但是实例处理一组独立的数据。创建过程叫做实例化。
• ECMA-262类：类是对象的配方。
• ECMA-262对象：对象由特性（attribute）构成，特性可以是原始值，也可以是引用值，如果特性存放的是函数，它将被看作对象的方法，否则该特性被看错属性。
• 引用类型：通常叫作类。在ECMAScript中，不能访问对象的物理表示，只能访问对象的引用。每次创建对象，存储在变量中的都是该对象的引用，而不是对象本身。

var a = {c:1, b:2}
c = a
c.c=2
c
Object {c: 2, b: 2}
a
Object {c: 2, b: 2}

所以在对于对象的操作，比如复制中，会遇到深度复制这样的问题，要确保复制的不是引用。

##对象的类型

###本地对象

• Array
  主要方法有：

1. join、split、slice、pop、shift、push，Array对象的动作像一个栈，是后进先出的。通过shift、push可以使Array对象有队列一样的动作。
2. sort、reverse与数组项的顺序有关。reverse使数组倒序，sort根据数组项的值升序为他们排序。sort是将所有值转化为字符串，然后根据自负代码比较数组项，可以通过sort（obj,fun(){}）设置排序规则来进行排序。
3. splice用来把数据项插入数组中部，可以用来：删除arr.splice(0,2)、插入arr.splice(2,0,"insertContent")、替换arr.splice(2,1,"replaceContent")。

• Date
  Date类对UTC日期和时间有很强的依赖性，需要考虑时区、夏时令等情况。并且覆盖了valueOf、toString方法。

###内置对象

定义：由ECMAScript实现提供的、独立于宿主环境的所有对象，在ECMAScript程序开始执行时出现。ECMA-262定义了两个内置对象，即Global和Math。

• Global

Global实际上根本不存在。Global几个比较重要的方法有encodeURI系列，用来处理URI；eval用来吧参数解释为真正的ECMAScript语句，操作Json时候用到过。
另外，在ECMAScript中不存在独立的函数，所有函数都必须是某个对象的方法。

###宿主对象

定义：所有非本地对象都是宿主对象。

• this
  this用在对象的方法中，关键字this总是只想调用该方法的对象。通过this可以在任意多个地方重用同一个函数。

##定义类或对象

###工厂方式

function createCar() {
    var oTempCar = new Object;
    oTempCar.color = "red";
    oTempCar.showColor = function() {
        console.log(this.color)
    };

    return oTempCar;
}

var oCar1 = createCar();

这样可以通过调用函数来创建新对象，但是每个对象都会有一个版本的showColor，因此需要通过原型方式来进行定义类。

###构造函数方式

function Car() {
    this.color = "red";
    this.showColor = function() {
        console.log(this.color)
    };

}

var oCar1 = new Car();

同样地，也会重复生成函数。

###原型方式

function Car() {
    this.prototype.color = "red";
    this.prototype.showColor = function() {
        console.log(this.color)
    };

}

var oCar1 = new Car();

在调用new Car()时，原型的所有属性都被赋予也要创建的对象，也就是说所有的Car实例存放的都是指向showColor（）的指针。然而，由于都是指向同一个位置，如果改变某个实例的属性，其他所有实例的该属性都会改变。因此需要混合构造函数/原型方式来进行创建对象。

###混合方式

function Car() {
    this.color = "red";
}
Car.prototype.showColor = function() {
    console.log(this.color)
};

##对象修改
通过prototype可以创建新方法，重新定义已有方法。

##代码

写了半天终于把task3功能全部写完，三个功能下来确实发现基础变的好很多，不再依赖其他外部的东西，很多东西理解还是不深入，继续读代码吧。
matlab上面关于配电网重构和台风预警的结合部分迟迟没有动笔，大约这个礼拜开始尝试着把配电网的地理位置坐标做出来吧。

##论文

终于写完了第一篇，交给老板看，看完这周末一定投出去。刚才写到这里为了杀死拖延症花了半个小时终于把论文的标题，作者信息等等全部写好发给了老板。

##生活

该踢球踢球，该锻炼锻炼，媳妇儿终于回大陆了，结束我一年支教，她一年留学的异地，开始一段新的她在家我在学校的异地。

##感想

四月很忙，不过好的事情是终于知道自己想要什么，自己对于科研也有了一定的想法，有了自己的一点理解，在代码方面也算是一点点的入门了。记住那句话：跳出算法，回归物理意义。

##HSA
目前和声算法已经做得比较成熟，小系统和中系统都可以算

##powerflow
潮流主要用了牛拉法，对于牛拉的核心掌握还不是很好，但是牛拉算潮流基本上封装的比较好，在33-bus和69-bus上都验证了有效性。
但是在119-bus上结果不对，而且119-bus系统编号有问题，找了一个没问题的算例，结果更奇葩，不能理解。

##sample system
支持33-bus，69-bus；不支持119-bus。前者都是11.26kV，后者是11kV。

##TODO

1. 台风模型：
   • 台风的影响半径：一般十级100km，也有300km
   • 台风对配网的影响：故障率建模
   • 台风影响范围：确定受影响最严重的台风
2. 论文：
   • 月底或5月初投电网
   • 5月中完成台风模型

#ECMAScript基础

##原始类型

1. 原始类型有Undefined、Null、Bollean、Number和String。
2. typeof用来判断一个值是否在某种类型的范围内，引用类型或者Null返回object，null被认为是对象的占位符。
3. undefined：
   • 声明的对象未初始化
   • 对象未定义：只能对未定义的对象使用typeof，使用其他运算符会报错
   • 函数无明确返回值
4. null用于表示尚未存在的对象。
5. typeof(1)和typeof(NaN)都是number，但isNaN(NaN)与isNaN(1)是不一样的。
6. Number的toString()可以根据不同的基输出结果。
7. String的pasreInt() 可以把字符串中的第一串数字字符转化成数字（0xA会被转化成10），会在第一个无效字符之前停止，同样也有基模式。

##引用类型

1. String可以有indexof()、charAt()、valueOf()、toString()等方法。
2. String的slice()可以传负参数，其表示字符串长度加上负参数值，slice开始位置包含在返回值，终止位置不包含在返回值，从0开始计位置。

##函数

1. js的函数不支持重载，但是可以使用特殊对象arguments，无需指出参数名，就能访问它们。ECMAScript不会验证传递给函数的参数个数是否等于函数定义的参数个数，其中，遗漏的函数以undefined传递给函数，多余的参数被忽略，因此可以通过arguments来简易模拟函数重载。
   function a() {}等价于var a = function(){}。
2. 函数实际上是功能完整的对象。Function类可以表示开发者定义的任何函数。函数名实际上是函数对象的引用值，函数可以作为参数传递给另外一个函数。

3. 闭包

   闭包是指函数能使用函数外定义的变量。

<!--lang:javascript--> 
var iBaseNum = 10;
function addNumbers(iNum1, iNum2) {
    //闭包
    function doAddition (){
        return iNum1 + iNum2 + iBaseNum;
    }
return doAddition();
} 

闭包可以用来读取局部变量。

function f1(){
    var n=999;
    function f2(){
       alert(n); // 999
    }
}

function f1(){
    var n=999;
    function f2(){
        alert(n); 
    }
    return f2;//返回函数的引用
}
var result=f1();// result =  f2
result(); // 999

闭包主要用来读取函数内部的变量或者让这些变量的值始终保持在内存中。个人认为，闭包的关键在于返回了一个子函数，子函数可以调用父函数的变量，从而可以再外部调用到父函数内部的变量。这里的子函数如果是定义为全局变量，则直接通过调用子函数来实现访问内部变量。