廖雪峰JS教程学习笔记,面向Android的长足学习J

那篇小说是自己自个儿在上学廖雪峰大神的JavaScript教程关于JavaScript的总计,后续会补上全体的下结论笔记。首要用于自身本人今后的神速回想检索入眼知识用的。结合自己,那篇笔记对于有JavaSE基础的人的话,能够达到规定的规范极速入门JavaScript的作用(毕竟java和JavaScript有相当多一般的地点)笔记对于再度的片段不做描述,入眼放在JS的风味上,所以也命名叫面向Android的JS学习如有明白错误的位置,希望大家能够踊跃提议,我及时修改

JavaScript笔记

@(JavaScript)

语法

编写翻译器自动在种种语句的最后增添 ;

目录

数据类型

JS不区分整数与浮点数,统一用Number表示,NAN表示Not a Number, Infinity代表无比大,表示当先JavaScript的意味范围,null意味着一个“空”的值,它和0以及空字符串''不同,0是一个数值,''代表长度为0的字符串,而null表示“空”,undefined代表值未定义。事实注脚,这并从未什么样卵用,区分两个的含义相当的小,大多数情状用null,undefined可是在认清函数参数是或不是传递的图景下有用。

变量名是高低写朝鲜语、数字、$_的三结合,且不能够用数字开端,变量名前不加var代表是全局变量(不建议利用)

启用strict形式的艺术是在JavaScript代码的率先行写上:
'use strict';

  • 数据类型
    • 字符串
    • 数组
    • 对象
    • 规范判别
    • 循环
    • 集合
  • 函数
    • 定义
    • 调用
    • argument
    • rest
    • return
    • 变量效用域
      • 部分功能域
      • 变量提高
      • 大局效能域
      • 取名空间
      • 常量
    • 方法
      • this
      • apply 和 call

字符串

模板字符串

一旦有广大变量须求连接,用+号就相比较费心。ES6新扩展了一种模板字符串,表示方法和方面包车型地铁多行字符串同样,然而它会活动替换字符串中的变量:

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);

亟需特别注意的是,字符串是不可变的,

  • toUpperCase()把多少个字符串全体产生大写
  • toLowerCase()把叁个字符串全体化为小写
  • indexOf()会招来钦定字符串出现的岗位
  • substring(begin,end)再次来到钦点索引区间的子串
var s = 'hello, world';
s.indexOf('world'); // 返回7
s.indexOf('World'); // 没有找到指定的子串,返回-1

var s = 'hello, world'
s.substring(0, 5); // 从索引0开始到5(不包括5),返回'hello'
s.substring(7); // 从索引7开始到结束,返回'world'
  • number
    • 着力:整数,浮点数,科学计数法,负数
    • NaN : not a number,只能用isNaN()来判断
    • Infinity : 表示极其大,超越了Number所能表示的最大值
  • 字符串
  • 布尔值
  • null
  • undefined
    • Number String Null Undefined Boolean 是JS的基本数据类型
  • 数组
    • 直白赋值会自动填充如:arr[10],缺省的部分机关填充undefined
  • 相比较运算符
    • 运用===代替==,==会自动调换类型,而===不会活动转变
    • 运算符顺序:算术运算符 > 相比运算符 > 逻辑运算符 > 赋值运算符
  • 对象
  • 变量
    • 动态编写翻译,所以任何点名称叫var, 不点名就为全局变量

数组

JavaScript的Array可以分包自由数据类型
另一种创造数组的点子是经过Array()函数达成:(不建议采用)
new Array(1, 2, 3); // 创建了数组[1, 2, 3]
要取得Array的长短,间接待上访谈length属性

  • slice(begin,end)纵然对应Stringsubstring()版本,它截取Array的有些因素,然后重返贰个新的Array
    String类似,Array也足以因而indexOf()来搜寻一个钦点的要素的岗位

  • push()Array的末段增加若干要素,pop()则把Array的末梢三个因素删除掉

  • 如若要往Array的尾部增加若干因素,使用unshift()方法,shift()形式则把Array的率先个要素删掉

  • splice()办法是修改Array的“万能形式”,它能够从内定的目录开头删除若干成分,然后再从该地方增添若干因素

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
  • sort()能够对方今Array进展排序,它会直接修改当前Array的要素地方,间接调用时,遵照私下认可顺序排序

  • reverse()把整个Array的要素给掉个个,相当于反转

  • concat()措施把近些日子的Array和另二个Array连接起来,并重返三个新的Array

  • join()措施是叁个特别实用的不二法门,它把当前Array的种种成分都用钦命的字符串连接起来,然后回来连接后的字符串

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

