JavaScript之入门学习风云（4）

一、数组方法
- 1.1join()
- 1.2 push()和pop()
- 1.3 unshift()和shift()
- 1.4 sort()
- 1.5 reverse()
- 1.6 concat()
- 1.7 slice()
- 1.8 splice()
- 1. 9 forEach()
- 1.10、map()
- 1.11、every()
- 1.12、some()
- 1.13、includes()
- 1.14、reduce()和reduceRight()
- 1.16 find()和findIndex()
- 1.17、entries()、keys()和values()
- 1.18、indexOf()，lastIndexOf()
- 1.19 filter 过滤
- 案例：数组去重
二、字符串的基本操作
- 2.1 创建字符串
- 2.2 字符串常用方法
- - 2.2.1 chartAt（索引）
  - 2.2.2 chartCodeAt（索引）
  - 2.2.3 toUpperCase()
  - 2.2.4 replace 替换
  - 2.2.5 split 分割
  - 2.2.6 indexof lastindexOf
  - 2.2.7 concat
  - 2.2.8 trim,trimstart,trimLeft,trimEnd,trimRight
  - 2.2.9、模糊查询
  - 2.2.10 JSON字符串
三、数字
- 3.1、Number的取整
- 3.2、Math对象
- - 3.2.1、随机数编码
  - 3.2.2、四舍五入
  - 3.2.3、向上向下取整
  - 3.2.4、取绝对值
  - 3.2.5、取平方根
  - 3.2.6、取次幂
  - 3.2.7、取最大值
  - 3.2.8、取最小值
  - 案例：随机整数
四初始BOM
- 4.1 获取浏览器窗口的尺寸
- 4.2 浏览器的弹出框
- 4.3 浏览器的地址栏
- 4.4 浏览器常见事件
- 4.5 浏览器滚动距离
- 4.6 浏览器打开标签页
- 4.7 浏览器历史记录
- 4.8 浏览器本地存储
- 4.9 记住用户名
五、时间对象
- 5.1 date
- 5.2事件对象常用方法
- - 5.1.1 getFullYear
  - 5.1.2 getMoth()
  - 5.1.3 getDate
  - 5.1.4 getDay
  - 5.1.5 小时,分钟，秒
  - 5.1.6 getTime ()
  - 5.1.7 设置时间
  - 5.2.8 定时器
  - 5.2. 倒计时案例

一、数组方法

join()：用指定的分隔符将数组每一项拼接为字符串
push()：向数组的末尾添加新元素
pop()：删除数组的最后一项
unshift()：向数组首位添加新元素
shift()：删除数组的第一项
slice()：按照条件查找出其中的部分元素
splice()：对数组进行增删改
filter()：过滤功能
concat()：用于连接两个或多个数组
indexOf()：检测当前值在数组中第一次出现的位置索引
lastIndexOf()：检测当前值在数组中最后一次出现的位置索引
every()：判断数组中每一项都是否满足条件
some()：判断数组中是否存在满足条件的项
includes()：判断一个数组是否包含一个指定的值
sort()：对数组的元素进行排序
reverse()：对数组进行倒序
forEach()：es5及以下循环遍历数组每一项
map()：es6循环遍历数组每一项
find()：返回匹配的项
findIndex()：返回匹配位置的索引
reduce()：从数组的第一项开始遍历到最后一项，返回一个最终的值
reduceRight()：从数组的最后一项开始遍历到第一项，返回一个最终的值
toLocaleString()、toString()：将数组转换为字符串
entries()、keys()、values()：遍历数组

1.1join()

不会影响原数组
改变其数组之间的连接方式

var arr1 = [1,2,3];
console.log(arr1.join());   // 1,2,3
console.log(arr.join('-'));   // 1-2-3
console.log(arr);   // [1,2,3](原数组不变)

1.2 push()和pop()

会影响原数组

push（）：（进栈的意思），即追加数组的元素个数，返回值：最后数组元素的长度
pop()：删除数组元素，返回值：删除的元素

都是从数组后面进行删减和增加

