//0.其他:

  1. //可以将事件绑定给document的事件名:onmousemove,onmouseup,onkeydown/onkeyup(绑定给可以获取到焦点的对象或者document)<br /> //其中onmouseup是因为如果不绑给document,而绑给box的话,当经过兄弟box松开时 不能发生冒泡效果则触动的是兄弟元素的鼠标松开事件

鼠标滚轮事件火狐浏览器需要用addEventListener()来绑定,但是如果页面有滚动条时,滚动滚轮页面会跟着跳,这是浏览器的默认行为,需要取消,addEventListener的取消方式为event.preventDefault()

冒泡:取消冒泡的方式event.cancelBubble = true ,在事件的委托当中将事件绑给共同的祖先元素,当事件响应触发时,会一直冒泡到祖先元素,从而实现绑定一次事件可以应用到多个类似的元素上,
onmouseup是因为如果不绑给document,而绑给box的话,当经过兄弟box松开时 不能发生冒泡效果则触动的是兄弟元素的鼠标松开事件

捕获:在事件的绑定中需要取消捕获行为obj.addEventListener(strEvent,callback,false),
用鼠标拖动桌面元素时,会默认去浏览器中搜索,这个行为是浏览器的默认行为,但是IE8以下浏览器不支持 return false,可以使用捕获的方式将所有的事件捕获到 box上,最终松开鼠标时取消捕获就可以 用box.setCapture(),最后box1.releaseCapture()

//1.js操作css-查询样式

  1. // function getStyle(obj,strStyle){<br /> // if(window.getComputedStyle){<br /> // return getComputedStyle(obj,null)[strStyle]<br /> // }else{<br /> // return obj.currentStyle[strStyle]<br /> // }
  2. // }

//2.IE8以下的浏览器中认为事件对象event是作为window对象的属性保存的

  1. //所以:<br /> //event = event || window.event

//event的属性:

  1. // clientX和clientY是鼠标的坐标保存在事件对象里(**当在有滚动条的页面中时为pageX和pageY**),<br /> // 取消冒泡 event.cancelBubble = true<br /> // 事件的委派当中的目标事件event.target<br /> // 判断鼠标滚轮的方向event.wheelDelta>0向上滚,但火狐浏览器event.detail<0向上滚<br /> // 使用addEventListener()绑定的事件默认不能用 return false来取消默认行为,应用event.preventDefault(),但是IE8不支持所以event.preventDefault && event.preventDefault()<br /> // event.keyCode或者其他键盘有关方法(event.ctrlKey、shiftKey、altKey)

//3.火狐浏览器和其他浏览器对于页面当中滚动条的产生有不一样的看法:

  1. //火狐认为浏览器的滚动条是html的,而其他的浏览器则认为是body的,是浏览器滚动的过的距离;<br /> //所以获取页面当中滚动条的距离为:<br /> //var sl = document.body.scrollLeft || document.documentElement.scrollLeft<br />//var st = document.body.scrollTop || document.documentElement.scrollTop

在页面中,如果页面太长,产生了滚动条,要使box跟随鼠标移动时会出现问题:
鼠标的开始坐标默认在可见窗口的左上方,而box的开始坐标默认在整个页面的左上方。鼠标和box之间会有固定的差(差值就是鼠标滚动的距离)
所以box要跟随鼠标移动时 需要如下计算:
box的纵坐标 = 鼠标的纵坐标 + 差值 => top = clientY + sl(scrollLeft)

//4.target的兼容性问题:

  1. //var target = event.target || event.srcElement(在鼠标移入移出事件中可以获得鼠标移入或者移出的元素)

//5.事件的绑定:

  1. // (false为了取消捕获的过程,还有attachEvent事件字符串要加on,还有通过call的办法解决了this的问题)<br /> // function bind(obj,strEvent,callback){<br /> // if(obj.addEventListener){<br /> // obj.addEventListener(strEvent,callback,false)<br /> // }else{<br /> // obj.attachEvent('on'+strEvent,function(){
  2. // callback.call(obj)<br /> // })<br /> // }
  3. // }

