javascript基础集锦

Posted 2020-08-12

本系列主要记录javascript中，新手比较容易搞错的地方。

（1）javascript对象

　　　由于JavaScript的对象是动态类型，你可以自由地给一个对象添加或删除属性：var xiaoming = {name: ‘小明‘};

　　　　xiaoming.age; // undefined

　　　　xiaoming.age = 18; // 新增一个age属性

xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming[‘name‘]; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错
如果我们要检测xiaoming是否拥有某一属性，可以用in操作符：

var xiaoming = {
name: ‘小明‘,
birth: 1990,
school: ‘No.1 Middle School‘,
height: 1.70,
weight: 65,
score: null
};
‘name‘ in xiaoming; // true
‘grade‘ in xiaoming; // false
不过要小心，如果in判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的：

　　　　‘toString‘ in xiaoming; // true
　　　因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以xiaoming也拥有toString属性。
要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：

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

（2）JavaScript把null、undefined、0、NaN和空字符串‘‘视为false，其他值一概视为true。

（3）Map　　

Map是一组键值对的结构，具有极快的查找速度。
举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array：
　　var names = [‘Michael‘, ‘Bob‘, ‘Tracy‘];
　　var scores = [95, 75, 85];
给定一个名字，要查找对应的成绩，就先要在names中找到对应的位置，再从scores取出对应的成绩，Array越长，耗时越长。
如果用Map实现，只需要一个“名字”-“成绩”的对照表，直接根据名字查找成绩，无论这个表有多大，查找速度都不会变慢。用JavaScript写一个Map如下：
　　var m = new Map([[‘Michael‘, 95], [‘Bob‘, 75], [‘Tracy‘, 85]]);
　　m.get(‘Michael‘); // 95
初始化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
由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：
　　var m = new Map();
　　m.set(‘Adam‘, 67);
　　m.set(‘Adam‘, 88);
　　m.get(‘Adam‘); // 88

（4）iterable

　　遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历，但需要你的浏览器支持。用for ... of循环遍历集合，用法如下：

var a = [‘A‘, ‘B‘, ‘C‘];
var s = new Set([‘A‘, ‘B‘, ‘C‘]);
var m = new Map([[1, ‘x‘], [2, ‘y‘], [3, ‘z‘]]);
for (var x of a) { // 遍历Array
alert(x);
}
for (var x of s) { // 遍历Set
alert(x);
}
for (var x of m) { // 遍历Map
alert(x[0] + ‘=‘ + x[1]);
}

（5）for ... of循环和for ... in循环有何区别？

　　for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。
　　当我们手动给Array对象添加了额外的属性后，for ... in循环将带来意想不到的意外效果：
　　　　var a = [‘A‘, ‘B‘, ‘C‘];
　　　　a.name = ‘Hello‘;
　　　　for (var x in a) {
　　　　alert(x); // ‘0‘, ‘1‘, ‘2‘, ‘name‘
　　　　}
　　for ... in循环将把name包括在内，但Array的length属性却不包括在内。
　　for ... of循环则完全修复了这些问题，它只循环集合本身的元素：
　　　　var a = [‘A‘, ‘B‘, ‘C‘];
　　　　a.name = ‘Hello‘;
　　　　for (var x of a) {
　　　　alert(x); ‘A‘, ‘B‘, ‘C‘
　　　　}
　　这就是为什么要引入新的for ... of循环。
　　然而，更好的方式是直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。以Array为例：
　　var a = [‘A‘, ‘B‘, ‘C‘];
　　a.forEach(function (element, index, array) {
　　// element: 指向当前元素的值
　　// index: 指向当前索引
　　// array: 指向Array对象本身
　　alert(element);
　　});
　　注意，forEach()方法是ES5.1标准引入的，你需要测试浏览器是否支持。
　　Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身：
　　　　var s = new Set([‘A‘, ‘B‘, ‘C‘]);
　　　　s.forEach(function (element, sameElement, set) {
　　　　alert(element);
　　});
　　Map的回调函数参数依次为value、key和map本身：
　　　　var m = new Map([[1, ‘x‘], [2, ‘y‘], [3, ‘z‘]]);
　　　　m.forEach(function (value, key, map) {
　　　　alert(value);
　　});
　　如果对某些参数不感兴趣，由于JavaScript的函数调用不要求参数必须一致，因此可以忽略它们。例如，只需要获得Array的element：
　　　　var a = [‘A‘, ‘B‘, ‘C‘];
　　　　a.forEach(function (element) {
　　　　alert(element);
　　});