js汇编总结

最新推荐文章于 2024-04-22 09:45:42 发布

落花流雨

最新推荐文章于 2024-04-22 09:45:42 发布

阅读量1.6k

点赞数

分类专栏： # vue2.0全家桶 # 常用js方法文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44666644/article/details/107588223

版权

vue2.0全家桶同时被 2 个专栏收录

31 篇文章 3 订阅

订阅专栏

常用js方法

18 篇文章 0 订阅

订阅专栏

js 基础篇

项目功能

1.本地存储

将json格式的字符串转换为数组或者对象：JSON.parse(json字符串)
将字面量对象或者数组转换为json格式的字符串：JSON.stringify(对象或者数组)

存数据：本地存储只能存储字符串

localStorage.setItem(‘key’, JSON.stringify(对象或者数组));

取数据：

localStorage.getItem(‘key’) ；
keyArr = JSON.parse(localStorage.getItem(‘key’));

清空本地存储数据：

localStorage.removeItem(“key”);

常用JS示例

koa：https://koa.bootcss.com/

reactnative：https://reactnative.cn/

react：https://zh-hans.reactjs.org/docs/context.html#contextconsumer

Gradle：https://gradle.org/help/

炫酷js特效：https://www.dowebok.com/

炫酷js动画：http://velocityjs.org/#duration

JavaScript 日期处理类库：http://momentjs.cn/

文档：https://www.electronjs.org/docs

模拟数据Mock：https://easy-mock.github.io/easy-mock-cli/#/

GitHub地址：https://github.com/easy-mock/easy-mock/blob/dev/README.zh-CN.md

1. Jquery

Jquery之家：http://www.htmleaf.com/

全屏炫酷轮播图：https://www.html5tricks.com/demo/jquery-html5-full-slider/index.html

Jquery插件库：http://www.jq22.com/

Jquery全屏滚动插件：https://www.dowebok.com/demo/2014/77/

2. zepto

Zepto就是jQuery的移动端版本, 可以看做是一个轻量级的jQuery

官方网址：https://zeptojs.com/#download

数据处理：

操作字符串

includes函数

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false

includes() 方法用于判断字符串是否包含指定的子字符串。

如果找到匹配的字符串则返回 true，否则返回 false。

注意： includes() 方法区分大小写。

字符串使用场景1：判断url中是否带有 /my/ 请求的是私有的路径带上header token

// 如果header还需要携带除token以外的参数，发起请求的时候当参数传递就可以了。
let header = { ...params.header };

// 判断url中是否带有 /my/ 请求的是私有的路径  带上header  token
if (params.url.includes('/my/')) {
	// 拼接header  带上 token
	header["Authorization"] = wx.getStorageSync("token")
}

replace函数

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串

使用场景：iphone部分手机不识别 webp 图片格式

方法：

最后找到后台让他修改
临时自己修改确保后台存在 webp => jpg
属性.replace(/\.webp/g,'.jpg')

split()方法

用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组

字符串.split(“分割字符”)

例如：使用字符串的 split 方法分割字符串,以空格分隔 split(’ ') ；

注意：引号中间一定记得敲空格！！！

replace()方法

字符串.replace(被替换的字符串，要替换为的字符串)；

操作数组

push()方法

数组.push()

join()方法

数组.join()

join(参数) 方法用于把数组中的所有元素放入一个字符串；

元素是通过指定的分隔符进行分隔的；如果省略该参数，则使用逗号作为分隔符

map函数

map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。

注意：

map()不会对空数组进行检测
map()不会改变原始数组
let array = [1, 2, 3, 4, 5];

let newArray = array.map((item) => {
    return item * item;
})

console.log(newArray)  // [1, 4, 9, 16, 25]

场景1：对象展开原样返回；添加新属性create_time_cn

后台返回的是时间戳（单位：秒）

前台需要的时间格式：2019/8/12 下午9:36:25

array.map(v=>({...v,create_time_cn:(new Date(v.create_time*1000).toLocaleString())}))

场景2：

filter函数

filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。
和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身：

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
    console.log(element); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是变量arr
    return true;
});