一经Array的要素不是字符串,将机关调换为字符串后再连接。

字符串

  • 换行:n, 或许直接换行(在ES6技术直接运用)
  • 拼接: + 或者 var name = 'hello'; ${name}
  • 操作:
    • str.length
    • str[num] , 不可能一贯通过下标修改字符串
    • toUpperCase() 大写调换
    • toLowerCase() 小写调换
    • indexOf() 检索
    • substring() 截取

对象

会见属性是通过.操作符完毕的,但这供给属性名必得是一个卓有效能的变量名。假使属性名满含特殊字符,就亟须用''括起来,用['xxx']来访问,不推荐使用此种属性名,访谈不设有的性质不报错,而是重返undefined,检查评定对象是或不是具备某一性能,能够用in操作符,不过要小心,假若in推断贰特个性存在,那些个性不明确是xiaoming的,它也许是xiaoming承继拿到的, 要决断二个属性是不是是xiaoming自己兼备的,实际不是接二连三获得的,能够用hasOwnProperty()方法:

var xiaohong = {
    name: '小红',
    'middle-school': 'No.1 Middle School'
};
xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小红'
xiaohong.name; // '小红'
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
delete xiaoming.age; // 删除age属性
'name' in xiaoming; // true
'toString' in xiaoming; // true
xiaoming.hasOwnProperty('toString'); // false

数组

var arr = [1, 'hello', 3];arr.length; // 3arr.length = 6;arr; // arr变为[1, 'hello', 3, undefined, undefined, undefined]arr[7] = 4;arr; // arr变为[1, 'hello', 3, undefined, undefined, undefined, undefined, 4]arr.length = 2;arr; // arr变为[1, 'hello']
  • indexOf() 检索
  • slice() 等于 substring() 截取
  • push 参照他事他说加以考察队列使用,入队和出队
  • unshift() 和 shift() 头部的 入队 和 出队
  • sort() 排序 ,number自动转换来String,String遵照ASCII排序
  • reverse() 反转
  • splice() 万能情势:
    • splice()方法是修改Array的“万能格局”,它能够从钦命的目录起先删除若干成分,然后再从该职责加多若干因素:
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];// 从索引2开始删除3个元素,然后再添加两个元素:arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']// 只删除,不添加:arr.splice; // ['Google', 'Facebook']arr; // ['Microsoft', 'Apple', 'Oracle']// 只添加,不删除:arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
  • concat() 拼接字符串
  • join() 使数组每一个字符串用钦点字符串连接
    • 假设Array的因素不是字符串,将自行转变为字符串后再连接。
var arr = ['A', 'B', 'C', 1, 2, 3];arr.join; // 'A-B-C-1-2-3'

循环

for巡回的多少个变体是for ... in巡回,它能够把八个对象的具有属性依第二轮回出来, for ... inArray的轮回获得的是String而不是Number
ES6规范引入了新的iterable类型,ArrayMapSet都属于iterable类型。
具有iterable类型的汇集可以透过新的for ... of循环来遍历。

var a = ['A', 'B', 'C']
a.name = 'Hello';
for (var x in a) {
    alert(x); // '0', '1', '2', 'name'
}

那正是干吗要引进新的for ... of循环
唯独,越来越好的方法是一向运用iterable内置的forEach方法,它接受三个函数,每一趟迭代就机关回调该函数,以Array为例:

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    alert(element);
});
  • Map的回调函数参数依次为value、key和map本人
  • Set与Array类似,但Set未有索引,因而回调函数的前两个参数都以因素本人
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    alert(value);
});

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    alert(element);
});

无需动用成套的参数

