JS语法基础整理

作者: 栗子daisy | 来源:发表于2020-08-21 11:02 被阅读0次

JS语法基础整理
JS基础和WebAPIs的关联性
4/07day28_js基础
-----Web APIs-----
React-Native 随笔
web前端 -- Day23 js高级
发现•分享—2019-01-15
022 JS操作
Dom
DOM

块作用域 : { }
JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。const与let都具有块级作用域。
常量 const
由于var和let申明的是变量，如果要申明一个常量，在ES6之前是不行的，我们通常用全部大写的变量来表示“这是一个常量，不要修改它的值”：var PI = 3.14;
ES6标准引入了新的关键字const来定义常量。
var、let、const的区别

var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

变量提升
JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部。JavaScript引擎自动提升了变量的声明，但不会提升变量的赋值。

function foo() {
    var x = 'Hello, ' + y;
    console.log(x);
    var y = 'Bob';
}
foo(); // Hello, undefined

6.解构赋值
ES6中，可以使用解构赋值，直接对多个变量同时赋值。嵌套层次和位置要保持一致
let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
还可以忽略某些元素
let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前两个元素，只对z赋值第三个元素
对象中取出若干属性，也可以使用解构赋值
var person = { name: '小明', age: 20}; var {name, age} = person;
嵌套的对象属性进行赋值，只要保证对应的层次是一致的

var person = {  name: '小明',  address: { city: 'Beijing',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

解构赋值还可以使用默认值，这样就避免了不存在的属性返回undefined的问题：
var {name, single=true} = person;
变量已经被声明, 解构赋值用小括号括起来(把{开头的语句当作块处理，于是=不合法)
var x, y; ({x, y} = { name: '小明', x: 100, y: 200});
对应的属性不存在，变量将被赋值为undefined，这和引用一个不存在的属性获得undefined是一致的。如果要使用的变量名和属性名不一致，可以用下面的语法获取：

var person = {
    name: '小明',
    passport: 'G-12345678',
};

// 把passport属性赋值给变量id:
let {name, passport:id} = person;
id; // 'G-12345678'
// 注意: passport不是变量，而是为了让变量id获得passport属性
passport; // Uncaught ReferenceError: passport is not defined

使用场景
交换两个变量x和y的值，不再需要临时变量：
var x=1, y=2; [x, y] = [y, x]
快速获取当前页面的域名和路径：
var {hostname:domain, pathname:path} = location;
函数接收对象作为参数，可使用解构直接把对象的属性绑定到变量中。

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)
7.方法
绑定到对象上的函数称为方法，和普通函数没啥区别，但在方法内部可以使用this关键字，this是特殊变量，它始终指向当前对象。this.XXX可以拿到当前对象属性。
要保证this指向正确，必须用obj.xxx()的形式调用！
方法内部定义其他函数，函数内this又指向undefined，修复的办法：用that变量首先捕获this
控制this的指向:
getAge.apply(需要绑定的this变量, [函数本身的参数]);
call(需要绑定的this变量, 函数本身的参数);
参数使用不同，比如调用Math.max(3, 5, 2)，分别用apply()和call()实现如下：
Math.max.apply(null, [3, 5, 2]); // 5
Math.max.call(null, 3, 5, 2); // 5
重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此损耗较少