//6. 当我们按下鼠标去拖动网页中的内容时,浏览器会去搜索引擎中搜索,这是浏览器的默认行为,

  1. //如果不希望发生默认行为,则可以用return false来取消默认行为<br /> //但是这一招对IE8及其以下不起作用,使用setCapture<br /> // 它会一次将鼠标按下时所有相关的事件都捕获到自己的身上<br /> //鼠标按下后执行box1.setCapture&&box1.setCapture(),鼠标松开后执行box1.releaseCapture()<br /> // 但是谷歌浏览器不支持这一操作所以要进行判断<br /> //box1.setCapture && box1.setCapture()<br /> <br /> // 鼠标松开后需要将移动事件和松开事件取消<br /> // document.onmouseup = function(){<br /> // document.onmousemove = null<br /> // document.onmouseup = null<br /> // // 当鼠标松开时将释放捕获,但要进行判断 谷歌浏览器不支持<br /> // box.releaseCapture && box1.releaseCapture()<br /> // }<br />

//7.鼠标滚轮事件

//7.1 绑定方法

  1. // 其他浏览器用onmousewheel绑定,但是火狐浏览器用DOMMouseScroll绑定 而且需要用addEventListener的方法绑定<br /> // function Wheel(){<br /> // alert('滚了')
  2. // }<br /> // function bind(obj,strEvent,callback){<br /> // if(obj.addEventListener){<br /> // obj.addEventListener(strEvent,callback,false)<br /> // }else{<br /> // obj.attachEvent('on'+strEvent,function(){<br /> // callback.call(obj)<br /> // })<br /> // }
  3. // }<br /> // window.onload = function(){<br /> // var box = document.getElementById('box')<br /> // box.onmousewheel = Wheel<br /> // bind(box,'DOMMouseScroll',Wheel)
  4. // }

//7.2 判断鼠标滚轮的方向火狐和其他浏览器不同:detail是火狐的

  1. //if(event.wheelDelta > 0 || event.detail < 0){<br /> // alert('向上滚')<br /> // }else{<br /> // alert('向下滚')<br /> // }

//7.3 但是当页面长度过长时,滚动时滚动条也会动,这是默认行为 需要取消

  1. //event.preventDefault && event.preventDefault()//addEventListener的默认行为取消方式<br /> //return false//普通浏览器的默认行为取消方式

//8. 判断是否是IE浏览器

  1. // if('ActiveXObject' in window){<br /> // alert('我是IE浏览器')<br /> // }<br /> //获取元素样式和绑定事件都有IE的不兼容

//9.Json:

  1. // Json分类:<br /> // 数组[]<br /> // 对象{}<br /> // Json中允许的值(只有这6种):<br /> // 字符串、数值、布尔值、null、对象、数组

//10.操作DOM元素常用方法

1.document.getElementById()通过id属性来获取一个元素节点对象
2.document.getElementsByTagName()通过标签名来获取一组元素节点对象(会返回一个数组;也可以通过具体的元素节点调用来获取元素节点的子节点 如:div.getElementsByTagName())
3.document.getElementsByName()主要用于表单项,通过name属性来获取一组元素节点对象
4.children可以获取当前元素的所有子元素
5.parentNode可以获取当前元素的父节点,且只有一个
6.document.querySelector()需要选择器字符串作为参数,根据css选择器来查询一个元素节点对象,但是只返回唯一一个
7.document.querySelectorAll()该方法与上面方法类似,不同的是它会返回所有的元素封装到数组中
8.document.createElement()可以用于创建一个元素节点对象,需要标签名作为参数
9.document.createTextNode()可以用于创建一个文本节点对象,需要一个文本内容作为参数
10.父元素.appendChild(子节点)向父元素中添加一个新的子节点
11.父元素.insertBefore(新节点,旧节点)可以在指定的子节点前插入新的子节点
12.父元素.replaceChild(新节点,旧节点)可以使用指定的子节点替换已有的子节点
13.父元素.removeChild(子节点)可以删除一个子节点
14.innerHTML通过这个属性可以获取元素内部的HTML代码(可以通过它对dom页面元素进行增删改的操作,但是它对自结束标签无效;自结束标签直接元素.属性名进行操作;自结束标签文本框中的内容就是它的value属性)
15.innerText和innerHTML相似不同的是它会自动将html标签去除
16.confirm()用于弹出一个带有确认和取消按钮的提示框,需要用参数接收返回值。如果确认 返回true,取消返回false。可以在true下执行删除代码。

