前端|ES6语法新特性


ES6语法新特性

  • 为什么要学习 ES6
  • let 关键字
    • 不允许重复声明
    • 块儿级作用域(局部变量):
    • 不存在变量提升:
    • 不影响作用域链:
    • let案例:点击div更改颜色
    • 应用场景
  • const 关键字
    • 声明必须赋初始值:
    • 不允许重复声明:
    • 值不允许修改:
    • 块儿级作用域(局部变量):
    • 应用场景:
  • 变量和对象的解构赋值
    • 应用场景:
  • 模板字符串
    • 应用场景:
  • 简化对象和函数写法
  • 箭头函数
    • 箭头函数的注意点:
    • 特性:
    • 基本写法和箭头函数写法
    • 特性
      • this指向
      • 不能作为构造实例化对象
      • 不能使用 arguments 变量
    • 简写
    • 需求-1:点击 div 2s 后颜色变成『粉色』:
      • 传统写法存在问题:
      • 传统写法问题解决:
      • es6箭头函数写法
      • 需求-2 从数组中返回偶数的元素
    • 箭头函数总结
  • ES6中函数参数的默认值
  • rest参数
  • 扩展运算符
    • 应用
      • 数组合并
      • 数组的克隆
      • 将伪数组转为真正的数组
  • Symbol
    • Symbol 特点:
  • 迭代器
    • 概述:
    • 特性:
    • 工作原理:
  • 生成器
    • 概述:
  • Set集合
  • map集合

最近在学vue发现老师讲的好多都用到了es6的语法,所以补一下笔记,有些确实也不是很懂见谅
为什么要学习 ES6
ES6 的版本变动内容最多,具有里程碑意义; ES6 加入许多新的语法特性,编程实现更简单、高效; ES6 是前端发展趋势,就业必备技能;

let 关键字 let 关键字用来声明变量,使用 let 声明的变量有几个特点:
  1. 不允许重复声明;
  2. 块儿级作用域(局部变量);
  3. 不存在变量提升;
  4. 不影响作用域链;
//1.声明变量 // let关键字使用示例: let a; // 单个声明 let b, c, d; // 批量声明 let e = 1; // 单个声明并赋值 let f = 18, g = 'dyk', h = []; // 批量声明并赋值

不允许重复声明
// 1. 不允许重复声明; let name='dyk'; let name='cb'; //报错 :Uncaught SyntaxError: Identifier 'name' has already been declared

前端|ES6语法新特性
文章图片

块儿级作用域(局部变量):
// es5 作用域:全局,函數,eval //块儿级作用域(局部变量); //不光是大括号,还可以作用在 if else while for的大括号里 { let cat = "tomcat"; console.log(cat); } console.log(cat); // 报错:Uncaught ReferenceError: cat is not defined

前端|ES6语法新特性
文章图片

不存在变量提升: 什么是变量提升:
就是在变量创建之前使用(比如输出:输出的是默认值),let不存在,var存在;
// 什么是变量提升:就是在变量创建之前使用(比如输出:输出的是默认值),let不存在,var存在; console.log(name); // 可输出默认值 console.log(name2); // 报错:Uncaught ReferenceError: Cannot access 'name2' before initialization var name = "dyk"; // 存在变量提升 let name2 = "cb"; // 不存在变量提升

前端|ES6语法新特性
文章图片

