ES6与一些前端基础工具总结(持续更新)

一、ES6

1.1 let const

for(let i = 0; i < 10; i++){
    console.log(i);
}
console.log("over for：" + i) //not defined
const 声明的变量是常量，类似于java中final关键字。
const name = 'imooc'
const obj = {
    name,
    site:'imooc.com',
    [name]:'React开发App',
    [name+'test']:'test',
    sayHello(){
        console.log('hello world!')
    }
}
{name: "imooc", site: "imooc.com", imooc: "React开发App", imooctest: "test", sayHello: ƒ}

1.2 解构

#数组结构
let arr = [1,2,3]
const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值
console.log(x,y,z);
#对象结构
const person = {
    name:"jack",
    age:21,
    language: ['java','js','css']
}
const {name,age,language} = person;

1.3 字符串扩展

let str = "hello heima";
console.log(str, " 中是否包含了heima => ", str.includes("heima"));
console.log(str, " 中是否以h开头 => ", str.startsWith("h"));
console.log(str, " 中是否以a结束 => ", str.endsWith("a"));

1.4 函数

#函数默认值
function add(a , b = 1) {
    return a + b;
}
#箭头函数
var print2 = (a, b) => console.log(a + b);
var hi = ({name}) => console.log("hello" + name)
person = {"name": "--你好"}
hi(person)//hello--你好
#map
let arr = ['1','20','-5','3'];
let newArr = arr.map(s => parseInt(s));
#reduce
newArr.reduce((a,b) => a+b)

1.5 扩展运算符

console.log(...[1,2])
console.log(1, ...[1,2], 5)

1.6 set和map

###set
let set = new Set();
set.add(1);
set.clear();// 清空
set.delete(2);// 删除指定元素
set.has(2); // 判断是否存在
set.forEach(item => console.log(item))//遍历元素
set.size; // 元素个数。是属性，不是方法。
let set2 = new Set([2,3,4,5,5]);
​
###map
const map = new Map()
map.set(key, value);// 添加
map.clear();// 清空
map.delete(key);// 删除指定元素
map.has(key); // 判断是否存在
map.size; // 元素个数。是属性，不是方法
for (let key of map.keys()) {
  console.log(key);
}
for (let value of map.values()) {
  console.log(value);
}
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}

1.7 类和继承

class User{
    constructor(name, age = 20){ // 构造方法
        this.name = name; // 添加属性并且赋值
        this.age = age;
    }
    sayHello(){
        console.log("hello")
    }
    static isAdult(age) {
        if(age >= 18) {
            return "成年人"
        }
        return "未成年人"
    }
}
class ZhangSan extends User{
    constructor(){
        super("张三", 30); 
        this.address = "上海";//设置子类中的属性，位置必须处于super下面
    }
}
// 测试
let zs = new ZhangSan();
console.log(zs.name, zs.address);
console.log(zs.sayHello());
console.log(ZhangSan.isAdult(20));

1.8 装饰器

@T //通过@符号进行引用该方法，类似java中的注解
class User {
    constructor(name, age = 20){
        this.name = name;
        this.age = age;
    }
}
function T(target) { //定义一个普通的方法
    console.log(target); //target对象为修饰的目标对象，这里是User对象
    target.country = "中国"; //为User类添加一个静态属性country
}
console.log(User.country);

1.9 export 和 import

class Util {
    static sum = (a, b) => a + b;
}
//导出该类
export default Util;
​
import Util from './Util'
//使用Util中的sum方法
console.log(Util.sum(1, 2));

1.10 数组

// 伪数组转数组, 存储数据按照索引方式并且有一个length属性，那么就是伪数组
let imgs = Array.from(document.querySelectorAll('img'))
img.forEach(item => console.log(item))
let arr = Array.from({length: 5}, ()=>{return 1})
console.log(arr)

//遍历
arr.every((item)=> {console.log(item); return true;})
for(let index in arr){
	console.log(index, arr[index])
}
for(let item of arr){
console.log(item)
}

//过滤
const arr2 = [1,2,3,3,4,5,6,7,8]
let findArr = arr2.filter((item) => {
	return item > 5;
})
console.log(findArr)
//是否存在, find只要查找到第一个就返回
console.log(arr2.find((item) => {return item === 3}))
console.log(arr2.findIndex((item)=>{return item === 3}))

二、组件

2.1 qs

