2018-7-20 js基础学习总结

一，比较运算符

1.== 比较：它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；
=== 比较： 它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
不要使用 == 比较，始终坚持使用 === 比较。
eg:
false == 0; // true
false === 0; // false

2.还有一个例外是NaN：
NaN === NaN; // false
唯一能判断NaN的方法是通过isNaN()函数：
isNaN(NaN); // true

3.注意浮点数的比较：
1 / 3 === (1 - 2 / 3); // false
浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个值：
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

二，js数组

1.数组可以包括任意数据类型。例如：
[1, 2, 3.14, 'Hello', null, true];

2.数组创建有两种方法：
数组用 [ ] 表示，元素之间用,分隔。
eg：arr[1,2,3,4,5,6,7]
通过Array()函数实现：
eg:new Array(1, 2, 3); // 创建了数组[1, 2, 3]

3.数组索引
Array可以通过indexOf()来搜索一个指定的元素的位置
eg:
var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0

4.数组元素的连接增加删除方法 （数组名.方法）
(1)slice()
slice(x，y)的起止参数包括开始索引(x)，不包括结束索引(y)。
如果不给slice()传递任何参数，它就会从头到尾截取所有元素(copy)。
(2)push()和pop()
push()向Array的末尾添加若干元素
pop()则把Array的最后一个元素删除掉
(3)unshift()和shift()
unshift()方法,向Array的头部添加若干元素
shift()方法，把Array的第一个元素删掉
(4)sort()
sort()可以对当前Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认顺序排序。
(5)reverse()
reverse()把整个Array的元素反转。
(6)splice()
splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素。
splice() 三个参数，第一个为操作起始下标，第二个为指定删除元素个数，第三个为将要插入的元素。
eg：

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
 // 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
 
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[ ],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

(7)concat()
concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array
(8)join()
join()方法是一个非常实用的方法，它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串
eg：

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('+'); // 'A+B+C+1+2+3'

三，对象

对象是一组由 键-值 组成的无序集合，例如：

var person = {
    name: 'Bob',
    age: 20,
    city: 'Beijing'
};   //对象person包含三个键值对

对象的键都是字符串类型，值可以是任意数据类型。
其中每个键又称为对象的属性，例如，person的name属性为'Bob',person的age属性为20,
要获取一个对象的属性，我们用 对象变量.属性名 的方式：
eg:
person.name; // 'Bob'
person.age; // 20

四，变量及输出

1.变量在JavaScript中就是用一个变量名表示，变量名是大小写英文、数字、$ 和 _ 的组合，且不能用数字开头。变量名也不能是JavaScript的关键字，如if、while等。

2.用console.log()代替alert()的好处是可以避免弹出烦人的对话框。

五，字符串（string）

1.要把多个字符串连接起来，可以用 + 号连接：

var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
alert(message);

2.字符串长度
字符串名称.length
3.字符串索引
要获取字符串某个指定位置的字符，使用类似Array的下标操作，索引号从0开始：

var s = 'Hello, world!';
s[0]; // 'H'
s[6]; // ' '
s[7]; // 'w'
s[12]; // '!'
s[13]; // undefined 超出范围的索引不会报错，但一律返回undefined

需要特别注意的是，字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果。
eg：
var s = 'Test';
s[0] = 'X';
alert(s); // s仍然为'Test'

3.字符串方法（不改变原有的字符串，返回新的字符串）

(1)toUpperCase()把一个字符串全部变为大写
(2)PtoLowerCase()把一个字符串全部变为小写
(3)indexOf()会搜索指定字符串出现的位置
(4)substring()返回指定索引区间的子串

var s = 'Hello, world';
s.toUpperCase(); // 返回'HELLO,WORLD'

var lower = s.toLowerCase(); // 返回'hello world'并赋值给变量lower
lower; // 'Hello world'  不改变原有的字符串

s.indexOf('world'); // 返回7
s.indexOf('WorlD'); // 没有找到指定的子串，返回-1

s.substring(0, 5); // 从索引0开始到5（不包括5），返回'Hello'
s.substring(7); // 从索引7开始到结束，返回'world'

六，对象

1.js用一个{...}表示一个对象，键-值对 以 xxx: xxx 形式申明，用 , 隔开。注意，最后一个键值对不需要在末尾加 ,。{...}外用 ; 结束。
2.访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用 ' ' 括起来。

var person{
      name:yudangling ,
      age:20，
      friend: ‘小红’  //小红为特殊字符
};
person.name ; //yudangling
person.age;  //20

3.js对象是动态类型，你可以自由地给一个对象添加或删除属性。

var person{
      name:'xiaoyu'
}
perosn.age = 20;//增加属性
delete person.name ; // 删除name属性

4.检测对象是否拥有某一属性，可以用in操作符：

var perosn = {
    name: '小明',
    birth: 1990,
    score: null
};
'name' in person; // true
'grade' in person; // false

用in判断一个属性存在，这个属性不一定是这个对象的，它可能是对象继承得到的

'toString' in person; // true
//因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以person也拥有toString属性。

5.要判断一个属性是否是对象自身拥有的，而不是继承得到的，可以用
hasOwnProperty() 方法：

var person= {
    name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

七，Map

1.Map是一组键值对的结构，具有极快的查找速度。
eg：

//根据名字查找对应的成绩
var m = new Map( [ ['yuling', 95],  ['xiaohong', 75] ,  ['xiaoming', 85] ] );
m.get('yuling'); // 95

2.初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

3.由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

八，set

1.Set和Map类似，也是一组key的集合，但不存储value。在Set中，没有重复的key。
2.要创建一个Set，
可以提供一个Array作为输入：var s1 = new Set(); // 空Set
或者直接创建一个空Set：var s2 = new Set([1, 2, 3]); // 含1, 2, 3

3.重复元素在Set中自动被过滤：
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"},删除了重复的3，且3和字符串'3'是不同的元素

4.通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：

s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}

5.通过delete(key)方法可以删除元素：

var s = new Set([1, 2, 3]);
s.delete(3);
s; // Set {1, 2}

九，for...in , for...of , forEach的区别

1.for ... in循环，它遍历的实际上是对象的属性名称,返回下标。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

2.for ... of循环，它只循环集合本身的元素。

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

3.forEach
Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身：

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});

Map的回调函数参数依次为value、key和map本身：

var m = new Map( [ [1, 'x'] ,  [2, 'y'] ,  [3, 'z'] ] );
m.forEach(function (value, key, map) {
    console.log(value);
});
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,928评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,192评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,468评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,186评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,295评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,374评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,403评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,186评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,610评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,906评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,075评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,755评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,393评论 3赞 320
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,079评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,313评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,934评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,963评论 2赞 351

推荐阅读更多精彩内容

  • 面向对象的用电信息数据交换协议
    国家电网公司企业标准（Q/GDW）- 面向对象的用电信息数据交换协议 - 报批稿：20170802 前言： 排版 ...
    庭说阅读 10,937评论 6赞 13
  • 挺好
    我选择善良，不是我软弱，因为我明白，因果不空，善恶终有报应；我选择宽容，不是我怯懦，因为我明白，宽容了他人，就是宽...
    晓芳吖阅读 223评论 1赞 3
  • 学校中的荷尔蒙
    荷尔蒙躁动的地方无疑只有学校，酒吧，夜店这些地方。但学校又与其他地方不同，今天送妹妹去学校报道，整所校园充斥着单...
    咿不呀阅读 474评论 0赞 0