搞定炫酷网页，关注ES6太有必要

绝地灬酷狼 2021-11-27 07:26 203阅读 0赞

[原文链接][Link 1]

# 导语 #

> 温故而知新，可以为师矣。及时地复习和总结我们学过的知识，不仅有利于知识的体系化，还有利于知识的深入理解。笔者也是一个前端技术迷，并且之前也系统的学习ES6一段时间，并对此有一些心得感悟。以下，我将深入浅出地与大家谈谈ES6，希望各位不吝点评。

## 1.let/const ##

*  let

> js中作用域分为：全局作用域、局部作用域、块级作用域 es6中的六种变量声明方法：var function let const import class.其声明的变量不会被提升;let不能重复声明；

console.log(a); //not define 
       console.log(b); //undefine 
       let a= 110 ; //不能重复声明，不然会报错 
       var b= 220; 
       复制代码

> let声明的变量的作用域都是块级的,通常以｛｝来化分块级作用域;

if( true){ 
       let = 10; 
       } 
       console.log(a); //not define 
       复制代码

*  const

> const声明的变量的作用域是块级的，声明的变量需赋初始值，且不可改变,也不能提升。

if(ture){ 
       console.log(PI); //not define 
       const PI= 3.14; 
       PI= 888; 
       console.log(PI); 
       } 
       console.log(PI); 
       复制代码

## 2.箭头函数 ##

*  普通的函数

function f(x,y){ 
       returen x*y; 
       } 
       console.log(f( 2, 3)); //6 
       复制代码

*  箭头函数

var f= (x,y)=>{ 
       return x*y; 
       } 
       console.log(f( 2, 3)); //6 
       复制代码

> 如果箭头函数中只有一个形参，那么（）可省略；如果函数体中只有一条语句(非return语句)，｛｝也可省略；如果有return,而且只有一条语句，return和｛｝可省略。如下：

*  满足条件后，最简形式下的箭头函数

var f= x=> x*x; 
       console.log(f( 3)); //9 
       复制代码

## 3.js中形参可以拥有默认值 ##

function f(x,y=10){ 
       console.log(x,y); //1 10 
       return x+y 
       } 
       console.log(f( 1)); //11 
       复制代码