对象

  • JavaScript的指标是一种冬天的聚焦数据类型,它由若干键值对组合
    • 键值对: 属性:属性名
    • 属性使用:
 var xiaohong = { name: '小红', 'middle-school': 'No.1 Middle School'};//属性使用xiaohong['middle-school']; // 'No.1 Middle School'xiaohong['name']; // '小红'xiaohong.name; // '小红'
  • JavaScript对象是动态类型,所以能够动态增添属性
    • bean.age=18; // 这样属性就添加成功了
    • delete bean.age ; // 删除属性成功
  • in字符检验 对象是或不是含有属性
    • age in bean // true or false

STL-Map&Set

发轫化Map须要一个二维数组,恐怕直接初阶化多少个空Map。Map具备以下情势:

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

要开创二个Set,须要提供二个Array作为输入,大概直接开立叁个空Set:

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
>>> s.add(4)
>>> s
{1, 2, 3, 4}
>>> s.add(4)
>>> s
{1, 2, 3, 4}
>>> s.delete(3)
>>> s
{1, 2, 4}

基准推断

JS中的if...else...的选择和Java基本同样

  • 借使不加{}使用的话, if...else...只好功能他上面包车型客车首先行
var age = 20;if (age >= 18) alert;else console.log('age < 18'); // 添加一行日志 alert('teenager'); // <- 这行语句已经不在else的控制范围了
  • 在if..else if...else...的多行条件推断下,前面满意条件就不会实行前面包车型地铁情事了

函数

JavaScript还大概有一个免费赠予的关键字arguments,它只在函数内部起成效,而且永久指向当前函数的调用者传入的保有参数。arguments类似Array但它不是贰个Array:

function foo(x) {
    alert(x); // 10
    for (var i=0; i<arguments.length; i++) {
        console.log(arguments[i]); // 10, 20, 30
    }
}
foo(10, 20, 30);

实质上arguments最常用于剖断传入参数的个数
ES6正式引进了rest参数

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

rest参数只好写在最后,前边用...标志,从运营结果可见,传入的参数先绑定a、b,多余的参数以数组情势提交变量rest

循环

var x = 0;var i;for (i=1; i<=100; i++) { x = x + i;}x; // 50501: i = 1; 初始条件,执行一次2:i <=100 ; 判断条件 ,不满足就退出循环3: x = x+i ; 具体循环的业务逻辑4: x++; 每次循环的递增条件!!所以循环的顺序是 1 > 2 > 3 > 4 > 2 > 3 > 4 > 2 ...... > 2(不满足条件 ,退出循环) 
  • for...in (比较像Java的foreach)
    • 遍历的莫过于是目的的个性名称。二个Array数组实际上也是二个目的,它的种种成分的目录被视为多个属性。
    • 对 对象遍历