var arr1 = ['lily','lucy','Tom'];
var count = arr1.push('Jack','Sean');
console.log(count);   // 5
console.log(arr1);   // ['lily','lucy','Tom','Jack','Sean']var item = arr1.pop();
console.log(item);   // Sean
console.log(arr1);   // ['lily','lucy','Tom','Jack']

1.3 unshift()和shift()

会影响原数组
unshift()：从前面追加元素：返回值：最后数组元素的长度
shift()：从前面删去元素：返回值：删除的元素

都是从数组后面进行删减和增加

var arr1 = ['lily','lucy','Tom'];
var count = arr1.unshift('Jack','Sean');
console.log(count);   // 5
console.log(arr1);   // ['Jack','Sean','lily','lucy','Tom']var item = arr1.shift();
console.log(item);   // Jack
console.log(arr1);   // [''Sean','lily','lucy','Tom']

1.4 sort()

会影响原数组
用法：

 arr.sort(function(x,y){return x-y;//将其数组从小到大排序//return y-x；//将数组从大到小排序})

var arr1 = ['a','d','c','b'];
console.log(arr1.sort());   // ['a','b','c','d']function compare(value1,value2){if(value1 < value2){return -1;}else if(value1 > value2){return 1;}else{return 0;}
}var arr2 = [13,24,51,3];
console.log(arr2.sort(compare));   // [3,13,24,51]// 如果需要通过比较函数产生降序排序的结果，只要交后比较函数返回的值即可

1.5 reverse()

会影响原数组
原理：

将数组里面的元素全部都给倒序

var arr1 = [13,24,51,3];
console.log(arr1.reverse());   // [3,51,24,13]
console.log(arr1);   // [3,51,24,13](原数组改变)

1.6 concat()

不会影响原数组
用法：arr= 数组1.contact(数组2) ==》arr=[数组1，数组2]

var arr1 = [1,3,5,7];
var arrCopy = arr1.concat(9,[11,13]);
console.log(arrCopy);   // [1,3,5,7,9,11,13]
console.log(arr1);   // [1,3,5,7](原数组未被修改)

1.7 slice()

不会影响原数组

用法：array.slice(start,end) ；arr.slice(索引) == 》从索引到最后
解释：该方法是对数组进行部分截取，并返回一个数组副本；参数start是截取的开始数组索引，end参数等于你要取的最后一个字符的位置值加上1（可选）
前面的元素包含，后面的元素不包含

var arr1 = [1,3,5,7,9,11];
var arrCopy = arr1.slice(1);
var arrCopy2 = arr1.slice(1,4);
var arrCopy3 = arr1.slice(1,-2);   // 相当于arr1.slice(1,4);
var arrCopy4 = arr1.slice(-4,-1);   // 相当于arr1.slice(2,5);
console.log(arr1);   // [1,3,5,7,9,11](原数组没变)
console.log(arrCopy);   // [3,5,7,9,11]
console.log(arrCopy2);   // [3,5,7]
console.log(arrCopy3);   // [3,5,7]
console.log(arrCopy4);   // [5,7,9]//如果不传入参数二，那么将从参数一的索引位置开始截取，一直到数组尾
var a=[1,2,3,4,5,6];
var b=a.slice(0,3);    //[1,2,3]
var c=a.slice(3);       //[4,5,6]//如果两个参数中的任何一个是负数，array.length会和它们相加，试图让它们成为非负数，举例说明：
//当只传入一个参数，且是负数时，length会与参数相加，然后再截取
var a=[1,2,3,4,5,6];
var b=a.slice(-1);    //[6]//当只传入一个参数，是负数时,并且参数的绝对值大于数组length时，会截取整个数组
var a=[1,2,3,4,5,6];
var b=a.slice(-6);    //[1,2,3,4,5,6]
var c=a.slice(-8);    //[1,2,3,4,5,6]//当传入两个参数一正一负时，length也会先于负数相加后，再截取
var a=[1,2,3,4,5,6];
var b=a.slice(2,-3);    //[3]//当传入一个参数，大于length时，将返回一个空数组
var a=[1,2,3,4,5,6];
var b=a.slice(6);　　//[]

1.8 splice()

会影响原数组

用法：array.splice(下表索引开始的位置,删去元素的个数包含索引元素，要加入的元素)
解释：splice方法从array中移除一个或多个数组，并用新的item替换它们。参数start是从数组array中移除元素的开始位置。参数deleteCount是要移除的元素的个数。
如果有额外的参数，那么item会插入到被移除元素的位置上。它返回一个包含被移除元素的数组。
返回值：删去的元素，组成数组

注意：加入的元素放在索引元素之前

//替换
var a=['a','b','c'];
var b=a.splice(1,1,'e','f');    //a=['a','e','f','c'],b=['b']//删除
var arr1 = [1,3,5,7,9,11];
var arrRemoved = arr1.splice(0,2);
console.log(arr1);   // [5,7,9,11]
console.log(arrRemoved);   // [1,3]// 添加元素
var arr1 = [22,3,31,12];
arr1.splice(1,0,12,35);
console.log(arr1);   // [22,12,35,3,31,12]

1. 9 forEach()

forEach方法中的function回调有三个参数：
第一个参数是遍历的数组内容，
第二个参数是对应的数组索引，
第三个参数是数组本身

var arr = [1,2,3,4];
var sum =0;
arr.forEach(function(value,index,array){array[index] == value; //结果为truesum+=value; });console.log(sum); //结果为 10

1.10、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.11、every()

判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true

var arr1 = [1,2,3,4,5];
var arr2 = arr1.every.every(x => {return x < 10;
});
console.log(arr2);   // truevar arr3 = arr1.every(x => {return x < 3;
});
console.log(arr3);   // false

1.12、some()

判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true

var arr1 = [1,2,3,4,5];
var arr2 = arr1.some(x => {return x < 3;
});
console.log(arr2);   // truevar arr3 = arr1.some(x => {return x < 1;
});
console.log(arr3);   // false

