JavaScript 学习随笔

Posted 2022-03-07 彭宇成

背景

1）隔壁项目组一姐妹组织了一个培训，主题是《es6 编程实践 & node.js项目脚手架》。es6 ? es 不是 elasticsearch么？这么快就出 6了，上个月还是 5.2.x 啊
2） 做数据采集这一块不拿下 js 是没法愉快的干活了？直觉告诉我 GrowingIO的‘无埋点’与 神策的‘全埋点’关键技术点在于 js - 唯一一门跨平台、跨浏览器、跨前后端的语言

随笔

今天开始学习javascript,随便在博客上记录一下每天的学习心得，主要参考廖雪峰的个人网站。

1）JavaScript简介
JavaScript是一门解释型的运行在浏览器中的动态语言，由网景公司的Brendan Eich创建于1995年，据说这哥们只花了10天左右的时间就设计出了 JavaScript。
解释型：编译一行语句，执行一行，然后再编译下一行（也可能是一次性编译‘多行’，优化执行速度，编译器）；而像C之类的编译型语言的话，一次性就编译完所要执行的脚本。
动态语言：数据的类型或者对象的属性可以动态改变

var i = 10
undefined
i
10
i = 'hello,javascript'
"hello,javascript"  // i 的类型由 number , 动态变成了 string

var arr = ['nice','day','haha']
undefined
arr.name = 'ivy'   // 这里增加了一个属性 name
"ivy"
arr.length
3

2）对ECMAScript语言标准的一种实现
ECMA（European Computer Manufacturers Association）专门定制一些计算机行业的标准，ECMAScript即是一种语言标准，而 JavaScript则是这个标准的一门实现语言。最新版ECMAScript 6标准（简称ES6）于2015年6月正式发布，讲JavaScript的版本，实际上就是说它实现了ECMAScript标准的哪个版本。
随着Node.js 与 H5技术的广泛应用-越来越多的移动app选择用 H5开发，Node.js的出现使 JavaScript不仅可以开发前端交互逻辑，更可以开发后端应用程序 -用廖老师的话说就是：一个合格的开发人员需要掌握 javascript 与另外一门开发语言。

3）不区分整数与浮点数，统一用 Number类型表示

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

4）两种比较运算符‘==’ 与 ‘===’
==：比较前若待比较的两个数的类型不一致，会先进行类型转换，然后进行再进行比较 - 这个，很多时候，会得到非常诡异的结果
===：不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

5 ) null 与 undefined
null表示一个空的值；undefined表示“未定义” 。大多数情况下用null,undefined仅仅在判断函数参数是否传递的情况下有用。

6）对象
Js的对象是一组由键-值组成的无序集合，用…表示：

var person = 

    name:'ivy',
    age:18,
    interests:['basket','pingpang','football']

键是字符串类型，而值可以是任意类型。

7 ) 函数的申明与内置参数
定义的两种方式：
A ) 一般式

function funName(args)
  console.log('do something!');
  return ''; // 不写return语句，默认返回 'undefined'

B）赋值式

var funName = function(args)
 console.log('do something!');
  return ''
; //这里末尾需要添加一个 ';',标识赋值语句完毕

JavaScript允许使用者传入任意个数的参数而不影响使用，怎么说呢？接收1一个参数的函数，你可以给它传递三个参数：

var abs = function(x)return x>0?x:-x;//声明时接收一个参数
---------------------------------------
abs(-10)
10
abs(-9,'haha','hehe',null,undefined)
9 // 实际多传了 4 个参数
abs()
NaN  // 不传参数，就默认传一个 undefined，返回 NaN
---------------------------------------
abs('123',null,19)
"123"
abs('-123',null,19)
123 // 自动将第一个字符串参数‘-123’转换成 -123 
abs('-qw',null,19)
NaN

JavaScript还免费赠送了一个关键字 arguments - 指向函数传递的参数

var abs = function(x)
    if(arguments.length === 0) // arguments是内置的
        return 0 ;
    
    var x = arguments[0];
    return x>=0?x:-x;

8）闭包的理解

function f1()
    var n = 999;

alert(n)
VM6564:1 Uncaught ReferenceError: n is not defined

如上，在 f1 的外部访问局部变量 n 失败？变量n的作用域仅在函数内部。但，有时候，我们需要在函数外面访问函数内部定义的局部变量，怎么实现呢？通过闭包。闭包就是一个能够读取其他函数内部变量的函数，形式上，闭包常常作为函数的返回值。看一个例子：

function f1()
　　　　var n=999;
　　　　nAdd=function()n+=1 // 这里定义了一个全局变量
　　　　function f2()
　　　　　　alert(n);
　　　　
　　　　return f2;
　　
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

如上，闭包的作用：
A）读取内部变量的值。 f2 就是一个闭包，作为 f1的返回值；调用 result（）成功地在f1 的外部访问了 局部变量 n 。
B ) 让内部变量的值始终保持在内存中，可以实现延迟计算的效果。 一般来讲，作为局部变量， 第二次调用 result（）的结果应该是 999，实际上却是 1000 ？ 作为闭包的 nAdd 让内部变量n的值始终保持在了内存。

function count()
    var arr = [];
    for(var i=1;i<=3;i++)
        arr.push(function()return i*i;)
    
    return arr;

undefined
var results = count();
undefined
results[0]();
16
results[1]();
16
results[2]();
16

看上去上面例子的执行结果应该是 1、4、9，而 实际上都是 16 ？原因就在于返回的函数（即闭包）中引用了变量 i，但它并非立刻执行。等到3个函数都返回时，它们所引用的变量 i 已经变成了4，因此最终结果为16。

9）立即执行的匿名函数
语法 ：( function declare )(actual args )

(function(x)return x*x ;)(3)
9

参考

[1]. JavaScript教程 by 廖雪峰
[2]. 学习JavaScript闭包（Closure） by 阮一峰