js汇编总结

深藏阁楼爱情的钟 2023-03-01 12:46 10阅读 0赞

# js 基础篇 #

## 项目功能 ##

### 1.本地存储 ###

>  *  将json格式的字符串转换为数组或者对象：JSON.parse(json字符串)
>  *  将字面量对象或者数组转换为json格式的字符串：JSON.stringify(对象或者数组)
> 
> ###### 存数据：本地存储只能存储字符串 ######
> 
> localStorage.setItem(‘key’, JSON.stringify(对象或者数组));
> 
> ###### 取数据： ######
> 
> 1.  localStorage.getItem(‘key’) ；
> 2.  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` 图片格式
> 
> 方法：
> 
> 1.  最后找到后台 让他修改
> 2.  临时自己修改 确保后台存在 `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循环

*  方法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\] 中的最大数值。

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

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

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

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

### 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.判断一个字符串中出现次数最多的字符及次数 ###

常用处理函数

### 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次

1.  两者的区别
    
        currentTarget 	（绑定事件的元素）
        target 指事件源  （谁被点击了）
        
        如果点击的id 等于 数据自带的id ，说明当前元素被选中
        
        class="{
             {item.id === playingId?'playing':''}}"

### 14. 动态添加样式 ###

*  方法1：
 *  方法2：

### 15.数组拼接 ###

1.  数组拼接 es6

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

1.  `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数据中

### 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>