1.13、includes()

es7新增，用来判断一个数组、字符串是否包含一个指定的值，使用===运算符来进行值比较，如果是返回true，否则false，参数有两个，第一个是(必填)需要查找的元素值，第二个是(可选)开始查找元素的位置

var arr1 = [22,3,31,12,58];
var includes = arr1.includes(31);
console.log(includes);   // truevar includes2 = arr1.includes(31,3);   // 从索引3开始查找31是否存在
console.log(includes2);   // false

1.14、reduce()和reduceRight()

都会实现迭代数组的所有项(即累加器)，然后构建一个最终返回的值

reduce()方法从数组的第一项开始，逐个遍历到最后，每一次相叠加都是上一次的计算结果

reduceRight()方法从数组的最后一项开始。向前遍历到第一项

4个参数：前一个值、当前值、项的索引和数组对象

var arr1 = [1,2,3,4,5];
var sum = arr1.reduce((prev,cur,index,array) => {return prev + cur;
},10);   // 数组一开始加了一个初始值10，可以不设默认0
console.log(sum);   // 25

1.16 find()和findIndex()

都接受两个参数：一个回调函数，一个可选值用于指定回调函数内部的this

该回调函数可接受3个参数：数组的某个元素、该元素对应的索引位置、数组本身，在回调函数第一次返回true时停止查找。

二者的区别是：find()方法返回匹配的值，而findIndex()方法返回匹配位置的索引

find 与 filter的区别是：find只能找一个元素，而filter可以找到多个。

let arr = [1,2,3,4,5];
let num = arr.find(item => item > 1);
console.log(num) // 2let arr = [1,2,3,4,5];
let num = arr.findIndex(item => item > 1);
console.log(num) // 1

1.17、entries()、keys()和values()

es6新增
entries()、keys()和values()–用于遍历数组。它们都返回一个遍历器对象，可以用for…of循环进行遍历

区别是keys()是对键名的遍历、values()是对键值的遍历、entries()是对键值对的遍历

for(let index of [a,b].keys()){console.log(index);
}
// 0
// 1for(let elem of [a,b].values()){console.log(elem);
}
// a
// bfor(let [index,elem] of [a,b].entries()){console.log(index,elem);
}
// 0 'a'
// 1 'b'

1.18、indexOf()，lastIndexOf()

