JavaScript的一些总结
易错题、错题回顾
| 总结 |
|---|
| 01-else…if是分开的,合在一起出了错误 |
| 02-外控行，内控列 看多少行确定i；看多少列确定j |
| 03-数据类型记得要转换Number(值) |
| 04-万物皆推盒子 |
| 05-length写对,不然遍历不成功 arguments.length |
| return 返回值，设计变量名提升 函数内外定义同一个变量，函数在前定义使用 没用返回值时收到的变量打印是undefined |
| for…in 访问对象的i 只能用 对象名[i]来遍历,因为i是字符串 |
| str.split()切割后的东西是数组 |
| 定义 字符串str它的值不能被赋值str[i] |
| 新建文件夹 撤销 里面的内容会全部没有 找不回来 |
| 必须先实例化才能使用Date时间 |
| splice切割会少循环 |
| if(text == “”) 那个符号记得写不要写成赋值== |
| checkbox.checked就可以判断它true或false转换 |
技巧细节深究
| 技巧细节深究 |
|---|
| 数组的下标等于数组长度-1 我们作为遍历的时候可以定义 |
| len=arr.length 然后使得i<len 遍历即可成功 |
| 与数组相关的题目的需求一般都是需要数组的遍历 循环for |
| 需求(题目) 实现(做出来) bug(错误) |
| 括号 可以用计算括号() |
| reutrn 记得返回值要记得写 避免变量提升问题 |
| 普通年能被4整除且不能被100整除的。 为闰年 否则为平年 |
| 函数外的命令写在下面 var arr=[] ; fn(arr); |
| string对象方法 不影响原来的字符串 |
| for in 遍历数组 数组里面有对象for(var i in arr) |
| arr[i].属性名 代表的是对象访问属性名 arr是对象 |
| 数组也可以放对象 [{},{},{}] |
| windows+l 锁屏 |
| window.onload functiong(){} 预加载 |
| 输东西大小写转换 图片快捷键在下面 |
| 伪数组的获取元素方法有 :getElementsByTagName()、getElementsByName()、querySelectorAll()、getElementsByClassName() 记得访问的时候加[]中括号 |
| images preview 插件显示图像 |
| 表单控件 input textarea text 不要用innerHTML或innertext 用text.value来获取它的值 |
| getComputedStyle 菜鸟 查询语法的方法 语法(空格) 参考网站 |
| 括号 可以用计算括号() |
| reutrn 方法函数 记得返回值要记得写 |
| 避免变量提升问题 |
| for in 遍历数组 数组里面有对象 for(var i in arr) |
| 立即函数 ( function(){} ) () |
| console.dir(构造函数名) 输出打印对象的所有属性和属性值 |
数组方法
1. filter() 过滤方法\函数
1.回调函数 三个参数 item,index,array
- filter有遍历数组的功能
- filter不能出现break和continue
- filter 返回值是一个数组
- 回调函数返回一个布尔值(自动转换) true false
- 遇到return不能终止循环的执行
<script>
var arr = [50, 60, 90, 70, 80];
var res = arr.filter(function (item, index, array) {
console.log(item, item > 60);
return item > 60;
})
console.log(res);
</script>2. 数组的map( )逐一处理
1.map也需要一个回调函数,三个参数,数组元素,数组下标,遍历的数组
2.map也有遍历数组的功能
- map的回调函数中不允许出现break和continuenue关键字
- map有返回值,返回值是一个数组
- map回调函数中,需要return返回值;回调函数return什么,map数组元素对应就是什么
- 回调函数如果没有返回值,数组元素的值都是underfined
<script>
var arr = [2, 6, 6, 90, 80];
var res = arr.map(function (item, index, array) {
return item;
})
console.log(res);
</script>
//结果:[2, 6, 6, 90, 80]3.冒泡排序
<script>
// 把冒泡排序封装成一个函数
function bubbleSort( myArr ){
for(var i = 0; i < myArr.length - 1; i++ ){
for(var j = 0; j < myArr.length - 1 - i; j++ ){
if( myArr[j] > myArr[j+1] ){
// 交换两个变量的值
var temp = myArr[j+1];
myArr[j+1] = myArr[j];
myArr[j] = temp;
}
}
}
return myArr;
}
var arr = [20, 5, 12, 32, 41];
bubbleSort( arr );
console.log( arr );
</script>4.排他思想
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style:none;
}
.box{
width: 300px;
margin:100px auto;
}
.box ul{
display: flex;
justify-content: space-between;
color:#acb0b1;
}
.box ul li{
cursor: pointer;
}
/* 是.box ul li并且具有.active类名 */
.box ul li.active{
color:red;
border-bottom:2px solid red;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">精选</li>
<li>美食</li>
<li>百货</li>
<li>个护</li>
<li>预告</li>
</ul>
</div>
<script>
// 给.box ul中所有li绑定鼠标点击事件
var lis = document.querySelectorAll(".box ul li");
// 每个li都需要绑定鼠标点击事件
for(var i = 0; i < lis.length; i++ ){
lis[i].onclick = function(){
// 这里,在事件处理函数中,无法使用i,因为我们是循环绑定完毕以后,才可以触发事件;能够触发事件以后,表示循环已经完毕,i的值已经是5了,而且i是全局变量
// console.log( i );// 5
// console.log( lis[i] );// undefined
// this关键字,this会代表当前绑定事件的这个事件,接着谁触发这个事件,this就代表谁
// console.log( this );
// 注意: 先清除所有,再设置当前
// 清除所有li身上的active类名
for(var j = 0; j < lis.length; j++ ){
lis[j].classList.remove("active");
}
// 给当前被点击的li添加active类名
this.classList.add("active");
}
}
</script>dom对象.dataset.index获取
H5自定义属性
| 自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。 |
|---|
| 自定义属性获取是通过getAttribute(“属性名”) 获取。 |
| 但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。 |
| 所以,H5给我们新增了自定义属性 |
设置H5自定义属性(dataset设置)
H5规定自定义属性"data-"开头作为属性名并且赋值
比如<div data-index="1"></div>
或者使用JS设置
element.setAttribute("data-index",1)
或者使用H5新增设置方法
element.dataset.index = 值 或者 element.dataset["index"] = 值
但是要注意ie 11以后才支持;如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
data-index 是字符串
获取H5自定义属性
比如 <div data-index="1"></div>
1. 兼容性获取 element.getAttribute("data-index");
2. H5新增获取方法 element.dataset.index 或者 element.dataset["index"]
但是要注意ie 11以后才支持;如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
<script>
// 要求与思路
// 点击.nav a的时候,可以高亮当前被点击的a标签(添加active类)
// 对应的.cont层需要添加active类
// 获取所学的dom对象
var navAs = document.querySelectorAll(".nav a");
var conts = document.querySelectorAll(".cont");
// 给每个.nav里面的a标签绑定鼠标点击事件
for(var i = 0; i < navAs.length; i++ ){
// 给a标签添加自定义属性
// navAs[i].setAttribute("data-index", i );
navAs[i].dataset.index = i;
navAs[i].onclick = function(){
// 清除所有a标签和.cont层对应的active类名
for(var j = 0; j < navAs.length; j++ ){
navAs[j].classList.remove("active");
conts[j].classList.remove("active");
}
// 当前被点击的a标签高亮(添加指定类名)
// console.log( this );
this.classList.add("active");
// 获取当前被点击a标签身上的自定义属性data-index的值
// var index = this.getAttribute("data-index");
var index = this.dataset.index;
// 显示对应的.cont层
conts[index].classList.add("active");
}
}
</script>循环设定自定义属性
// 给a标签添加自定义属性
// navAs[i].setAttribute("data-index", i );
navAs[i].dataset.index = i;获取当前点击的自定义属性的值
// 获取当前被点击a标签身上的自定义属性data-index的值
// var index = this.getAttribute("data-index");
var index = this.dataset.index;11.9可以改变函数内部 this 指向的三个方法
| 改变函数内部 this 指向 |
|---|
| call() 参数列表 |
| bind() 参数 不调用函数 |
| apply()数组 |
call(this的值,参数1,参数2,参数n…)
Javascript为我们专门提供了一些函数方法帮我们更优雅的处理函数内部this的指向问题,常用的有 call() 、bind() 、apply() 三种方法
call()方法调用一个对象。简单理解为 是一种调用函数的方式 , 但是它可以改变函数的 this 指向
应用场景: 经常用call实现继承.
函数.call(thisArg,arg1,arg2,...)
参数说明:
thisArg : 在函数运行时指定的 this 值,如果不需要改变函数内部this指向,可以传递null
arg1,arg2... : 传递的其他参数,使用逗号隔开
返回值就是函数的返回值，因为它就是调用函数
因此当我们想改变 this 指向，同时想调用这个函数的时候，可以使用 call，比如继承apply(this的值,[数组的值])
apply()方法调用一个对象。简单理解为 是一种调用函数的方式 , 但是它可以改变函数的 this 指向
应用场景: 经常跟数组有关系
函数.apply(thisArg, [argsArray])
参数说明:
thisArg：在函数运行时指定的 this 值,如果不需要改变函数内部this指向,可以传递null
argsArray：传递的值，必须包含在"数组"里面, 数组中的元素会一个一个对应传递给apply()前面函数的形参列表中
返回值就是函数的返回值，因为它就是调用函数
因此 apply 主要应该跟数组有关系，比如使用 Math.max() 求数组的最大值例子:
apply应用,求数组中的最大值或者最大值
Math.max.apply( null, [10,5,3,47,62,12] ); // 62
Math.min.apply( null, [10,5,3,47,62,12] ); // 3 bind()
if (!Function.prototype.bind) {
Function.prototype.bind = function(that) {
var func = this, args = arguments;
return function() {
return func.apply(that, Array.prototype.slice.call(args, 1));
}
}
}
// 只支持 bind 阶段的默认参数：
func.bind(that, arg1, arg2)();
// 不支持以下调用阶段传入的参数：
func.bind(that)(arg1, arg2); 原生js的点击事件的index问题办法
<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var lis = document.querySelectorAll("li");
// 第一种通过foreach遍历
/* lis.forEach(function (item, index) {
item.onclick = function () {
console.log("索引值index", index)
}
}) */
// 第二种 for循环遍历 letes6语法
/* for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
console.log("索引值==>", i);
}
} */
// 第三种闭包加立即函数
/* for (var i = 0; i < lis.length; i++) {
lis[i].onclick = (function (index) {
console.log("外部直接就执行了")
// 要返回值 闭包 不然直接就执行了
return function () {
console.log("索引值==>", index)
}
})(i)
} */
// 第四种 数组dom对象.类=值
/* for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function () {
console.log("数组对象dom的索引值", this.index)
console.log("this的指向就是调用它的人");
}
} */
// 第五种 自定义属性 data-index
/* for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute("data-index", i);
lis[i].onclick = function () {
var index = this.getAttribute('data-index')
console.log("自定义索引值", index)
}
} */
// 第六种 监听addEventlistener看看行不行 高阶函数
for (var i = 0; i < lis.length; i++) {
function me(index) {
// console.log("直接运行==>", index)//这样会直接运行 需要高阶函数
return function () {
console.log("高阶函数运行==>", index)
}
}
// 监听直接就这样了
// 函数 me(i)的位置
// lis[i].addEventListener('click', me(i))
/* lis[i].onclick = function () {
console.log(i);
me(i);
} */
lis[i].onclick = me(i);
}
</script>
</body>
</html>