获取选中的商品

// 过滤后的购物车数组
cart = cart.filter(v => v.checked);

`forEach`函数

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

数组.forEach(function(数组当前项的值，数组当前项的索引，数组对象本身){ })

注意: forEach()对于空数组是不会执行回调函数的。

抽离数组的某些元素，组合成一个新数组。数组的每个对象都含有抽离出来的属性

let array = [
    {
        goods_id: 0,
        num: 10,
        goods_price: 100,
        goos: "gooos"
    },
    {
        goods_id: 1,
        num: 20,
        goods_price: 200,
        goos1: "goo1os"
    },
    {
        goods_id: 2,
        num: 30,
        goods_price: 300,
        gosos: "goodaos"
    }
]

let goods = [];
array.forEach(v=>goods.push({
    goods_id: v.goods_id,
    goods_number: v.num,
    goods_price: v.goods_price
}))
console.log(goods);//=> [{…}, {…}, {…}]

用法2:求和

//定义
	var sum = 0;
	this.list.forEach((item) => {
	   //遍历prodAllPrice这个字段，并累加
	   sum += item.prodAllPrice;
	 });
	//返回
	this.sum = sum;

`findIndex`函数

findIndex()方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex()方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, findIndex()返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1

注意: findIndex()对于空数组，函数是不会执行的。

注意: findIndex()并没有改变数组的原始值。

场景1：先判断当前的商品是否已经存在于购物车

let index = cart.findIndex(v=>v.goods_id===this.GoodsInfo.goods_id);

场景2

every函数

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

注意：空数组调用 every方法，返回值就是true

注意： every() 不会对空数组进行检测

注意： every() 不会改变原始数组。

场景1：全选功能

const allChecked = cart.length ? cart.every(v => v.checked) : false;

some函数

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组

场景1：商品的收藏按钮

调接口获取的商品详情数据，赋值给 GoodsInfo

// 1.获取缓存中的商品收藏的按钮
let collect = wx.getStorageSync("collect")|| [];
// 2.判断当前商品是否被收藏
let isCollect = collect.some(v=>v.goods_id===this.GoodsInfo.goods_id);

在一个Array中，删掉偶数，只保留奇数:

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter( (x)=>{
    return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

把一个Array中的空字符串删掉:

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter( (s)=>{
    return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
});
arr; // ['A', 'B', 'C']

专题1：逻辑运算符

&& (追求假，就返回)

A && B

&&
如果A为真，才会往后执行B
如果A为假，就不会往后执行了

|| (追求真，就返回)

A || B
如果A为真，不会往后执行B了
如果A为假，才会往后执行B

js常用方法总结：

1.数组去重

方法1：利用ES6 Set去重

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

var arr = [1, 2, 3, 4, 5, 2, 1, 9, 0, 5]
console.log(unique(arr));//=>[1, 2, 3, 4, 5, 9, 0]

方法2：利用filter去重

var r;
var arr = [1, 2, 3, 4, 5, 2, 1, 9, 0, 5]

r = arr.filter((element, index, self) => {
    return self.indexOf(element) === index;
})
console.log(r)//=>[1, 2, 3, 4, 5, 9, 0]

指定去重元素零

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] != 0) {
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);//=>[2, 6, 1, 77, 52, 25, 7]

2.为数组的每一个对象添加属性

var arr = [
    {
        type: String,
        value: '10'
    },
    {
        type: Object,
        value: {
            name: 'lisi',
            age: '20'
        }
    }
]

for(var i in arr) {
    arr[i].isLogin = true;
}
console.log(arr)

3. 冒泡排序

方法1：双重for循环

var arr = [4, 1, 2, 3, 5];
for (var i = 0; i <= arr.length - 1; i++) { // 外层循环管趟数
    for (var j = 0; j <= arr.length - i - 1; j++) { // 里面的循环管 每一趟的交换次数
        // 内部交换2个变量的值 前一个和后面一个数组元素相比较
        if (arr[j] < arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }

    }
}
console.log(arr);//=>[5, 4, 3, 2, 1];