var o = { name: 'Jack', age: 20, city: 'Beijing'};for (var key in o) { if (o.hasOwnProperty { //判断是否包含KEY alert; // 'name', 'age', 'city' }}
  • 对数组遍历(遍历 获得的是String实际不是number)
var a = ['A', 'B', 'C'];for (var i in a) { alert; // '0', '1', '2' alert; // 'A', 'B', 'C'}
  • while 和 do..while (和Java基本一样这里不赘述了)
作用域

var变量效能域是在函数内部, let变量,const常量功能域是所属块

集合

是在ES6今后才引进的

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);m.get('Michael'); // 95m.set; //动态设置, 一个key只能对应一个值,m.has; //是否存在KEY, 返回 布尔值m.delete; //删除
  • Set :只积存key,不积存value,同一时候会把 重复的key自动过滤
var s = new Set([1, 2, 3, 3, '3']);s; // Set {1, 2, 3, "3"}s.add;s; // Set {1, 2, 3, "3"}s.delete;s; // Set {1, 2, "3"}
  • iterable
    • for...of :用法本人跟for...in同样,然而却修复了如下难点
 var a = ['A', 'B', 'C'];a.name = 'Hello';for (var x in a) { alert; // '0', '1', '2', 'name'}for (var x of a) { alert; // 'A', 'B', 'C'}
  • foreach :
    • 对于set因为从没value,所以上边包车型地铁element和index是 一致的
    • JS中对于参数能够不一样,所以是足以只穿七个投机要求的参数
var a = ['A', 'B', 'C'];a.forEach(function (element, index, array) { // element: 指向当前元素的值 // index: 指向当前索引 // array: 指向Array对象本身 alert;});a.forEach(function  { alert;});
变量进步

JavaScript的函数定义有个特色,它会先扫描整个函数体的说话,把富有证明变量的宣示“进步”到函数顶端

定义

function abs { if (x >= 0) { return x; } else { return -x; }}function 指出这是一个函数定义;abs 是函数的名称; 括号内列出函数的参数,多个参数以,分隔;{ ... } 之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句。return 返回值,可以没有:返回undefined
  • 佚名定义
 var abs = function  { if (x >= 0) { return x; } else { return -x; }};与正常定义完全等价,值已经赋给abs了注意别忘了最后的 ' ; '
大局功能域

不在任何函数钦赐义的变量就持有全局成效域。实际上,JavaScript暗中同意有多个大局对象window,全局成效域的变量实际上被绑定到window的二个属性

调用

  • 传参 :
    • 能够传多少个参数,可是只会接纳前边有效的
    • 也得以不传,就等于传入了undefined
function abs { //控制传入参数类型 if (typeof x !== 'number') { throw 'Not a number'; } ...}
名字空间

全局变量会绑定到window上,不一致的JavaScript文件假如利用了同一的全局变量,或然定义了同样名字的顶层函数,都会导致命名争持,并且很难被发觉。
减去争辩的贰个主意是把温馨的有所变量和函数全部绑定到贰个全局变量中。举个例子:

// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
    return 'foo';
};

argument

  • 概念:关键字arguments,它只在函数内部起效果,并且永世指向当前函数的调用者传入的具备参数。arguments类似Array但它不是多少个Array
  • 动用:利用arguments,你可以收获调用者传入的有所参数。也等于说,固然函数不定义任何参数,还能够获得参数的值
  • 常用于决断传入参数的个数
function abs() { if (arguments.length === 0) { return 0; } var x = arguments[0]; return x >= 0 ? x : -x;}abs(); // 0abs; // 10abs; // 9
方法

在一个方法内部,this是二个破例变量,它始终本着当前目的,而在函数内部定义的函数,this又指向undefined了!(在非strict情势下,它再也指向全局对象window!)

rest

apply

要内定函数的this指向哪些目的,能够用函数本人的apply方法,它接受八个参数,第一个参数正是急需绑定的this变量,第二个参数是Array,表示函数本身的参数
另八个与apply()类似的章程是call(),唯一区别是:

  • apply()把参数打包成Array再盛传;
  • call()把参数按梯次传入。

也得以用此函数更改函数的行事

var count = 0;
var oldParseInt = parseInt; // 保存原函数

window.parseInt = function () {
    count += 1;
    return oldParseInt.apply(null, arguments); // 调用原函数
};

// 测试:
parseInt('10');
parseInt('20');
parseInt('30');
count; // 3

- 定义:ES6中引进的要紧字rest,表示收获定义参数以外的参数

function foo(a, b, ...rest) { console.log('a = ' + a); console.log('b = ' + b); console.log;}foo(1, 2, 3, 4, 5);// 结果:// a = 1// b = 2// Array [ 3, 4, 5 ]foo;// 结果:// a = 1// b = undefined// Array []
高阶函数

JavaScript的函数其实都对准某些变量,函数的参数能吸收接纳变量,那么一个函数就能够接收另三个函数作为参数,这种函数就称为高阶函数

return

map&reduce

流传叁个函数参数, 成效于数组中的每八个要素
Array.map(parameter)

图片 1

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]

传播二个函数参数, 成效于每三个要素和上二个要素的函数值
Array.reduce(parameter)

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
f(x) = g(f(x-1), x);

笔记会继续革新,感激关怀

参考资料
廖雪峰_JavaScript教程

- 由于JavaScript引擎在行末自动抬高分号的体制,所以代码如下:

function foo() { return; // 自动添加了分号,相当于return undefined; { name: 'foo' }; // 这行语句已经没法执行到了}应改为function foo() { return { // 这里不会自动加分号,因为{表示语句尚未结束 name: 'foo' };}

变量成效域

  • 在函数钦定义的变量
  • 以此和java相比较一般,正是先行使用最临近的{}里面包车型客车变量
  • 分化的是,for循环中无法定义局地成效域的变量所以在ES6中引进了 let,就能够在for中定义了,如下:
function foo() { for (var i=0; i<100; i++) { // } i += 100; // 仍然可以引用变量i}function foo() { var sum = 0; for (let i=0; i<100; i++) { sum += i; } i += 1; // 还没定义无法使用,报错}
  • 先扫描整个函数体的言语,把具有声明的变量“提高”到函数顶上部分
function foo() { var x = 'Hello, ' + y; alert; var y = 'Bob';}//这样的代码实际上在JavaScript眼中是这样的function foo() { var y; // 提升变量y的申明 var x = 'Hello, ' + y; alert; y = 'Bob';}
  • 不在函数钦定义的变量正是大局的
  • JavaScript暗中同意有三个大局对象window,全局变量都以绑定在window上的四本性质
  • 函数实际也是八个全局变量
var course = 'Learn JavaScript';alert; // 'Learn JavaScript'alert(window.course); // 'Learn JavaScript'function foo() { alert;}foo(); // 直接调用foo()window.foo(); // 通过window.foo()调用,一样的效果
  • 缘由:因为全局变量都绑定在 window上,当不一样JS文件 使用了同样的变量就能发生争执
  • 消除:将变量绑定到叁个全局变量中
// 唯一的全局变量MYAPP:var MYAPP = {};// 其他变量:MYAPP.name = 'myapp';MYAPP.version = 1.0;// 其他函数:MYAPP.foo = function () { return 'foo';};
  • ES6中引入const最首要字表示常量
  • let同样,同期块级作用域

方法

  • 一个对象中绑定函数,成为那几个指标的点子
  • 独特变量,始终本着当前指标
  • this指向的难题:
function getAge() { var y = new Date().getFullYear(); return y - this.birth;}var xiaoming = { name: '小明', birth: 1990, age: getAge};xiaoming.age(); // 25, 正常结果getAge(); // NaNvar fn = xiaoming.age; // 先拿到xiaoming的age函数fn(); // NaN

以至地点的原因:this指向动态改造,当在全局调用的时候this就对准了window,鲜明window没有birth属性。化解办法:始终 使用 准确对象 . 方法

  • 关键:函数钦赐义函数
var xiaoming = { name: '小明', birth: 1990, age: function () { function getAgeFromBirth() { var y = new Date().getFullYear(); return y - this.birth; } return getAgeFromBirth(); }};xiaoming.age(); //Uncaught TypeError: Cannot read property 'birth' of undefined//原因:this指向的匿名函数内部也不存在birth//解决办法:捕获thisage: function () { var that = this; // 在方法内部一开始就捕获this function getAgeFromBirth() { var y = new Date().getFullYear(); return y - that.birth; // 用that而不是this } return getAgeFromBirth(); } 
  • 用于调节this的针对
  • apply(this指向对象,参数数组)
  • call(this指向对象,参数1,参数2.......)
  • 用法:
function getAge() { var y = new Date().getFullYear(); return y - this.birth;}var xiaoming = { name: '小明', birth: 1990, age: getAge};xiaoming.age(); // 25getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空getAge.call(xiaoming,null); 
  • apply的应用:装饰器:
var count = 0;var oldParseInt = parseInt; // 保存原函数window.parseInt = function () { count += 1; return oldParseInt.apply(null, arguments); // 调用原函数};// 测试:parseInt;parseInt;parseInt;count; // 3

末段:第一部分的底蕴神速学习笔记就到此地,即使要求带目录的MD格式笔记能够私信小编或许讨论,作者都得以发给你纵然感到有那么一些扶助的爱侣能够点一下赞勉励一下三番两次晋级部分学习笔记,笔者会尽快补充上的

本文由华夏彩票发布于编程应用,转载请注明出处:廖雪峰JS教程学习笔记,面向Android的长足学习J

您可能还会对下面的文章感兴趣: