js笔记--变量部分

A.函数

1.定义
　　(1)function abs(x) {...}
　　(2)var abs = function (x) {};
　　　function (x) { ... }是一个匿名函数，它没有函数名。可是，这个匿名函数赋值给了变量abs，因此，经过变量abs就能够调用该函数。
　　　上述两种定义彻底等价，注意第二种方式按照完整语法须要在函数体末尾加一个;，表示赋值语句结束。调用时abs(10)

2.调用函数时，按顺序传入参数
　　(1)传入的参数比定义的参数多，不会产生影响，正常返回
　　(2)传入的参数比定义的参数少，如abs(),返回结果NaN，由于参数为undefined，函数计算结果为NaN

3.关键字arguments
　　只在函数内部起做用，而且永远指向当前函数的调用者传入的全部参数，功能至关于一个数组（但不是数组）
　　例：
　　　　for (var i=0; i<arguments.length; i++) {
　　　　　　console.log('arg ' + i + ' = ' + arguments[i]);
　　　　}

4.rest参数(新定义参数，浏览器可能不会支持)
　　function foo(a, b, ...rest)
　rest参数只能写在最后，前面用...标识，从运行结果可知，传入的参数先绑定a、b，多余的参数以数组形式交给变量rest
　若是传入的参数连正常定义的参数都没填满，rest参数会接收一个空数组[]

5.return写法注意事项
　　(1)正确写法：
　　　　return { name: 'foo' };
　　　　或
　　　　return { // 这里不会自动加分号，由于{表示语句还没有结束
　　　　　　name: 'foo'
　　　　};
　　(2)错误写法：
　　　　return // 这句执行时会自动添加分号，至关于return undefined;
　　　　{ name: 'foo' }; // 这行语句已经无法执行到了

B.变量做用域与解构赋值

1.若是内部函数和外部函数的变量名重名怎么办?
　　　例：
　　　　　function foo() {
　　　　　　　var x = 1;
　　　　　　　function bar() {
　　　　　　　　　var x = 'A';
　　　　　　　　　console.log('x in bar() = ' + x); // 'A'
　　　　　　　}
　　　　　　　console.log('x in foo() = ' + x); // 1
　　　　　　　bar();
　　　　　}

　　　　　foo();

　　　　执行结果：
　　　　　　x in foo() = 1
　　　　　　x in bar() = A

　这说明JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。
　若是内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。

2.变量提高
　js函数定义有个特色，它会先扫描整个函数体的语句，把全部申明的变量“提高”到函数顶部
　可是只自动提高了变量y的声明，不会提高变量y的赋值
　　例：
　　　　function foo() {
　　　　　　var x = 'Hello, ' + y;
　　　　　　console.log(x);
　　　　　　var y = 'Bob';
　　　　}

　　　　foo();

　　　　执行结果：
　　　　　　Hello, undefined
　因此js最好在在函数内部首先申明全部变量，可以使用一个var定义全部用到的变量，可先不赋值

3.全局做用域
　不在任何函数内定义的变量就具备全局做用域，全局做用域的变量实际上被绑定到window的一个属性，window.变量名

4.名字空间
　全局变量会绑定到window上，不一样的JavaScript文件若是使用了相同的全局变量，或者定义了相同名字的顶层函数，都会形成命名冲突，而且很难被发现。
　减小冲突的一个方法是把本身的全部变量和函数所有绑定到一个全局变量中。
　　例：
　　　　// 惟一的全局变量MYAPP:
　　　　var MYAPP = {};

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

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

5.块级做用域(关键字let，ES6新引入)
　因为JavaScript的变量做用域在函数内部，在for循环等语句块中的i不是局部做用域的变量，在整个函数内都可使用
　　例：
　　　　function foo() {
　　　　　　for (var i=0; i<100; i++) {
　　　　　　　　...
　　　　　　}
　　　　　　i += 100; // 仍然能够引用变量i
　　　　}
　为了解决块级做用域，ES6引入了新的关键字let，用let替代var能够申明一个块级做用域的变量：

