常用方法及案例

状态取反

• 第一种

  直接在事件中取反

<view class="cart_top" @click="deleteBtn = !deleteBtn">
	<view>共
		<text>{{ product.length }}</text>
		件商品
	</view>
	<view>{{ deleteBtn ? '完成' : '编辑' }}</view>
</view>

data中参数

data() {
		return {
			// 判断是否编辑
			deleteBtn: false,
		};
	},

• 第二种

  在方法中取反

screenSort() {
	const self = this;
	self.mask = !self.screen;
},

防抖节流

防抖就是（当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时，销毁上一次的定时器）

	// 防抖操作
	const self = this;
	//频繁点击的时候销毁上一个定时器
	setTimeout(self.tiems);
	//当没有频繁点击后，最后执行的定时器
	self.tiems = setTimeout(() => {
		//里面写执行代码
	}, 1000)

时间戳转时间

dateFormat(originVal) {
	const dt = new Date(originVal);
	// 年份
	const y = dt.getFullYear();
	// 月份是从0开始的所以这儿加1，后面不足两位就补0，所以把前面加上引号变成字符串才可以补足
	// padStart(2,'0'),第一位总长度多少位，第二个不足多少位用这个字符来填充
	const m = (dt.getMonth() + 1 + '').padStart(2, '0');
	// 日期
	const d = (dt.getDate() + '').padStart(2, '0');
	// 时
	const hh = (dt.getHours() + '').padStart(2, '0');
	// 分
	const mm = (dt.getMinutes() + '').padStart(2, '0');
	// 秒
	const ss = (dt.getSeconds() + '').padStart(2, '0');
	// 拼接返回
	return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
			},

搜索模糊查询

当我们在设计查询的使用，需要模糊查询操作，最终效果如下：

• 第一种方法

<div id="box">
    <input type="text" @input="handleInput">
    <ul>
        <li v-for="(item,index) in datalist">
            {{item}}
        </li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el:"#box",
        data:{
            datalist:[],
            orderlist:['aaa','bbb','ccc','ddd','add','cee','eee']
        },
        methods:{
            handleInput(ev){
                // filter()方法会创建一个新数组，原数组的每个元素传入回调函数中，
                // 回调函数中有return返回值，若返回值为true，这个元素保存到新数组中；
                // 若返回值为false，则该元素不保存到新数组中；原数组不发生改变。

                // includes方法是检测字符串中是否包含另一字符串，如果包含返回true，如果不包含返回false
                this.datalist = this.orderlist.filter(item=>item.includes(evt.target.value))
            }
        }
    })
</script>

• 第二种方法

<div id="box">
    <input type="text" v-model="mytext">
    <ul>
        <!-- 用函数表达式来做， mymethod()调用这个方法 -->
        <li v-for="(item,index) in mymethod()">
            {{item}}
        </li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el:"#box",
        data:{
            mytext:'',
            datalist:['aaa','bbb','ccc','ddd','add','cee','eee']
        },
        methods:{
            mymethod(){
                // filter()方法会创建一个新数组，原数组的每个元素传入回调函数中，
                // 回调函数中有return返回值，若返回值为true，这个元素保存到新数组中；
                // 若返回值为false，则该元素不保存到新数组中；原数组不发生改变。

                // includes方法是检测字符串中是否包含另一字符串，如果包含返回true，如果不包含返回false
                return this.datalist.filter(item=>item.includes(this.mytext))
            }
        }
    })
</script>

Grid平均分布自动换行

前言：当我们在布局商品列表的时候，需要平均分布和自动换行功能，在此使用grid简单快捷布局实现该功能，这里以微信小程序为例。
wxml部分

<view class="container">
    <view wx:for="{{14}}">{{index}}</view>
</view>

wxss部分

.container{
    margin:0 20rpx;
    border:1rpx solid red;
    display: grid;
    //第一个属性：行与行间隔，第二个属性列与列间隔
    grid-gap:20rpx 20rpx;
    //内容整体平均分布
    justify-content: space-between;
    //单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充
    grid-template-columns: repeat(auto-fill, 200rpx);

}
.container>view{
    width:200rpx;
    height:200rpx;
    border:1rpx solid red;
}

运行结果如下：

CSS伪类选择器

注意：在IE8的之前版本必须声明<!DOCTYPE> ，这样 :first-child 才能生效。

:not(selector)	        :not(p)	选择所有p以外的元素
:nth-child(n)	        p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	    p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)      	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:before             	p:before	在每个<p>元素之前插入内容
:after              	p:after	在每个<p>元素之后插入内容
:first-of-type      	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:last-child	            p:last-child	选择所有p元素的最后一个子元素

