您的位置:首页 > Web前端 > JavaScript

JavaScript 学习随笔(一)

2017-04-29 10:04 309 查看

背景

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 阮一峰
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: