前端实用技巧记录

@前端实用技巧记录

前端实用技巧记录

1. 用``定义字符串,字符串中可以插入变量引用,如以下,就不需要搞拼接字符串的方式了.

url: this.$http.adornUrl(`/product/category/info/${data.catId}`),

2. console.log(“ids=>”, ids); 而不是写成console.log(“ids=>”+ids); 前者可以在控制台中,打印出对象,并能进一步展开.而后者会把ids转化成字符串,不利于进一步分析对象.
3. 解构.当想只获取对象中的某几个字段时,可以这样结构

var {name,catId,icon,productUnit} = this.category
//此后可以像如下这样构造对象传送给后端,注意这是key:value的省略写法
data: this.$http.adornData({name,catId,icon,productUnit}, false),

let的特性

1. let 声明过的变量，不能重复声明。不同于var
2. let 具有块作用域，不同于var的全局。比如for(var i=0;i<4;i++){items[i].onclick = function(){items[i].style.background = ‘pink’}}这个i会在全局为4,导致触发点击事件时，数组越界。这时用for(let i=0;i<4;i++)可以完美解决
3. 不存在变量提升。var 在声明某变量之前也可以输出该变量，为undefined.->变量提升
4. 不影响作用域链
   const的特性：
   常量值不能修改
   块级作用域
   一定要赋值
   对数组和对象的元素修改，不算对常量的修改
   箭头函数的特性：
   1. this 是静态的，始终指向函数声明时所在作用域下的this值
   2. 不能作为构造函数实例化对象
   3. 不能使用arguments
      Promise (作用:解决回调地狱)

const p = new Promise(function(resolve,reject){
		异步函数：
		 异步函数内 调用resolve改变p的状态为成功，调用reject改变p的状态为失败
	}
	//回调
	p.then(function(){}//成功时执行
	,function(){}//失败时执行
	)
	
	以下显示是如何解决回调地狱问题的
	p.then({
		异步调用
	}).then(
	{
		异步调用
	}).then().then()........

export

分别暴露 export x1 export x2
default 暴露 export default {x1,x2}

import

 通用方式 import * as m from xx
 解构赋值形式 import{a as x ,b} from xx 应对分别暴露
 import{default as m} from xx 应对default暴露
 简便形式， 只能针对默认暴露
 import m from xx