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

水深无声 2022-11-28 00:47 187阅读 0赞

## 一、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})
    	}
    }