//11.其他样式操作属性

1.clientWidth和clientHeight获取元素的可见高度和宽度,不带px,不包括边框
2.offsetWidth和offsetHeight获取元素整个高度和宽度,包括边框
3.offestParent可以用来获取当前元素的定位父元素
4.offestLeft和offestTop可以用来获取当前元素相对于定位父元素的水平和垂直偏移量(最近的开启定位的祖先元素)
5.scrollWidth和scrollHeight可以获取元素整个滚动区域的高度和宽度
6.scrollLeft和scrollTop可以获取水平和垂直滚动条的距离,滚动过的距离
当满足scrollWidth - scrollLeft = clientWidth , scrollHeight - scrollTop = clientHeight时说明滚动条已经滚动到位。

//12.事件的委托

将事件绑给共同的祖先元素,当事件响应触发时,会一直冒泡到祖先元素,从而实现绑定一次事件可以应用到多个类似的元素上
var body = document.body
body.onclick = function(event){
event.target.style.background = ‘red’
}}

//13.键盘事件按下时的时间间隔问题

在按下时发生的事件外层加定时器,再将定时器放入键盘绑定事件中

//14.定时器问题:

给按钮绑定定时器后,每按一次按钮就会触发一个定时器,所以需要在按钮绑定事件下第一行 清除定时器,目的是 清除上一次开启的定时器clearInterval(timer)
如果一段定时器封装代码要控制两个元素,那么在两个元素同时开启定时器后,后一个定时器会把前一个定时器清除,从而形成龟兔赛跑问题。原因就是因为是同一段定时器封装代码,然而为了避免不断点击从而开启更多的定时器,在一开始就加了清除定时器,这样的话也会清除另一个元素的定时器。。。解决方法就是给定时器加属性,这样不同元素中保存自己的定时器属性 如:clearInterval(obj.timer)
obj.timer = setInterval(function(){},1000)

//15.类的操作:

在进行类的操作使二级菜单变化时,要记得当菜单执行动画变化之后,比如菜单关闭之后 在动画的回调函数中要把变化后的高度清空,因为动画操作的是内联样式,高度写进去之后如果不清空 则就变不回来,也就是说菜单无法打开。
打开菜单前获取一个高度,打开菜单后获取一个高度,获取完之后还是要将菜单处于关闭状态,用两次高度之间的动画过度完成打开的这一动画,如果不关闭则不能执行动画。关闭就是让其等于第一次获取的高度。

轮播图:

