ES6 新增属性 let / const 与 var 的差异，箭头函数，箭头函数与普通函数的区别，解构赋值，展开(扩展)运算符 等等

H5阿垚
283 阅读7分钟

ES6 新增两种变量声明的 方式

ES6 前只有一种 var 声明变量

<p align=left>let 变量名 = 值</p>
<p align=left>const 变量名 = 值</p>

let / const 与 var 的差异

  1. let/const 声明的变量 不允许出现重复的
使用 var 声明变量的时候可以出现重复声明, 后一个值会覆盖前一个值
let/const 不允许
  1. let/const 声明的变量没有变量提升
var 关键字声明的变量有变量提升, 值为 undefined
let/const 不允许
  1. let/const 声明的变量 会受限于 所有的 {}
 也就是 使用 let/const 声明的变量 是块级作用域
  var 声明的变量 只受限于 函数内部

let 与 const 的差异

1. let 声明的叫做变量(后续可以修改内部的值); 
   const 声明的叫做常量(后续不能修改内部的值, 也不能修改内部的引用地址)
   
2. 因为 let 后续可以修改变量的值, 所以他首次定义时, 可以不赋值;
   但是 const 声明的时常量, 后续不能重新修改他的值, 所以首次定义时, 必须赋值

箭头函数

箭头函数就是对 ES5 普通函数的 写法上的一个优化
箭头函数的普通写法:  (书写形参) => {书写函数调用时执行的代码}
箭头函数的优化：
   1. 箭头函数如果只有一个形参的时候, 可以不写前边的小括号(除此之外, 必写)
   2. 如果箭头函数的函数体, 只有一行代码, 那么可以省略 大括号(并且会默认将这行代码 return)
  1. ES5 函数定义
function fun1(){
    console.log(111);
}
    fun1();  // 函数调用
  1. ES6 箭头函数
const fun2 = (a,b) => {
    console.log(a+b);
}
fun2(100,200); // 300
  1. 当形参只有一个时 可以不写小括号
const fun3 = a => {
    console.log(a);
}
fun3(400);  // 400
  1. 当执行代码只有一行时 大括号可以省略
// 原始代码
const fun4 = (a,b) => {
    return a+b;
}
let sum = fun4(100,500);
console.log(sum);   // 600

// 优化后
const fun4 = (a,b) => a+b;
let sum = fun4(100,500);
console.log(sum);   // 600

箭头函数与普通函数的区别

  1. 箭头函数内部没有 this; 所以他的 this 取决于 书写的时候
// 普通函数
function fun1(){
    console.log(this);  // this => window
}
fun1();

// 箭头函数
const fun2 = () => {
    console.log(this);   // this => window
}
fun2()
  1. 箭头函数内部没有arguments对象
function fun3(){
    console.log(arguments);
}
fun3(1,2,3,4,5,56);  // Arguments(6) [1, 2, 3, 4, 5, 56, callee: ƒ, Symbol(Symbol.iterator): ƒ]


const fun4 = () => {
    console.log(arguments); // 箭头函数内部没有argument
}
fun4(300,400,500);  // 会报错

解构赋值

快速从数组或对象中取出成员的一种语法

  1. ES5 拿到数组所有成员的方法
var arr = [1, 2, 3];
var num1 = arr[0];
var num2 = arr[1];
var num3 = arr[2];
console.log(num1, num2, num3);  // 1 2 3
  1. ES6 解构赋值, 解构数组时, 赋值号左边必须写 中括号, 代表数组的解构赋值
var arr = [1, 2, 3];
let [num1, num2, num3] = arr;
console.log(num1, num2, num3);  // 1 2 3
  1. ES5 拿到对象所有成员的方法
var obj = {
    a: 11,
    b: 21,
    c: 31
}
var obj1 = obj.a;
var obj2 = obj.b;
var obj3 = obj.c;
console.log(obj1, obj2, obj3);   // 11  21  31
  1. ES6 解构赋值, 解构对象时, 赋值号左边 必须写大括号, 代表对象的解构赋值
// 大括号内部必须书写对象的 key
var obj = {
    a: 11,
    b: 21,
    c: 31
}
let { a, b, c } = obj;  // ES6 解构赋值
console.log(a, b, c); // 11  21  31

展开(扩展)运算符

作用: 展开数组或者对象，相当于把数组两侧包裹的中括号去掉

语法: ...数组(对象)

// 数组1
var arr = [1, 2, 3];
console.log(arr);    // [1, 2, 3]
console.log(...arr);   // 1 2 3

// 数组2
var arr = [1, 2, 3];
var arr1 = [...arr, 100, 200, 300];
console.log(arr);  // [1, 2, 3]
console.log(arr1);   // [1, 2, 3, 100, 200, 300]

