map和set
1. map
var map = new Map([['tiger', 100],['cat',12],['dog',13]]);
console.log(map.get('cat')); //获取cat值
console.log(map.set('hello', 14)); //新增值
console.log(map.delete('tiger')); //删除tiger
console.log(map.set('dog',20)); //修改dog的值
console.log(map.has('dog')); //是否存在key: 'dog'
2.set
var set = new Set([1,2,3,3,'3']);
console.log(set);
console.log(set.add('4'));
console.log(set.delete('3'));
console.log(set.has('3'));
console.log(set.clear());
3.iterable类型（Array、Map、Set）
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
console.log(x);
}
for (var x of s) { // 遍历Set
console.log(x);
}
for (var x of m) { // 遍历Map
console.log(x[0] + '=' + x[1]);
}
Array(map和reduce方法)
1.map
由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果：
function pow(x) {
return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
2.reduce
再看reduce的用法。Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
3.filter
filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
4.sort
通常规定，对于两个元素x和y，如果认为x < y，则返回-1，如果认为x == y，则返回0，如果认为x > y，则返回1，这样，排序算法就不用关心具体的比较过程，而是根据比较结果直接排序。
Array的sort()方法默认把所有元素先转换为String再根据ASCII码进行排序
箭头函数
x => x * x
相当于
function (x) {
return x * x;
}
console.log([1,2,3].reduce((x,y) => x*y));
x => ({ foo: x });//返回一个对象
箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。
由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略：
Date
JavaScript的月份范围用整数表示是0~11，0表示一月，1表示二月……
var today = new Date();
if (today.getMonth() === 1 && today.getDate() === 14) {
//2月14号
}
JSON
JSON.stringify(obj, ['name', 'skills'], ' '); //第三个参数控制输出时的样式
JSON.stringify(obj, function(key, val){});
JSON.parse(objStr, function(key, val){});
generator
- 形式上，Generator函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield语句，定义不同的内部状态.
- 调用Generator函数，返回一个遍历器对象，代表Generator函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield语句后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。
class和原型继承
- 原型继承
function inherits(child, parent) {
var F = function() {};
F.prototype = parent.prototype;
child.prototype = new F();
child.prototype.constructor = child;
}
function Student(name) {
this.name = name;
}
Student.prototype.hello = function() {
console.log('hello,', this.name);
};
function PrimaryStudent(obj) {
Student.call(this, obj.name);
this.grade = obj.grade;
}
inherits(PrimaryStudent, Student);
- ES6 class及继承
class Student {
constructor(name) {
this.name = name;
}
hello() {
console.log('hello', this.name);
}
}
class PrimaryStudent extends Student{
constructor(obj) {
super(obj.name);
this.grade = obj.grade;
}
}
浏览器
- window对象不但充当全局作用域，而且表示浏览器窗口。window.innerWidth window.innerHeight可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。
- navgator.userAgent
- screen表示屏幕的信息属性有：
- screen.width：屏幕宽度，以像素为单位；
- screen.height：屏幕高度，以像素为单位；
- screen.colorDepth：返回颜色位数，如8、16、24。
- location对象表示当前页面的URL信息
- document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。document对象还有一个cookie属性，可以获取当前页面的Cookie。
- history对象保存了浏览器的历史记录，这个对象属于历史遗留对象，任何情况，你都不应该使用history这个对象了。
HTML5 fileReader API
<div id="test">
<input type="file" value="获取图片">
</div>
<div id="preview">
</div>
<script>
document.querySelector('#test > input').addEventListener('change', function() {
if(!this.value) {
document.querySelector('#preview').innerHTML = '文件不存在';
return;
}
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
document.querySelector('#preview').innerHTML = '<img src="' + data + '" style="100px;height:100px;"/>';
};
reader.readAsDataURL(file);
});
</script>