Name	Name	Last commit message	Last commit date
parent directory ..
README.md	README.md
index.js	index.js
nglogparser.js	nglogparser.js

Javascript 学习笔记

主要学习资料：《网道：javascript 教程》

第一步

打开谷歌浏览器，按下 Option + Command + J（Mac）或者 Ctrl + Shift + J（Windows / Linux）进入控制台。

Enter 运行代码；Shift + Enter 换行。

js 基本语法

var a = 1;
var b;
b = "abc";

// 合法标志符
arg0
_tmp
$elem

// 注释
// 行注释
/*
块注释
*/

// 代码块
{

}

//  if
if (a == 1) {
  console.log("a == 1");
} else {
  console.log("a != 1");
}

// switch
switch (a) {
  case 1:
    // ...
    break;
  case 2:
    // ...
    break;
  default:
    // ...
}

// 三元运算符
var even = (n % 2 === 0) ? true : false;

// 循环
while (a > 0) {
  // ...
}

var x = 3;
for (var i = 0; i < x; i++) {
  console.log(i)
}

do
  // ...
while (true);

// break and continue

// label
foo: {
  console.log(1);
  break foo;
  console.log(2);
}
console.log(3)

数据类型

简介

数值 number
字符串 string
布尔值 boolean
未定义 undefined
空值 null
对象 object（值的集合）

前三者合称为原始类型，不能再细分。对象成为合成类型，是基于原始类型构建的。未定义与空值一般看作两个特殊值。

对象一般可以分为 3 个子类型：

狭义的对象
数组
函数

JS 有 3 种方法确定值的类型：

typeof - 运算符
instanceof - 运算符
Object.prototype.toString - 方法

> typeof 123
'number'
> typeof "123"
'string'
> typeof false
'boolean'
> typeof function f() {}
'function'
> typeof undefined
'undefined'
> typeof v
'undefined'
> typeof null // 历史原因造成的
'object'
> typeof {}
'object'
> typeof []
'object'

> var o = {}
undefined
> var a = []
undefined
> o instanceof Array
false
> a instanceof Array
true

null, undefined 和布尔值详解：https://wangdoc.com/javascript/types/null-undefined-boolean.html.

数值

转换和测试方法。

parseInt()
parseFloat()
isNaN()
isFinite()

字符串

单双引号等同。

由于 HTML 语言的属性值使用双引号，所以很多项目约定 JavaScript 语言的字符串只使用单引号，本教程遵守这个约定。当然，只使用双引号也完全可以。重要的是坚持使用一种风格，不要一会使用单引号表示字符串，一会又使用双引号表示。

连接运算符（+）可以连接多个单行字符串。

字符串可以被视为字符数组，因此可以使用数组的方括号运算符，用来返回某个位置的字符（位置编号从0开始）。

如果方括号中的数字超过字符串的长度，或者方括号中根本不是数字，则返回 undefined。

> var s = 'hello';
undefined
> s[0]
'h'
> s[1]
'e'
> 
> s[-1]
undefined
> s.length
5
> '𝌆'.length
2

上面代码中，JavaScript 认为𝌆的长度为 2，而不是 1。

Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理。

JavaScript 原生提供两个 Base64 相关的方法。

btoa()：任意值转为 Base64 编码
atob()：Base64 编码转为原来的值

// 无法在 node 中直接使用
var string = 'Hello World!';
btoa(string) // "SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh') // "Hello World!"

对象

js 中对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。

在其他编程语言中，这种对象概念常被称为字典。

对象的所有键名都是字符串（ES6 又引入了 Symbol 值也可以作为键名），所以加不加引号都可以。

> var obj1 = {a:1, b:2}
undefined
> obj1
{ a: 1, b: 2 }
> var obj2 = {'a':1, 'b':2}
undefined
> obj2
{ a: 1, b: 2 }

对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用。

> var obj = {
... printHello: function(x) {
..... console.log("Hello" + x)
..... }
... }
undefined
> obj.printHello('world')
Helloworld

