javaScript特殊知识点归纳

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>