方法2：利用函数冒泡排序 sort 排序

// 利用函数冒泡排序 sort 排序
function sort(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - i - 1; j++) {
            // 从小到大排序
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
            // 从大到小排序
            if (arr[j] < arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}
var arr1 = sort([1, 4, 2, 9]);
console.log(arr1);//=> [9, 4, 2, 1]
var arr2 = sort([11, 7, 22, 999]);
console.log(arr2);//=> [999, 22, 11, 7]

方法3：数组排序（冒泡排序） sort

var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function (a, b) {
    // return a - b; 升序的顺序排列
    return b - a; // 降序的顺序排列
});
console.log(arr1);//=> [77, 13, 7, 4, 1]

4. 判断闰年

方法1：

var year = prompt('请您输入年份：');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    alert('您输入的年份是闰年');
} else {
    alert('您输入的年份是平年');
}

方法2: 利用函数判断闰年

// 利用函数判断闰年
function isRunYear(year) {
// 如果是闰年我们返回 true 否则 返回 false
var flag = false;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
flag = true;
}
return flag;
}
console.log(isRunYear(2000));//=> true
console.log(isRunYear(1999));//=> false

5. 翻转数组（面试题）

方法1：

var arr = ['red', 'green', 'blue', 'pink', 'purple', 'hotpink'];
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
    newArr[newArr.length] = arr[i]
}
console.log(newArr);//=> ["hotpink", "purple", "pink", "blue", "green", "red"]

方法2：利用函数翻转数组

// 利用函数翻转任意数组 reverse 翻转
function reverse(arr) {
    var newArr = [];
    for (var i = arr.length - 1; i >= 0; i--) {
        newArr[newArr.length] = arr[i];
    }
    return newArr;
}
var arr1 = reverse([1, 3, 4, 6, 9]);
console.log(arr1);//=>  [9, 6, 4, 3, 1]

var arr2 = reverse(['red', 'pink', 'blue']);
console.log(arr2);//=>  ["blue", "pink", "red"]

6. 筛选数组

方法1：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。


var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 新数组索引号应该从0开始 依次递增
        newArr[j] = arr[i];
        j++;
    }
}
console.log(newArr);//=> [77, 52, 25]

方法2：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
// 刚开始 newArr.length 就是 0
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 新数组索引号应该从0开始 依次递增
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);//=> [77, 52, 25]

7.数组转换为字符串

var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
var sep = '*';
for (var i = 0; i < arr.length; i++) {
    str += arr[i] + sep;
}
console.log(str);//=> red*green*blue*pink*

8.求数组中的最大值

方法1：

var arr = [2, 6, 1, 77, 52, 25, 7, 99];
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
    if (arr[i] > max) {
        max = arr[i];
    }
}
console.log('该数组里面的最大值是：' + max);//=> 该数组里面的最大值是：99

方法2：利用函数求数组 [5,2,99,101,67,77] 中的最大数值。


function getArrMax(arr) { // arr 接受一个数组 arr = [5,2,99,101,67,77]
    var max = arr[0];
    for (var i = 1; i <= arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i];
        }
    }
    return max;
}
// getArrMax([5, 2, 99, 101, 67, 77]); // 实参是一个数组送过去
// 在我们实际开发里面，我们经常用一个变量来接受 函数的返回结果 使用更简单
// var re = getArrMax([5, 2, 99, 101, 67, 77]);
var re = getArrMax([3, 77, 44, 99, 143]);
console.log(re); //=> 143

9.求两个数的最大值（函数版）

方法1：利用函数求两个数的最大值

function getMax(num1, num2) {
    return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 3)); //=> 3
console.log(getMax(11, 3));//=> 11

方法2：利用函数求任意个数的最大值