如果不同的变量名指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址。修改其中一个变量，会影响到其他所有变量。

但是，这种引用只局限于对象，如果两个变量指向同一个原始类型的值。那么，变量这时都是值的拷贝。

读取对象的属性，有两种方法，一种是使用点运算符，还有一种是使用方括号运算符。

> obj1.a
1
> obj1['a']
1

查看属性：

> Object.keys(obj1)
[ 'a', 'b' ]

删除：

> delete obj1.a
true
> obj1
{ b: 2 }

注意，删除一个不存在的属性，delete 不报错，而且返回 true。

用 in 运算符判断属性存在：

> 'a' in obj1
false
> 'b' in obj1
true

in 运算符的一个问题是，它不能识别哪些属性是对象自身的，哪些属性是继承的。这时候可以使用 hasOwnProperty 方法。

> 'toString' in obj1
true
> obj1.hasOwnProperty('toString')
false

for...in 循环用来遍历一个对象的全部属性。

> var obj = {a: 1, b:2, c:3};
undefined
> for (var i in obj) {
... console.log('key: ', i);
... console.log('value: ', obj[i]);
... }
key:  a
value:  1
key:  b
value:  2
key:  c
value:  3

它遍历的是对象所有可遍历（enumerable）的属性（包括继承的），会跳过不可遍历的属性。

with 语句提供了修改对象的方便操作，类似于 R 中的 with。

var obj = {
  p1: 1,
  p2: 2,
};
with (obj) {
  p1 = 4;
  p2 = 5;
}
// 等同于
obj.p1 = 4;
obj.p2 = 5;

函数

函数是一段可以反复调用的代码块，有以下 3 种声明方式。

function 命令。

function print(s) {
  consolo.log(s);
}

函数表达式（注意结尾处的分号）

var print = function(s) {
  console.log(a);
};

Function 构造函数（最后一个参数被作为函数体）

var print = new Function(
  's',
  'console.log(s)'
);

JavaScript 语言将函数看作一种值，与其它值（数值、字符串、布尔值等等）地位相同。凡是可以使用值的地方，就能使用函数。

函数有以下一些属性：

name - 函数名
length - 函数预期传入参数的个数
toString() 方法返回字符串源码（包括注释）

作用域（scope）指的是变量存在的范围。目前新版 js 有 3 种：

全局作用域
函数作用域
块级作用域（ES 6 新增）

注意 js 中的变量提升，声明语句在实际运行时会被提升到作用域的顶部。

函数参数不是必需的，JavaScript 允许省略参数。

省略的参数的值就变为 undefined。需要注意的是，函数的 length 属性与实际传入的参数个数无关，只反映函数预期传入的参数个数。但是，没有办法只省略靠前的参数，而保留靠后的参数。如果一定要省略靠前的参数，只有显式传入 undefined。

> function echo(a, b) {
... return a;
... }
undefined
> echo(1, 2, 3)
1
> echo(1)
1
> echo()
undefined
> echo(undefined, 1)
undefined

如果有同名的参数，则取最后出现的那个值。

函数传参方式：

函数参数如果是原始类型的值（数值、字符串、布尔值），传递方式是传值传递（passes by value）。
如果函数参数是复合类型的值（数组、对象、其他函数），传递方式是传址传递（pass by reference）。

arguments 对象：由于 JavaScript 允许函数有不定数目的参数，所以需要一种机制，可以在函数体内部读取所有参数。这就是 arguments 对象的由来。

arguments 对象包含了函数运行时的所有参数，arguments[0] 就是第一个参数，arguments[1] 就是第二个参数，以此类推。这个对象只有在函数体内部，才可以使用。

var f = function (one) {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
}

f(1, 2, 3)
// 1
// 2
// 3

