js语言特性（上）

小坏坏 - 2021-09-29 20:54:05

ES标准ES5

ES5标准即ECMA-262第5版，为目前市面上全部浏览器都能支持并运行的js版本，目前大部分浏览器都只实现了ES6的部分特性，只有谷歌浏览器能够手动开启ES6语法的完全支持。所以当前的前端开发，不建议在浏览器端直接运行es6语法的js，但不代表不可以用高效的es6语法来开发前端，因为有babeljs这一将es6语法编译为向后兼容的js语法的工具。

ES6

ES6标准即ECMA-262第6版，在兼容ES5的基础上，新增了大量的方便好用的新特性，例如箭头函数，迭代器，解构赋值等，并且es6对面向对象有着更好的支持，新增了class这一语法糖，以及高效且高可读性的异步处理模块Promise

浏览器

由于网页在浏览器中运行，总要和浏览器有交互，所以在网页中运行的js不仅要符合ES标准

首先需要一套能够访问当前页面上的每个组件元素的节点的API，即DOM

例如如下代码中的html节点、head节点，id为haoye的div节点等

<html>
    <head>
        <title>haoye</title>
    </head>
    <body>
        <div id="haoye" name=“haoye”>
            haoye
        </div>
    </body>
</html>

调用函数document.getElementById("haoye")即可访问该div节点，可获取其中的name标签为haoye，innerHtml（首位标签中所包含的html代码）为haoye；

其次需要调用浏览器提供的一些变量接口，即BOM

例如document，navigator，window，location等，比如现在需要获取当前用户使用的浏览器版本

let agent = window.navigator.userAgent;
    if(/chrome/i.test(agent)){
        alert("谷歌");
    }else if(/firefox/i.test(agent)){
        alert("火狐");
    }else if(/msie/i.test(agent)){
        alert("低级IE浏览器");
    }else if("ActiveXObject" in window){
        alert("低级IE浏览器");
    }

总的来说，浏览器端的js由下列三个不同的部分组成：

ECMAScript 由ECMA-262定义，提供核心语言功能。文档对象模型（DOM），提供访问和操作网页内容的方法和接口浏览器对象模型（BOM），提供与浏览器交互的方法和接口基础语法变量

js的变量声明只与变量的作用域有关，与变量的具体类型无关

var

为ES5中的变量类型，具有声明后在其所在函数域内都能生效（存在变量提升现象）且能重复定义的特点，不建议使用

声明后在其所在域内都能生效（变量提升：代码块内定义，代码块外依然可以调用；代码块：{}内的代码，包含{}内的{}）

function test() {
    console.log(varTest); // undefined
    var varTest = 'test var OK.';
    console.log(varTest); // test var OK.
}

function test() {
    if(1){
        var varTest = 'test var OK.';
    }
    console.log(varTest); // test var OK.
}

可重复声明

function test() {
    var varTest = 'test var OK.';
    console.log(varTest); // test var OK.
    var varTest = 'test var OK2.';
    console.log(varTest); // test var OK2.
}

let

为ES6中新增特性，具有声明后只能在其所在代码块内生效且同级代码块内不能重复定义的特点

声明后只能在代码块内生效

function test() {
    console.log(letTest); // 报错 letTest is not defined
    let letTest = 'test var OK.';
    console.log(letTest); // 无法运行到这一步
}

function test() {
    if(1){
        let letTest = 'test var OK.';
        console.log(letTest); // test var OK.
    }
    console.log(varTest); // 报错 letTest is not defined
}

同级代码块内不能重复定义

function test() {
    let letTest = 'test var OK.';
    console.log(letTest); // test var OK.
    if(1){
        let letTest = 'test var OK.2';
        console.log(letTest); // test var OK.2
    }
    let letTest = 'test var OK3.';// 报错 'letTest' has already been declared
    console.log(letTest); // 无法运行到这一步
}

const

和let的特性一样，不同之处在于声明后无法进行重新赋值

let a=0;
a=2
const b=0
b=2 // 报错 Assignment to constant variable.

类型

js六大基本类型：undefined、string、number、object、boolean、function；

