面向Android的快速学习JavaScript笔记（基础篇中

2017-02-09 本文已影响0人 Rayhaha

继上篇面向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快速学习笔记在于快速回顾检索知识，对知识的讲解难免不够详细
如果对知识模糊不清的同学强烈建议，去细看一下主题博客再回来使用这篇笔记会事半功倍

面向Android的快速学习JavaScript笔记（基础篇中

高阶函数

Map/Reduce

filter

sort

！闭包！

箭头函数

generator

标准对象

Data

RegExp

JSON

猜你喜欢

热点阅读

面向Android的快速学习JavaScript笔记（基础篇 中

高阶函数

Map/Reduce

filter

sort

！闭包！

箭头函数

generator

标准对象

Data

RegExp

JSON

猜你喜欢

热点阅读

面向Android的快速学习JavaScript笔记（基础篇中