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);
});