前端学习笔记

1.react 事件绑定

  1. 在构造函数中使用bind 绑定this

    constructor(){
    super()
    this.click = this.click.bind(this)
    click() {
    console.log()
    }
    }
    

    2.在调用的时候绑定this

    <button onClick={this.click.bind(this)}>
    

    3.在调用的时候用箭头函数

    <button onClick={() => {this.click}}
    

    4.使用属性初始化器语法绑定this

    class app extends Component{
    	click = () =>{ console.log}
    }
    

2,箭头函数 一个参数可以不加括号 多个必须加

3.git reset revert 回滚 注意 分支

4.for in (遍历对象的每一个可枚举属性),包括原型链上面的可枚举属性 (js基本包装类型不可枚举 不能遍历)

Object.keys() 只能遍历自己的对象上的可枚举属性,原型链上的可枚举不能遍历

object.getownpropertyNames() 它遍历自身对象的所有属性(包括可枚举和不可枚举) 但是原型上的属性无法遍历

5.?? js中的空值合并操作符 只有当左侧为null 或者undifined时 返回右侧的值

|| 逻辑运算符 是 左为假 返回右

?. 可选链操作符 允许读取位于连接对象深处的属性 而不必验证链中的每个应用都有效 类似于 。语法 不同之处在于 在引用为空的时候不报错 该表达式短路返回值

6.html 中的crossorigin 属性

当服务端没有设置Acess-control allow origin 属性时 加上这个属性 会有良好的报错信息

7.webpack 中devserver 配置 中before属性 是在其他中间件使用前先用before 的中间件

8.sourcemap 框架使用babel 编译时 生成的 代码对应的映射关系 方便进入源码调试

9.precess.env.port : 读取当前目录的下环境变量port的值

10,nextTick() 在下次dom更新循环结束时执行延迟调用, 在修改数据后调用 获取最新的dom节点

11.object.assign 拷贝一层 并不是完全深拷贝 (参数1, 参数2 ) 合并到参数一

  1. new 一个新的Formdata 对象 可以使用append 往里添加字段字段可以是blob file对象 字符串 (其他类型自动转换为字符串)

  2. $('#excel-file').change(function(e) {            
    	        try {
    	            new Uint8Array([1,2]).slice(0,2);
    	        } catch (e) {
    	            console.log("[Uint8Array"+e.description+"]这里使用【Array.slice】。");
    	            //IE或有些浏览器不支持Uint8Array.slice()方法。改成使用Array.slice()方法
    	            Uint8Array.prototype.slice = Array.prototype.slice;
    	        }
    
    	        var files = e.target.files;	        
    	        var fileReader = new FileReader();
    	        fileReader.readAsArrayBuffer(files[0]);// 以二进制方式打开文件
    	        fileReader.onload = function(ev) {
    	            $('#excel-file').val('');
    	            $("#context").html("");
    	            try {	                
    	            	var data = ev.target.result;
    	            	var workbook = XLSX.read(data, { type: 'array'}),
    	                persons = [];
    	            } catch (e) {
    	            	console.error(e);
    	                return alert('文件类型不正确!');
    	            }
    	            
    	            //遍历每张表读取
    	            for (var sheet in workbook.Sheets) {
    	                if (workbook.Sheets.hasOwnProperty(sheet)) {
    	                    persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet],{raw:true, header:1}));
    	                    console.log(persons)
    	                }
    	            }
    	        };
    	    });
    
  3. a href =“文件地址” do’w’nload 点击下载文件

  4. input 前面加一个 label 修改input的样式 input display none
    获取input 的文件名

$("#input").change(function(){
    var file = $("#input").prop('files')[0]
    console.log(file.name)
})
  1. 获取前一天

    var time=(new Date(2021,4,1)).getTime()-24*60*60*1000;
    var yesterday=new Date(time);
    // var month=yesterday.getMonth();
    // var day=yesterday.getDate();
    yesterday=yesterday.getFullYear() + "-" + (yesterday.getMonth()> 9 ? (yesterday.getMonth() + 1) : "0" + (yesterday.getMonth() + 1)) + "-" +(yesterday.getDate()> 9 ? (yesterday.getDate()) : "0" + (yesterday.getDate()));
    console.log(yesterday)
           console.log( yesterday.split('-'))
    
  2. this. r e f 绑 定 再 d o m 上 获 取 值 t h i s . ref 绑定再dom 上获取值 this. refdomthis.refs.xxx.value
    绑定在组件上 this. r e f s 获 取 组 件 实 例 t h i s . refs 获取组件实例 this. refsthis.refs.xxx.$el.value 获取值

19在这里插入图片描述

20、照片

    var file = document.getElementById('input')
    var image = document.getElementsByTagName('img')[0]
    var data = ''
            function verificationPicFile(file) {
    var filePath = file.value;
    if(filePath){
        //读取图片数据
        var filePic = file.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(filePic);
        reader.onload = function (e) {
            data = e.target.result;
            //加载图片获取图片真实宽度和高度
            // var image = new Image();
            image.src = data
            image.onload=function(){
                var width = image.width;
                var height = image.height;
                if (width == 697 && height == 81){
                    console.log("文件尺寸符合!");
                    // image.src = data
                }else {
                    alert("文件尺寸应为:720*1280!");
                    image.src = ''
                    file.value = "";
                    return false;
                }
            };   
        };

    }else{
        return false;
    }
    } 

      file.onchange = function(){
        verificationPicFile(file)
      }

