js总结

20170308

数据类型和变量

数据类型 (共有六种)

undefined null number string boolean object

简单数据类型

undefined null number string boolean

复杂数据类型

object

typeof 检测结果可以是

undefined number object string boolean function

==会自动转换数据类型 ===则不会
例如:

alert(undefined == null)  // ture;

var a = 1,
      b = "1";
alert(a == b)  //true

undefined的意思是变量未定义或者函数参数找不到值返回的值
null 是一个空对象指针
alert(undefined == null) // true
但是也有特殊的,例如

  NaN == NaN  // false
  NaN === NaN  //false

NaN(not a number)跟任何一个值不相等,包括其本身,唯一判断的方法是isNaN()

isNaN(NaN) // true

字符串

方法 描述
concact() 连接字符串
toString() 转换成字符串
match() 匹配字符串指定的值或者与正则匹配的值
replace(a,b) 替换字符串或者正则表达式的值a为正则表达式或者字符串,b为要替换的内容
charAt(index) 返回指定位置字符串的值
slice(a,b) 返回a到b位置的字符串
subString(a,b) 截取索引a到b但是不包括b
split() 将字符串分割成数组,同join()相反
toUpperCase() 将小写字母转成大写
toLowerCase() 将大写字母转成小写

ES6新增内容

多行字符串

console.log(`hello
  world
`)   /*  hello
           word*/

字符串连接

var name = 'jack',
      age = '20',
      message = `你好,${jack},你今年${age}岁了`;
console.log(message)  //你好,jack,你今年20岁了'


20170309

数组

方法 描述
indexOf(a) 返回a在数组中的位置
slice(0,2) 截取index为0开始,2结束但不包括2的值
splice(0,2,'a','b') 删除index为0后面两个值并添加a,b
shift() 从数组顶端删除一个元素
unshift() 从数组顶端插入元素
push() 从数组底部插入元素
pop() 从数组底端删除一个元素
sort() 数组按着默认顺序排序
reverse() 数组按相反顺序排序
concact() 合并两个数组
join() 将数组分割成字符串

20170315

Map和Set

Map和Set 都是ES6新增的数据结构,具体参看阮一峰的ES6入门之Map和Set

学习过程中发现Array.from()的用法:

Array.from 函数(数组):
从类似数组的对象或可迭代的对象返回一个数组。

语法

Array.from (arrayLike [ , mapfn [ , thisArg ] ] );

参数

arrayLike
必需。
类似数组的对象或可迭代的对象。

mapfn
可选。要对 arrayLike 中的每个元素调用的映射函数。

thisArg
可选。指定映射函数中的 this 对象。

备注

arrayLike 参数必须是具有编制索引的元素和 length 属性的对象或可迭代对象,如 Set 对象。
对数组中每个元素调用了可选映射函数。

数组迭代方法

every()、some()、filter()、map()、foreach();
evey() 跟 some() 方法类似,不同之处在于,every 所有的都满足选择条件才返回 true,some() 有一项返回
true,其结果则为 true,有点类似真值表“与、或”的关系。filter()是返回符合函数条件返回true的数组。map()是返回每次函数调用结果组成的数组。foreach()没有返回值,对指定的数组运行指定的函数。

var arr = [1,2,3,4,5,6,7];
var result = arr.every(function (item,index,arr) {
  return (item>2);
});
console.log(result);    //false;因为不是所有的值都大于2 


//同样的使用 some 方法则返回 ture;


var result1 = arr.map(function (item,index,arr) {
  return item*2;
})
console.log(result1)    //[2,4,6,8,10,12,14]


var result2 = arr.foreach(function (item,index,arr) {
  return console.log(item);
})
console.log(result2)    //1,2,3,4,5,6,7

20170327

对象

JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。

访问对象属性的点语法跟方括号的区别

var person = {
    name:'gogo'
}

一般来说,访问对象属性时都使用点表示法,这也是很多面向对象语言中通用的语法。不过在javascript中,也可以使用方括号表示法来访问对象的属性。

首先需要说明的是,对象的属性名称就是以字符串来保存的。

例如 person.name = "Nike" 为person定义了一个名为name的属性,name本身是以字符串的形式保存的。
Object.keys(person)验证,结果是["name"],说明name属性确实是以字符串来保存的。

在使用方括号语法时,应该把属性以 字符串的形式 放在方括号中,如:

alert(person["name"]);                    //gogo
alert(person.name);                        //gogo

从功能上说,这两种方法没有任何区别。但方括号语法有一个优点:可以通过变量来访问属性,如:

var propertyName = 'name';
alert(person[propertyName]);  //gogo

如果属性名中包含会导致语法错误的字符,或者属性名是关键字或者保留字,也可以使用方括号表示法**。如:

person['first name'] ='gogo';  //first name包含一个空格

但是!!建议使用点表示法,除非必须使用变量来访问属性

另外,[ ]方括号访问的属性名时,可以在程序运行时创建和修改属性,点操作符就不行。

