js学习笔记
语法
后续补充笔记
-
join()方法
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var energy = fruits.join(" and "); //Banana and Orange and Apple and Mango
循环
-
for...in
for循环的一个变体是for ... in循环，它可以把一个对象的所有属性依次循环出来：var o = { name: 'Jack', age: 20, city: 'Beijing' }; for (var key in o) { console.log(key); // 'name', 'age', 'city' } -
for...of
遍历
Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。具有
iterable类型的集合可以通过新的for ... of循环来遍历。for ... of循环是ES6引入的新的语法'use strict'; var a = [1, 2, 3]; for (var x of a) { }
你可能会有疑问，for ... of循环和for ... in循环有何区别？
for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。
当我们手动给Array对象添加了额外的属性后，for ... in循环将带来意想不到的意外效果：
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
console.log(x); // '0', '1', '2', 'name'
}
for ... in循环将把name包括在内，但Array的length属性却不包括在内。
for ... of循环则完全修复了这些问题，它只循环集合本身的元素：
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
console.log(x); // 'A', 'B', 'C'
}
这就是为什么要引入新的for ... of循环。
函数
-
函数定义
//第一种定义 function abs(x) { if (x >= 0) { return x; } else { return -x; } } //第二种定义 var abs = function (x) { if (x >= 0) { return x; } else { return -x; } }; -
arguments
JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array：function foo(x) { console.log('x = ' + x); // 10 for (var i=0; i<arguments.length; i++) { console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30 } } foo(10, 20, 30); //x = 10 //arg 0 = 10 //arg 1 = 20 //arg 2 = 30 -
rest参数
由于JavaScript函数允许接收任意个参数，于是我们就不得不用arguments来获取所有参数：
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 [] -
return语句
//错误 function foo() { return { name: 'foo' }; } foo(); // undefined //正确 function foo() { return { // 这里不会自动加分号，因为{表示语句尚未结束 name: 'foo' }; } -
变量提升
JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部：
'use strict'; function foo() { var x = 'Hello, ' + y; console.log(x); var y = 'Bob'; } foo();虽然是
strict模式，但语句var x = 'Hello, ' + y;并不报错，原因是变量y在稍后申明了。但是console.log显示Hello, undefined，说明变量y的值为undefined。这正是因为JavaScript引擎自动提升了变量y的声明，但不会提升变量y的赋值。对于上述
foo()函数，JavaScript引擎看到的代码相当于：function foo() { var y; // 提升变量y的申明，此时y为undefined var x = 'Hello, ' + y; console.log(x); y = 'Bob'; }由于JavaScript的这一怪异的“特性”，我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量：
function foo() { var x = 1, // x初始化为1 y = x + 1, // y初始化为2 z, i; // z和i为undefined // 其他语句: for (i=0; i<100; i++) { ... } } -
全局作用域
不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象
window，全局作用域的变量实际上被绑定到window的一个属性 -
常量
使用关键字
const。 -
解构赋值
'use strict'; // 如果浏览器支持解构赋值就不会报错: var [x, y, z] = ['hello', 'JavaScript', 'ES6']; // x, y, z分别被赋值为数组对应元素: console.log('x = ' + x + ', y = ' + y + ', z = ' + z); //x = hello, y = JavaScript, z = ES6let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']]; x; // 'hello' y; // 'JavaScript' z; // 'ES6'let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前两个元素，只对z赋值第三个元素 z; // 'ES6''use strict'; var person = { name: '小明', age: 20, gender: 'male', passport: 'G-12345678', school: 'No.4 middle school' }; var {name, age, passport} = person; // name, age, passport分别被赋值为对应属性: console.log('name = ' + name + ', age = ' + age + ', passport = ' + passport);var person = { name: '小明', age: 20, gender: 'male', passport: 'G-12345678', school: 'No.4 middle school', address: { city: 'Beijing', street: 'No.1 Road', zipcode: '100001' } }; var {name, address: {city, zip}} = person; name; // '小明' city; // 'Beijing' zip; // undefined, 因为属性名是zipcode而不是zip // 注意: address不是变量，而是为了让city和zip获得嵌套的address对象的属性: address; // Uncaught ReferenceError: address is not defined有些时候，如果变量已经被声明了，再次赋值的时候，正确的写法也会报语法错误：
// 声明变量: var x, y; // 解构赋值: {x, y} = { name: '小明', x: 100, y: 200}; // 语法错误: Uncaught SyntaxError: Unexpected token =这是因为JavaScript引擎把{开头的语句当作了块处理，于是=不再合法。解决方法是用小括号括起来：
({x, y} = { name: '小明', x: 100, y: 200}); -
this指针
ECMA决定，在strict模式下让函数的this指向undefined，因此，在strict模式下，你会得到一个错误：
'use strict'; var xiaoming = { name: '小明', birth: 1990, age: function () { var y = new Date().getFullYear(); return y - this.birth; } }; var fn = xiaoming.age; fn(); // Uncaught TypeError: Cannot read property 'birth' of undefined这个决定只是让错误及时暴露出来，并没有解决
this应该指向的正确位置。有些时候，喜欢重构的你把方法重构了一下：
'use strict'; 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指针只在age方法的函数内指向xiaoming，在函数内部定义的函数，this又指向undefined了！（在非strict模式下，它重新指向全局对象window！）
修复的办法也不是没有，我们用一个that变量首先捕获this：
'use strict'; var xiaoming = { name: '小明', birth: 1990, age: function () { var that = this; // 在方法内部一开始就捕获this function getAgeFromBirth() { var y = new Date().getFullYear(); return y - that.birth; // 用that而不是this } return getAgeFromBirth(); } }; xiaoming.age(); // 25用
var that = this;，你就可以放心地在方法内部定义其他函数，而不是把所有语句都堆到一个方法中。 -
其他
map()、filter()、sort()函数
标准对象
-
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)注意！！！：你可能观察到了一个
非常非常坑爹的地方，就是JavaScript的月份范围用整数表示是0~11，0表示一月，1表示二月……，所以要表示6月，我们传入的是5！这绝对是JavaScript的设计者当时脑抽了一下，但是现在要修复已经不可能了。时区
var d = new Date(1435146562875); d.toLocaleString(); // '2015/6/24 下午7:49:22'，本地时间（北京时区+8:00），显示的字符串与操作系统设定的格式有关 d.toUTCString(); // 'Wed, 24 Jun 2015 11:49:22 GMT'，UTC时间，与本地时间相差8小时 -
JSON
'use strict'; var xiaoming = { name: '小明', age: 14, gender: true, height: 1.65, grade: null, 'middle-school': '\"W3C\" Middle School', skills: ['JavaScript', 'Java', 'Python', 'Lisp'] }; //{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}
面向对象编程
-
原型
'use strict'; function Student(name) { this.name=name; } Student.prototype.hello=function(){ return 'Hello, '+this.name+'!'; } //var xiaoming = new Student('小明'); //xiaoming.hello(); -
class
class Student { constructor(name) { this.name = name; } hello() { alert('Hello, ' + this.name + '!'); } } //var xiaoming = new Student('小明'); //xiaoming.hello(); -
class继承
class PrimaryStudent extends Student { constructor(name, grade) { super(name); // 记得用super调用父类的构造方法! this.grade = grade; } myGrade() { alert('I am at grade ' + this.grade); } }