undefined：初始声明后未赋值的变量，关于null和undefinedstring：字符串number：数字，包括整数和浮点数object：以<Key,Value>格式标记数据，也就是大名鼎鼎的JSON（JavaScript Object Notation）数据格式，已超脱出JS本身，成为计算机业界数据格式的一种标准boolean：true or falsefunction：在js中，函数是作为一种参数而存在的，虽然这种写法在其他语言中也可以实现，但在js中的实现最为方便，应用最为广泛和灵活，在js的学习中，经常会遇到函数中的函数中的函数这类多层套娃的现象，会刷新大家对函数的认识最后

js是一种弱类型语言，只有在调用参数时才会判断参数的类型，不同的参数类型不影响其之间的运算，运算结果会由机器自动判断，例如

let a=0;
let b=1
console.log(a+b)//1
let c='1'
console.log(a+c)//01

编写代码时应尽量避免这种骚操作，不同类型的数据不要贸然进行运算，js的这个特点只能作为使用小技巧

操作符+-*/

基本的加减乘除，用于number类型数据计算，其中+也可用于字符串的拼接

++，--

自增、自减，同其他语言，++a则先加后调用，a++则先调用后加

&& | ||&：按位与&&：与，从左到右开始判断，若其中某项返回undefined、false、0等假值，则停止判断，返回true或false ；故可用于条件判断执行单行函数，例如

var user;  //定义变量
(!user && console.log("没有赋值"));  //返回提示信息“没有赋值”

等效于

var user;  //定义变量
if (!user){  //条件判断
    console.log("变量没有赋值");
}

|：按位或，也可用于interface或type编写时，限制变量参数的内容，例如

function open(info: string = "提示",
       type: "error" | "info" | "success" | "warning" = "info",
       autoHideDuration: number = 3000,
       open: boolean = true) {
    return {
      type: constant.OPEN_SNACK_ALERT,
      data: {
        info, type, open, autoHideDuration
      }
    }
}

||：或，从左到右，判断每一项，若结果不为false则返回其中首个不为undefined、false、0等假值，也可以用于为变量赋予默认值，例如

const a="haoye"
const b=a||"haoye" // 若a未被赋值，则b默认为"haoye"

逻辑与和逻辑或运算符具有以下 2 个特点：

在逻辑运算过程中，临时把操作数转换为布尔值，然后根据布尔值决定下一步的操作，但是不会影响操作数的类型和最后返回结果。受控于第一个操作数，可能不会执行第二个操作数。< > <= >= === == !== !=

分别为：小于、大于、小于等于、大于等于、严格等于、不严格等于、严格不等于、不严格不等于（具体区别在此，建议完全摒弃不严格类型）

取反，若变量a为undefined、false、0等假值，则!a为true；若为其他，则!a为false

条件运算符，格式同其他语言

b ? x : y

若b为真则执行x，反之执行y，（注意是”执行“，意为b、x、y可以换为有返回值的函数）

可用于变量判断赋值

const a = 2;
const b = a===2 ? 5:6 // a若等于2，则b等于5，反之等于6

假值falsenullundefined0'' (空字符串)NaN

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。

上一篇：前端文件花式直传OSS！后端：那我走？

下一篇：前端面试每日 3+1 —— 第898天

Tags 标签

javascript 前端 es6 node.js html

扩展阅读

加个好友，技术交流

码农天地

首页 HTML/CSS WEB服务器 PHP Linux 数据库异常报错插件工具美文欣赏站长直荐

js语言特性（上）

Tags 标签

扩展阅读

CSGO电竞API数据接口【West S2战队数据】分享使用演示

wamp配置局域网访问

接口测试工具apipost3.0版本对于流程测试和引用参数变量

vs code的使用与常用插件和技巧大全总结

没有伞的孩子 [必须] 要学会奔跑

学习之apipost3.0文档移动和文档管理教程

分享—如何使用apipost模拟手机实现请求发送

【分享】apipost如何使用mock测试

Apipost使用技巧之分享

[分享] 轻松快捷完成领导要求的word格式的接口文档，再也不用因为编写word格式的接口文档而烦恼

加个好友，技术交流

码农天地