　　例：
　　　　function foo() {
　　　　　　var sum = 0;
　　　　　　for (let i=0; i<100; i++) {
　　　　　　　　sum += i;
　　　　　　}
　　　　　　// SyntaxError:
　　　　　　i += 1; //此时再调用变量i会报错，使用let定义的变量i的做用于只存在于for循环中
　　　　}


6.常量定义(关键字 const，ES6新引入)
　ES6之前一般用所有大写的变量来表示“这是一个常量，不要修改它的值”：
　　例：
　　　　var PI = 3.14;
　如今引入关键字const来申明常量(const与let都具备块级做用域)
　　例：
　　　　const PI = 3.14;
　　　　PI = 3; // 某些浏览器不报错，可是无效果！
　　　　PI; // 3.14

7.解构赋值(支持火狐、谷歌、edge浏览器)
　可使用解构赋值，对多个变量同时赋值：
　　例：
　　　　(1)数组对变量同时赋值，使用[]括住变量
　　　　　　var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
　　　　(2)忽略前两个元素，只对z赋值第三个元素，可忽略某个位置对指定位置赋值给变量
　　　　　　let [, , z] = ['hello', 'JavaScript', 'ES6'];
　　　　(3)数组自己嵌套
　　　　　　let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
　　　　　需注意嵌套位置的先后对应！！
　　　　(4)对象属性对变量赋值(变量名须要与对象属性名一致！！！不一致给变量赋值为undefined)，使用{}括住变量
　　　　　　例：
　　　　　　　　var person = {
　　　　　　　　　　name: '小明',
　　　　　　　　　　age: 20,
　　　　　　　　　　gender: 'male',
　　　　　　　　　　passport: 'G-12345678',
　　　　　　　　　　school: 'No.4 middle school'
　　　　　　　　};
　　　　　　　　var {name, age, passport} = person;

　　　　(5)嵌套的对象属性对变量进行赋值，需注意嵌套位置的先后对应！！
　　　　　　例：
　　　　　　　　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, street}} = person;

　　　　(6)获取对象属性值，并更名
　　　　　　let {name, passport(对应对象属性名):id(实际变量名)} = person;
　　　　　注意: passport不是变量，而是为了让变量id得到passport属性；至关于获取对象属性名为passport的值，并赋值给变量id

　　　　(7)若对象属性不存在，给变量赋值默认值
　　　　　　例：
　　　　　　　　// 若是person对象没有single属性，默认赋值为true:
　　　　　　　　var {name, single=true} = person;
　　　　　　　　name; // '小明'
　　　　　　　　single; // true

　　　　(8)变量已申明作对象解构赋值
　　　　　　例：
　　　　　　　　var x, y; // 声明变量:
　　　　　　　　({x, y} = { name: '小明', x: 100, y: 200}); //需在外面加上小括号，不然会报错

8.解构赋值的使用场所
　　(1)交换两个变量x和y的值:
　　　　var x=1, y=2;
　　　　[x, y] = [y, x]

　　(2)快速获取当前页面的域名和路径：
　　　　var {hostname:domain, pathname:path} = location;

　　(3)若是一个函数接收一个对象做为参数，那么，可使用解构直接把对象的属性绑定到变量中。
　　　例如，下面的函数能够快速建立一个Date对象：
　　　　function buildDate({year, month, day, hour=0, minute=0, second=0}) {
　　　　　　return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
　　　　}
　　　它的方便之处在于传入的对象只须要year、month和day这三个属性：
　　　　buildDate({ year: 2017, month: 1, day: 1 });
　　　　// Sun Jan 01 2017 00:00:00 GMT+0800 (CST)

　　　也能够传入hour、minute和second属性：
　　　　buildDate({ year: 2017, month: 1, day: 1, hour: 20, minute: 15 });
　　　　// Sun Jan 01 2017 20:15:00 GMT+0800 (CST)

 

参考自廖雪峰老师的官方网站