来自  资质荣誉 2019-09-18 14:58 的文章
当前位置: 澳门太阳娱乐手机登录 > 资质荣誉 > 正文

着力对象,面向Android的长足学习JavaScript笔记

继上篇面向Android的快捷学习JavaScript笔记 之后继续补全JS火速学习笔记,那篇的知识会相比上篇越来越深一点,注意看代码块里面包车型客车笺表明释。如有理解错误的地点,希望我们能够踊跃提议,笔者立时修改最终继续附上廖雪峰大神的JavaScript详细教程

在JS中用typeof操作符获取对象的种类,它总是回到叁个字符串:

目录:

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'
  • 高阶函数
    • Map/Reduce
    • filter
    • sort
  • !闭包!
  • 箭头函数
  • generator
  • 正规对象
    • Data
    • RegExp
    • JSON

里面number、string、boolean、function和undefined是着力数据类型,大家注意到null的类型是object,Array的类型也是object,假诺大家用typeof将不可能区分出null、Array和普通意义上的object。除此以外,JS还提供了打包对象,number、boolean和string都有包装对象,包装对象用new创立:

高阶函数

  • 七个函数接收其它八个函数作为参数,这种函数就叫高阶函数
  • map() : Array本人的章程,传入入的参数是函数对象自己。
  • 用法:
//Array使用map方法 ,传入函数,就可以得到一个新的Array作为结果var arr=[1,2,3,4];arr.map(function{return x*x;});arr; // [1, 4, 9, 16]
  • reduce() : 那么些格局一致是传播贰个函数对象作为参数 然则,规定了函数的参数须为两个
累加应用var arr = [1, 3, 5, 7, 9];var result=arr.reduce(function  { return x + y;}); result; // result =25将数组转换成numbervar arr = [1, 3, 5, 7, 9];arr.reduce(function  { return x * 10 + y;}); // 13579
  • 和map() 相似,不相同的是基于再次回到值true or false来调整是还是不是保留该因素