>     indexof方法可以在字符串和数组上使用。
indexOf() 方法可返回某个指定的字符串值在字符串、数组中首次出现的位置。
若出现-1表示没找到，其他的表示数组下面的索引值

如果出现重名的，只能显示钱买你的元素

    arr = ['mfg', '2017', '2016'];console.log(arr.indexOf('mfg')); // 0console.log(arr.indexOf('m')); // -1console.log(arr.indexOf('2017'));// 1console.log(arr.indexOf(2017)); // -1，这里不会做隐式类型转换

1.19 filter 过滤

用法：var arr1 = arr.filter(funtion(item)){return 条件}
若条件正确，那么此元素会进入到arr1里面

 var arr=[1,5,8,9,6,7,1];var arr1 =arr.filter(function(item){return item>=5})document.write(arr1.join(' '))

案例：数组去重

法一：

 <script>var arr=[1,28,5,55,6,86,6,1]var arr2=[]for(var i=0; i<=arr.length; i++){if(arr2.indexOf(arr[i])== -1){arr2.push(arr[i])}}console.log(arr2,arr)</script>

法二：利用对象

<script>var arr=[1,5,8,9,6,7,1];var obj = {}for(var i =0;i<arr.length;i++){obj[arr[i]]="";//将arr的每个元素负值为“”，因为若元素相同的话，负值会覆盖以达到数组去重的效果}var arr2=[]for(var i in obj){arr2.push(Number(i));}console.log(arr2)</script>

方法三：new Set

 <script>var arr=[1,5,8,9,6,7,1];var set1=new Set(arr)arr =Array.from(set1) console.log(arr);</script>

二、字符串的基本操作

2.1 创建字符串

我们有两种方法：字面量和构造函数

字面量：

var str="hello"

构造函数：

var str = new String('hello')

2.2 字符串常用方法

2.2.1 chartAt（索引）

返回索引对应的字符

var str = "fudad"
var str1 = str.charAt(1)
console.log(str,str1)
//则显示 fudad  f

2.2.2 chartCodeAt（索引）

返回字符所对应的字符编码(ASCII编码表)

var arr =[]
for(var i=65;i<91;i++){console.log(String.fromcharCode(i))
} //其中出现的字母就是对应的数字

2.2.3 toUpperCase()

把字符转换为大写

toLowerCase() 把字符转换为小写
substr (开始索引，长度) 截取
substring (开始索引，结束索引（不能用负数）) 截取
slice (开始索引，结束索引) 截取

        var str = "kerwin"
var str1=str.substr(1,2)
var str2=str.substring(1,2)
var str3=str.slice(1,2)
console.log(str1,str2,str3)

2.2.4 replace 替换

var str ="abdwadwa"
var str1 = str.replace("a","*")
console.log(str1)

2.2.5 split 分割

字符串分割成数组

var str = "a|b|c|d"
console.log(str.split("")5

2.2.6 indexof lastindexOf

var str = "abcda"
console.log(str.indexof("a",1))//从前往后查
console.log(str.lastIndexof("a",3))//从后往前查

2.2.7 concat

连接字符串

var str = "abcd"
var str1 = str+"ef"
console.log(str1)

2.2.8 trim,trimstart,trimLeft,trimEnd,trimRight

trim 去掉首尾空格
trimstart,trimLeft 去掉首空格
trimEnd,trimRight 去掉尾空格

var str = " hello world   "
var str1=str.trim()

2.2.9、模糊查询

常用于其查询功能的书写

var arr=["wasd","dawdxz","waxc","dwdsdw"];//源代码数组var input = prompt("请输入对应的代码：");//输入想要查询的代码var set = arr.filter(function(item){//通过筛查查找想要的代码return item.indexOf(input)>-1;//再通过查询输入代码与源代码是否相似，相似即输出})document.write(set.join("<br>"))//打印换行

2.2.10 JSON字符串

JSON.pare(str): 将字符串 => 对象字符串要求 ‘{“key”=元素, “key”=元素}’

在这里插入代码片

三、数字

3.1、Number的取整

通过toFixed()的方法

括号内部表示保留几位小数

如果数位不够则会自动补零

返回是字符串类型

var price =123.456
console.log(price.toFixed(2))

3.2、Math对象

3.2.1、随机数编码

random(返回0~1之间的数)

console.log(Math.random()

3.2.2、四舍五入

round()
括号内部是要进行四舍五入的值

console.log(Math.round())

3.2.3、向上向下取整

cell向上，floor向下
括号内部是要进行取整的值

console.log(Math.cell())

3.2.4、取绝对值

abs绝对值
括号内部是要进行取绝对值的值

console.log(Math.abs())

3.2.5、取平方根

sqrt 平方根
括号内部是要进行取平方根的值

console.log(Math.sqrt())

3.2.6、取次幂

pow取次幂
括号内第一个参数是底数，第二个参数是指数

console.log(Math.pow())

3.2.7、取最大值

max取最大值
括号内有很多参数，会取最大值

console.log(Math. max())

3.2.8、取最小值

min取最小值
括号内有很多参数，会取最小值

console.log(Math. min())

案例：随机整数

<script>// //取一个0~10的随机整数(取不到10)// var ten1 = parseInt(Math.random()*10)// //取一个0~10的随机整数(取到10)// var ten2 = parseInt(Math.random()*10+1)// //取一个10~20的随机整数(取不到10)// var twen = parseInt(Math.random()*10+10)// console.log(twen);function getRandow(max,min){return  Math.floor(Math.random()*(max-min+1)+min)}console.log(getRandow(20,15));</script>

四初始BOM

BOM(Browser object Mode1): 浏览器对象模型
其实就是操作浏览器的一些能力
我们可以操作哪些内容:

获取一些浏览器的相关信息 (窗口的大小)

操作浏览器进行页面跳转

获取当前浏览器地址栏的信息

操作浏览器的滚动条

浏览器的信息(浏览器的版本)

让浏览器出现一个弹出框 (alert /confirm /prompt )

BOM 的核心就是 window 对象
window 是浏览器内置的一个对象，里面包含着操作浏览器的方法

4.1 获取浏览器窗口的尺寸

innerHeight和innerwidth

这两个方法分别是用来获取浏览器窗口的宽度和高度 (包含滚动条的)

var windowHeight = window.innerHeight
console.1og(windowHeight)var windowwidth = window.innerwidth
console.1og(windowidth)

4.2 浏览器的弹出框

弹出框:alert
输入框:prompt
询问框: conform ，返回值：确定（true）取消（false）

btn.onclick = function(){//alert("用户名密码不匹时”)setTimeout(function(){alert(“缓存清除成功")}, 2000)//询问框 confirm
btn.onclick= function(){var res = confirm("你确定删除吗?")console.log(res)if(res){}else{}
}//输入框prompt
btn.onclick = function(){var res = prompt("请输入你得用户名")console.log(res)
}

4.3 浏览器的地址栏

属性:location

    <button id="btn">跳转网页</button><button id="btn2">刷新网页</button><script>btn.onclick = function(){location.href= "http://www.baidu.com"}btn2.onclick = function(){location.reload()}</script>

4.4 浏览器常见事件

这个不在是对象了，而是一个事件
是在页面所有资源加载完毕后执行的

运用场景：防止js写在前面导致未定义，改变其出现的顺序

window.onload = function () {console.1og('页面已经加载完毕')

4.5 浏览器滚动距离

resize

window.onresize = function(){console.log ("resize")
}

onscroll

与滚动条位置数值相关

window.onscroll·-function(){console.log( "scroll")
}

document.documentElement.scrollTop

判断其距离顶部滚动的距离

scrollTo（）

滚动到指定的位置

主体代码

<body><button id="btn">返回顶部</button><script>window.onscroll = function(){console.log(document.documentElement.scrollTop || document.body.scrol1Top)if((document.documentElement.scrollTop || document.body.scrollTop) > 100){console.log("显示回到顶部按钮")}else{console.log("隐藏回到顶部按钮")}}btn.onclick = function(){//window.scrollTo(0,0) //1.两个数字window.scrollTo({left:0,top:0})//2.对象}</script>
</body>

4.6 浏览器打开标签页

window.open 打开一个标签
window.close 关闭当前标签

<body><button id="btn1">打开</button><button id="btn2">关闭</button><script>btn1.onclick=function(){window.open=("https://editor.csdn.net/md?not_checkout=1?not_checkout&articleId=128621371")}btn2.onclick=function(){window.close=("https://mp.csdn.net/mp_blog/manage/article?spm=1000.2115.3001.5448")}   </script>
</body>

4.7 浏览器历史记录

window.history.back()
window.history.forward()
<button id="btn">history.back()</button>
<script>
btn.onclick =function(){history.back()
}btn.onclick =function(){// location.href="02.html"
// history.forward()
history.go(1) } go用于回退

4.8 浏览器本地存储

只能存字符串
localStorage永久存储

使用localStorage.getItem()可以读取一条数据

    <body><h2>localStorage</h2><button onclick="showData()">点我读取一个数据</button><script>function showData() {console.log(localStorage.getItem('msg'));}</script></body>

sessionStorage会话存储

sessionStorage上面的api和localStorage是一样的.
他俩的区别就是关闭浏览器后, localStorage的数据还存在, sessionStorage的数据就会消失

    <script>增加sessionStorage.setItem("name","lucy")取sessionStorage.getItem("name")删sessionStorage.removeItem("name")清空sessionStorage.clear()</script>

4.9 记住用户名

<div><input type="text"id="username">
</div>
<div><input type="password"id="password">
</div>
<div><button id="login">登录</button>
</div>
<script>var uservalue = localStorage.getItem("username")var passvalue = localStorage.getItem("password")if(uservalue && passvalue ) username.value = uservaluepassword.value=passvaluelogin.onclick=function(){console.log(username.value,password.value)localStorage.setItem("username",username.value)localStorage.setItem("password",password.value)}
</script>

五、时间对象

5.1 date

属性：var das = new Date()

其显示的为

属性：传参：

一个参数毫秒数（从1970 1 1 0：0：0开始加）
多个就是上面的替代
字符串：“2023-10-10 10:10:10”

5.2事件对象常用方法

5.1.1 getFullYear

获取年份
属性用法：console.log(date.getFullYear)

var date = new date()
console.log(date.getFullYear())

5.1.2 getMoth()

获取月份

这里获取的月份是从0~11

var date = new date()
console.log(date.getMoth())

5.1.3 getDate

获取日期

var date = new date()
console.log(date.getDate())

5.1.4 getDay

获取星期数

这里的星期数为0~6
周日为0

var date = new date()
console.log(date.getDay())

5.1.5 小时,分钟，秒

getHours,getMinutes,getSeconds

var date = new date()
console.log(date.getHours())
console.log(date.getMinutes())
console.log(date.getSeconds())

5.1.6 getTime ()

时间戳

这是距离1970/1/1/0/0/0的毫秒数

5.1.7 设置时间

setFullYear()年
setMonth()月
setDate()日
setHour()小时
setMinutes()分钟
setSeconds()秒

5.2.8 定时器

倒计时计时器：到达规定时间执行代码一次
属性用法：setTimeout(function(){代码块},相隔多少毫秒)
间隔计时器：每到达规定时间执行一次代码
属性用法：setInterval(function(){代码块},相隔多少毫秒)

5.2. 倒计时案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="box"></div><script>var target = new Date("2023 / 2 / 14");//目的时间var box = document.getElementById('box');function differTime(target, prev) {var sub = parseInt((target - prev) / 1000); //计算两者间相差多少秒var days = parseInt(sub / (60 * 60 * 24));//计算剩余相差多少天var hours = parseInt(sub % (60 * 60 ) / (60 * 60));//计算剩余相差多少小时var minutes = parseInt(sub % (60 * 60 ) / 60);//计算剩余相差多少分钟var miao = parseInt(sub % 60);let obj = {day: days,hours: hours,minute: minutes,miao: miao,}return obj}setInterval(function () {var prev = new Date();//当前时间var reset = differTime(target, prev)box.innerHTML = `情人节狂欢倒计时---> ${reset.day}天${reset.hours}小时${reset.minute}分钟${reset.miao}秒`}, 1000)</script>
</body></html>