第七节：JS中的基础知识总结

1、变量声明

使用var和不使用var的区别：（本质上不使用var其实是为window增加了一个属性）

• 使用var定义的变量存在变量提升，不使用不存在
• 使用var定义的变量不可以删除，window属性可以删除
• 使用var定义的变量有作用于，不使用var定义的变量没有作用于

2、es6的let 和 const 命令

const: 用const命令来声明一个常量（不可改变的量称之为常量），用const声明的常量不可再进行赋值，否则会报错；声明时就要赋值，否则会报错；

const a='es5';
a='es2015';// 报错  Assignment to constant variable.
//初始化不赋值也会报错
const b; // Missing initializer in const declaration

const与var区别：

• var声明的变量可以重复声明；const不允许重复声明
• var声明的变量属于window顶层对象；const声明的变量不属于（避免污染全局变量）
• var存在变量提升；const不存在变量提升，必须先声明后使用
• const存在暂时性死区
• const拥有块级作用域

var str = 'es6';
var str = 'es6';
//const重复声明会报错
const str = 'es6';
const str = 'es6'; //'str' has already been declared
//const声明变量不属于顶层window对象
var str = 'es6';
console.log(str); // es5
console.log(window.str); // es5
const str2 = 'es2015';
console.log(str2); //es2015
console.log(window.str2); //undefined
//变量提升
console.log(str);// es5
var str = 'es6'; 
console.log(str2); //报错 str2 is not defined
const str2 = 'es6';
//暂时性死区，在定义之前不可使用，定义之前存在一个暂时性死区
if(true){
console.log(str2);
const str2 = "es6";
}
//块级作用域
if(true){
var str = "es6";
}
console.log(str); // es5
if(true){
const str2 = "es6";
}
console.log(str2); //str2 is not defined，{}形成了一个块级作用域，const声明的变量只能在块级作用域内部使用

const定义的常量真的不可以改变吗？

const str3 = 'es6';
str3 = 'es2015'; //Assignment to constant variable
const obj ={name:'leo',age:24};
obj.age = 18;
console.log(obj); // {name: 'leo', age: 18}，age变成了18，可以改变
const arr = [1,2,3];
arr[0] = '5';
console.log(arr); //(3) ['5', 2, 3]，第一个值变成了字符串5，可以改变

为什么基础类型改变报错，对象和数组就可以改变了呢？
这是因为基本数据类型（number、string、Boolean、null、undefined）和引用数据类型（数组、对象、正则表达式）的存储模式不同。

基本数据类型存储在栈内存中，引用数据类型存储在堆内存中，栈中存储的仅仅是引用地址，当修改堆内存中的值时，引用地址并未改变，所以数组和对象可以修改它的值。如果想要实现对象的值定义后就不可以改变，可以使用对象的freeze()方法。

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。

const obj ={name:'leo',age:24};
Object.freeze(obj); //冻结对象
obj.age = 18;
console.log(obj); // {name: 'leo', age: 24}，age依然为24未改变
//数组依然适用
const arr = [1,2,3];
Object.freeze(arr); //冻结数组
arr[0] = '5';
console.log(arr); //(3) [1, 2, 3]

注意： freeze()只能冻结浅层次数据，如果对象中有一个属性为引用数据类型，此值是不能被冻结的。如果想要深层次冻结，需要自己封装函数进行冻结

const esObj ={
name:'leo',
age:24,
extension:[1,2,3]
};
Object.freeze(esObj); //冻结对象
esObj.extension[0]= 18;
console.log(esObj ); //esObj中的extension第一个值被改变成了18

//封装冻结对象方法，关于方法的定义与使用后续会详细说明，需使用function关键字
function myFreeze(obj){
   Object.freeze(obj);
   Object.keys(obj).forEach(function(key){
        if(typeof obj[key] == 'object'){
          myFreeze(obj[key]);//递归
        }
   })
}

let命令： 用来声明一个变量；（建议优先使用const，如果此值需要改变，改为let，这样会更安全）

• 不允许重复声明
• 不属于Windows顶层对象
• 不存在变量提升

//不允许重复声明
let str = 'es6';
let str = 'es6';//报错'str' has already been declared
//不属于window顶层对象
let str = 'es6';
console.log(window.str);// undefined
//不存在变量提升
console.log(str); //报错 str is not defined
let str = 'es6';
//暂时性死区
if(true){
	console.log(str); //报错Cannot access 'str' before initialization
	let str = 'es6';
}
//块级作用域
if(true){
	let str = 'es6';
	console.log(str); //es6
}
console.log(str); //报错 str is not defined

2、类型转换

每一个基础类型都有一个对应的方法：Number()、String()、Boolean()

数据类型简单写法的快捷转换

1. 转布尔类型：两个感叹号（!!）
2. 转数字，在转换值前面使用一元加（+）
3. 转字符串，在转换的值后面加空字符串（+’’）

//转布尔
!!0; //false
!!null; //false
!![]; //true
!![1,2]; //true
//转数字
+null; //0
+undefined; //NaN
+'125a'; //NaN
+'100'; //100
+true; //1
+[];//0
+[1,2,3]; //NaN
+{};//NaN
+{a:1}; //NaN
//转字符串
[1,2] + ''; //'1,2'
{a:1} + '' //0
{} + ''; //0
'abc' + ''; //'abc'
456 +''; //'456'

3、操作符

1. 加法操作（存在隐式类型转换，更偏向于字符串）；只要有一个字符串，另一个就会被转换为字符串；undefined、null、布尔类型、数字混合运算时，所有东西都会先转换成数字
2. 关系运算符（存在隐式类型转换，更偏向于数字）

备注：本内容学习总结来源于喜马拉雅冰山工作室沙翼老师主讲的（陪你读书（JavaScript WEB前端））
慕课网谢成带你快速入坑ES6