正常模式下，`arguments 对象可以在运行时修改。

var f = function(a, b) {
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 5

严格模式下，arguments 对象与函数参数不具有联动关系。也就是说，修改 arguments 对象不会影响到实际的函数参数。

var f = function(a, b) {
  'use strict'; // 开启严格模式
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 2

通过 arguments 对象 length 属性，可以判断函数调用时到底带几个参数。

需要注意的是，虽然 arguments 很像数组，但它是一个对象。

如果要让 arguments 对象使用数组方法，真正的解决方法是将 arguments 转为真正的数组。下面是两种常用的转换方法：slice 方法和逐一填入新数组。

var args = Array.prototype.slice.call(arguments);

// 或者
var args = [];
for (var i = 0; i < arguments.length; i++) {
  args.push(arguments[i]);
}

arguments 对象带有一个 callee 属性，返回它所对应的原函数。

var f = function () {
  console.log(arguments.callee === f);
}

f() // true

函数闭包

正常情况下，函数外部无法读取函数内部声明的变量。

function f1() {
  var n = 999;
}

console.log(n)
// Uncaught ReferenceError: n is not defined(

如果出于种种原因，需要得到函数内的局部变量。正常情况下，这是办不到的，只有通过变通方法才能实现。那就是在函数的内部，再定义一个函数。

function f1() {
  var n = 999;
  function f2() {
　　console.log(n); // 999
  }
}

上面代码中，函数 f2 就在函数 f1 内部，这时 f1 内部的所有局部变量，对 f2 都是可见的。但是反过来就不行，f2 内部的局部变量，对 f1 就是不可见的。

那么只要把 f2 作为返回值，我们不就可以在 f1 外部读取它的内部变量了吗！

function f1() {
  var n = 999;
  function f2() {
    console.log(n);
  }
  return f2;
}

var result = f1();
result(); // 999

闭包就是函数 f2，即能够读取其他函数内部变量的函数。由于在 JavaScript 语言中，只有函数内部的子函数才能读取内部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包最大的特点，就是它可以“记住”诞生的环境，比如 f2 记住了它诞生的环境 f1，所以从 f2 可以得到 f1 的内部变量。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的最大用处有两个

一个是可以读取外层函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。
闭包的另一个用处，是封装对象的私有属性和私有方法。

function createIncrementor(start) {
  return function () {
    return start++;
  };
}

var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7

function Person(name) {
  var _age;
  function setAge(n) {
    _age = n;
  }
  function getAge() {
    return _age;
  }

  return {
    name: name,
    getAge: getAge,
    setAge: setAge
  };
}

var p1 = Person('张三');
p1.setAge(25);
p1.getAge() // 25

注意，外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的内部变量，所以内存消耗很大。因此不能滥用闭包，否则会造成网页的性能问题。

eval 命令

eval命令接受一个字符串作为参数，并将这个字符串当作语句执行。

eval('var a = 1;');
a // 1

eval 没有自己的作用域，都在当前作用域内执行，因此可能会修改当前作用域的变量的值，造成安全问题。

为了防止这种风险，JavaScript 规定，如果使用严格模式，eval 内部声明的变量，不会影响到外部作用域。

数组

数组（array）是按次序排列的一组值。

electron 使用

创建项目文件夹并安装 electron

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron

配置淘宝镜像：

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

应用打包和分发

# 应用 Electron forge
npx @electron-forge/cli import
# 创建分发版本，结果在 out 目录下
npm run make

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

js

js

README.md

Javascript 学习笔记

第一步

js 基本语法

数据类型

简介

数值

字符串

对象

函数

函数闭包

eval 命令

数组

electron 使用

创建项目文件夹并安装 electron

应用打包和分发

Files

js

Directory actions

More options

Directory actions

More options

Latest commit

History

js

Folders and files

parent directory

README.md

Javascript 学习笔记

第一步

js 基本语法

数据类型

简介

数值

字符串

对象

函数

函数闭包

eval 命令

数组

electron 使用

创建项目文件夹并安装 electron

应用打包和分发