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>