前端百题斩【002】——js中6种变量声明方式

随着js的发展 目前共6种声明变量的方式 分别为var、let、const、function、class、import 下面分别阐述一下这六种方式。

1 var

在ES5阶段 用var定义变量 此阶段具有以下特点

没有块的概念 可以跨块访问 不能跨函数访问

存在变量提升。

// 代码没报错 而是打印出来了undefined 侧面说明了val变量存在变量提升

console.log(val); // undefined

var val 

console.log(val); // 1

2 let

在ES6阶段 出现了块的概念 新增了块级作用域 同时新增了let命令 let声明的变量具有以下特点

let声明的变量只在它所在的代码块有效

不存在变量提升。let不会像var那样会发生‘变量提升’现象 因此 变量需要先声明后再使用 否则会报错

暂时性死区。在代码块内 使用let命令声明变量之前 该变量都是不可用的

不允许重复声明。

// 实验一——只在所在的代码块有效

 let val 

 console.log(val); // 2

 let val 

console.log(val); // ReferenceError: val is not defined

// 实验2——不存在变量提升 暂时性死区

 console.log(val); // 报错

 let val 

}

// 实验三——不允许重复声明

 let val 

 let val // SyntaxError: Identifier val has already been declared

}

3 const

在let命令出现的同时 出现了const命令 其用于声明一个只读的常量 具有以下特点

一旦声明就必须立即初始化 一旦声明 常量值就不能改变了 指的是内存地址不能改变 块作用域内有效 不存在变量提升 存在暂时性死区。

对于上述的验证代码可以用参考let的。

对于const 还有一点比较有意思的指的详细阐述一下 const实际上保证的并不是变量的值不能改动 而是变量指向的那个内存地址不能改动。对于简单类型的数据而言 值就保存在变量指向的内存地址中 因此等同于常量。但对于复合类型的数据而言 变量指向的内存地址保存的只是一个指针 const只能保证这个指针是固定的 至于指向的数据结构不受控制。那么如何保证复合类型的值如何保证呢 可以使用Object.freeze()方法,该方法使对象的原始属性不可变 但仍然可以更改嵌套对象。为了使对象完全不可变 通过将嵌套对象上的所有属性冻结达到效果。

const constantize obj {

 Object.freeze(obj);

 Object.keys(obj).forEach( key {

 if ( typeof obj[key] object ) {

 constantize( obj[key] );

};

1.4 function

function命令用于定义一个函数 具有以下特点

函数声明后不会立即执行 需要调用的时候才执行 对支持ES5和ES6浏览器环境在块作用域内有一定区别 所以应避免在块级作用域内声明函数。

function test() {

 // ……

}

5 class

ES6语法引入了class关键字 用来定义类 该写法相比于对象原型的方式具有以下特点

相比于对象原型的方式写法更清晰 更像面向对象编程的语法 对有面向对象编程经验的同学更友好 。

class Calculate {

 constructor(x, y) {

 this.x 

 this.y 

 add() {

 return this.x this.y;

}

6 import

ES6在语言标准的层面上实现了模块功能 其中import命令就是用于加载模块 然后输出变量 其具有以下特点

import命令接受一对大括号 其里面的变量名必须与被导入的模块对外接口的名称相同 用as关键字可将输入的变量名重命名 import命令输入的变零都是只读的 import命令具有提升效果 会提升到整个模块的头部 首先执行 因为import命令是在编译阶段执行的 在代码运行之前 import是静态执行 不能使用表达式和变量 import会执行所加载的模块。

// 随便举个例子

import {add} from ./calcluate 

7 有意思的小问题

下面四种情况分别输出什么 为什么呢 欢迎各位老铁留言

情况一

for (let i i i ) {

 let i abc 

 console.log(i);

}

情况二

for (var i i i ) {

 var i abc 

 console.log(i);

}

情况三

for (let i i i ) {

 var i abc 

 console.log(i);

}

情况四

for (var i i i ) {

 let i abc 

 console.log(i);

}

前端开发：JS中关于八皇后算法的使用 在前端开发过程中，关于算法的使用也是非常常见的操作，尤其是处理一些复杂的业务场景，还有就是前端获取到后端返回的复杂结构的数据，所以说前端开发中处处都有算法使用的场景。开发者从接触编程开发开始，就与算法脱不了干系了，算法又和数学分不开，总归到底还是对逻辑思维和数学计算知识的使用。但是大部分开发者没有去深度的针对算法领域去深入，而且有时候太深奥的算法也不常用，往往就忽略了。但是作为程序开发人员，无算法无编程，经典的算法还是要掌握的，本篇博文就来分享一下关于八皇后算法在前端领域的运用，记录一下，方便后期查阅使用。
前端开发：JS中使用到的贪心算法场景 在前端开发过程中，除了一般的逻辑使用之外，也会涉及到算法相关的知识，比如冒泡排序、数组去重/合并、贪心算法、八皇后算法等等，这些都是比较常用的前端算法相关的知识点。关于前端实际开发中用到的算法，虽然没有后端要求的那么多，但是也有比较重要的算法知识，本篇博文就来分享一下关于贪心算法的相关知识点，记录一下，方便查阅使用。