ES6新增语法

#ES6新增语法| 来源: 网络整理| 查看: 265

ES6

ES6是JavaScript一个非常重要的版本,新增了很多的重要的语法规范对 JavaScript性能有了很大提升

`` 模板字符串支持换行支持解析变量和表达式使用 ${} 包裹表达式和变量, 就可以直接解析表达式/变量 var a = `北京今天天气挺好的`; //(注意这里不要空格输出才是对齐的格式) console.log(a); var int1 = 100 ; var int2 = 200 ; // 使用 ${} 包裹表达式 int1 + int2 console.log( `我今天的考试成绩是 ${int1 + int2} 分` ); var int3 = int1 + int2 ; console.log( `我今天的考试成绩是 ${int3} 分` ); let const 声明变量

let const 声明变量

let

1. let声明的变量不会被预解析提前调用结果是报错 2. let声明的变量变量名称不能重复 3. 每一个{}对于 let声明的变量就是一个独立的作用域 4. 在 {} 中使用let定义的变量只能在 {} 中调用使用

注意

在循环中使用 let 声明循环变量每一次循环对于 let 声明的变量都是一个独立的作用域每一次循环相当于声明一个独立的变量存储不同的数据

const

1. const声明的变量不会被预解析提前调用结果是报错 2. const声明的变量变量名称不能重复 3. 每一个{}对于 const声明的变量就是一个独立的作用域 4. 在 {} 中使用const定义的变量只能在 {} 中调用使用

注意

const声明的变量存储的数据不能改变使用const声明的变量也成为常量

应用

在 JavaScript程序中 let 一般用于声明存储 `基本数据类型` 布尔字符串数值 null undefined const 一般用于声明存储 `引用数据类型` 数组对象函数 const a = '北京' ; // 对 const 声明的变量重复赋值 // 变量a 中存储的是北京 // 企图通过重复赋值修改变量a中存储的字符串北京改成数值100 // const 声明的变量不能修改存储的数据 // a = 100 ; const arr = [100,200,300,400]; // 变量arr中存储的是内存地址 // 企图修改数组中索引下标是0的单元存储的数据 // 不会影响变量arr 中存储的数组的内存地址 arr[0] = '北京' ; // 直接给变量arr赋值存储'北京' 是不能执行的 // arr = '北京' ; 解构语法形式解构数组 let [ 变量1 , 变量2 ... ] = 数组 ; 数组中的数据按照顺序解构赋值给左侧的变量 const arr = [100,200,300,400,500]; // 将数组中的数值一一对应赋值给变量存储 let a = arr[0]; let b = arr[1]; let c = arr[2]; let d = arr[3]; let e = arr[4]; // 结构赋值语法形式 // 将数组中的数据一一对应的赋值给左侧结构语法设定的变量 let [ a,b,c,d,e ] = arr ; console.log( a,b,c,d,e ); const arr = [100,200,300,[400,500,600]]; let [a,b,c,[d,e,f]] = arr ; console.log( a,b,c, d,e,f ); 解构对象 let { 键名1 , 键名2 ... } = 对象 ; 第一步使用键名从对象中调用数据第二步使用键名声明一个变量存储调用的数据 let { 键名1:变量名 , 键名2:变量名 ... } = 对象 ; 第一步使用键名从对象中调用数据第二步使用变量名声明一个变量存储调用的数据 const obj = { name:'张三' , age:18 , phone:[ 123 , 456 , 789 ], qian:[ {id:1}, {id:2}, {id:3}, ], } let { name:n , age:a , phone:[ p1 , p2 , p3 ], qian : [ {id:id1} , {id:id2} , {id:id3} ], } = obj ; console.log( n , a ); console.log( p1 , p2 , p3 ); console.log( id1 , id2 , id3 ); console.log( obj.qian[2].id); 自执行函数 (函数)() !函数() ~函数() 自执行函数 / 立即执行函数

普通函数

分成两个步骤过程步骤1 声明封装函数步骤2 调用执行函数

自执行函数或者立即执行函数

本质是在声明封装函数的同时就调用执行函数

(封装的匿名函数)()

