ES6 新增语法

为什么是 ES6

每一次标准的诞生都意味着语言的完善,功能的加强, JavaScript 语言本身也有一些令人不满意的地方

  • 变量提升特性增加了程序运行时的不可预测性
  • 语法过于松散,实现相同的功能,不同的人可能会写出不同的代码

ES6 新增语法

let

ES6 中新增的用于声明变量的关键字

  • let 声明的变量只在所处的块级有效
  • 防止循环变量变成全局变量
  • 不存在变量提升
  • 暂时性死区 和 let 所在的块级区域进行绑定

注意:使用 let 关键字声明的变量才具有块级作用域,使用 var 声明的变量不具备块级作用域特性

const

作用:声明常量,常量就是值(内存地址)不能变化的值

  • 具有块级作用域
  • 声明常量时必须赋值
  • 常量赋值时,值不能修改(不能更改内存地址)

let const var 区别

  1. var 作用域为该语句所在打的函数内,且存在变量提升现象
  2. let 作用域为该语句所在的代码块内,不存在变量提升
  3. const 后面出现的代码中不能修改该常量的值

解构赋值

  • S6 中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构
  • 按照一定模式,从数组或对象中提取值,将提取出来的值赋给另外的变量

数组解构

  • 数组结构允许我们按照一一对应的关系从数组中提取值然后将值赋给变量

一一对应,没有值的话为 undefind

对象解构

箭头函数

() => {}

用来简化函数定义语法的

  • 函数中只有一句代码,且代码的执行结果就是返回值,可以省略大括号

  • 函数中如果形参只有一个 形参外侧的小括号也是可以省略的
function fn(v) {
    return v;
}
const fn = v => v;

this 指向问题

箭头函数不绑定 this 关键字,箭头函数中的 this,指向的是函数定义位置的上下文 this

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

const sum = (...args) => {
            let total = 0;
            args.forEach(item =>  total += item)
            return total;
        }
        console.log(sum(10,20)); //30
        console.log(sum(10,20,30)); //60

剩余参数和解构配合使用

 let ary = [‘zhangsan‘,‘lisi‘,‘wangwu‘];
        let [s1,...s2] = ary;
        console.log(s1); //‘zhangsan‘
        console,log(s2);//‘zhangsan‘, ‘lisi‘

原文地址:https://www.cnblogs.com/landuo629/p/12554586.html

时间: 2024-08-02 05:12:41

ES6 新增语法的相关文章

ECMAScript简介以及es6新增语法

ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的规格,后者是前者的实现.但通常两者是可互换的.) ESMAScript的历史 1996年11月,Netscape公司将Js提交给国际化标准组织ECMA,当初该语言能够成为国际化标准. 1997年,ECMAScript 1.0版本推出.(在这年,ECMA发布262号标准文件(ECMA-262)的第一版

【ES6新增语法详述】 𳞰

目录 1. 变量的定义 let const 2. 模版字符串 3. 数据解构 4. 函数扩展 设置默认值 箭头函数 5. 类的定义 class 6. 对象的单体模式 原文: http://blog.gqylpy.com/gqy/275 "@ ES6新增了关于变量的定义,函数扩展,数据结构,类,模块等概念,本文将详细介绍常用的ES6语法. *** 1. 变量的定义 let ES6中新增了let语法,用来声明变量,用法类似var. ==let定义的变量只在当前代码块内有效.== 如下示例: <

ES6新增语法总结

Array.prototype.keys():返回以索引值为遍历器的对象 1.Let 和 Const 在ES6以前,JS只有var一种声明方式,但是在ES6之后,就多了let跟const这两种方式.用var定义的变量没有块级作用域的概念,而let跟const则会有,因为这三个关键字创建是不一样的   var let const 变量提升 + - - 全局变量 + - - 重复赋值 + + - 重复声明 + - - 暂时死区 - + + 块作用域 - + + 只声明不赋值 + + - 2.类(Cl

ES6 数组新增语法

ES6新增语法 /* Array.from(类数组); 把一个类数组转换成一个真正的数组 类数组: 有下标有length; 返回值:转换之后的新数组 属于Array构造函数下面的方法,不是数组方法; */ { let aLis = document.querySelectorAll("#list li"); console.log(aLis); // { // aLis.map(item=>{ // return item; // }); // } { aLis = Array.

总结常见的ES6新语法特性

总结常见的ES6新语法特性 ES6给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数(=>).class等等.用一句话来说就是: ES6给我们提供了许多的新语法和代码特性来提高javascript的体验 不过遗憾的是,现在还没有浏览器能够很好的支持es6语法,点这里查看浏览器支持情况,所以我们在开发中还需要用babel进行转换为CommonJS这种模块化标准的语法. 因为下面我会讲到一些es6新特性的例子,如果想要

ES6常用语法

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. 虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了... 在我们正式讲解ES6语法之前,我们得先了解下Babel. Babel Babel是一个广泛使用的ES6转码器,可以将

在es6的语法下 对象的构造和继承实例

es6新增了class 类 可以更方便的创建和继承对象的属性和方法 但是这个class 只是一个语法糖 让创建对象的形式更加简便和直观下面是对该方法的简单实践 //es6 实例化对象和继承 class 新语法 class person{ constructor(name,age){ this.name=name this.age=age } } const person1=new person('bob',25) console.log(person1.age)//25 //extends 继承

ES6新语法之---对象字面量扩展、模板字符串(5)

这节课学习ES6中对象字面量扩展和新增模板字符串 第一部分:对象字面量扩展 1.简洁写法 ES6对于对象字面量属性提供了简写方式. 1.1:属性简写 //传统写法 var x = 2, y = 3, o = { x: x, y: y }; //ES6简洁写法 var x = 2, y = 3, o = { x, //属性名和赋值变量名相同时,可简写 y }; 1.2:方法简写 //传统写法 var o = { x: function() { //... }, y: function() { //

es6基本语法

//let和const申明变量和常量 //作用域只限于当前代码块 //使用let申明的变量作用域不会提升 //在相同的作用域下不能申明相同的变量 //for循环体现let的父子作用域 二.es6的解构赋值:一一对应 数组: let [name, age, sex] = ["Samve", 30, "men"]; console.log(name); console.log(age); console.log(sex); 对象: let {name, age, sex