eg1:

var addr="";
for(i=0;i<4;i++){
    addr += customer["address"+i]+'\n';
}

eg2:

function addStock(portfolio,stockname,shares){
    portfolio[stockname]=shares;
}

循环

for ... in存在弊端。例如一个数组

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    alert(x); // '0', '1', '2', 'name'
}

for ... in循环将把name包括在内,但Arraylength属性却不包括在内。
for ... of循环则完全修复了这些问题,它只循环集合本身的元素:

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    alert(x); // 'A', 'B', 'C'
}

然而,更好的方式是直接使用iterable内置的forEach方法遍历数组,为每个元素调用指定的函数。以Array为例:

var a = ['A', 'B', 'C'];
a.forEach(function (value, index, array) {
    // value: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    alert(element);
});

20170331

函数

  • 函数没有重载
  • 函数声明与函数表达式
  • 函数内部属性
  • 函数属性和方法

函数没有重载

eg:

function addSomeNum (num) {
    return num + 100;
}
function addSomeNum (num) {
    return num + 200;
}
addSomeNum(100); //300

实质上浏览器是这样解析的

var addSomeNum = function (num) {
    return num + 100;
};
addSomeNum = function (num) {
    return num +200;
}
addSomeNum(100); //300

在创建第二个函数的时候,实际上是覆盖了引用第一个函数的变量addSomeNum

函数声明与函数表达式

主要区别在于浏览器在解析时执行顺序不同。

eg:

alert(color('red')); //red
function color (color) {
  return color;
};

在解析过程中,函数声明有一个提升的过程(function declaration hoisting)。函数会被放到源代码的顶部。
所以上述代码在浏览器的实际解析顺序是

function color (color) {
  return color;
};
alert(color('red'));   //red

然而函数表达式的解析并不提升函数本身。

alert(color('red')); //Uncaught TypeError: color is not a function
var color = function  (color) {
   return color;
}

上述代码之所以报错是因为浏览器在解析过程中是先声明再赋值,这里的执行顺序是这样的

var color;
alert(color('red'));  //因为变量还没有被赋值,即被调用,所以这里会报错,下面的赋值过程不再进行

函数的内部属性

主要有两个特殊对象:argumentsthis
arguments是类数组对象,包含传入函数的所有参数。有一个 callee 属性,用来指向拥有这个 arguments对象的函数。这个属性的作用是消除函数名和函数的执行之间的耦合关系,主要是在经典阶乘函数中。需要注意的是 arguments在 严格模式中无效。

this引用的是函数据以执行的环境对象——也就是 this 值。简单来说就是谁调用的函数,this 就指向谁

eg:

var birth = 1992;
var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990   此处this指向obj,因为是obj调用的getAge方法
        var fn = function () {
            return new Date().getFullYear() - this.birth;   //此处this指向window。因为fn函数被当作普通函数调用的。
        } 
        return fn();
    }
};
console.log(obj.getAge());  //25

函数的属性和方法

lengthprototype
length是函数希望接收参数的个数,一般是形参的个数。其中,
arguments.callee.length是形参也就是期望接收的参数的个数。而argument.length是实参也就是实际传入参数的个数。

prototype是指向一个对象的引用,这个对象称为“原型对象”。每一个函数都包含不同的原型对象。当将函数用做构造函数时,新创建的对象会从原型对象上继承属性。

apply()call() 方法
函数调用的两种方法。用途是在特定的作用域中间接调用函数。其中,他们的第一个实参都是要调用函数的母对象(调用函数的上下文,通过this来获得)。比如,要想以o对象的方法调用函数f(),可以写成

f.call(o);
f.apply(o);

每行代码与如下代码相似(假设o对象中没有m方法)

o.m = f;        //将f存储为o的临时方法
o,m();          //调用临时方法,并不传入参数
delete o.m;     //删除临时方法

对于call来说其余参数是要传入待调用函数的值。比如,以对象o的方法调用函数f(),并传入两个参数,可以写成

 f.call(o,1,2)

apply的区别在于把要传入待调用函数的实参全部放到一个数组中

f.apply(o,[1,2])
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,204评论 0 4
  • 变量 JavaScript的变量为弱类型变量,可以用来保存任何类型的数据。 var 可以声明各种类型的数据 在Ja...
    闫子扬阅读 524评论 0 1
  • "公主殿下,您在哪儿,请您快点现身吧。"这已经是雨汐到人类世界的第三天了,但还是没有找到公主…"雨汐?你怎么在这儿...
    奈琳索百晗阅读 293评论 0 0
  • 雅思阅读中的代词 众里寻他千百度,蓦然回首,那人却在灯火阑珊处。——辛弃疾 今天我们也要回首寻“他”,而这个“他”...
    艾达壹读阅读 812评论 1 2
  • 文\丑子 光与暗被揉碎 一眸眸风景 一哞哞风景里 是长长的影 2017.4.2
    贳言阅读 186评论 0 2