function getMax() { // arguments = [1,2,3]
    var max = arguments[0];
    for (var i = 1; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}
console.log(getMax(1, 2, 3));//=> 3
console.log(getMax(1, 2, 3, 4, 5));//=> 5
console.log(getMax(11, 2, 34, 444, 5, 100));//=> 444

10.计算数组的和以及平均值

var arr = [2, 6, 1, 7, 4];
var sum = 0;
var average = 0;
for (var i = 0; i < arr.length; i++) {
    sum += arr[i]; // 我们加的是数组元素 arr[i] 不是计数器 i
}
average = sum / arr.length;
console.log(sum, average); // 20  4

11.判断一个字符串中出现次数最多的字符及次数

var str = "asaaa"

function maxString(str) {
    var obj = []
    for (var i = 0; i < str.length; i++) {
        var key = str[i]
        if (obj[key]) {
            obj[key]++;
        } else {
            obj[key] = 1
        }
    }

    var maxCount = 0
    var maxString = ""
    for (var key in obj) {
        if (maxCount < obj[key]) {
            maxCount = obj[key];
            maxString = key;
        }
    }
    return "出现次数最多的字母：" + maxString + "出现了" + maxCount + "次"

}

console.log(maxString(str)); //=> 出现次数最多的字母：a出现了4次

常用处理函数

12.播放数量的处理

num   表示：传入的数字
point 表示：保留几位小数

_tranNumber(num,point) {
		let numStr = num.toString().split('.')[0]
		if(numStr.length < 6) {
			return numStr  // 十万以内的数据不做处理,直接返回
		} else if(numStr.length >= 6 && numStr.length <= 8) {
			let decimal = numStr.substring(numStr.length - 4, numStr.length - 4 + point)
			return parseFloat(parseInt(num / 10000) + '.' + decimal) + '万'
		} else if(numStr.length > 8) {
			let decimal = numStr.substring(numStr.length - 8, numStr.length - 8 + point)
			return parseFloat(parseInt(num / 100000000) + '.' + decimal) + '亿'
		}
	}
	
函数调用： this._tranNumber(num,2)

13.数据去重

数组A  将要添加到数据库的数据
数组B  数据库中已有的数据
要求：数组A 和 数组B 的数据不能重复
唯一标识：数组中每个对象有唯一标识id ;所以根据id 进行逐一比对
flag = true  说明两者之间没有重复数据；反之说明有重复数据


const newData = []
	for (let i = 0, len1 = A.length; i < len1; i++) {
		let flag = true
		for (let j = 0; len2 = B.length; j < len2; j++) {
			if(A[i].id === B[j].id) {
				flag = false
				break
			}
		}
		if(flag) {
			newData.push(A[i])
		}
	}

验证一个字符串中哪个字母出现的次数最多，多少次？

//=>李园园 （去重思维）
let obj = {};
let str = "zhufenglaoshihaha";
[].forEach.call(str, item => {
    if (typeof obj[item] !== "undefined") {
        obj[item]++;
        return;
    }
    obj[item] = 1
})
let max = 1;
let res = [];
for (let key in obj) {
    let item = obj[key]
    item > max ? max = item : null;
}
for (let key in obj) {
    let item = obj[key]
    if(item === max) {
        res.push(key)
    }
}
console.log(`出现次数最多的字符是：${res},出现了${max}次`)
//=>出现次数最多的字符是：h,出现了4次

两者的区别

currentTarget 	（绑定事件的元素）
target 指事件源  （谁被点击了）

如果点击的id 等于 数据自带的id ，说明当前元素被选中

class="{{item.id === playingId?'playing':''}}"

14. 动态添加样式

方法1：
方法2：

15.数组拼接

数组拼接 es6

array1 = [1,2,3,4,5];
array2 = [6,7,8,9,10];

Array = [...array1,...array2];

concat方法

Array = array1.concat(array2)

16. 求和

//定义
	var sum = 0;
	this.list.forEach((item) => {
	   //遍历prodAllPrice这个字段，并累加
	   sum += item.prodAllPrice;
	 });
	//返回
	this.sum = sum;

项目常用功能：

时间处理：

日期字符串转时间戳

// 第一种方式：十位数的时间戳
var timestamp = Date.parse(new Date()) / 1000;
console.log(timestamp)//=> 158 928 489 6

// 第二种方式：十三位数的时间戳
var timer = new Date().getTime()
console.log(d);//=>1589285232025

1.获取当前时间 2019-03-12 月、日不满二位，自动补0

getNowTime(){
	  var now= new Date();
	  var year=now.getFullYear();
	  var month=now.getMonth()+1
	  month = month > 9 ? month : '0' + month;
	  var day=now.getDate() > 9 ? now.getDate() : '0' + now.getDate();
	  var nowdate=year+"-"+month+"-"+day;
	  return nowdate;
	}

2. tab栏切换 `:class="ismethodtab? 'active':''"`

动态添加样式 'ismethodtab': true 在data数据中

<span  :class="ismethodtab? 'active':''">今日通过</span>

3. 渲染后台返回的html标签

document.getElementById('container').innerHTML = data.obj.map((value,index)=>{return value.content});

4. 手机号：前面保留3位，后面保留4位

<p>{{item.number.substring(0,3) + '****' + item.number.substr(-4)}}</p>

5. 动态设置元素的样式

contbut() {
	  var winHig = document.documentElement.clientHeight; // 浏览器可见区域高度 
	  var heightNav = this.$refs.nav.offsetHeight;       // 底部导航栏 (添加 ref="nav")
	  var heightFix = this.$refs.fixed.offsetHeight;    // 头部导航栏区域 (添加 ref="fixed")
	  
	  .................................................................paddingTop
	  var heightFix = this.$refs.fixed.offsetHeight; // 头部区域高度
	  this.sty2.paddingTop = heightFix + 10 + 'px'; // 中间内容主体的style样式 padding-top:'头部区域的高度'，正好显示中间内容主体的高度
	  ....................................................................
	  // 遮罩层的样式 height； <div class="fixa" :style="height" @click="onopen" v-if="fixto"></div>
	  // 在data中定义 'height': { },  遮罩层的样式
	  this.height.height = winHig-heightNav-heightFix + 'px'; // 中间主体内容的高度,也就是遮罩层的高度；
	  this.height.top = heightFix + 'px'; // 遮罩层距离顶部的距离--可有可无
	  
	  // 包裹中间内容盒子的样式 sty2  <div :style="sty2"></div>
	  // 在data中定义 'sty2': { },  
	  this.sty2.top = heightFix + 'px';             // 中间内容主体的样式(一定有定位 position:relative) 距离头部的高度 top
	  this.sty2.bottom = heightNav + 'px';         // 中间内容主体的样式(一定有定位 position:relative) 距离底部的高度 bottom
	  this.sty2.height = winHig-heightNav + 'px'; // 中间内容主体的高度:浏览器高度-底部高度=中间内容的高度
	  
	  ........................................................................................................................
	  
	  <div :style="sty2" id="container">
		中间内容...
	  </div>
	  
	   this.sty2.paddingTop = heightFix + 10 + 'px'; // 中间内容主体的样式 padding-top:'头部区域的高度'，正好显示中间内容主体的高度
	   .........................................................................................................................
	  
	 // 组件最外层的div  <div :style="sty3"></div>
	 // 在data中定义 'sty3': {'background-color': '#ffffff'},  
	  this.sty3.height = winHig + 'px'
	}

6. 三元表达式，多条件判断

<span>{{status===0?'正常会员':status===1?'停用会员':''}}</span>

落花流雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js汇编总结

js 基础篇项目功能1.本地存储将json格式的字符串转换为数组或者对象：JSON.parse(json字符串)将字面量对象或者数组转换为json格式的字符串：JSON.stringify(对象或者数组)存数据：本地存储只能存储字符串localStorage.setItem(‘key’, JSON.stringify(对象或者数组));取数据：localStorage.getItem(‘key’) ；keyArr = JSON.parse(localStorage.getItem(
复制链接

扫一扫