var arr = ['A', 'B', 'C'];var r = arr.filter(function (element, index, self) { console.log; // 依次打印'A', 'B', 'C' console.log; // 依次打印0, 1, 2 console.log; // self就是变量arr return element === 'A';});r; // ['A']
  • 排序,number自动转换成String,String依据ASCII排序
  • 排序只关怀结果, -1 代表小于,0代表等于,1象征大于
  • sort()能够流传函数,达成自定义排序:
因为number会转换成String再按照ASCLL排序,所以默认排序是不能排序数字的实现数字排序的功能var arr = [10, 20, 1, 2];arr.sort(function  { if  { return -1; } if  { return 1; } return 0;}); // [1, 2, 10, 20]
var n = new Number(123); // 123,生成了新的包装类型
var b = new Boolean(true); // true,生成了新的包装类型
var s = new String('str'); // 'str',生成了新的包装类型

!闭包!

  • 函数内套函数
    • 内函数作为重返值重返的时候外界调用获取到的正是内函数的指标 , 必要在外界再度调用本事运行相同的时候,内函数有所的外函数里面变量,是在创造的时候就明显了的,外界调用不可能转移,能够用来创造有情形的函数
  • 闭包的用途之一是兑现目的的民用数据,进而越来越好地促成OOP
  • 此处会相比较绕,具体能够参照一下那篇博客 闭水饺试题JS面试:闭包
  • 使用:
function lazy_sum { var sum = function () { return arr.reduce(function  { 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  { return function () { return n * n; } }); } return arr;}var results = count();var f1 = results[0];var f2 = results[1];var f3 = results[2];f1(); // 1f2(); // 4f3(); // 9
  • 以此局地对于没上学过的人会比较不领悟,提议看一下英特网的材料学习一下闭包

就算包装对象看上去和原先大同小异,但她们的类型已经改成object了!所以包装对象和原始值用===比较会回到false,一般景色下毫不选择包装对象,尤其是string类型:

箭头函数

  • 和佚名函数大概 ,可是核查了this的对准难点
  • 使用:
x => x*x ; //极简等同于function{return x*x;}(x, y, ...rest) => { if  { return x * x; } else { return - x * x; }} //多参数,返回多种情况x =>  //返回对象使用箭头函数就可以不在 var that = this; 也可以正确指向对象了var obj = { birth: 1990, getAge: function  { var b = this.birth; // 1990 var fn =  => y - this.birth; // this.birth仍是1990 //因为箭头函数无法确定this,所call和apply传入第一个参数被忽略了 return fn.call({bitrh:2000},year); }};obj.getAge(); // 25
typeof new Number(123); // 'object'
new Number(123) === 123; // false

typeof new Boolean(true); // 'object'
new Boolean(true) === true; // false

typeof new String('str'); // 'object'
new String('str') === 'str'; // false

generator

  • 生成器
  • 与函数类似,然则能够再次来到四个值
  • 意义:保存变量状态!!!
generator记得在function后面加上*function* foo { yield x++; // yield表示返回值 yield x++; //每一个yield都会返回一次 return x++; //return 表示最后的返回}调用:var f = foo;//调用generator会返回一个generator对象,而不是直接返回值f.next(); // value : 6 , done : false //value : 返回值, done : true:false 是否结束标志,在return的时候返回true f.next(); // value :7 ,done :falsef.next(); // value :8 ,done : true //查看donef.next().donefor...of 遍历generatorfor (var x of foo { console.log; // 依次输出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,生成了新的包装类型var b = new Boolean; // true,生成了新的包装类型var s = new String; // 'str',生成了新的包装类型包装对象的类型是object,不是number也不是String了Number() , Boolean() , String() 函数可以将任何类型转换,不是转换成包装对象,是转换成Number,String,boolean对于Boolean()只要是字符串都是true,空字符串才是false123..toString(); // '123', 注意是两个点!.toString(); // '123'
  • 毫不使用new Number()、new Boolean()、new String()创设包装对象;
  • 用parseInt()或parseFloat()来转换率性档案的次序到number;
  • 用String()来调换任性档期的顺序到string,只怕直接调用某些对象的toString()方法;
  • 常备不必把自由类型调换为boolean再决断,因为能够直接写if {...};
  • typeof操作符能够判定出number、boolean、string、function和undefined;
  • 判断Array要使用Array.isArray;
  • 判断null请使用myVar === null;
  • 判断有个别全局变量是或不是存在用typeof window.myVar === 'undefined';
  • 函数内部推断某些变量是或不是留存用typeof myVar === 'undefined'。

其余,Number()、Boolean和String()作为通常函数,把别的项目标数目调换为其相应系列(注意不是包裹档期的顺序):

Data

  • 日子和岁月
  • JS的月度是0-11,0为3月份,1为10月份
var now = new Date();now; // Wed Jun 24 2015 19:49:22 GMT+0800 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 
var n = Number('123'); // 123,相当于parseInt()或parseFloat()
typeof n; // 'number'

var b = Boolean('true'); // true
typeof b; // 'boolean'

var b2 = Boolean('false'); // true! 'false'字符串转换结果为true!因为它是非空字符串!
var b3 = Boolean(''); // false

var s = String(123.45); // '123.45'
typeof s; // 'string'

RegExp

  • 正则表明式的应用
//创建方法var re1 = /ABC-001/;var re2 = new RegExp('ABC\-001');//匹配:var re = /^d{3}-d{3,8}$/;re.test('010-12345'); // truere.test('010-1234x'); // falsere.test('010 12345'); // false//切分:'a,b;; c d'.split(/[s,;]+/); // ['a', 'b', 'c', 'd']//分组:var re = /^-$/;re.exec('010-12345'); // ['010-12345', '010', '12345']re.exec('010 12345'); // null//特殊标志//g -全局匹配, i -忽略大小写 , m -多行匹配具体需要使用可以再去看

对JS中数据类型稍作总计如下:

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,skillsJSON.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; // trueJSON.parse; // 123.45JSON.parse('{"name":"小明","age":14}', function (key, value) { // 把number * 2: if (key === 'name') { return value + '同学'; } return value;}); // Object {name: '小明同学', age: 14}

提起底第二片段的底蕴飞速学习笔记就到那边,如若急需带目录的MD格式笔记能够私信作者要么商量,笔者都足以发给你借使以为有那么一些相助的相恋的人能够点一下赞鼓劲一下那么基础篇就剩最后一片段的笔记了,作者也会赶紧补上的PS:JS飞快学习笔记在于飞快回想检索知识,对学识的讲明难免非常不足详细倘使对文化模糊不清的同窗生硬建议,去审视一下主旨博客再回去使用那篇笔记会一石二鸟

  • 不用使用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'。

最后索要建议null和undefined未有toString(),number对象调用toString()要非常管理一下:

123.toString(); // SyntaxError
123..toString(); // '123', 注意是两个点!
(123).toString(); // '123'

Date

在JS中Date对象用来表示日期和时间:

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形式表示的时间戳

留心,当前时间是浏览器从本机操作系统获取的日子,所以不自然规范,假设要创设一个点名日期和时间的Date对象,能够用:

var d = new Date(2015, 5, 19, 20, 15, 30, 123);
d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)

var timestamp = Date.parse('2015-06-24T19:49:22.875+08:00');
// 这里返回一个时间戳,再转换为Date:
timestamp; // 1435146562875
var date = new Date(timestamp);
date; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
date.toLocaleString(); // '2015/6/24 下午7:49:22',本地时间(北京时区+8:00),显示的字符串与操作系统设定的格式有关
date.toUTCString(); // 'Wed, 24 Jun 2015 11:49:22 GMT',UTC时间,与本地时间相差8小时

急需重申的是JS中月份范围用整数表示是0~11,从0最初。大家只供给从数据库读取时间戳,再调换为本地时间:

if (Date.now) {
    alert(Date.now()); // 老版本IE没有now()方法
} else {
    alert(new Date().getTime());
}

RegExp

JS中开创正则表达式有两种艺术,第一种格局是一贯通过/正则表明式/写出来,第三种方法是通过new RegExp('正则发挥式')成立多少个RegExp对象:

var re1 = /ABC-001/;
var re2 = new RegExp('ABC\-001');

re1; // /ABC-001/
re2; // /ABC-001/

RegExp对象的test()方法用于测量试验给定的字符串是不是符合条件:

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'.split(' '); // ['a', 'b', '', '', 'c']
// 用正则表达式切分
'a b   c'.split(/s+/); // ['a', 'b', 'c']
// 加入,试试
'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

exec()方法在协作成功后,会回到多少个Array,第三个因素是正则表明式相称到的一体字符串,后边的字符串表示卓绝成功的子串;exec()方法在协作失利时再次来到null。
亟待特意提出的是,正则相配暗中认可是贪心相称,也等于合营尽或许多的字符。举例如下:

var re = /^(d+)(0*)$/;
re.exec('102300'); // ['102300', '102300', '']

由于d+接纳贪婪相称,直接把前面包车型大巴0全体金童玉女了,结果0*只好相配空字符串了。必需让d+接纳非贪婪相配(也便是尽大概少相称),技术把前边的0相称出来,加个?就足以让d+采纳非贪婪相称:

var re = /^(d+?)(0*)$/;
re.exec('102300'); // ['102300', '1023', '00']

JS的正则表明式还应该有多少个特别的证明,最常用的是g表示全局相称,i表示忽略大小写,m表示实施多行相配:

var r1 = /test/g;
// 等价于:
var r2 = new RegExp('test', 'g');

大局相配可以频繁推行exec()方法来查找四个卓绝的字符串,不能利用/^...$/,那样只会最多匹配一遍。当大家钦赐g标识后,每一次运转exec(),正则表达式本身会更新lastIndex属性,表示上次格外到的结尾索引:

var s = 'JavaScript, VBScript, JScript and ECMAScript';
var re=/[a-zA-Z]+Script/g;
// 使用全局匹配:
re.exec(s); // ['JavaScript']
re.lastIndex; // 10

re.exec(s); // ['VBScript']
re.lastIndex; // 20

re.exec(s); // ['JScript']
re.lastIndex; // 29

re.exec(s); // ['ECMAScript']
re.lastIndex; // 44

re.exec(s); // null,直到结束仍没有匹配到

JSON

澳门太阳娱乐在线网址,JSON实际上是JavaScript的二个子集,在JS中大家能够直接使用JSON,因为JavaScript内置了JSON的分析。把任何JavaScript对象形成JSON,正是把那么些指标连串化成多少个JSON格式的字符串,那样才可以通过互联网传送给其余Computer。要是大家吸取二个JSON格式的字符串,只需求把它反体系化成一个JavaScript对象,就能够在JavaScript中央直属机关接使用这些目的了。让我们先把小明那一个指标连串化成JSON格式的字符串:

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); // '{"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"
  ]
}

其次个参数用于调整什么筛挑另一半的键值,假如大家只想出口内定的特性,能够流传Array:

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"
  ]
}

假诺我们还想要正确调控什么类别化小明,能够给xiaoming定义叁个toJSON()的措施,直接回到JSON应该类别化的多寡:

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '"W3C" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
        return { // 只输出name和age,并且改变了key:
            'Name': this.name,
            'Age': this.age
        };
    }
};

JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

获得一个JSON格式的字符串,大家一直用JSON.parse()把它形成三个JavaScript对象:

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()还足以采用二个函数,用来转变解析出的习性:

JSON.parse('{"name":"小明","age":14}', function (key, value) {
    // 把number * 2:
    if (key === 'name') {
        return value + '同学';
    }
    return value;
}); // Object {name: '小明同学', age: 14}

本文由澳门太阳娱乐手机登录发布于 资质荣誉,转载请注明出处:着力对象,面向Android的长足学习JavaScript笔记

关键词: