JS源码(条件的判定,循环,数组,函数,对象)整理摘录
---
title: JS学习笔记-从条件判断语句到对象创建
date: 2016-04-28 21:31:13
tags: [javascript,front-end]
---
JS学习笔记——整理自《JavaScript高级程序设计》
1)条件的判定
在if,swtich条件判断语句,do-while,while,for三种循环判断语句中会用到条件的判断,其目的是为了判定某种条件的达成与否来控制语句的执行。
e.g.
if(condition) do{} while(condition) for(initialization;condition;post-loop-expression){} switch(expression){
case condition:
break;
default:
break;
}
以上例子中的condition就是条件的判断的语句。condition语句可以是任意表达式,ES会自动将表达式的结果转为布尔值。
另外,switch的expression如写成true,可以在之后的condition中写入表达式,以此可以模仿if的判断行为。
s.e.g.
switch(true){
case (i>):
i++;
}
2)循环
一.do-while语句是一种后测试循环语句,循环体内的代码至少会循环一次。
e.g.
var I =;
do {
i+;
}while(i<);
二.While语句是前测试循环语句,循环体的代码可能一次也不会执行。
e.g.
var I = ;
while (i <) {
i+;
}
三.for语句也是前测试循环语句,但是它具备while所没有的初始化变量和定义循环后要执行代码的能力。for 和 while 的循环功能是一样的,while 做不到for也做不到。
e.g.
var count=;
for(var i=;i<count;i++){
alert(i);
i++;
}
四.for-in 语句用来循环枚举对象的属性。循环会持续到对象的所有属性都被枚举一遍为止。单次循环时会将枚举到的一个属性名赋予in前的变量。
e.g.
for (var proName in window) {
document.write(propName);
}
3)数组
Array是数据的有序列表,数组的每一项可以保存任意类型的数据,而且数组的长度可以随时变化。
创建数组的方法:
1.使用Array 构造函数:
var colors = new Array();
声明了一个拥有20长度的colors数组。
var colors = new Array(“red”,”blue”,”green”);
声明了一个拥有3长度的colors数组,并把三个颜色值写入了数组的前三项。
2.使用数组字面量:
var colors = [“red”,”blue”,”green”];
声明了一个拥有3长度的colors数组,并把三个颜色值写入了数组的前三项。
各种属性值与方法:
.length属性可写入。
instance of Array 可判断对象是否是数组。ES5之后的版本可用.is Array()判断对象是否是数组。
.toString(),toLocalString() 会返回逗号分隔的字符串,其中toLocalString()对每一项数值调用的是toLocalString()方法。
.valueOf() 返回的是数组。
.join()方法可以通过传递的指定的字符来分隔原数组,返回的是分隔后的字符串。
栈方法:
后进先出。
.push()接受任意数量的参数,逐个添加到数组末尾,返回的是修改后数组的长度。
.pop()不接受参数,每次调用pop()都会移除数组的最后一项并作为pop()的值返回。
队列方法:
先进先出。
.shift()移除数组的第一项,并作为值返回,与pop()对应。
.unshift()在数组开头添加任意项,并返回修改后的数组长度,与push()相对应。
重排序方法:
.sort():
能将数组内的各项按顺序重新排序,默认为按照ASCII码进行升序排序。
能接受一个比较函数作为参数,比较函数内的两个参数进行比较:
e.g.
function compare(value1,value2){
if (value1 < value2){
return 1;
}else if (value1 > value2){
Return -1;
}else{
Return 0;
}
}
用这个比较函数返回给.sort()的话,数组会按照数值的从小到大进行排序,将上述的return值互调的话,数组会按照数值的从大到小排序。
.reverse():将数组所有项的顺序取反并返回取反后的数组。
操作方法
.concat():将接受的参数连接在原数组的后面。如果接受的参数是一个数组,将会把数组中的每一项提取后单独加入到原数组中。
.slice():接受一到两个参数,创建一个新的数组,包含从第一个参数为止到第二个参数为止的所有数据项,不包含第二个参数位置的项。如果没有第二个参数,则执行到数组最末尾。
.splice():拼接方法,第一个参数表示起始位置,第二个参数表示要删除的数组项数,之后的参数表示要从第一个参数的位置开始要插入的数据。通过第一第二个参数的变化,可以模拟push,pop,shift,unshift的四种方法达到同样的效果,本身的意义在于在数组中插入数据。
位置方法
.indexOf():查找指定的项,第一个参数表示要查找的数据项,第二个参数表示要开始查询的位置。lastIndexOf()则是从数组的后面开始。
##4)函数
声明式:
function functionName(){ };
表达式:
var functionName = function(){ }
声明式会提升该段代码的优先级,解析器会在所有代码之前读取函数声明。
表达式不会提升优先级,函数名只是指向函数的指针,将函数名赋予一个变量只是赋予了引用类型。
JS中函数没有重载的概念,后定义的函数会覆盖之前的函数。
arguments指代了函数的所有参数,是一个数组,arguments.callee方法指向arguments的调用函数。
.caller方法指向了调用当前函数的函数。
.apply() 和.call()两个方法的作用是让函数在特定的作用域中调用函数。
this指代了当前执行环境的主体。
##5)对象
ES中的对象就是一组数据和功能的集合,创建Object类型的实例并给它添加属性和方法,就可以自定义对象。
除Object外,Array,Date,RegExp,Function,Boolean,Number,String,Global,Math等这些也都是对象。
创建Object的两钟基础方法:
e.g.
var person = new Object();
Person.name = “Peter”;
这种方法是使用new操作符加Object构造函数。
对象字面量:
e.g.
Var person = {
Name : ”Peter”,
Age:29;
};
使用对象字面量法定义对象,不会调用Object的构造函数,更常使用。
为了解决使用同一个接口创建很多对象,产生大量重复代码的问题,出现了后面几种创建对象的方法:
·工厂模式
function createPerson(name,age,job){
var o =new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
解决了创建多个相似对象的问题,但没有解决对象识别的问题。
·构造函数模式
function createPerson(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
构造函数模式可以将它的实例识别为一种特定的类型,解决了对象识别的问题。但是每个方法都要在每个实例上重新创建一边。
·原型模式
通过调用每个函数都有的prototype原型属性来创建共享属性和方法的实例。
function Person(){
}
Person.prototype.name ="Peter";
Person.prototype.age = 20;
Person.prototype.sayName =function(){
alert(this.name);
} var person1 = new Person();
原型模式下,实例中创建的属性会屏蔽原型中的属性,而对原型对象所做的任何修改都能立即从实例上反应出来。
·组合使用构造函数和原型模式
function Person(name,age){
this.name =name;
this.age = age;
}
Person.prototype = {
constructor:Person,
sayName : function(){
alert(this.name);
}
} var person1 = new Person("Peter",20);
实例属性在构造函数中定义,实例共享的属性和方法在原型中定义,这种方法可能最适合。
JS源码(条件的判定,循环,数组,函数,对象)整理摘录的更多相关文章
- Vue.js 源码分析(一) 代码结构
关于Vue vue是一个兴起的前端js库,是一个精简的MVVM.MVVM模式是由经典的软件架构MVC衍生来的,当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然,View ...
- 从template到DOM(Vue.js源码角度看内部运行机制)
写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...
- Underscore.js 源码学习笔记(上)
版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}()); 这样的东西,我们应该知道这是一个 IIFE(立即执行 ...
- underscore.js源码解析(四)
没看过前几篇的可以猛戳这里: underscore.js源码解析(一) underscore.js源码解析(二) underscore.js源码解析(三) underscore.js源码GitHub地 ...
- underscore.js源码解析(三)
最近工作比较忙,做不到每周两篇了,周末赶着写吧,上篇我针对一些方法进行了分析,今天继续. 没看过前两篇的可以猛戳这里: underscore.js源码解析(一) underscore.js源码解析(二 ...
- MVVM大比拼之avalon.js源码精析
简介 avalon是国内 司徒正美 写的MVVM框架,相比同类框架它的特点是: 使用 observe 模式,性能高. 将原始对象用object.defineProperty重写,不需要用户像用knoc ...
- 深入理解unslider.js源码
最近用到了一个挺好用的幻灯片插件,叫做unslider.js,就想看看怎么实现幻灯片功能,就看看源码,顺便自己也学习学习.看完之后收获很多,这里和大家分享一下. unslider.js 源码和使用教程 ...
- 从jquery源码中看类型判断和数组的一些操作
在深入看jquery源码中,大家会发现源码写的相当巧妙.那我今天也通过几个源码中用到的技巧来抛砖引玉,希望大家能共同研究源码之精华,不要囫囵吞枣. 1.将类数组转化成数组 我想大家首先想到的方法是fo ...
- vue.js源码精析
MVVM大比拼之vue.js源码精析 VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多 ...
- Underscore.js 源码学习笔记(下)
上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...
随机推荐
- MySql 日期格式化函数date_format()
mysql> select date_format(now(),'%Y'); +-------------------------+ | date_format(now(),'%Y') | +- ...
- qt的安装和debug
qt-opensource-windows-x86-msvc2013_64_opengl-5.3.0 这个已经包含了qt-creator-opensource-windows-x ...
- ext2元数据结构
概述 本篇博客主要描述ext2文件系统中的各种典型元数据结构,其中包括文件系统级别的元数据,如超级块,块组描述符等,也包括文件级的元数据,如文件目录项,文件inode等. ex ...
- 浅谈 qmake 之 pro、pri、prf、prl文件
尽管每次和cmake对比起来,我们总是说 qmake 简单.功能少.但是qmake仍然是一个非常复杂的东西,我想大多人应该和我一样吧: 不是太清楚CONFIG等变量到底如何起作用的 用过的qmake内 ...
- app 性能优化的那些事
来源:树下的老男孩 链接:http://www.jianshu.com/p/5cf9ac335aec iPhone上面的应用一直都是以流畅的操作体验而著称,但是由于之前开发人员把注意力更多的放在开发功 ...
- 测试你是否和LTC水平一样高
Problem Description 大家提到LTC都佩服的不行,不过,如果竞赛只有这一个题目,我敢保证你和他绝对在一个水平线上!你的任务是:计算方程x^2+y^2+z^2= num的一个正整数解. ...
- HTML笔记1
HTML和css技术 HTML和css技术 html的介绍 网页的基本结构 今天学习的标签 标签属性 浏览器 DW快捷键 相对路径和绝对路径 HTML当中的颜色模式 网页当中常用的图片格式 html的 ...
- Android小项目之五 splash动画效果
------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 按惯例,写在前面的:可能在学习Android的过程中,大家会和我一样,学习过大量的基础知识,很多的知识点 ...
- iOS数据持久化存储:归档
在平时的iOS开发中,我们经常用到的数据持久化存储方式大概主要有:NSUserDefaults(plist),文件,数据库,归档..前三种比较经常用到,第四种归档我个人感觉用的还是比较少的,恰恰因为用 ...
- (搬运)《算法导论》习题解答 Chapter 22.1-1(入度和出度)
(搬运)<算法导论>习题解答 Chapter 22.1-1(入度和出度) 思路:遍历邻接列表即可; 伪代码: for u 属于 Vertex for v属于 Adj[u] outdegre ...