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}
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'
全屏
2.5 dayjs
npm install dayjs --save
import dayjs from 'dayjs'
console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'))三、通用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})
}
}