21

var arr = [{ title: 'aaaa', read: 1000, hot: true },
{ title: 'bbbb', read: 300, hot: false },
{ title: 'cccc', read: 2000, hot: true },
{ title: 'dddd', read: 1900, hot: false }
];


// 第一种for
for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } // 第二种forEach // forEach就是代替普通的for arr.forEach(function
  (item, index, arr) {// item:循环结果 index:下标 arr:原数组 console.log(item); }, 'this指向,如果使用的是箭头函数无法改变this指向' ); // 第三种map //
  它可以重新整理数据结构,可以返回一个新的数组 let newarr=arr.map((item, index, arr)=> {// item:循环结果 index:下标 arr:原数组
  // console.log(item,index,arr);
  let json = {};
  json.t = `随便加点${item.title}----`;
  json.r = `随便加点${item.read}----`;
  json.h = `随便加点${item.hot}----`;
  return json;
  })
  console.log(newarr)


  // 第四种filter
  // 过滤,过滤一些不合格或者不想要的元素,如果返回结果为true,就留下来
  let newarr = arr.filter((item, index, arr) => {// item:循环结果 index:下标 arr:原数组
  return item.hot == true;//判断即可
  })
  console.log(newarr, '4')


  // 第五种some
  // 类似查找,数组里面某一个元素符合条件,返回true
  let newarr = arr.some((item, index, arr) => {
  return item.title == 'dddd';
  })
  console.log(newarr)


  // 第六种every
  // 类似查找,数组里面所有的元素都要符合条件,才返回true
  arr2 = [1, 3, 5, 7, 9]
  let newarr = arr2.every((item, index, arr) => {
  return item % 2 == 1;//判断我的数组里面是否有偶数
  })
  console.log(newarr)


  // 第七种reduce
  // 求数组的和、阶乘,从左往右计算
  arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  arr4 = [2, 2, 3];
  let newarr = arr3.reduce((prev, cur, index, arr) => {//prev:前一个 cur:当前 index:下标 arr:原数组
  return prev + cur;
  return Math.pow(prev, cur);//调用arr4的数组
  return prev ** cur;//或者使用幕运算符
  })
  console.log(newarr)


  // 第八种reduceRight
  // 求数组的和、阶乘,跟reduce正好相反,从右往左计算
  arr3 = [2, 2, 3];
  let newarr = arr3.reduceRight((prev, cur, index, arr) => {//prev:前一个 cur:当前 index:下标 arr:原数组
  // return prev+cur;
  return Math.pow(prev, cur);
  })
  console.log(newarr)

22数组

    function swapArray(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;

23

arr.concat([])

24 ui 按需引入

1.npm install babel-plugin-component - D

2.babel.config.js

module.exports = {
“plugins”: [
[
“component”,
{
“libraryName”: “element-ui”,
“styleLibraryName”: “theme-chalk”
}
]
]
}
3.引入

25 设置 vscode 保存格式化 首选项 设置 emmet.include json

26 public 搬用

27json排序


jsonSort:function (jsonObj) {
       let arr=[];
       for(var key in jsonObj){
           arr.push(key)
       }
       arr.sort();
       let str='';
       for(var i in arr){
          str +=arr[i]+"="+jsonObj[arr[i]]+"&"
       }
       return str.substr(0,str.length-1)
   }
  

28 签名

	sign(obj) {
			let sign = "580589D2F1C589DF7824BA0C34F1EE02";
			let arr = [];
			let str = "";
			let header = "";
			for (var key in obj) {
				arr.push(key);
			}
			arr.sort()
			for (let i = 0, len = arr.length; i < len; i++) {
				str += arr[i] + "=" + obj[arr[i]] + "&";
			}
			str += "secret=" + sign;
			header = this.$md5(this.$sha256(str));
			return header;
		},

29let obj = Object.create(null) 与 let obj = {}

30 换行操作

							var strs = val.split(""); //字符串数组
							var str = "";
							for (var i = 0, s; (s = strs[i++]); ) {
								//遍历字符串数组
								str += s;
								if (!(i % 6)) str += "\n"; 
							}
							return str;

31 JSON判断

    function isJSON(str) {
      if (typeof str == 'string') {
        try {
          var obj = JSON.parse(str);
          if (typeof obj == 'object' && obj) {
            return true;
          } else {
            return false;
          }

        } catch (e) {
          return false;
        }
      }
    }

32.刷新前弹窗

window.onbeforeunload = function(){return window.event.returnValue =’’}

点击事件 去除这个提示

button.onclick = function(){

window.onbeforeunload = function () { alert(‘222’) }

}

33git 合并到分支

git add .

git commit

git checkout - env

git fetch

git merge - your branch

git push git

n false;
}
}
}


32.刷新前弹窗

window.onbeforeunload = function(){return window.event.returnValue =''}

点击事件 去除这个提示

button.onclick = function(){

   window.onbeforeunload = function () { alert('222') } 

  }

33git 合并到分支

git  add .     

git commit 

git checkout    - env 

git fetch 

git merge   -   your branch 

git push   git 



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值