前端常用的ES6方法案例速查

103 阅读3分钟

​解构赋值

​let [a,b,c]=[1,2,3]; //基本格式
let [a, [[b], c]] = [1, [[2], 3]]; //嵌套格式
let [a, , b] = [1, 2, 3]; //可忽略格式
let [a = 1, b] = [];  //不完全解构格式
let [a, ...b] = [1, 2, 3]; //剩余运算符
let [a, ...b] = [1, 2, 3];//字符串等
*注意说明以上方法实际开发不常用,请重点看以下内容

一、 let/const

let和const简而概括就是不一样的变量声明。

  let

let表示声明局部变量,相较于之前的var声明,主要有以下几个区别:

  1. 不存在变量提升

  2. 存在暂时性死区

  3. 不允许重复声明,同一作用域内只能声明一次

  4. 存在块级作用域,,作用域之外不能访问里面声明的变量(块级作用域:只要存在花括号就是块级作用域)

    const

const声明常量,其使用规则除了声明之后不能修改之外,其他特性和let一样,另外const 在声明时必须被赋值。

二、箭头函数

1.箭头函数的语法:   (形参1,形参2...)=>{函数体}

2.箭头函数的作用:箭头函数一般用于回调函数,而回调函数通常是匿名函数。

3.箭头函数的特点:【重点】

(1).箭头函数不同于一般函数:

    1.一般函数可以先调用后定义,而箭头函数只能先定义后调用;

    2.一般函数有arguments,而箭头函数没有arguments,但可以使用rest参数(剩余参数);

    3.一般函数可以当作构造函数,而箭头函数不能当作构造函数,因为箭头函数没有自己的this;

(2).箭头函数的简写形式:

     1.箭头函数只有一个形参时可以省略圆括号;

     2.当箭头函数只有一条语句并且该语句会作为返回值返回时,可以省略花括号及return关键词;

(3).箭头函数中的this指向依赖外层函数中的this指向,箭头函数中的this指向不绑定当前调用者;

三、对象解构

1.当你有一份JSON数据的时候
res{ 
   'code': 200, 
   'user': {   
   'userId': 1,   
   'username': 'zhangsan'  
   } 
  'token':sakhdsdjhsafdjas.adshoajdaospdaohd.sdhaljdqpdeq  
  'result': 'success'
}
我们想要拿到result就可以使用结构的方式:const {result:res}
2.增加Map 和Java的map是一样的,但是无需指定泛型
const map = new Map()
在map中存储使用set方法
在map中取值使用get方法
map.set("token",token)
map.get("token")
3. forEach遍历
map.forEach(function(value, key) { 
  console.log(key + " = " + value);
   }, map)
4. set => set和Java也是差不多的,本质是无序去重数组
const set = new Set()
set.add(5)
set.add("String")

四、类型转换

// ArraySet
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操作符,将 SetArray
var myArray = [...mySet];
String
// String 转 Set
var mySet = new Set('hello'); 
// Set(4) {"h", "e", "l", "o"}

五、数组去重

var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]
1. 并
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}
2. 交
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}
3. 差
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}

六、函数

主要就是箭头函数(lambda)
(var/let/const)函数名=(参数)=> 返回 //单行var/let/const)函数名=(参数)=> { =》多行 
   代码块
   }

七、对象的优化

新增Object.keys()取出对象的键
新增Object.values()取出对象的值
Object.entries()取出键值对
1.对象的深拷贝 ​
  let user1={
     username:"zhangsan",
     job:{work1:"外卖",work2:"司机"}
     }
     let user2={...user1}
2.对象的合并
 let a = { name:'a' }
 let b = { name:'b' }
 let c = { name:'c' }
 let d = {...a,...b,...c}