git中拉取代码

第一种，有分支拉取

git clone -b home git clone -b home [拉取地址]

其中 home是分支
第二种，没有分支拉取

git clone [拉取地址]

分割字符串

str.split(separator,limit); 参数1指定字符串或正则，参照2指定数组的最大长度
例：str.split(""); 每个字符都被分割 [’’,’’,’’,’’]
str.split(); 整个字符串放到数组里 [’’]

json字符串转js对象

  let str = '{"a": 12, "b": 5, "c": "abc"}';
    let json1 = JSON.parse(str);  //字符串转json
    console.log(json1);

js对象转json字符串

let json={a:12,b:5};
alert(JSON.stringify(json));  //json转字符串
    console.log(json);

字符串转base64

function encode(str){
   // 对字符串进行编码
   var encode = encodeURI(str);
   // 对编码的字符串转化base64
   var base64 = btoa(encode);
   return base64;
}

base64转字符串

function decode(base64){
   // 对base64转编码
   var decode = atob(base64);
   // 编码转字符串
   var str = decodeURI(decode);
   return str;
}

Es6数组去重

var arr=[3, 62, 3, 38, 20, 42, 14, 5, 38, 29, 42];
console.log(new Set(arr))

可以封装一个函数

function uniqueArray(arr){
    return Array.from(new Set(arr));
}

用这个函数可以数组去重。
或者如下写也可以，比较简单的数组去重

[...new Set([1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0])]

定时器

一次性定时器
setTimeout(callback, delay, rest)

self.time = setTimeout(() => {

}, 1000);

取消定时器

clearTimeout(self.time)

定时加载定时器
setInterval(callback, delay, rest)

self.time = setInterval(() => {

 }, 1000);

取消定时器

clearInterval(self.time)

uniapp监听器

uni.$emit(eventName,OBJECT)
触发全局的自定义事件，附加参数都会传给监听器回调函数。
属性 类型 描述
eventName String 事件名
OBJECT Object 触发事件携带的附加参数
代码示例

uni.$emit('update',{msg:'页面更新'})

uni.$on(eventName,callback)

监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。

属性 类型 描述
eventName String 事件名
callback Function 事件的回调函数
代码示例

