首页 > 其他分享 >Day02-ES6新语法

Day02-ES6新语法

时间:2023-03-11 17:34:43浏览次数:70  
标签:ES6 console log Day02 语法 ECMAScript var 变量

ES6新语法糖(初级)

1 什么是ES6

JS语法分三块

  1. ECMAScript : 基础语法
  2. BOM 浏览器对象 history location window
  3. DOM 文档对象 document

编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA(一个类似W3C的标准组织)参与进行标准化的语法规范。ECMAScript定义了:

语言语法 – 语法解析规则、关键字、语句、声明、运算符等。

类型 – 布尔型、数字、字符串、对象等。

原型和继承

内建对象和函数的标准库 – JSONMath数组方法对象自省方法等。

ECMAScript标准不定义HTML或CSS的相关功能,也不定义类似DOM(文档对象模型)的Web API,这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景,无论是浏览器环境还是类似node.js的非浏览器环境。

ECMAScript标准的历史版本分别是1、2、3、5。

那么为什么没有第4版?其实,在过去确实曾计划发布提出巨量新特性的第4版,但最终却因想法太过激进而惨遭废除(这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统)。

ES4饱受争议,当标准委员会最终停止开发ES4时,其成员同意发布一个相对谦和的ES5版本,随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”,因此,ES5规范中包含这样两句话

ECMAScript是一门充满活力的语言,并在不断进化中。

未来版本的规范中将持续进行重要的技术改进

2009年发布的改进版本ES5,引入了Object.create()Object.defineProperty()getterssetters严格模式以及JSON对象。

ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,2015年6月正式发布。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

可以参考:

http://es6.ruanyifeng.com/

2. 语法新特性

2.1 变量声明: let

​ 我们都是知道在ES6以前,var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升, 例如

//es5
function test(bool) {
    if(bool){
        var a='Hello world!';
    }
    // a可以被访问到
    console.log("test方法内部执行,变量的值:"+a); 
}

//执行
test(true);

以上的代码实际上是:

//es5
function test(bool) {
    //成员变量声明,变量提升
     var a;
    if(bool){
        a='Hello world!';
    }
    // a可以被访问到
    console.log("test方法内部执行,变量的值:"+a);
}

接下来ES6主角登场:

​ 我们通常用let和const来声明,let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域?在一个函数内部 ,在一个代码块内部。看以下代码

//es6
function test2(bool) {
    //成员变量声明
    // var a;
    if(bool){
        //赋值
        // var a='Hello world!';//变量泄露
        let a='Hello world!';//变量定义在局部位置
    }
    //看不到let定义在代码块里面的变量
    console.log("test2方法内部执行,变量的值:" + a);
}

//执行
test2(true);

2.2 常量声明 const

const 用于声明常量,看以下代码

//定义常量
const username='Rose'
//会报错:常量不能更换引用
// username='Jack';

console.log(username)

js的常量类似,相当于static final效果,只生成一个对象,不能改变引用。

2.3 模板字符串

​ es6模板字符简直是开发者的福音啊,解决了ES5在字符串功能上的痛点。

​ 将表达式嵌入字符串中进行拼接。用${}来界定。

//es5
let username='Rose'
//变量需要拼接
console.log('姓名是:'+username)
//es6
//使用反引号,可以直接打印变量的值,表达式类似于java的el表达式
console.log(`姓名是:${username}`)

2.4 函数的参数默认值(了解)

​ ES6为参数提供了默认值。在定义函数时便初始化了这个参数,以便在参数没有被传递进去时使用。

 function show(username='Jack'){
    console.log(username);
}
//传参后,使用传入的值
show('Rose');
//没有传参(undifined),自动使用默认值
show()

​ 这样可以避免不传参时出现undefined

2.5 箭头函数

ES6也有类似于java中lambda表达式的函数简略写法, 也就是箭头函数。

# 箭头函数最直观的特点
1. 不需要function关键字来创建函数
2. 省略return关键字,只有一行代码

看下面代码(ES6)

 (response,message) => {
    .......
 }

相当于ES5代码

function(response,message){
    ......
}

ES5:

//es5
var add=function(a,b){
    return a+b;
}
function add(a,b){
    return a+b;
}
console.log(add(100,200))

ES6:


//es6
var add2=(a,b)=>{
    return a+b;
}
console.log(add2(100,200))

//es6更简化写法
//如果函数只有一句话,可以省略大括号和return
var add3=(a,b)=>a+b;
console.log(add3(100,200))

标签:ES6,console,log,Day02,语法,ECMAScript,var,变量
From: https://www.cnblogs.com/-turing/p/17206525.html

相关文章

  • Day03-vue&es6新语法(高级)
    vue的学习网站:https://www.runoob.com/vue2/vue-tutorial.html回顾#1.ajax:完成页面局部刷新,异步交互。#2.axios发送ajax异步请求: 1)引入库<scriptsrc=""></script>......
  • SpringMVC-day02
    SpringMVC-day0201_基于SSM的三层架构目标了解基于SSM框架的三层架构技术体系路径SSM框架的三层架构技术体系SSM框架的三层架构技术体系在三层架构开发时会......
  • Spring-day02
    Spring-day0201_开启Spring注解目标能够设置Spring的注解扫描路径注解开发的意义在配置文件中开启Spring注解扫描注解开发的意义在Spring中除了可以使用xml......
  • ES6-ES11 ES11 BigInt
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title......
  • ES6-ES11目录
    ES6-ES11let变量声明以及声明特性ES6-ES11let实践案例ES6-ES11const声明常量以及特点ES6-ES11变量的解构赋值ES6-ES11模板字符串ES6-ES11对象的简化写法ES6-ES......
  • ES6-ES11 ES11绝对全局对象globalThis
    原视频忽略变量环境,引用全局变量html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width......
  • ES6-ES11 ES11String.prototype.matchAll
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title......
  • ES6-ES11 ES11可选链操作符
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title......
  • BitBake使用攻略--BitBake的语法知识二
    目录写在前面1.BitBake中的任务2.任务配置2.1依赖2.1.1内部任务间的依赖2.1.2不同菜谱下的任务间依赖2.1.3运行时态下的依赖2.1.4递归依赖2.1.5任务间的依赖2.2事......
  • Java常见语法机制总结
    volatile机制CPU与三级缓存:为了解决CPU按照摩尔定律提升的计算能力和内存缓慢发展的不平衡,三级缓存以其比内存更加强悍的读写能力,在CPU和内存中间充当了一层缓存,缓解了这......