继上篇面向Android的快速学习JavaScript笔记（基础篇 上） 之后继续补全JS快速学习笔记，这篇的知识会比较上篇更深一点，注意看代码块里面的注释解释。
如有理解错误的地方，希望大家可以踊跃指出，我立即修改
最后继续附上廖雪峰大神的JavaScript详细教程
目录：
- 高阶函数
- Map/Reduce
- filter
- sort
- !闭包！
- 箭头函数
- generator
- 标准对象
- Data
- RegExp
- JSON
高阶函数
- 一个函数接收另外一个函数作为参数，这种函数就叫高阶函数
Map/Reduce
- map() : Array本身的方法，传入入的参数是函数对象本身。
- 用法：
//Array使用map方法 ，传入函数，就可以得到一个新的Array作为结果
var arr=[1,2,3,4];
arr.map(function(x){return x*x;});
arr; // [1, 4, 9, 16]
- reduce() : 这个方法同样是传入一个函数对象作为参数 但是，规定了函数的参数须为两个
累加应用
var arr = [1, 3, 5, 7, 9];
var result=arr.reduce(function (x, y) {
return x + y;
});
result; // result =25
将数组转换成number
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x * 10 + y;
}); // 13579
filter
- 和map() 相似，不同的是根据返回值true or false来决定是否保留该元素
var arr = ['A', 'B', 'C'];
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 element === 'A';
});
r; // ['A']
sort
- 排序，number自动转换成String,String按照ASCII排序
- 排序只关心结果， -1 代表小于，0代表等于，1代表大于
- sort()可以传入函数，实现自定义排序：
因为number会转换成String再按照ASCLL排序，所以默认排序是不能排序数字的
实现数字排序的功能
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
}); // [1, 2, 10, 20]
！闭包！
- 函数内套函数
- 内函数作为返回值返回的时候
外部调用获取到的就是内函数的对象 , 需要在外部再次调用才能启动
同时，内函数持有的外函数内部变量，是在创建的时候就确定了的，外部调用无法改变，可以用来创建有状态的函数
- 内函数作为返回值返回的时候
- 闭包的用途之一是实现对象的私有数据,从而更好地实现OOP
- 这里会比较绕，具体可以参考一下这篇博客 闭包面试题
JS面试：闭包 - 使用：
function lazy_sum(arr) {
var sum = function () {
return arr.reduce(function (x, y) {
return x + y;
});
}
return sum;
}
当我们调用lazy_sum()时，返回的并不是求和结果，而是求和函数：
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()
调用函数f时，才真正计算求和的结果：
f(); // 15
循环数的使用例子
function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push((function (n) {
return function () {
return n * n;
}
})(i));
}
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 1
f2(); // 4
f3(); // 9
- 这个部分对于没学习过的人会比较不清楚，建议看一下网上的资料学习一下闭包
箭头函数
- 和匿名函数差不多 ，不过修正了this的指向问题
- 使用：
x => x*x ; //极简
等同于
function(x){
return x*x;
}
（x, y, ...rest) => {
if (x > 0) {
return x * x;
}
else {
return - x * x;
}
} //多参数，返回多种情况
x => ({foo:x}) //返回对象
使用箭头函数就可以不在 var that = this; 也可以正确指向对象了
var obj = {
birth: 1990,
getAge: function (year) {
var b = this.birth; // 1990
var fn = (y) => y - this.birth; // this.birth仍是1990
//因为箭头函数无法确定this，所call和apply传入第一个参数被忽略了
return fn.call({bitrh:2000},year);
}
};
obj.getAge(); // 25
generator
- 生成器
- 与函数类似，不过可以返回多个值
- 意义：保存变量状态！！！
generator记得在function后面加上*
function* foo(x) {
yield x++; // yield表示返回值
yield x++; //每一个yield都会返回一次
return x++; //return 表示最后的返回
}
调用：
var f = foo(5);//调用generator会返回一个generator对象，而不是直接返回值
f.next(); // value ： 6 ， done : false
//value : 返回值, done : true：false 是否结束标志，在return的时候返回true
f.next(); // value :7 ,done :false
f.next(); // value :8 ，done ： true
//查看done
f.next().done
for...of 遍历generator
for (var x of foo(5)) {
console.log(x); // 依次输出6, 7, 8
}
标准对象
不太会总结：
typeof 123; // 'number'
typeof NaN; // 'number'
typeof 'str'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Math.abs; // 'function'
typeof null; // 'object'
typeof []; // 'object'
typeof {}; // 'object'
var n = new Number(123); // 123,生成了新的包装类型
var b = new Boolean(true); // true,生成了新的包装类型
var s = new String('str'); // 'str',生成了新的包装类型
包装对象的类型是object，不是number也不是String了
Number() ， Boolean() , String() 函数可以将任何类型转换，不是转换成包装对象，是转换成Number，String，boolean
对于Boolean()只要是字符串都是true，空字符串才是false
123..toString(); // '123', 注意是两个点！
(123).toString(); // '123'
- 不要使用new Number()、new Boolean()、new String()创建包装对象；
- 用parseInt()或parseFloat()来转换任意类型到number；
- 用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；
- 通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}；
- typeof操作符可以判断出number、boolean、string、function和undefined；
- 判断Array要使用Array.isArray(arr)；
- 判断null请使用myVar === null；
- 判断某个全局变量是否存在用typeof window.myVar === 'undefined'；
- 函数内部判断某个变量是否存在用typeof myVar === 'undefined'。
Data
- 日期和时间
- JS的月份是0-11，0为1月份，1为2月份
var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳
var d = new Date(2015, 5, 19, 20, 15, 30, 123);
d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)
RegExp
- 正则表达式的运用
//创建方法
var re1 = /ABC\-001/;
var re2 = new RegExp('ABC\\-001');
//匹配：
var re = /^\d{3}\-\d{3,8}$/;
re.test('010-12345'); // true
re.test('010-1234x'); // false
re.test('010 12345'); // false
//切分：
'a,b;; c d'.split(/[\s\,\;]+/); // ['a', 'b', 'c', 'd']
//分组：
var re = /^(\d{3})-(\d{3,8})$/;
re.exec('010-12345'); // ['010-12345', '010', '12345']
re.exec('010 12345'); // null
//特殊标志
//g -全局匹配， i -忽略大小写 ， m -多行匹配
具体需要使用可以再去看
JSON
- JSON在JS中的使用：
var xiaoming = {
name: '小明',
age: 14,
gender: true,
height: 1.65,
grade: null,
'middle-school': '\"W3C\" Middle School',
skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
序列化：
JSON.stringify(xiaoming, null, ' ');
结果：
{
"name": "小明",
"age": 14,
"gender": true,
"height": 1.65,
"grade": null,
"middle-school": "\"W3C\" Middle School",
"skills": [
"JavaScript",
"Java",
"Python",
"Lisp"
]
}
//只输出键name，skills
JSON.stringify(xiaoming, ['name', 'skills'], ' ');
{
"name": "小明",
"skills": [
"JavaScript",
"Java",
"Python",
"Lisp"
]
}
//用函数做预处理
function convert(key, value) {
if (typeof value === 'string') {
return value.toUpperCase();
}
return value;
}
JSON.stringify(xiaoming, convert, ' ');
{
"name": "小明",
"age": 14,
"gender": true,
"height": 1.65,
"grade": null,
"middle-school": "\"W3C\" MIDDLE SCHOOL",
"skills": [
"JAVASCRIPT",
"JAVA",
"PYTHON",
"LISP"
]
}
//反序列化
JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45
JSON.parse('{"name":"小明","age":14}', function (key, value) {
// 把number * 2:
if (key === 'name') {
return value + '同学';
}
return value;
}); // Object {name: '小明同学', age: 14}
最后
第二部分的基础快速学习笔记就到这里，如果需要带目录的MD格式笔记可以私信我或者评论，我都可以发给你
如果觉得有那么一点帮助的朋友可以点一下赞鼓励一下
那么基础篇就剩最后一部分的笔记了，我也会尽快补上的
PS:
JS快速学习笔记在于快速回顾检索知识，对知识的讲解难免不够详细
如果对知识模糊不清的同学强烈建议，去细看一下主题博客再回来使用这篇笔记会事半功倍
