这篇是作为一个有js，jq基础，主要知识来源于为w3school和日常踩坑，但是不够全面的前端学习者（已经不好意思叫自己初学者了）。笔记作为一些知识点的摘要方便日后翻阅速记。
闭包那部分，面向对象编程那部分没理解透彻，等后面来补坑
JS部分
1.Map与Set：
Map是一组键值对的结构，具有极快的查找速度。具有get、has、delete和set属性。用法如下：
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); m.get('Michael'); // 95
Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，Set中，没有重复的key。通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果。通过delete(key)方法删除元素
2.for...of与for...in的区别：for...of它只循环集合本身的元素。更好的方式是使用forEach
a.forEach(function (element, index, array) { // element: 指向当前元素的值 // index: 指向当前索引 // array: 指向Array对象本身 alert(element);});
3.let与var相比，可以申明一个块级作用域的变量。举例：我们在for
循环等语句块中是无法定义具有局部作用域的变量的，声明的var i=0,在for函数结束后这个i还是可以使用，此时可以用let i=0.
4.filter：它用于把Array的某些元素过滤掉，然后返回剩下的元素。filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。用法如下：
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]
filter的回调函数：
var r = arr.filter(function (element, index, self) { console.log(element); // 依次打印'A', 'B', 'C' console.log(index); // 依次打印0, 1, 2 console.log(self); // self就是变量arr return true; });
5.map方法：
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] arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
reduce方法：
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
用法：
var arr = [1, 3, 5, 7, 9]; arr.reduce(function (x, y) { return x + y; }); // 25
6.箭头函数
相当于匿名函数：x => x * x相当于function (x) { return x * x;}
- 不同的参数有不同的写法：
// 两个参数:(x, y) => x * x + y * y // 无参数:() => 3.14 // 可变参数:(x, y, ...rest) => {} - 返回对象时要用
x => ({ foo: x }) - 箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。无需hack:
var that = this;
7.generator
和函数不同的是，generator由function定义，并且，除了return语句，还可以用yield返回多次。直接调用一个generator和调用函数不一样，调用时仅仅是创建了一个generator对象，还没有去执行它。
调用generator对象有两个方法，一是不断地调用generator对象的next()方法：next()方法会执行generator的代码，然后，每次遇到yield ;就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值。当执行到done为true时，这个generator对象就已经全部执行完毕，不要再继续调用next()了。
第二个方法是直接用for ... of循环迭代generator对象，这种方式不需要我们自己判断done：
for (var x of fib(5)) { console.log(x); // 依次输出0, 1, 1, 2, 3 }
generator可以在执行过程中多次返回，所以它看上去就像一个可以记住执行状态的函数
8.关于标准对象
9.正则表达式：
用
\d可以匹配一个数字，\w可以匹配一个字母或数字,.可以匹配任意字符,要匹配变长的字符，\s可以匹配一个空格（也包括Tab等空白符）.在正则表达式中，用表示任意个字符（包括0个），用+表示至少一个字符，用?表示0个或1个字符，用{n}表示n个字符，用{n,m}表示n-m个字符。如果正则表达式中定义了组，就可以在RegExp对象上用exec()方法提取出子串来。exec()方法在匹配成功后，会返回一个Array，第一个元素是正则表式匹配到的整个字符串，后面的字符串表示匹配成功的子串。exec()方法在匹配失败时返回null。
\d+采用贪婪匹配，影响后面的匹配，加个?就可以让\d+采用非贪婪匹配。正则表达式还可以指定9标志，表示全局匹配，正则表达式本身会更新lastIndex属性，表示上次匹配到的最后索引。i标志，表示忽略大小写，m标志，表示执行多行匹配。
10.JSON
- 转为JSON格式：JSON.stringify(对象);
- 要输出得好看一些，可以加上参数，按缩进输出：JSON.stringify(对象, null, ' ');
- 输出指定的属性：JSON.stringify(对象, ['属性1', '属性2'], ' ');
- 还可以传入一个函数，这样对象的每个键值对都会被函数先处理：
function 函数名(key,value){ }; JSON.stringify(对象, 函数, ' '); - 可以给对象里定义一个toJSON()的方法，调用JSON.stringify(对象); 时直接返回JSON应该序列化的数据。
- 拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象。用法：
JSON.parse('字符串'，function(){//可选 })
11.面向对象编程部分理解起来比较困难，等后续回来补坑。
12.要加载一个新页面，可以调用location.assign('新url')。document
对象还有一个cookie属性，可以获取当前页面的Cookie。调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。但体验感不好，尽量不要使用。
13：DOM操作,此处一些零碎的知识点：
-
// 获取节点test下的所有直属子节点: var cs = test.children; // 获取节点test下第一个、最后一个子节点： var first = test.firstElementChild; var last = test.lastElementChild; -
// 通过querySelector获取ID为q1的节点： var q1 = document.querySelector('#q1'); // 通过querySelectorAll获取q1节点内的符合条件的所有节点： var ps = q1.querySelectorAll('div.highlighted > p'); -
设置style: xxx.style.fontSize='13px';xxx.style.paddingTop='5px';（注意驼峰式）
-
创建节点，设置id与内容：
var haskell = document.createElement('p'); haskell.id = 'haskell'; haskell.innerText = 'Haskell'; //设置属性： d.setAttribute('type', 'text/css'); -
把子节点插入到指定的位置怎么办？可以用
parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。 -
删除一个DOM节点：调用父节点的removeChild把自己删掉。删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。
14.Promise对象：承诺将来会执行
-
一种用法：当小于1时，实行resolve，对应then的function，否则，执行reject函数，对应catch的function。
- 另一种：有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。
job1.then(job2).then(job3).catch(handleError);
其中，job1、job2和job3都是Promise对象。 - Promise还可以并行执行异步任务:
// 同时执行p1和p2，并在它们都完成后执行then: Promise.all([p1, p2]).then(function (results) { console.log(results); // 获得一个Array: ['P1', 'P2'] }); - Promise执行多个异步任务，只需要获得先返回的结果:
Promise.all([p1, p2]).then(function (results) { });
JQ部分
1.选择器
- 按属性查找：
var email = $('[name=email]'); // 找出<??? name="email"> - 按class名称查找：
var icons = $('[class^="icon-"]'); // 找出所有class包含至少一个以icon-开头的DOM - 组合查找：
var emailInput = $('input[name=email]'); // 只找出input类型 var tr = $('tr.red'); // 使用tag+class查找找出<tr class="red ...">...</tr>，注意无空格 - 多项选择：用逗号分隔，将内容都选出来
- 层级选择：用空格分隔开，进行层级选择
- 子选择器
$('parent>child')类似层级选择器，但是限定了层级关系必须是父子关系，就是<child>节点必须是<parent>节点的直属子节点。 - 过滤器：
$('ul.lang li:first-child'); // 仅选出第一个元素 $('ul.lang li:last-child'); // 仅选最后一个元素 $('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始 $('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素 $('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素 -
表单相关
- 查找：find(''),parent(''),next(/''),pre(/'')。
- 过滤：filter('')方法可以过滤掉不符合选择器条件的节点。或者传入一个函数，要特别注意函数内部的this：
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell langs.filter(function () { return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点 }); // 拿到Swift, Scheme - 此外，一个jQuery对象如果包含了不止一个DOM节点，first()、last()
和slice()方法可以返回一个新的jQuery对象，把不需要的DOM节点去掉.
2.添加节点：
- 如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，也就是说，用append()，你可以移动一个DOM节点。
- 父节点对子节点添加：append()与prepend(),同级元素用before()和after()
3.删除节点：获得节点后调用remove()
4.change事件：当用户在文本框中输入时，就会触发change
事件。但是，如果用JavaScript代码去改动文本框的值，将不会触发change
5.window.open()只有在用户触发下才能执行
6.off('click', function () {...})无法移除已绑定的第一个匿名函数
7.动画效果：
div.animate({ opacity: 0.25, width: '256px', height: '256px' }, 3000, function () { console.log('动画已结束'); //回调函数 });
jQuery的动画效果还可以串行执行，通过delay()方法还可以实现暂停，例如div.slideDown(2000).delay(1000)
用animate()设置background-color没有效果，此时请使用css的transition。
8.ajax，一种promise用法：
var jqxhr = $.ajax('/api/categories', { dataType: 'json' }).done(function (data) { ajaxLog('成功, 收到的数据: ' + JSON.stringify(data)); }).fail(function (xhr, status) { ajaxLog('失败: ' + xhr.status + ', 原因: ' + status); }).always(function () { ajaxLog('请求完成: 无论成功或失败都会调用'); });
getJSON方法可以将获得的data自动转为JSON格式
9.编写jq插件，通过扩展$.fn对象实现的：
$.fn.highlight1 = function (可选参数) { // this已绑定为当前jQuery对象: this.css('backgroundColor', '#fffceb').css('color', '#d85030'); return this;//jQuery对象支持链式操作，我们自己写的扩展方法也要能继续链式下去 }
当需要可以修改highlight的css属性的颜色之类的属性时，可以使用：
$.fn.highlight = function (options) { // 合并默认值和用户设定值: var opts = $.extend({}, $.fn.highlight.defaults, options); this.css('backgroundColor', opts.backgroundColor).css('color', opts.color); return this; } // 设定默认值: $.fn.highlight.defaults = { color: '#d85030', backgroundColor: '#fff8de' } //用户使用时设定： $.fn.highlight.defaults.color = '#fff'; $.fn.highlight.defaults.backgroundColor = '#000';
当需要这个插件只能应用与某些DOM时，在插件内return 时使用一个filter+each,注意: each()内部的回调函数的this绑定为DOM本身!
underscore
1.对collection
- underscore与jq其类似，会把自身绑定到唯一的全局变量上，使用map时用.map，如:
_.map({ a: 1, b: 2, c: 3 }, (v, k) => k + '=' + v); // ['a=1', 'b=2', 'c=3']
产生的结果为数组，如果想要返回对象则使用mapObjet - 当集合的所有元素都满足条件时，.every()函数返回true，当集合的至少一个元素满足条件时，.some()函数返回true：
_.every([1, 4, 7, -3, -9], (x) => x > 0); // false _.some([1, 4, 7, -3, -9], (x) => x > 0); // true - max / min这两个函数直接返回集合中最大和最小的数
- groupBy()把集合的元素按照key归类，key由传入的函数返回,用来分组是非常方便
- shuffle()用洗牌算法随机打乱一个集合,sample()则是随机选择一个或多个元素.
2.对array
- first / last顾名思义，这两个函数分别取第一个和最后一个元素。
- flatten()接收一个Array，无论这个Array里面嵌套了多少个Array，flatten()最后都把它们变成一个一维数组。
- zip()把两个或多个数组的所有元素按索引对齐，然后按索引合并成新组。例如，你有一个Array保存了名字，另一个Array保存了分数，现在，要把名字和分数给对上，用zip()轻松实现，unzip()则是反过来。
- object()类似zip()，把名字和分数直接对应成Object。
- range()让你快速生成一个序列，不再需要用for循环实现了
_.range(从几开始, 大于或小于几, 步长);
网友评论