IMG_6702.JPG
window.onload = function(){
// 定义outer的宽度
var outerWidth = document.getElementById(‘outer’)
var imgWidth = outerWidth.clientWidth
//设置imgList的宽度,随着图片个数变化
var imgNum = document.querySelectorAll(‘#imgList li’)
var imgList = document.getElementById(‘imgList’)
imgList.style.width = imgNum.lengthimgWidth+’px’
//设置导航点第一个为黑色
var allA = document.querySelectorAll(‘#navDiv a’)
var index = 0
allA[index].style.backgroundColor = ‘black’
var timer
reverse()
//设置导航点点击之后切换到对应的图片
for(i = 0; i < allA.length; i++){
allA[i].num = i//用num属性来保存索引
allA[i].onclick = function(){
clearInterval(timer)//点击导航点时关闭自动切换计时器
move(imgList,50,’left’,this.num
-imgWidth,function(){
reverse()//点击导航点完成之后打开计时器
})
index = this.num
navMove()
}
}
//设置导航点的颜色变化
function navMove(){
//处理连续轮播:当转到最后一张时让导航按钮的索引为0,并将图片偷换到第一张
if(index == imgNum.length-1){
index = 0
imgList.style.left = 0+’px’
}
//开始让所有的导航点都为内联样式的颜色,所以给空。最后点哪个哪个为黑色
for(var i = 0;i < allA.length;i++){
allA[i].style.backgroundColor = ‘’
}
allA[index].style.backgroundColor = ‘black’
// console.log(index)
}
//设置自动轮播
function reverse(){
timer = setInterval(function(){
index++
move(imgList,30,’left’,index*-imgWidth,function(){
navMove()
})

},4000)
}
}

JS基础:

数据转换:

转string:string()、toString()、+””字符串拼接
转numble: numble()、+正号
1.纯数字的字符串直接转数字
2.字符串的非数字内容转为NaN
3.空串或者全是空格转为0
4.true转为1,false转为0
5.null转为0
6.undefined转为NaN
7.parseInt()把一个字符串转为一个整数,取出内容然后转为numble(对于非string类型,先转换为string类型再进行操作)
8.parseFloat()把一个字符串转为一个浮点数,取出内容然后转为numble(对于非string类型,先转换为string类型再进行操作)
转Boolean:Boolean()、!!a(取两次反)
数字转布尔:除了0和NaN是false,其余都是true
字符串转布尔:除了空串是false,其余都是true
null和undefined都会转为false
对象也会转为true

自增和自减:

假设a=1,++a,++a整体=2,a=2;a++整体=1,a=2.

逻辑运算符:

&&:前面为true则直接返回后面的值(找false)
||:前面为true则直接返回前面的值(找true)

关系运算符:

< > >= <= 任何值与NaN作比较都会返回false
数字和字符串比较会将字符串转为数字,字符串之间的比较是在比较字符编码 一位一位进行比较,比如
“11”<”5” true

相等运算符:

==在做比较时会进行类型的转换,===不会进行类型的转换
NaN不和任何值相等,包括它本身,可以通过isNaN()判断一个值是否是NaN

条件运算符:

条件表达式? 语句1 : 语句2(表达式成立返回语句1,否则返回语句2)
运算符的优先级可以通过括号来改变

break和continue:

break退出循环语句,continue跳过当次循环。(不能在if语句中使用这两个关键字)
枚举对象中的属性用for…in方法
person.hasOwnproperty(‘per’)检查对象中是否含有该属性

toString():

当我们在页面打印一个对象时,事实上是输出对象的toString()方法的返回值,如果我们不希望输出对象时不输出[object object],可以手动重写对象的toString()
Person.prototype.toString = function(){ },这样toString()就不会去Object原型中找了。

什么是 JavaScript 中的包装类型?

在 JavaScript 中,基本类型是没有属性和方法的,但是为了便于操作基本类型的值,在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象,如:
const a = “abc”; a.length; // 3 a.toUpperCase(); // “ABC” 复制代码
在访问’abc’.length时,JavaScript 将’abc’在后台转换成String(‘abc’),然后再访问其length属性。
JavaScript也可以使用Object函数显式地将基本类型转换为包装类型:
var a = ‘abc’ Object(a) // String {“abc”} 复制代码
也可以使用valueOf方法将包装类型倒转成基本类型:
var a = ‘abc’ var b = Object(a) var c = b.valueOf() // ‘abc’ 复制代码
看看如下代码会打印出什么:
var a = new Boolean( false ); if (!a) { console.log( “Oops” ); // never runs } 复制代码
答案是什么都不会打印,因为虽然包裹的基本类型是false,但是false被包裹成包装类型后就成了对象,所以其非值为false,所以循环体中的内容不会运行。

数组:

数组实现了迭代器接口可以直接用for…of进行遍历,数组中的元素可以是任意类型

数组的方法:

1.push()向数组的末尾添加元素(改变原数组)
2.unshift()向数组开头添加元素(改变原数组)
3.pop()删除数组最后一个元素,返回删除的元素(改变原数组)
4.shift()删除数组第一个元素,返回删除的元素(改变数组)
5.forEach()遍历数组,需要一个函数作为参数,有几个元素执行几次。第一个参数:正在遍历的元素;第二个参数:正在遍历元素的索引;第三个参数:正在遍历的数组。此方法只支持IE8及以上浏览器. 该方法没有返回值
a.forEach(function(element,index,array){
console.log(array[1])

})
6.slice() 提取指定元素,传两个参数为索引包头不包尾,第二个不传则第一个索引往后截取全部元素(不改变原数组)
7.splice()将指定元素从原数组中删除,并返回删除的元素,第一个参数:开始索引;第二个参数:删除数量;第三个参数:新的元素会插入到开始元素前,也可以不传,则只删除。(改变原数组)
8.concat()会连接两个或者多个数组,参数为各个数组名(不改变原数组)
9.arr.join()将数组转为字符串,括号中传入字符串连接符,如果不传默认逗号连接。(不改变原数组)
10.reverse()将数组反转(改变原数组)
11.filter()自动返回在这个数组中测试为true的元素组成的新数组(不改变原数组)
12.sort()对数组中的元素进行排序,括号中指定回调函数,回调函数中指定两个形参 升序:return a-b 如果a-b>0则交换位置,否则不换位置。降序return b-a。(改变原数组)
13.map()方法不会改变原数组的值,返回一个新数组,新数组中的值为原数组调用函数处理之后的值
14.find()和reduce()
reducer 逐个遍历数组元素,每一步都将当前元素的值与上一步的计算结果相加(上一步的计算结果是当前元素之前所有元素的总和)——直到没有更多的元素被相加。
语法:reduce(function(previousValue, currentValue, currentIndex, array) { // }, initialValue)

参数:

一个 “reducer” 函数,包含四个参数:
previousValue:上一次调用 callbackFn 时的返回值。在第一次调用时,若指定了初始值 initialValue,其值则为 initialValue,否则为数组索引为 0 的元素 array[0]。
currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 0 的元素 array[0],否则为 array[1]。
currentIndex:数组中正在处理的元素的索引。若指定了初始值 initialValue,则起始索引号为 0,否则从索引 1 起始。
array:用于遍历的数组。

数组的遍历方法有哪些

方法 是否改变原数组 特点
forEach() 数组方法,不改变原数组,没有返回值
map() 数组方法,不改变原数组,有返回值,可链式调用
filter() 数组方法,过滤数组,返回包含符合条件的元素的数组,可链式调用
for…of for…of遍历具有Iterator迭代器的对象的属性,返回的是数组的元素、对象的属性值,不能遍历普通的obj对象,将异步循环变成同步循环
every() 和 some() 数组方法,some()只要有一个是true,便返回true;而every()只要有一个是false,便返回false.
find() 和 findIndex() 数组方法,find()返回的是第一个符合条件的值;findIndex()返回的是第一个返回条件的值的索引值
reduce() 和 reduceRight() 数组方法,reduce()对数组正序操作;reduceRight()对数组逆序操作

遍历方法的详细解释:《细数JavaScript中那些遍历和循环》

forEach和map方法有什么区别

这方法都是用来遍历数组的,两者区别如下:

  • forEach()方法会针对每一个元素执行提供的函数,对数据的操作会改变原数组,该方法没有返回值;
  • map()方法不会改变原数组的值,返回一个新数组,新数组中的值为原数组调用函数处理之后的值

every()

该方法会对数组中的每一项进行遍历,只有所有元素都符合条件时,才返回true,否则就返回false。

let arr = [1, 2, 3, 4, 5]
arr.every(item => item > 0)

// 结果: true

some()

该方法会对数组中的每一项进行遍历,只要有一个元素符合条件,就返回true,否则就返回false。

let arr = [1, 2, 3, 4, 5]
arr.some(item => item > 4)

// 结果: true

some()和every()方法都接受一个函数作为参数,该参数函数可以接收三个参数,分别是当前数组元素、当前元素索引、当前元素所在数组。

find()

find() 方法返回通过函数内判断的数组的第一个元素的值。该方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组,函数是不会执行的。 该方法并没有改变数组的原始值。

该方法的第一个参数也是一个函数,它有三个参数:

currentValue :必需。当前元素
index :可选。当前元素的索引
arr :可选。当前元素所属的数组对象
let arr = [1, 2, 3, 4, 5]
arr.find(item => item > 2)

// 结果: 3

findIndex()

findIndex() 方法返回传入一个测试函数符合条件的数组第一个元素位置(索引)。该方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在函数条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组,函数是不会执行的。该方法并没有改变数组的原始值。

该方法的第一个参数也是一个函数,它有三个参数:

currentValue :必需。当前元素
index :可选。当前元素的索引
arr :可选。当前元素所属的数组对象
let arr = [1, 2, 3, 4, 5]
arr.findIndex(item => item > 2)

// 结果: 2

find()和findIndex()两个方法几乎一样,只是返回结果不同:
find():返回的是第一个符合条件的值
findIndex:返回的是第一个返回条件的值的索引值

reduce()

reduce() 方法对数组中的每个元素执行一个reducer函数(升序执行),将其结果汇总为单个返回值。

语法: arr.reduce(callback,[initialValue])

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。

(1) callback (执行数组中每个值的函数,包含四个参数)

previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
currentValue (数组中当前被处理的元素)
index (当前元素在数组中的索引)
array (调用 reduce 的数组)
(2) initialValue (作为第一次调用 callback 的第一个参数。)

var arr = [1, 2, 3, 4]
var sum = arr.reduce((prev, cur, index, arr) => {
console.log(prev, cur, index);
return prev + cur;
})
console.log(arr, sum);

输出结果:

再来加一个初始值看看:

var arr = [1, 2, 3, 4]
var sum = arr.reduce((prev, cur, index, arr) => {
console.log(prev, cur, index);
return prev + cur;
}, 5)
console.log(arr, sum);

输出结果:

通过上面的两个例子,我们可以得出结论:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始

注意,该方法如果添加初始值,就会改变原数组,将这个初始值放在数组的最后一位。

当然reduce()不仅仅是求和这么简单,还有很多其他的实用的用法…这里就不多介绍了。

reduceRight()

该方法和的上面的reduce()用法几乎一致,只是该方法是对数组进行倒序查找的。而reduce()方法是正序执行的。

var arr = [1, 2, 3, 4]
var sum = arr.reduceRight((prev, cur, index, arr) => {
console.log(prev, cur, index);
return prev + cur;
}, 5)
console.log(arr, sum);

Object.keys()

Object.keys() 方法用来遍历对象,它会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

var arr = [‘a’, ‘b’, ‘c’];
console.log(Object.keys(arr)); // 结果: [‘0’, ‘1’, ‘2’]

var obj = { 0: ‘a’, 1: ‘b’, 2: ‘c’ };
console.log(Object.keys(obj)); // 结果: [‘0’, ‘1’, ‘2’]

注意,返回的数组中的值都是字符串,也就是说不是字符串的key值会转化为字符串。

该数组中的属性值都是对象本身可枚举的属性,不包括继承来的属性。

Object.getOwnPropertyNames()

Object.getOwnPropertyNames()方法与Object.keys()类似,也是接受一个对象作为参数,返回一个数组,包含了该对象自身的所有属性名。但它能返回不可枚举的属性。

var a = [‘Hello’, ‘World’];

Object.keys(a) // [“0”, “1”]
Object.getOwnPropertyNames(a) // [“0”, “1”, “length”]

这两个方法都可以用来计算对象中属性的个数:

var obj = { 0: “a”, 1: “b”, 2: “c”};
Object.getOwnPropertyNames(obj) // [“0”, “1”, “2”]
Object.keys(obj).length // 3
Object.getOwnPropertyNames(obj).length // 3

总结

方法 特点
forEach() 数组方法,不改变原数组,没有返回值
map() 数组方法,不改变原数组,有返回值,可链式调用
filter() 数组方法,过滤数组,返回包含符合条件的元素的数组,可链式调用
for await…of 遍历异步迭代对象
for…in 和 for…of for…in遍历对象可枚举属性,包括原型链上的属性,返回的是数组的索引、对象的属性名;for…of遍历具有Iterator迭代器的对象的属性,返回的是数组的元素、对象的属性值,不能遍历普通的obj对象,将异步循环变成同步循环
every() 和 some() 数组方法,some()只要有一个是true,便返回true;而every()只要有一个是false,便返回false.
find() 和 findIndex() 数组方法,find()返回的是第一个符合条件的值;findIndex()返回的是第一个返回条件的值的索引值
reduce() 和 reduceRight() 数组方法,reduce()对数组正序操作;reduceRight()对数组逆序操作
Object.keys() 和 Object.getOwnPropertyNames() Object.keys() 获取对象可枚举的属性;Object.getOwnPropertyNames()返回所有属性,两者都返回一个包含属性名的数组
关于JavaScript中的遍历,能想到的大概这17个了,如果再想起来别的,再来补充!

字符串:

1.indexof() 检索字符串中是否含有指定内容,如果有返回第一次出现的索引,如果没有返回-1,可以指定第二个参数。指定开始查找的位置
2.slice()与数组方法相似
3.split()将一个字符串拆成数组 参数:需要传入一个字符,根据这个字符拆分
4.toUpperCase()将一个字符串转换为大写字母并返回
5.toLowerCase()将一个字符串转换为小写字母并返回
6.charAt()可以返回字符串中指定位置的字符,根据索引获取指定字符
7.charCodeAt()获取s指定字符的字符编码
8.String.formcharCode()根据字符编码获取字符
9.concat()可以用来连接两个或多个字符串

存在性判定:在过去,当判断一个字符/字符串是否在某字符串中时,只能用 indexOf > -1 来做。现在 ES6 提供了三个方法:includes、startsWith、endsWith,它们都会返回一个布尔值来告诉你是否存在。

  • includes:判断字符串与子串的包含关系:

const son = ‘haha’ const father = ‘xixi haha hehe’ father.includes(son) // true 复制代码

  • startsWith:判断字符串是否以某个/某串字符开头:

const father = ‘xixi haha hehe’ father.startsWith(‘haha’) // false father.startsWith(‘xixi’) // true 复制代码

  • endsWith:判断字符串是否以某个/某串字符结尾:

const father = ‘xixi haha hehe’ father.endsWith(‘hehe’) // true 复制代码
(2)自动重复:可以使用 repeat 方法来使同一个字符串输出多次(被连续复制多次):
const sourceCode = ‘repeat for 3 times;’ const repeated = sourceCode.repeat(3) console.log(repeated) // repeat for 3 times;repeat for 3 times;repeat for 3 t

JavaScript有哪些内置对象

js 中的内置对象主要指的是在程序执行前存在全局作用域里的由 js 定义的一些全局值属性、函数和用来实例化其他对象的构造函数对象。一般经常用到的如全局变量值 NaN、undefined,全局函数如 parseInt()、parseFloat() 用来实例化对象的构造函数如 Date、Object 等,还有提供数学计算的单体内置对象如 Math 对象。

JavaScript脚本延迟加载的方式有哪些?

延迟加载就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。
一般有以下几种方式:

  • defer 属性: 给 js 脚本添加 defer 属性,这个属性会让脚本的加载与文档的解析同步解析,然后在文档解析完成后再执行这个脚本文件,这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的,但是在一些浏览器中可能不是这样。
  • async 属性: 给 js 脚本添加 async 属性,这个属性会使脚本异步加载,不会阻塞页面的解析过程,但是当脚本加载完成后立即执行 js 脚本,这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的,一般不会按照代码的顺序依次执行。
  • 动态创建 DOM 方式: 动态创建 DOM 标签的方式,可以对文档的加载事件进行监听,当文档加载完成后再动态的创建 script 标签来引入 js 脚本。
  • 使用 setTimeout 延迟方法: 设置一个定时器来延迟加载js脚本文件
  • 让 JS 最后加载: 将 js 脚本放在文档的底部,来使 js 脚本尽可能的在最后来加载执行。

    JavaScript 类数组对象的定义?

    一个拥有 length 属性和若干索引属性的对象就可以被称为类数组对象,类数组对象和数组类似,但是不能调用数组的方法。常见的类数组对象有 arguments 和 DOM 方法的返回结果,还有一个函数也可以被看作是类数组对象,因为它含有 length 属性值,代表可接收的参数个数。
    常见的类数组转换为数组的方法有这样几种:
    (1)通过 call 调用数组的 slice 方法来实现转换
    Array.prototype.slice.call(arrayLike); 复制代码
    (2)通过 call 调用数组的 splice 方法来实现转换
    Array.prototype.splice.call(arrayLike, 0); 复制代码
    (3)通过 apply 调用数组的 concat 方法来实现转换
    Array.prototype.concat.apply([], arrayLike); 复制代码
    (4)通过 Array.from 方法来实现转换
    Array.from(arrayLike); 复制代码
    (5)直接通过扩展字符串转换

    数组有哪些原生方法?

  • 数组和字符串的转换方法:toString()、toLocalString()、join() 其中 join() 方法可以指定转换为字符串时的分隔符。

  • 数组尾部操作的方法 pop() 和 push(),push 方法可以传入多个参数。
  • 数组首部操作的方法 shift() 和 unshift() 重排序的方法 reverse() 和 sort(),sort() 方法可以传入一个函数来进行比较,传入前后两个值,如果返回值为正数,则交换两个参数的位置。
  • 数组连接的方法 concat() ,返回的是拼接好的数组,不影响原数组。
  • 数组截取办法 slice(),用于截取数组中的一部分返回,不影响原数组。
  • 数组插入方法 splice(),影响原数组查找特定项的索引的方法,indexOf() 和 lastIndexOf() 迭代方法 every()、some()、filter()、map() 和 forEach() 方法
  • 数组归并方法 reduce() 和 reduceRight() 方法

注意 ❗ ❗ ❗ slice()方法是浅拷贝,具体在下文做解释。

arr.slice(begin, end),slice 会提取原数组中索引从 begin 到 end 的所有元素(包含 begin,但不包含 end)。

begin 可选 是提取起始处的索引(从 0 开始),从该索引开始提取原数组元素。

如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。

如果省略 begin,则 slice 从索引 0 开始。

如果 begin 超出原数组的索引范围,则会返回空数组。

end 可选 是提取终止处的索引(从 0 开始),在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素(包含 begin,但不包含 end)。

slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 (索引为 1, 2, 3的元素)。

如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。

如果 end 被省略,则 slice 会一直提取到原数组末尾。

如果 end 大于数组的长度,slice 也会一直提取到原数组末尾。

如何理解 slice() 方法的浅拷贝
slice 不会修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝:

如果该元素是个对象引用 (不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。
对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。
如果向两个数组任一中添加了新元素,则另一个不会受到影响。