npm i qs
import Qs from 'qs';
qs.stringify():将对象序列化成url的形式；以&进行拼接
qs.parse():将url解析成对象形式；
user:{"username":"zhangsan", "password": "123321", "age": 18}
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.3/qs.min.js"></script>
const qs = window.Qs
var user = {"username":"zhangsan", "password": "123321", "age": 18}
const param = qs.stringify(user)
console.log(param)

2.2 lodash

2.2.1 深copy

var obj = { a: {a: "hello"}, b: 33 };
var newObj = JSON.parse(JSON.stringify(obj));

2.3 axios与NProgress

npm install axios –save
axios拦截器，统一loading处理
使用proxy配置转发
​
import axios from 'axios'
import qs from 'qs'
import {message} from 'antd'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
​
const API = axios.create({
  timeout: 3000,
  baseURL: ''
})
​
// 添加请求拦截器
API.interceptors.request.use((config) => {
  NProgress.start()
  // header添加token
  // config.headers.Authorization = window.sessionStorage.getItem('token')
  const {method, data} = config
  // 如果是携带数据的post请求, 进行处理
  if (method.toLowerCase()==='post' && data && typeof data==='object') {
    config.data = qs.stringify(data) // {name: 'tom', pwd: '123'} ==> name=tom&pwd=123
  }
  return config
})
// 添加一个响应拦截器
API.interceptors.response.use(response => {
  NProgress.done()
  // 返回response中的data数据, 这样请求成功的数据就是data了
  return response.data
}, error => {// 请求异常
  NProgress.done()
  // 提示错误
  message.error('请求异常, status: ' + error.code)
  // 返回一个pending的promise, 中断promise链
  return new Promise(() => {})
})
export default API
​
import API from './ajax'
export const reqLogin = ({username, password}) => API({
  url: '/login',
  method: 'POST',
  data: {username, password}
})

//一下demo
axios.get('/user',{
  params:{
    ID:12345
  }
}).then(.....)
axios.get(url).then(response => {
  console.log(response)
})
ajax({
        type:"post",
        url:"/test",
        data:{
        	"name":"lan",
        	"pwd":"123456"
        },
        success:function(data){
           console.log(data);
        }
 });
 axios.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
}).then(..,)  

//一次发多个请求
function getUserAccount(){
  return axios.get('/user/12345');
}
function getUserPermissions(){
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function(acct,perms){
    //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
  }))

2.4 screenfull

npm install --save screenfull
import screenfull from 'screenfull'
<template>
  <span @click='clickFullscreen' :style="{isFullScreen ? 'fullscreen-exit' : 'fullscreen'}">全屏</span>
</template>
 
<script>
  import screenfull from 'screenfull'
  export default{
    name: 'screenfull',
    data(){
      return {
        isFullscreen: false
      }
    },
    mounted(){
    	screenfull()
    },
    methods:{
     screenfull = (() => {
      // 切换状态数据
      this.setState({
        isFullscreen: !this.isFullScreen
      })
     })
      clickFullscreen(){
        if (!screenfull.isEnabled) {
          this.$message({
            message: 'you browser can not work',
            type: 'warning'
          })
          return false
        }
        screenfull.toggle()
      }
    }
  }
</script>

2.5 dayjs

npm install dayjs --save
import dayjs from 'dayjs'
console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'))

2.6 cdn

https://www.bootcdn.cn/
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://unpkg.com/vue/dist/vue.js" charset="utf-8"></script>
  <script src="https://unpkg.com/lokijs" charset="utf-8"></script>
  <script src="https://unpkg.com/lodash" charset="utf-8"></script>
  <script src="https://unpkg.com/moment@2.19.1/moment.js" charset="utf-8"></script>
  <script src="https://unpkg.com/moment@2.19.1/locale/zh-cn.js" charset="utf-8"></script>
  <script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js" charset="utf-8"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js" charset="utf-8"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  
  <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    
  <link rel="stylesheet" href="https://unpkg.com/semantic-ui/dist/semantic.min.css">


<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

三、通用js

3.1 遍历菜单判断是否具有权限

hasAuth = (item) => {
	const {menus, username} = this.props
	if(username === 'admin') {return true}
	else if(!item.children) {
		return menus.find((menu) => {return menu === item.key})
	} else {
		return item.children.some((item2) => {return menus.indexof(item2.key) !== -1})
	}
}