function f(x=10,y){ 
       console.log(x,y); //1 undefine 
       return x*y; 
       } 
       console.log(f( 1); //NaN 
       复制代码

## 4.变量的结构赋值 ##

> 结构：从数组或对象中提取值，对变量进行赋值.如果左右结构不一样，具体对应细节看如下代码中所阐述的。

let [a,b,c,,d,e,f= 12,g,[h]]=[ 1, 2, 3, 4, 5, 6,[ 7],[ 8]] 
       console.log(a); //1 
       console.log(b); //2 
       console.log(c); //3 
       console.log(d); //5 
       console.log(e); //undefine 
       console.log(f); //6 
       console.log(g); //[7] 
       console.log(h); //8 
       
       复制代码

let [a,b,c,,d,e,f= 12]=[] 
       console.log(a); //undefine 
       console.log(b); //undefine 
       console.log(c); //undefine 
       console.log(d); //undefine 
       console.log(e); //undefine 
       console.log(f); //undefine 
       console.log(g); //12 
       复制代码

## 5.数组扩展 ##

*  Array.from()可以将伪数组转化为真正的数组：类似数组和可遍历的对（包括ES6新增的数据结构Set和Map）,是该构造器的静态方法。 Array.from(类数组对象) or Array.from(类数组对象，function(item,index)\{return\})

var lis= document.getElementsByTagName( "li"); 
       var rs= Array.from(lis); 
       console.log( Array.isArray(rs)); //true; 
       复制代码

*  Array.of()将一组值转换为数组,弥补构造器 Array（）的不足

var arr1= Array.of( 3); 
       var arr2= Array.of( "3"); 
       console.log(arr1,arr2); //[3] ['3'] 
       复制代码

*  Array.find():用于找出第一个符合条件的数组元素,找不到则是undefined。格式：Array.find(function(item,index)\{return 条件;\})

*  Array.findIndex()第一个符合条件的数组元素的索引。找不到则是-1
 *  Array.includes()判断元素是否在数组中存在,返回值是 true|false

let a=[ 1, 2, 3]; 
       a.includes( 1); //true 
       a.includes( "a"); //false 
       复制代码

*  Array.fill()给数组填充指定值. Array.fill(值) ;Arr.fill(值，起点，终点),填充时不包含终点。

let arr= new Array( 5); 
       arr.fill( "*"); 
       let arr1=[ 1, 2, 4, 5, 7] 
       arr1.fill( "hello", 0, 4) 
       console.log(arr); //['*','*','*','*','*'] 
       console.log(arr1); //["hello", "hello", "hello", "hello", 7] 
       复制代码

*  数组的扩展运算符

var arr=[ 1, 2, 3]; 
       var str= "hello"; 
       var arr2=[...str] 
       var arr1=[...arr] 
       console.log(arr1); //[1,2,3] 
       console.log(arr2); //["h", "e", "l", "l", "o"] 
       复制代码

## 6.字符串扩展 ##

*  1.  模版字符串

var age= 10; 
       var name= "Rose"; 
       console.log( `${name} is my friend ,she is ${age} years old.`) //Rose is my friend ,she is 10 years old. 
       复制代码

*  1.  trim() 左右空格都是去掉 ;trimLeft 左空格去掉;trimRight 右空格去掉
 *  1.  repeat(次数)重复字符串
 *  1.  includes()是否包含某个元素，返回值为true or false
 *  1.  startWith() 、endWith()分别为以哪些开始和结束,返回值为true or false

var str= " I am a student. "; 
       console.log(str.trim()); //I am a student. 
       console.log(str.trimLeft()); //I am a student. 
       console.log(str.trimRight()); //I am a student. 
       console.log(str.repeat( 5)); // I am a student. I am a student. I am a student. I am a student. I am a student. 
       console.log(str.includes( "am")); //true 
       console.log(str.startsWith( ""),str.endsWith( "")); //true true 
       console.log(str.padStart( 20, 2),str.padEnd( 20, 2)); //222 I am a student. I am a student. 222 
       复制代码

## 7.set和map的数据结构 ##

*  set

1.  set类似于对象的数组，但是成员的值都是唯一的，没有重复的值;
2.  set构造方法可以接收数组为参数，也可以转化为数组，可用于去除数组中重复值;
3.  用foreach遍历set数组,for of也可对其遍历。
4.  删除数组中的元素用Set.delete()。

*  map

1.  Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
2.  可以使用set方法添加元素。
3.  通过get(键)获取键值,然而当键时引用数据类型时，要比较栈区中的地址
4.  重复的键会覆盖

//创建Map 
       var m= new Map([ 
       [ "a", "hello"], 
       [ 1, 123], 
       [[ 1, 2, 3], 123] 
       ] 
       ); 
       //添加元素 
       m.set( "false", false); 
       m.set( "know",{ true: "true"}); 
       console.log(m); //{"a" => "hello", 1 => 123, Array(3) => 123, "false" => false, "know" => {…}} 
       //get()获取键值 然而当键时引用数据类型时 
       console.log(m.get( "know"),m.get([ 1, 2, 3])); //{true: "true"} undefined 
       let a=[ 1, 2, 3]; 
       m.set(a,{ name: "wangcai"}); 
       console.log(m.get(a)); //{name: "wangcai"} 
       当键名重复时，会覆盖。 
       m.set( "a", 000); 
       console.log(m); //{"a" => 0, 1 => 123, Array(3) => 123, "false" => false, "know" => {…}, …} 
       复制代码

## 8.Class类 ##

*  格式：class 类名｛constructor(参数)｛ this.属性=参数；｝ method()\{//对象中方法的简写，省略了function.\} ｝
 *  书写注意事项：class 是关键字，后面紧跟类名，类名首字母大写，采取的是大驼峰命名法则：类名之后是\{\}；在\{\}中，不能直接写语句，只能写方法，方法不需要使用关键字，方法和方法之间没有逗号。不是键值对。
 *  直接通过类名来访问的方法就是静态方法。如：Math.abs();这里的 abs()是静态方法。Array.isArray();isArray()是静态方法. 在方法名前加 static

class people{ 
       constructor(name,age,height){ 
       this.name=name; 
       this.age=age; 
       this.height=height; 
       } 
       static jump(){ 
       console.log( "我能跳100米"); 
       } 
       say(){ 
       console.log( `我是${ this.name},年龄${ this.age}岁,身高为${ this.height}cm`); 
       } 
       } 
       var person= new people( "Jack", 40, 180); 
       people.jump(); //我能跳100米 【类的静态方法】 
       console.log(person.say()); 
       复制代码

## 10.严格模式 ##

*  1.  严格模式的目的：规则，提高编译效率。
 *  1.  严格模式和非严格模式区别
 *  1.  在严格模式下不能使用没有var的变量
 *  1.  在严格模式下不能8进制的数字
 *  1.  在严格模式下不能把函数定义在if语句中
 *  1.  在严格模式下函数不能有重名的形参
 *  1.  在严格模式下不能arguments不再跟踪形参的变化
 *  1.  在严格模式下function中的this不指window,调用函数为undefined
 *  1.  在整个代码段中启动严格模式，还可以在一个函数中启动严格模式：

"use strict" 
       function f(a,b){ 
       console.log(a,b); //66 666 
       console.log( arguments[ 0], arguments[ 1]); //66 666 
       arguments[ 0]= 1111; 
       arguments[ 1]= 2222; 
       console.log(a,b); //66 666 
       console.log( arguments[ 0], arguments[ 1]); //1111 2222 
       } 
       f( 66, 666); 
       
       
       复制代码

[Link 1]: https://juejin.im/post/5b6ed2d2f265da0f4c6fee56