不影响作用域链: 什么是作用域链:很简单,就是代码块内有代码块,跟常规编程语言一样,上级代码块中的局部变量下级可用
{ let p = "dyk"; function fn() { console.log(p); // 这里是可以使用的 } fn(); }

let案例:点击div更改颜色
let案例:点击div更改颜色 - 锐客网 > .item { width: 100px; height: 50px; border: solid 1px rgb(42, 156, 156); float: left; margin-right: 10px; }
let案例:点击div更改颜色
> // 获取div元素对象 let items = document.getElementsByClassName('item'); // 遍历并绑定事件 for (var i = 0; i < items.length; i++) { items[i].onclick = function () { // 修改当前元素的背景颜色 this.style.background = 'pink'; // 写法一:常规写法一般无异常 //items[i].style.background = 'pink'; // 报错} }

原来用var声明i如果 items[i].style.background = ‘pink’; 会报错
因为var在循环完后是3,item[3]不存在所以只能用this
前端|ES6语法新特性
文章图片

let案例:点击div更改颜色 - 锐客网 > .item { width: 100px; height: 50px; border: solid 1px rgb(42, 156, 156); float: left; margin-right: 10px; }
let案例:点击div更改颜色
> // 获取div元素对象 let items = document.getElementsByClassName('item'); // 遍历并绑定事件 for (let i = 0; i < items.length; i++) { items[i].onclick = function () { // 修改当前元素的背景颜色 // this.style.background = 'pink'; // 写法一:常规写法一般无异常 items[i].style.background = 'pink'; // 写法二 // 写法二:需要注意的是for循环内的i必须使用let声明 // 如果使用var就会报错,因为var是全局变量, // 经过循环之后i的值会变成3,items[i]就会下标越界 // let是局部变量 // 我们要明白的是当我们点击的时候,这个i是哪个值 // 使用var相当于是: // { var i = 0; } // { var i = 1; } // { var i = 2; } // { var i = 3; } // 下面的声明会将上面的覆盖掉,所以点击事件每次找到的都是3 // 而使用let相当于是: // { let i = 0; } // { let i = 1; } // { let i = 2; } // { let i = 3; } // 由于let声明的是局部变量,每一个保持着原来的值 // 点击事件调用的时候拿到的是对应的i } }

应用场景 以后声明变量使用 let 就对了;
const 关键字 const 关键字用来声明常量,const 声明有以下特点:
  1. 声明必须赋初始值;
  2. 标识符一般为大写(习惯);
  3. 不允许重复声明;
  4. 值不允许修改;
  5. 块儿级作用域(局部变量);
声明必须赋初始值:
// 1. 声明必须赋初始值; const NAME="dyk"; const NAME2;

前端|ES6语法新特性
文章图片

不允许重复声明:
// 3. 不允许重复声明;const NAME = "dyk"; const NAME = "cb";

前端|ES6语法新特性
文章图片

值不允许修改: 注意:
对数组元素的修改和对对象内部的修改是可以的(数组和对象存的是引用地址);
const NAME = "dyk"; NAME = "cb";

前端|ES6语法新特性
文章图片

const arr=['dyk','cb','lfw'] arr.push('lwy') console.log(arr)

前端|ES6语法新特性
文章图片

块儿级作用域(局部变量):
// 5. 块儿级作用域(局部变量); { const CAT = "tomcat"; console.log(CAT); } console.log(CAT);

前端|ES6语法新特性
文章图片

应用场景: 声明对象类型使用 const,非对象类型声明选择 let;
变量和对象的解构赋值 什么是解构赋值:
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值;
// ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值; // 1、数组的解构赋值 const F4 = ["小沈阳", "刘能", "宋小宝", "赵四"]; let [a, b, c, d] = F4; // 这就相当于我们声明4个变量a,b,c,d,其值分别对应"小沈阳", "刘能", "宋小宝", "赵四" console.log(a + b + c + d); // 小沈阳刘能宋小宝赵四 // 2、对象的解构赋值 const F3 = { name: "赵本山", age: 22, sex: "男", xiaopin: function () { // 常用 console.log("我会演小品!"); } } let { name, age, sex, xiaopin } = F3; // 注意解构对象这里用的是{} console.log(name + age + sex + xiaopin); // 赵本山22男 xiaopin(); // 此方法可以正常调用

应用场景: 频繁使用对象方法、数组元素,就可以使用解构赋值形式;
模板字符串 概述:
模板字符串(template string)是增强版的字符串,用反引号(`)标识,特点:
字符串中可以出现换行符;
可以使用 ${xxx} 形式引用变量;
> // 声明字符串的方法:单引号('')、双引号("")、反引号(``) // 声明 let string = `我也一个字符串哦!`; console.log(string); // 特性 // 1、字符串中可以出现换行符,原来单引号要用字符串拼接 let str = `
  • 大哥
  • 二哥
  • 三哥
  • 四哥
`; console.log(str); // 2、可以使用 ${xxx} 形式引用变量 let s = "大哥"; let out = `${s}是我最大的榜样!` console.log(out);

应用场景: 当遇到字符串与变量拼接的情况使用模板字符串;
简化对象和函数写法 概述:
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁;
> // ES6允许在对象的大括号内直接写入变量和函数作为对象的属性和方法 // 变量和函数 let name = "dyk"; let change = function () { console.log("我是dyk为自己代言"); } //创建对象 const school = { // 完整写法 // name:name, // change:change // 简化写法 name, change, // 声明方法的简化 say() { console.log("言行一致!"); } } school.change(); school.say();

箭头函数 概述:
ES6允许使用箭头(=>)定义函数,箭头函数提供了一种更加简洁的函数书写方式,箭头函数多用于匿
名函数的定义;
箭头函数的注意点:
  1. 如果形参只有一个,则小括号可以省略;
  2. 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果;
  3. 箭头函数 this 指向声明时所在作用域下 this 的值;
  4. 箭头函数不能作为构造函数实例化;
  5. 不能使用 arguments;
特性:
  1. 箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值;
  2. 不能作为构造实例化对象;
  3. 不能使用 arguments 变量;
基本写法和箭头函数写法
// ES6允许使用箭头(=>)定义函数 // 传统写法:无参数 var say = function () { console.log("hello!"); } say(); // ES写法2:无参数 let speak = () => console.log("hello 哈哈!"); speak(); // 传统写法:一个参数 var hello = function (name) { return "hello " + name; } console.log(hello("dyk")); // ES6箭头函数:一个参数 let hi = name => "hi " + name; console.log(hi("dyk")); // 传统写法:多个参数 var sum = function (a, b, c) { return a + b + c; } console.log(sum(1, 2, 3)); // ES6箭头函数:多个参数 let he = (a, b, c) => a + b + c; console.log(he(1, 2, 3));

特性 this指向
结论:箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值
// 特性 // 1、箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值 const school = { name: "大哥", } // 传统函数 function getName() { console.log("getName:" + this.name); } // 箭头函数 getName1 = () => console.log("getName1:" + this.name); window.name = "dyk"; // 直接调用 getName(); getName1(); // 使用call调用 getName.call(school); getName1.call(school); // 结论:箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值

不能作为构造实例化对象
// 2、不能作为构造实例化对象 let Persion = (name,age) => { this.name = name; this.age = age; } let me = new Persion("dyk",24); console.log(me); // 报错:Uncaught TypeError: Persion is not a constructor

不能使用 arguments 变量
// 3、不能使用 arguments 变量
let fn = () => console.log(arguments);
fn(1,2,3);
// 报错:Uncaught ReferenceError: arguments is not defined
简写
// 箭头函数简写 // 1.省略小括号,当形参只有一个参数时 let add=n =>{ return n+n; } console.log(1) // 省略花括号,当代码只有一条语句时,此时return必须省略,并且语句的执行结果就是函数的返回值let pow= n =>n*n; console.log(pow(2))

需求-1:点击 div 2s 后颜色变成『粉色』: 传统写法存在问题:
箭头函数的实践和应用场景 - 锐客网 > div { width: 200px; height: 200px; background: #58a; } > // 需求-1 点击 div 2s 后颜色变成『粉色』 // 获取元素 let ad = document.getElementById('ad'); // 绑定事件 ad.addEventListener("click", function () { // 传统写法 // 定时器:参数1:回调函数;参数2:时间; setTimeout(function () { console.log(this); this.style.background = 'pink'; }, 2000); // 报错Cannot set property 'background' of undefined });

报错,因为定时器的this对象是window
传统写法问题解决:
箭头函数的实践和应用场景 - 锐客网 > div { width: 200px; height: 200px; background: #58a; } > // 需求-1 点击 div 2s 后颜色变成『粉色』 // 获取元素 let ad = document.getElementById('ad'); // 绑定事件 ad.addEventListener("click", function () { // 传统写法 // 保存 this 的值 let _this = this; // 定时器:参数1:回调函数;参数2:时间; setTimeout(function () { console.log(this); _this.style.background = 'pink'; }, 2000); });

es6箭头函数写法
箭头函数的实践和应用场景 - 锐客网 > div { width: 200px; height: 200px; background: #58a; } > // 需求-1 点击 div 2s 后颜色变成『粉色』 // 获取元素 let ad = document.getElementById('ad'); // 绑定事件:这也是错误写法,这里的this还是window // ad.addEventListener("click", () => { // // ES6写法 // // 定时器:参数1:回调函数;参数2:时间; // setTimeout(() => this.style.background = 'pink',2000); // } // ) // 绑定事件 ad.addEventListener("click", function () { // ES6写法 // 定时器:参数1:回调函数;参数2:时间; // 这个this才是ad setTimeout(() => this.style.background = 'pink', 2000); } )

需求-2 从数组中返回偶数的元素
箭头函数的实践和应用场景 - 锐客网 > div { width: 200px; height: 200px; background: #58a; } > // 需求-1 点击 div 2s 后颜色变成『粉色』 // 获取元素 let ad = document.getElementById('ad'); // 绑定事件:这也是错误写法,这里的this还是window // ad.addEventListener("click", () => { // // ES6写法 // // 定时器:参数1:回调函数;参数2:时间; // setTimeout(() => this.style.background = 'pink',2000); // } // ) // 绑定事件 ad.addEventListener("click", function () { // ES6写法 // 定时器:参数1:回调函数;参数2:时间; // 这个this才是ad setTimeout(() => this.style.background = 'pink', 2000); }) //需求-2 从数组中返回偶数的元素 const arr = [1, 6, 9, 10, 100, 25]; // const result = arr.filter(function(item){ // if(item % 2 === 0){ // return true; // }else{ // return false; // } // }); const result = arr.filter(item => item % 2 === 0); console.log(result); // 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调 // 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法

箭头函数总结 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法
ES6中函数参数的默认值 概述:
ES允许给函数的参数赋初始值;
函数参数默认值 - 锐客网 > //ES6 允许给函数参数赋值初始值 //1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则) function add(a, b, c = 10) { return a + b + c; } let result = add(1, 2); console.log(result); // 13 //2. 与解构赋值结合 // 注意这里参数是一个对象 function connect({ host = "127.0.0.1", username, password, port }) { console.log(host) console.log(username) console.log(password) console.log(port) } connect({ host: 'atguigu.com', username: 'root', password: 'root', port: 3306 })

rest参数 ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments;
rest参数 - 锐客网 > // ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments; // ES5获取实参的方式 function data() { console.log(arguments); //arguments是对象 } data("大哥", "二哥", "三哥", "四哥"); // ES6的rest参数...args,rest参数必须放在最后面 function data1(...args) { console.log(args); // fliter some every map//rest参数是数组 } data1("大哥", "二哥", "三哥", "四哥"); function fn(a,b,...args){ console.log(a); console.log(b); console.log(args); } fn(1,2,3,4,5,6)

前端|ES6语法新特性
文章图片

扩展运算符 … 扩展运算符能将数组转换为逗号分隔的参数序列;
扩展运算符(spread)也是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参
数序列,对数组进行解包;
扩展运算符 - 锐客网 > // ... 扩展运算符能将数组转换为逗号分隔的参数序列 //声明一个数组 ... const tfboys = ['易烊千玺', '王源', '王俊凯']; // => '易烊千玺','王源','王俊凯' // 声明一个函数 function chunwan() { console.log(arguments); } chunwan(...tfboys); // chunwan('易烊千玺','王源','王俊凯')

应用 数组合并
//1. 数组的合并 const kuaizi = ['王太利', '肖央']; const fenghuang = ['曾毅', '玲花']; // 传统的合并方式 // const zuixuanxiaopingguo = kuaizi.concat(fenghuang); const zuixuanxiaopingguo = [...kuaizi, ...fenghuang]; console.log(zuixuanxiaopingguo); //["王太利", "肖央", "曾毅", "玲花"]

数组的克隆
//2. 数组的克隆 const sanzhihua = ['E', 'G', 'M']; const sanyecao = [...sanzhihua]; // ['E','G','M'] console.log(sanyecao);

将伪数组转为真正的数组
//3. 将伪数组转为真正的数组 const divs = document.querySelectorAll('div'); //获取的是对象伪数组 const divArr = [...divs]; console.log(divArr); // arguments

Symbol Symbol 概述:
ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是JavaScript 语言的第七种数据类
型,是一种类似于字符串的数据类型;
Symbol 特点:
  1. Symbol 的值是唯一的,用来解决命名冲突的问题;
  2. Symbol 值不能与其他数据进行运算;
  3. Symbol 定义的对象属性不能使用for…in循环遍历 ,但是可以使用Reflect.ownKeys 来获取对象的
    所有键名;
symbol - 锐客网 > //创建Symbol let s = Symbol(); // console.log(s, typeof s); let s2 = Symbol('dyk'); let s3 = Symbol('dyk'); console.log(s2 == s3); // false //Symbol.for 创建 let s4 = Symbol.for('dyk'); let s5 = Symbol.for('dyk'); console.log(s4 == s5); // true //不能与其他数据进行运算 // let result = s + 100; // let result = s > 100; // let result = s + s;

迭代器 概述: 遍历器(Iterator)就是一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数
据结构只要部署 Iterator 接口,就可以完成遍历操作;
特性: ES6 创造了一种新的遍历命令 for…of 循环,Iterator 接口主要供 for…of 消费;
原生具备 iterator 接口的数据(可用 for of 遍历):
Array;
Arguments;
Set;
Map;
String;
TypedArray;
NodeList;
工作原理:
  1. 创建一个指针对象,指向当前数据结构的起始位置;
  2. 第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员;
  3. 接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员;
  4. 每调用 next 方法返回一个包含 value 和 done 属性的对象;
    注:需要自定义遍历数据的时候,要想到迭代器
迭代器 - 锐客网 > // 声明一个数组 const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧']; // 使用 for...of 遍历数组 for (let v of xiyou) { console.log(v); } let iterator = xiyou[Symbol.iterator](); // 调用对象的next方法 console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); // 重新初始化对象,指针也会重新回到最前面 let iterator1 = xiyou[Symbol.iterator](); console.log(iterator1.next());

前端|ES6语法新特性
文章图片

生成器 概述: 生成器函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同;
生成器 - 锐客网 > // 生成器其实就是一个特殊的函数 // 异步编程 纯回调函数 node fs ajax mongodb // yield:函数代码的分隔符 function* gen() { console.log(111); yield '一只没有耳朵'; console.log(222); yield '一只没有尾部'; console.log(333); yield '真奇怪'; console.log(444); } let iterator = gen(); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); console.log("遍历:"); //遍历 for (let v of gen()) { console.log(v); }

Set集合 ES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯一的,集合实现了 iterator
接口,所以可以使用『扩展运算符』和『for…of…』进行遍历,集合的属性和方法:
  1. size 返回集合的元素个数;
  2. add 增加一个新元素,返回当前集合;
  3. delete 删除元素,返回 boolean 值;
  4. has 检测集合中是否包含某个元素,返回 boolean 值;
  5. clear 清空集合,返回 undefined;
Set集合 - 锐客网 > // Set集合 let s = new Set(); console.log(s, typeof s); let s1 = new Set(["大哥", "二哥", "三哥", "四哥", "三哥"]); console.log(s1); // 自动去重 // 1. size 返回集合的元素个数; console.log(s1.size); // 2. add 增加一个新元素,返回当前集合; s1.add("大姐"); console.log(s1); // 3. delete 删除元素,返回 boolean 值; let result = s1.delete("三哥"); console.log(result); console.log(s1); // 4. has 检测集合中是否包含某个元素,返回 boolean 值; let r1 = s1.has("二姐"); console.log(r1); // 5. clear 清空集合,返回 undefined; s1.clear(); console.log(s1);

map集合 ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类
型的值(包括对象)都可以当作键。Map 也实现了iterator 接口,所以可以使用『扩展运算符』和
『for…of…』进行遍历;
Map 的属性和方法:
  1. size 返回 Map 的元素个数;
  2. set 增加一个新元素,返回当前 Map;
  3. get 返回键名对象的键值;
  4. has 检测 Map 中是否包含某个元素,返回 boolean 值;
  5. clear 清空集合,返回 undefined;
Map集合 - 锐客网 > // Map集合 // 创建一个空 map let m = new Map(); // 创建一个非空 map let m2 = new Map([ ['name', '尚硅谷'], ['slogon', '不断提高行业标准'] ]); // 1. size 返回 Map 的元素个数; console.log(m2.size); // 2. set 增加一个新元素,返回当前 Map; m.set("皇帝", "大哥"); m.set("丞相", "二哥"); console.log(m); // 3. get 返回键名对象的键值; console.log(m.get("皇帝")); // 4. has 检测 Map 中是否包含某个元素,返回 boolean 值; console.log(m.has("皇帝")); // 5. clear 清空集合,返回 undefined; m.clear(); console.log(m);

【前端|ES6语法新特性】概述:
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过 class 关键
字,可以定义类。基本上,ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做
到,新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已;
知识点:
  1. class 声明类;
  2. constructor 定义构造函数初始化;
  3. extends 继承父类;
  4. super 调用父级构造方法;
  5. static 定义静态方法和属性;
  6. 父类方法可以重写;
class类 - 锐客网 > //手机 ES5写法 function Phone5(brand,price){ this.brand = brand; this.price = price; } // 添加方法 Phone5.prototype.call = function(){ console.log("我可以打电话!"); } // 实例化对象 let HuaWei5 = new Phone5("华为5",5999); HuaWei5.call(); console.log(HuaWei5); // ES6写法 class Phone6 { // 构造方法,名字是固定的 constructor(brand, price) { this.brand = brand; this.price = price; } // 打电话,方法必须使用该方式写 call() { console.log("我可以打电话!"); } } let HuaWei = new Phone6("华为6", 5999); HuaWei.call(); console.log(HuaWei);

    推荐阅读