遍历数组方法 (重点)
// 举一反三
// 将别人原有的东西(经验)(学会)
// 然后在去用于自己的东西
// 筛选数组
// var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]; //大于等于10 的元素选出来，放入新数组
/*
1. 声明一个新数组用与存放符条件的元素
2.遍历旧数组，找出大于等于10的元素
3.依次追加到新数组里
*/
// 方法一
var newArr = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
newArr[j] = arr[i]
// 新数组应该从0开始，依次递增
j++;
}
}
console.log(newArr);
// 方法二
// 数组的长度会自动检测数组的长度
var newArr = [];
// newArr.length =0
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
newArr[newArr.length] = arr[i]
// 新数组应该从0开始，依次递增
}
}
console.log(newArr);
//arr 筛选 小于10的元素 并存储到新数组中
// 方法一
var newArr1 = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 10) {
newArr1[j] = arr[i];
j++;
}
}
console.log(newArr1);
// //方法二
var newArr1 = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 10) {
newArr1[newArr1.length] = arr[i];
}
}
console.log(newArr1);
// 数组案例
// 案例一
// 数组 var arr = [2,0,6,1,77,0,52,0,25,7];中的0 去掉 形成一个不为0 的数组
// 方法一
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
var arr1 = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] !== 0) {
arr1[arr1.length] = arr[i]
}
}
console.log(arr1);
// // 方法二
var arr1 = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] !== 0) {
arr1[j] = arr[i];
j++;
}
}
console.log(arr1)
// 翻转数组
// 案例二
// 将数组['red','green','blue','pink','purple']的内容反过来储存
// 输出 ['purple','pink','blue','green','red']
var arr = ['red', 'green', 'blue', 'pink', 'purple'];
// /* 1.声明一个新数组
// 2.将旧数组最后一个值(arr[arr.length-1])给新数组的第一值arr1[0]即arr1[arr1.length]
// */
var arr1 = [];
for (var i = arr.length - 1; i >= 0; i--) {
// 核心代码是 反向遍历
arr1[arr1.length] = arr[i];
}
console.log(arr1);
- reduce (累加器)
- 使用的时候和之前的语法有一点区别
- 语法：数组.reduce(function(prev,,item,index,origin){}.init)
- prev:表示初始值(需要传递init) 或者表示数组[0]的值(需要不传递init)
- item：如果传递init,item的值为数组[0] 如果没有传递init,item的值为数组[1]
- index/origin:forEach相同
注意：
- init 为可选项
1. 如果书写 如果书写了init，那么prev的第一次的值，就是出init传递的，然后 item 的值是从[0]开始的 2. 如果没有书写 init，那么 prev 的第一次的值，是数组[0]的值，然后item 的值使用[1] - 作用:累加(叠加)
- 返回值：循环运行后的值
var arr = [1, 2, 3, 4, 5,];
// 0 1 2 3 4
var res = arr.reduce(function (prev, item, index, origin) {
return prev + item // arr[index]
/*
// 不传参数时
prev + item
[0] + [1] == 1 + 2 == 3
3 + [2] == 3 + 3 == 6
6 + [3] == 6 + 4 == 10
10 + [4] == 10 + 5 ==15
*/
/*
传参时
prev + item
5 + [0] === 5 + 1 ==6
6 + [1] === 6 + 2 ==8
8 + [2] === 8 + 3 ==11
*/
}, 5);
console.log(res);// init 初始的值
严格模式
- 其实就是因为JS初期的不严谨，后续特意推出了一个严谨的版本，我们叫做严格模式
- 在JS中默认是关闭的，如果要打开，需要在JS开始的位置，书写一个字符串‘use strict
- 在严格模式中，变量必须定义
- 函数的形参名不能重复
for (var i = 0; i < 3; i++) {}
//=======================================
function fn(a,a){
console.log(a);
}
fn(10,20)
字符串方法
- substr
- 语法:字符串.substr(开始索引，多少个)
- 作川:截取指定范围的字符串
- 返回值:截取到的字符串
// 1. substr
var str = 'QF123';
var res = str.substr(0, 3);//从[0]开始截取，截取3个
console.log(res); // QF1 //字符串
- substring
- 语法: 字符串.substring(开始索引，结束索引)
- 参数特点： (1). 包前不包后 (2). 可以不传参结束索引 (3). 可以不传递开始索引，但是推荐写上
- 作用: 截取指定字符串
- 返回值: 截取到的字符串
//2.substring
var str = 'QF123';
// var trt = str.substring(0, 3);
// console.log(trt);
// var trt1 = str.substring(1);
var trt2 = str.substring();
// console.log(trt1);//QF1 // 字符串
// F123
console.log(trt2);
// QF123
- slice 语法: 字符串.slice(开始索引 结束索引) 参数特点:参考数组中的slice 作用: 截取字符串 返回值: 截取到的字符串
//3.slice
var str = 'QF123';
// var tet = str.slice(1, 3);
// console.log(tet);//F1 // 字符串
var tet1 = str.slice(1);
console.log(tet1);//F123
var tet2 = str.slice();
console.log(tet2);//QF123
- concat
- 语法: 字符串.concat(数据1，数据2...)
- 用: 将括号里的数据 合并到字符串中
- 返回值: 合并(拼接)后的字符串 // 4.concat
// 4.concat
var str = 'QF123';
var res = str.concat('?','name','=')
console.log(res);//QF123?name=
- split
- 语法:字符串.split(分隔符)
- 作用:在当前字符串中，找到指定的分隔符，然后根据分隔符将当前字符串拆分开，以数组的形式保存
- 返回值:拆分后的数组
注意:
- 字符串中，有对应的分隔符: 将字符串会根据分惭符分隔开
- 字符串中，没有对应的分隔符: 将字符串当成一个整体，放在数组中
- 如果传递的是空字符串:将字符串每一个字符串全都分阳开，放在数纽中
// 5.split
var str1 = 'name=zhangsan&age=18&sex=nan';
var res = str1.split('&');
// 找到'&',并将以'&'分割线将字符串拆分开并且拆分的字符串以逗号隔开
// 而且 加中括号 即 以数组的形式返回
console.log(res);//['name=zhangsan', 'age=18', 'sex=nan']
- indexof
- 语法: 字符串.indexof(数据1，开始下标)
- 作用: 寻找数据在字符串中的位置
- 返回值: 找到的时候返回数据在字符串的下标，找不到返回 -1
// 7.lastindexof
var tet1 = str.lastIndexOf(1, 2);
console.log(tet1);//2
- lastindexof (从右到左，从字符串最后一位项第一位查找)
- 语法: 字符串.indexof(数据1，开始下标)
- 作用: 寻找数据在字符串中的位置
- 返回值: 找到的时候返回数据在字符串的下标，找不到返回 -1
- trim
- 语法: 字符串.trim()
- 作川: 去除字符串左看两边的所有空格
- 返回值: 去掉空格后的字符巾
- trimStart()/trimLeft()
- 语法: 字符串.trimStart()
- 作用: 去除字符串左侧空格
- 返回值: 去掉空格后的字符
- trimEnd()/trimRight()
- 语法: 字符串.trimEnd()
- 作用: 去除字符串左侧空格
- 返回值: 去掉空格后的字符串
var str = ' q we ';
console.log(str)// q we ;
var tet2 = str.trim();
console.log(tet2);//q we;
- includes
- 语法:字符串.includes(字符串片段);
- 作川:判断 当前字符串中 是否拥有 这个字符串片段
- 返回值:一个布尔值 1. true -> 拥有; 2. false -> 没有
var str = 'asfdsvv'
var tet = str.includes('asf');
console.log(tet);// true
- startswith
- 语法: 字符事.startswith(字符串片段)
- 作用: 判断 当前字符串开头 是否拥有这个字符串片段
- 返回值: 一个布尔值 1. true -> 拥有; 2. false -> 没有
var tet1 = str.startsWith('asf');
console.log(tet1);//true
- endsWith
- 语法: 字符串.endsWith(字符串片段)
- 作用: 判断 当前字符串结尾 是否拥有这个字符串片段
- 返回值: 一个布尔值 1. true -> 拥有; 2. false -> 没有
var tet2 = str.endsWith('svv');
// 注意 endsWith 遵守驼峰命名法则 W为大写
console.log(tet2);//true
- replace
- 语法: 字符串.replace()
- 语法: 字符串.repLace('要被替换的字符串','新的字符')
- 作用: 在字符串中 先找到 要被替换的字符串，找到后将新的字符串 替换过去 首先找到第一次出现的
- 返回值: 替换后的字符串
var trt = str.replace('fds','sads');
console.log(trt);//assadsvv
案例(一)
// 小练习: 反转字符串
var str = 'abcde'; // -> edcba
var str1 ='';
// for (var i = str.length - 1; i >= 0; i--) {
// str1[str1.length] = str[i];
// console.log(str);
// 字符串的索引获取到的是只读属性, 也就是说, 能看, 但是不能修改 // ****非常重要 注意不能通过索引来改变字符串的项 *******
// }
// console.log(str1);
/*
1. 将字符串拆分成一个数组
2. 数组的反转
3. 将反转后的数组 合并 为一个字符串
*/
改进代码：
var tet = str.split('');
// 转化为数组
var tet1 = tet.reverse();
// 反转数组的项
var tet2 = str.join('');
// var arr = str.split('')
// var newArr = arr.reverse()
// 链式调用
// 分割符为空格 而且转变成字符串
var tet2 = str.split('').reverse().join('');
console.log(tet2);
练手题
// 需求: 将数组内的重复项去除
方法一：
var arr = [1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 5, 5];
// 处理后的数组: [1, 2, 3, 4, 5]
// 要求: 只能使用 splice 或者 indexOf 完成, 其他方式不行!
// 1. 对比前后两项, 是否相同, 如果相同删除一项, 注意! 数组塌陷
for (var i = 0; i < arr.length; i++) {
if (arr[i] === arr[i + 1]) {
arr.splice(i, 1)
i--;
}
}
console.log(arr)
方法二：
// 2. 创建一个空数组, 遍历原本的数组, 然后去空数组中查找, 是否有原数组的这个数据, 如果没有插入到空数组中
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i])
}
}
console.log(newArr)
小案例(二)
替换违禁词(面视题)
方法一
var str = 'XXX1234XXX5678XXX';
var tet = str.replace('XXX', '***');
var tet1 = tet.replace('XXX', '***');
var tet2 = tet1.replace('XXX', '***');
// 假设字符串中的XXX是一个违禁词，我们现在的求是将XXX替换为'***·
for (var i = 0; i < str.length; i++) {
str = str.replace('XXX','***');
}
console.log(str);
代码解析：
/*
第一次循环
str1 = 'XXX12YYY34XXX56YYY78XXX'; 有数组的项 即有'XXX','YYY'
==> str1 = '***12***34XXX56YYY78XXX';
第二次循环
str1 = 'XXX12YYY34XXX56YYY78XXX'; 有数组的项 即有'XXX','YYY'
==> str1 = '***12***34***56***78XXX';
第三次循环
str1 = 'XXX12YYY34XXX56YYY78XXX'; 有数组的项 即有'XXX','YYY'
==> str1 = '***12***34***56***78***';
*/
方法三
var str1 = 'XXX12YYY34XXX56YYY78XXX';
while (str1.includes('XXX', 'YYY')) {
str1 = str1.replace('XXX', '***');
str1 = str1.replace('YYY', '***');
}
console.log(str1);
var arr = ['XXX', 'YYY',];
// 定义 一个数组存一个我们要改的违禁词
arr.forEach(function (item) {
// console.log(item); //遍历数组的每一项 'XXX' 'YYY'
while (str1.includes(item)) {
// 判断是否有数组中的项 有 即true 则进行下面的代码
str1 = str1.replace(item, '***');
// 将数组中项全部替换为 ***
}
});
console.log(str1);
转化进制数
十进制转换为其他进制
- 十进制的数字.toString(你要转换的进制数);
其他进制转换成十进制
- parseInt(数字,将数字视为x进制的数字然后转换成10进制)
保留小数(掌握)
保留小数的数字.toFixed(要保留几位小数) (采用四舍五入的方式,并且返回的是一个字符串)
var num = 321;
console.log(num.toString(2));//101000001
console.log(parseInt(100, 2));// 4
// 把 100 作为2进制的数字(不用转为2进制的数字) 打印结果为10进制
var num = 123.4568
var num1 = 123.41694856
var num2 = 123
console.log(num.toFixed(2));//123.45
console.log(num1.toFixed(3));//123.417
// 最后结果要四舍五入
console.log(num2.toFixed(3));//123.000
定时器与倒计时器
- 语法：
// 定时器：
setInterval(function () {
// 定时器每次执行的时候，要执行的代码
console.log('当前定时器,每1秒,执行1次')
}, 500); //时间单位是毫秒
返回值:
含义: 表明当前页面有多少个定时器或者倒计时器
作用: 停止当前定时器或者倒计时器
关闭定时器的注意事项:
关闭的时候, 有两个方法 clearTimeout/clearInterval; 可以混用 (但是不推荐混用)
代码解析：
// 关闭倒计时器
// clearTimeout(id)
var id = setInterval(function () {
console.log('你好')
}, 2000)
clearInterval(id)
//倒计时器
var id = setTimeout(function () {
console.log('倒计时器执行')
}, 3000)
同步与异步
1. JS 中, 任务分为 同步任务和异步任务
2. 目前我们接触到定时器与倒计时器都属于异步任务, 其他代码都是同步代码
3. JS 中执行任务, 会先将所有的同步任务执行完, 等所有同步任务执行完毕, 在开始执行异步任务
代码演示
// 1s == 1000ms
// 通常用毫秒为单位
console.log('开始'); // 同步
setTimeout(function () {
console.log('0','执行过程'); // 异步
}, 3000,);
console.log('结束');//同步