// 数组3
var arr = [1, 2, 3];
function fn(a, b, c) {
    console.log(a, b, c);
}
fn(arr, 100, 200);   //  [1, 2, 3, 100, 200, 300]

// 对象
var obj = {
    a: 1,
    b: 2
}
console.log(obj);   // {a: 1, b: 2}
console.log(...obj);  // 报错   JS 不支持这样的写法


// 对象的正确写法
var obj = {
    a: 1,
    b: 2
}
var obj1 = {
    ...obj,  // 扩展运算符
    c: 3,
    d: 4
}
console.log(obj1);  //   {a: 1, b: 2, c: 3, d: 4}

es6 新推出的两种数据结构 Set Map

  1. set 类似于 数组的 一种数据结构

    内部按照索引排序(但是不能通过索引取值)

    语法 let s = new Set([数据1, 数据2, 数据3])

    特点: 天生不支持重复数据

Set 方法

let s = new Set([3, 4, 5, 5, 5, 4, 4, 3]);
console.log('原始数据结构', s);  // Set(3) {3, 4, 5}
  • size (类似数组的 length); 作用: 获取到当前数据结构中 数据的数量
console.log(s.size);   // 3
  • add 方法; 作用: 向当前数据结构中 新增数据
s.add(100);
console.log(s);   // Set(4) {3, 4, 5, 100}
  • has() 作用: 查询当前数据结构中是否拥有该数据; 找到的时候, 返回 true, 否则返回false
console.log(s.has(100));  // true
console.log(s.has(5));   // true
  • clear() 作用: 清空当前数据结构
s.clear();
console.log(s);     // 清空后的数据 => Set(0) {size: 0}
  • forEach 作用: 遍历数据结构, 拿到数据结构的每一项
s.forEach(function (item, key, origin) {
    /* 数据结构中没有key 值,当前key值等于item值 ,充当顶位作用,如果不写key 
    后面的origin 会被看做key  (即必须写三个参数) */
    console.log(item, key, origin);
})
// 执行结果
/*
    3 3 Set(3) {3, 4, 5}
    4 4 Set(3) {3, 4, 5}
    5 5 Set(3) {3, 4, 5}
   
*/
  1. Map ES6 新推出的一种数据结构，和 set 一样, 也不支持重复数据，类似于 对象的 一种数据结构，但是 map 的 key 可以是任意类型的值，在实际开发中, 我们使用 map 的场景一般为 想要将对象的 key 用于字符串之外的数据时使用。

语法: var m = new Map([key, value])

var m = new Map([[100,200],[300,400]]);
console.log(m);  // Map(2) {100 => 200, 300 => 400}

Map 方法

  • size 返回当前数据结构的长度 数据数量(多少个)
console.log(m.size);    // 2
  • set() 新增数据
m.set('newKey',[1,2,3,4,5]);
console.log(m);       //  Map(3) {100 => 200, 300 => 400, 'newKey' => Array(5)}
  • get(key) 获取指定key 对应的 value
console.log(m.get(3));
console.log(m.get('newKey'));    // [1, 2, 3, 4, 5]
  • has(key) 查询数据结构中是否存在当前key 存在:true 不存在:false
console.log(m.has('12345'));   // false
console.log(m.has('newKey'));    // true
  • delete 删除当前数据结构对应的key
m.delete('newKey')
console.log(m);   // {100 => 200, 300 => 400}
  • clear 清空当前数据结构
m.clear();
console.log(m);     // Map(0) {size: 0}
  • forEach 遍历 item:对应的value值 key值:对应的key origin:原数据结构
m.forEach(function(item,key,origin){
    console.log(item,key,origin);   
})
/*  执行遍历 要把清空注释掉 不然遍历不到数据
    200 100 Map(2) {100 => 200, 300 => 400}
    map数据结构.html:55 400 300 Map(2) {100 => 200, 300 => 400}
*/

模块化语法

模块化开发:
    就是将功能拆分开, 每一个功能写到一个 JS 文件中，后续根据实际需求, 将不同的 JS 文件拼接到一起
    将多个逻辑分别写道多个JS文件中，每一个文件, 都只能使用当前文件内的变量，每一个文件, 就是一个独立的作用域(文件作用域)
     
ES6 使用  模块化开发的前提
    1. 页面必须使用 服务器的形式打开
    2. script 标签行内 必须配置 type="module"
    
如果想要拼接的话, 需要导入别的文件到自己文件内
前提: 导入的文件, 必须有导出的内容

导出: 向外部暴露出一些内容, 可以是变量, 也可以是函数
导入: 引入别的文件向外部暴露出的那些内容
avatar
文章
阅读
粉丝