uni.$on('update',function(data){
    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

uni.$once(eventName,callback)

监听全局的自定义事件，事件由 uni.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。

属性 类型 描述
eventName String 事件名
callback Function 事件的回调函数
代码示例

uni.$once('update',function(data){
    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

uni.$off([eventName, callback])

移除全局自定义事件监听器。

属性 类型 描述
eventName Array＜String＞ 事件名
callback Function 事件的回调函数

如果uni.$off没有传入参数，则移除App级别的所有事件监听器；
如果只提供了事件名（eventName），则移除该事件名对应的所有监听器；
如果同时提供了事件与回调，则只移除这个事件回调的监听器；
提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；

溢出隐藏

溢出隐藏2行

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

溢出隐藏省略1行

overflow: hidden; 
white-space: nowrap;
text-overflow: ellipsis;

nvue中溢出溢出一行或多行

lines:1;
text-overflow:ellipsis;

input输入时软键盘弹起将页面顶起，导致头部navbar隐藏

"style": {
				//手机软键盘升起不让其将页面头部上推
				"app-plus": {
				    "softinputMode": "adjustResize"
				}
		}

uniapp禁止遮罩层下的页面滚动

<view @touchmove.stop.prevent="moveHandle"></view>
 
methods: {
    moveHandle() {}
}

uni-app 页面滑动到顶部栏固定悬浮的 css

position: sticky;

.menu {
	position: sticky;
	/* #ifdef H5 */
	top: 44px;
	/* #endif */
	/* #ifndef H5 */
	top: 0;
	/* #endif */
	z-index: 999;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	background-color: #ffffff;
}

uniapp去掉button所有样式

button{
	margin:0;
	padding:0;
	outline: none;
	border-radius:0;
	background-color: transparent;
	line-height: inherit;
	width: max-content;
}
button::after {
  border: none;	  
}

uniapp中emaije表情问题

需要放在v-html里面才会生效

<view class="ms_list_title" v-html="item.content" ></view>

选项卡切换保持原有列表数据位置不变问题

使用scroll-view与v-show来实现

<scroll-view v-show="isType==0">
	内容一
</scroll-view>

<scroll-view v-show="isType==1">
	内容二
</scroll-view>

<scroll-view v-show="isType==2">
	内容三
</scroll-view>

数组的编辑

arr.push() 从后面添加元素

从后面添加元素，返回值为添加完后的数组的长度

let arr = [1,2,3,4,5]
console.log(arr.push(5)) // 6
console.log(arr) // [1,2,3,4,5,5]

arr.pop() 从后面删除元素

从后面删除元素，只能是一个，返回值是删除的元素

• let arr = [1,2,3,4,5] console.log(arr.pop()) // 5 console.log(arr)
  //[1,2,3,4]

arr.unshift() 从前面添加元素

从前面添加元素, 返回值是添加完后的数组的长度

let arr = [1,2,3,4,5]
console.log(arr.unshift(2)) // 6 
console.log(arr) //[2,1,2,3,4,5]

arr.shift() 从前面删除元素

从前面删除元素，只能删除一个 返回值是删除的元素

let arr = [1,2,3,4,5]
console.log(arr.shift()) // 1
console.log(arr) // [2,3,4,5]

arr.splice(i,n) 删除从i(索引值)开始之后的那个元素

删除从i(索引值)开始之后的那个元素。返回值是删除的元素

　参数： i 索引值      n 个数
let arr = [1,2,3,4,5]
console.log(arr.splice(2,2)) //[3,4]
console.log(arr) // [1,2,5]

arr.concat() 连接两个数组

连接两个数组 返回值为连接后的新数组

let arr = [1,2,3,4,5]
console.log(arr.concat([1,2])) // [1,2,3,4,5,1,2]
console.log(arr) // [1,2,3,4,5]

str.split() 将字符串转化为数组

let str = '123456'
console.log(str.split('')) // ["1", "2", "3", "4", "5", "6"]

arr.sort() 将数组进行排序

将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的，见例子。

let arr = [2,10,6,1,4,22,3]
console.log(arr.sort()) // [1, 10, 2, 22, 3, 4, 6]


let arr1 = arr.sort((a, b) =>a - b)
console.log(arr1) // [1, 2, 3, 4, 6, 10, 22]
let arr2 = arr.sort((a, b) =>b-a)
console.log(arr2) // [22, 10, 6, 4, 3, 2, 1]

arr.reverse() 将数组反转

将数组反转,返回值是反转后的数组

let arr = [1,2,3,4,5]
console.log(arr.reverse()) // [5,4,3,2,1]
console.log(arr) // [5,4,3,2,1]

arr.slice(start,end) 切去索引值start到索引值end的数组

切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组

let arr = [1,2,3,4,5]
console.log(arr.slice(1,3)) // [2,3]
console.log(arr) // [1,2,3,4,5]

forEach（） 遍历数组,无return

arr.forEach(callback) 遍历数组,无return
*注意：（伪数组转成真数组才能遍历 Array.prototype.slice.call(伪数组) ）
callback的参数： value --当前索引的值
index --索引
array --原数组

let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{
console.log(`value:${value} index:${index} array:${array}`)
})
// value:1 index:0 array:1,2,3,4,5
// value:2 index:1 array:1,2,3,4,5
// value:3 index:2 array:1,2,3,4,5
// value:4 index:3 array:1,2,3,4,5
// value:5 index:4 array:1,2,3,4,5

let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{
value = value * 2
console.log(`value:${value} index:${index} array:${array}`)
})
console.log(arr)
// value:2 index:0 array:1,2,3,4,5
// value:4 index:1 array:1,2,3,4,5
// value:6 index:2 array:1,2,3,4,5
// value:8 index:3 array:1,2,3,4,5
// value:10 index:4 array:1,2,3,4,5
// [1, 2, 3, 4, 5]

map（）映射数组(遍历数组)

arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组
　　callback的参数： value --当前索引的值
　　　　　　　　　　index --索引
　　　　　　　　　　array --原数组
案例一

let arr = [1,2,3,4,5]
arr.map( (value,index,array)=>{
value = value * 2
console.log(`value:${value} index:${index} array:${array}`)
})
console.log(arr)

案例二

let score=[19, 85, 99, 25，90];-
let result=score . map(item=>item>=60?'及格':'不及格');-
alert(result);
结果：不及格，及格，及格，不及格，及格

注意: arr.forEach()和arr.map()的区别
1. arr.forEach()是和for循环一样，是代替for。arr.map()是修改数组其中的数据，并返回新的数据。
2. arr.forEach() 没有return arr.map() 有return

filter() 过滤数组

13 arr.filter(callback) 过滤数组，返回一个满足要求的数组
*例如做搜索功能
案例一

let arr = [1,2,3,4,5]
let arr1 = arr.filter( (i, v) => i < 3)
console.log(arr1) // [1, 2]

案例二,传一个值也是可以得

let arr = [1,2,3,4,5]
let arr1 = arr.filter( i => i < 3)
console.log(arr1) // [1, 2]

arr.every(callback) 依据判断条件，数组的元素是否全满足

依据判断条件，数组的元素是否全满足，若满足则返回ture

let arr = [1,2,3,4,5]
let arr1 = arr.every( (i, v) => i < 3)
console.log(arr1) // false
let arr2 = arr.every( (i, v) => i < 10)
console.log(arr2) // true

arr.some() 依据判断条件，数组的元素是否有一个满足

依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture
*可以做元素在不在数组中的验证

let arr = [1,2,3,4,5]
let arr1 = arr.some( (i, v) => i < 3)
console.log(arr1) // true
let arr2 = arr.some( (i, v) => i > 10)
console.log(arr2) // false

arr.indexOf() 查找某个元素的索引值

查找某个元素的索引值，若有重复的，则返回第一个查到的索引值若不存在，则返回 -1

let arr = [1,2,3,4,5,2]
let arr1 = arr.indexOf(2)
console.log(arr1) // 1
let arr2 = arr.indexOf(9)
console.log(arr2) // -1

arr.lastIndexOf() 和arr.indexOf()的功能一样，不同的是从后往前查找

let arr = [1,2,3,4,5,2]
let arr1 = arr.lastIndexOf(2)
console.log(arr1) // 5
let arr2 = arr.lastIndexOf(9)
console.log(arr2) // -1

Array.from() 将伪数组变成数组

将伪数组变成数组，就是只要有length的就可以转成数组。 —es6

let str = '12345'
console.log(Array.from(str)) // ["1", "2", "3", "4", "5"]
let obj = {0:'a',1:'b',length:2}
console.log(Array.from(obj)) // ["a", "b"]

Array.of() 将一组值转换成数组

将一组值转换成数组，类似于声明数组 —es6

let str = '11'
console.log(Array.of(str)) // ['11']

等价于

console.log(new Array('11'))  // ['11]

注意:但是new Array()有缺点，就是参数问题引起的重载
console.log(new Array(2)) //[empty × 2] 是个空数组
console.log(Array.of(2)) // [2]

arr.find(callback) 找到第一个符合条件的数组成员

let arr = [1,2,3,4,5,2,4
let arr1 = arr.find((value, index, array) =>value > 2)
console.log(arr1) // 3

arr.findIndex(callback) 找到第一个符合条件的数组成员的索引值

let arr = [1,2,3,4,5]
let arr1 = arr.findIndex((value, index, array) => value > 3)
console.log(arr1) // 3

arr.fill(target, start, end) 使用给定的值

使用给定的值，填充一个数组,ps:填充完后会改变原数组

参数： target – 待填充的元素
　　　　　 start – 开始填充的位置-索引
　　　　 end – 终止填充的位置-索引（不包括该位置)

let arr = [1,2,3,4,5]
let arr1 = arr.fill(5)
console.log(arr1) // [5, 5, 5, 5, 5]
console.log(arr) // [5, 5, 5, 5, 5]
let arr2 = arr.fill(5,2)
console.log(arr2)
let arr3 = arr.fill(5,1,3)
console.log(arr3)

arr.includes() 判断数中是否包含给定的值

let arr = [1,2,3,4,5]
let arr1 = arr.includes(2)
console.log(arr1) // ture
let arr2 = arr.includes(9)
console.log(arr2) // false
let arr3 = [1,2,3,NaN].includes(NaN)
console.log(arr3) // true

ps:与indexOf()的区别：
1 indexOf()返回的是数值，而includes()返回的是布尔值
2 indexOf() 不能判断NaN，返回为-1 ，includes()则可以判断

arr.keys() 遍历数组的键名

let arr = [1,2,3,4]
let arr2 = arr.keys()
for (let key of arr2) {
console.log(key); // 0,1,2,3
}

arr.values() 遍历数组键值

let arr = [1,2,3,4]
let arr1 = arr.values()
for (let val of arr1) {
console.log(val); // 1,2,3,4
}

arr.entries() 遍历数组的键名和键值

let arr = [1,2,3,4]
let arr1 = arr.entries()
for (let e of arr1) {
console.log(e); // 1,2,3,4
}