将封装的函数作为一个整体通过 () 语法来调用执行这个函数普通函数可以反复调用立即执行函数/自执行函数只能调用执行一次

~匿名函数()

!匿名函数()

注意

立即执行函数只能调用执行`一次` !语法和 ~语法不支持箭头函数语法形式 // 普通函数 // 声明封装函数 function fun(){ console.log(111) }; // 调用执行函数普通语法封装的函数可以反复调用 fun(); fun(); fun(); fun(); // 立即执行函数 / 自执行函数 (function(){ console.log(222) })(); !function(){ console.log(333) }(); ~function(){ console.log(444) }(); Set Map数据类型 Set数据类型是 ES6 新增的数据类型以类似于`数组`的形式存储数据

特点不能存储重复的数据

声明

const 变量 = new Set( 数组 );

新增

变量.add( 数据 ); 每次只能新增一个数据

删除

变量.delete( 数据 );

清除

变量.clear(); 删除所有的数据

判断有没有

变量.has( 数据 );

循环

变量.forEach( function( 参数1 , 参数2 , 参数3 ){} ) 参数1 set类型数据单元存储的数据数值参数2 set类型数据单元存储的数据数值参数3 原始set数据类型利用 set类型进行数组去重 const arr = [1,2,3,1,2,3,4,1,2,3,4,5,1,2,3,4,5,6,1,2,3,4,5,6,7,]; // 创建一个set数据类型 // 使用需要去重的数组作为 set类型设定的数据 // set类型中存储的数据就是数组中去重之后的数据 const set = new Set( arr ); console.log( set ); // 将 set类型中存储的不重复的数组的数据存储到新数组中 // 使用展开运算符将 set类型中不重复的数据存储到新数组中 const newArr = [ ...set ]; const newArr = [ ...new Set( arr ) ]; console.log( newArr ); map 数据类型是 ES6 新增的数据类型以类似于 `对象`的形式存储数据 // 使用构造函数语法形式创建一个新的Map数据类型 // 在创建 Map数据类型的同时设定存储的数据数值 // 存储的数据必须是二维数组语法形式 // 二维数组中第一个单元存储键名 // 二维数组中第二个单元存储键值 const map = new Map( [ [ 'name' , '张三' ] , [ 'age' , 18 ] , [ 'sex' , '男' ] , [ 'addr' , '北京' ] ] ); // 向 Map数据类型新增数据单元 map.set( 'phone' , 123 ); map.set( 'email' , '[email protected]' ); // 利用键名从 Map数据类型中获取对应的键值 console.log( map.get( 'name' ) ) ; console.log( map.get( 'phone' ) ) ; // 利用键名从 Map数据类型中删除对应的单元 map.delete( 'name' ); // 清空就是删除所有的数据单元 map.clear(); // 判断有没有 console.log( map.has('name') ); console.log( map.has('age') ); // 循环遍历 // 参数1 map数据类型存储的键值 // 参数2 map数据类型存储的键名 // 参数3 原始map数据类型 map.forEach( function( a,b,c ){ console.log( a , b , c ); }) console.log( map ); 箭头函数

箭头函数

ES6新增的语法形式将匿名函数语法形式使用箭头函数语法形式执行箭头函数主要是为了配合 `面向对象语法`编程

基本语法

function(){} 匿名函数改写成 ()=>{} 箭头函数

简写语法

如果箭头函数只有一个参数可以不写 ( ) 如果箭头函数只有一行代码可以不写 { }

重点

箭头函数主要是为了配合面向对象编程语法箭头函数和普通函数的this指向不同我是div标签 const oDiv = document.querySelector('div'); // 普通函数 oDiv.addEventListener( 'click' , function(){ console.log(111) } ); // 箭头函数 oDiv.addEventListener( 'click' , () => console.log(222) ); const arr = [ 100,200,300,400,500,600 ]; // 匿名函数 arr.forEach( function( item ){ console.log( item ) }); // 箭头函数 arr.forEach( item => console.log( item ) ); class语法声明构造函数 promise语法

【本文地址】

ES6新增语法

ES6新增语法

今日新闻

推荐新闻