Js的学习

1.输出 document.writhe(“”)输出文档
输出 alert(”)弹出提示框。
输出 console.log(‘控制台打印’) 浏览器不会显示，在console里面显示。
输入：prompt(‘ ‘)显示一个对话框并提示信息。
prompt alert会先执行。

2.JS变量：存储数据的容器。
创建变量 let name
基本数据类型number string undefine null boolean

3.类型转换
隐式转换：+两边只要有一个是字符串他就会把另外一个转成字符串。例如’2’+2 =22

+-/ %都会把字符串转成数字。’2′-2=0
+’123’会把123转成number类型。
显式转换 NUmber parseInt只取整数 parseFloat保留小数。

4.自增运算符++i是先加1 i++是后加1
let i=1
i++ + ++i + i=7

5.JS里面判断都是用3等。===是全等的意思（判断类型与值）
除了空符串，其他都是真

6.break和continue的区别。！！！break是退出整个大循环，后续的循环不需要的时候。continue是退出本次小循环，例如只是结束i===3时候的循环。

7.undefine类型+任何数都是NAN

8.数组.push()将一个或多个元素添加到数组末尾并返回数组长度。
.unshift（）是将元素插在数组开头，并返回数组长度。
arr.pop()删除数组最后一个元素，并返回该元素的值。
arr.shift()删除数组第一个元素…。
arr.splice(起始位置 数组下标，删几个元素,item要添加的元素)删除指定元素。

arr.slice截取数组

arr.slice是一个Array的方法，用于返回一个新数组，该数组包含原始数组中指定的开始和结束索引之间的元素。arr.slice方法的语法如下：

arr.slice(start, end)

其中，start是要返回的起始位置的索引，end是要返回的结束位置的索引（不包括该位置的元素）。如果未指定end参数，则会一直截取到数组的末尾。

以下是一个使用arr.slice方法的示例代码：

const arr = [1, 2, 3, 4, 5, 6];
const slicedArr = arr.slice(2, 5);
console.log(slicedArr);

输出结果为：[3, 4, 5]

10.document.write(里面可以写html css样式)

11.js中function(参数没有定义a,b),函数没写return则默认返回值undefined

12.函数返回多个值 return[min,max…]使用数组返回。

13。函数名相同，后面覆盖前面。1.实参多余形参 function fn(a,b){return a+b} 那么fn(1,2,3)=3(a=1,b=2)3没人要
2.实参少于形参=NAN

14.作用域。js里面叫全局作用域，function里面叫局部。。。 变量访问原则：就近原则。

15.匿名函数。let fn=function(){}。那么fn就是该函数的名字。
调用:fn()这样写必须先写表达式，后调用。

16.立即执行函数：(function(x,y){console.log(x+y)})(1,2)写完直接执行,他不需要调用，直接执行。多个函数之间用；隔开
函数里面的变量对其他函数等没有影响。

17.逻辑中断。console.log(false||age++)只会执行false不会age++,(真值||真值)取第一个 （真值&&真值）取第二个 undefined在逻辑判断中是0
undefine+-*/都是NAN

18‘ 字符串’+num是拼接 ‘字符串-num=Number(‘字符串’)-num ‘ ‘=0

19.声明对象let obj={} 查的两种写法：1.obj.属性 2.如果let obj={‘name’:’xjw’} 那么obj[‘name’]

20.for(let k in obj){//那么k就是属性名,但是注意！！此时k是字符串} 所以要输出就用obj[k]

21.生产n-m的随机数math.floor(math.random()*(m-n+1))+n

22.对象在栈里面存的是对象地址。

23.复杂数据类型保存在堆里面，简单数据类型保存在栈里面。

const对于复杂数据类型（对象、数组）只要地址不变那么数组就不变，就可以使用const定义，例如const arr=[1,2,3] arr.push(4)可以实现。

但是arr=[]就会报错。

25.docume是一个dom对象。

26.querySelector（’css选择器’）选第一个标签，并返回对象

querySelectorAll（’css选择器’）选择所有的，并返回数组存储的。此数组不能用pop push方法是个伪数组只有长度。只能用for遍历。

innerText(”)方法不解析标签，只是纯文本。innerHTML()=识别标签

27.className会覆盖以前的类名，所以可以加上原来的类名。例如className=’ nav box’，追加一个类。

28.classList.add(‘类名不加点’)追加一个类明，classList.remove()删除一个类 classList.toggle()切换类。

29.注意通过obj.style.backgroundColor=”改的样式，是内联样式，权重为1000,所以要注意，以后用className()加的样式会无效。

30.自定义属性：data-xx都是自定义属性，获取属性document.queryselector(obj.dataset.xx) dataset是一个自定义属性对象!

31.开启定时器 let timerId=SetInterval(函数 不要加小括号，间隔时间(ms) )返回一个id数字代表它的序号

关闭定时器：clearInterval(id数字)

再开启定时器:timerId=setInterval(函数 不要加小括号，间隔时间(ms) )

32.事件监听：obj.addEvenListener(‘事件类型 点击：click 鼠标经过：mouseenter ‘ 鼠标离开：mouseleave 表单获得焦点：focus 失去焦点：blur, 键盘按下触发：keydown 键盘弹起触发：keyup ，input：用户输入事件（用户输入内容时才会触发） ， function(){})

1.mouseover事件与mouseenter事件
mouseover事件：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。可以事件委托
mouseenter事件：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。不能

2.mouseout事件与mouseleave事件
mouseout事件：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。可以事件委托
mouseleave事件：只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。不能

33.事件对象 obj.addEventListener(‘keyup’,function(e(这个e就是事件对象)){

if(e.key===’Enter’){

console.log(‘你按下了回车’)}

})

34.文本输入的时候去除输入字符串中的空格。str.trim()

35.环境对象：

this指向调用者，只有函数里面才有this。例如btn.addEventListener(‘click’,function(){console.log(this)})这时候this指向button那个按钮

36.回调函数：function B(functionA){}A就是回调函数

37.：checked伪类：

38.事件冒泡：addEventListener(,,true是捕获 false是冒泡)从里到外执行。捕获:document→html→body… 冒泡div→….document

比如ul li 当点击li的时候，如果li没有添加监听事件，那么会检查ul是否添加监听事件并执行。

39.阻止冒泡：事件对象.stopPropagation(),mouseenter和mouseleave没有捕获和冒泡。

40.事件委托：给祖先元素的。不一定是父元素

    
xxx

    
xxx

    
xxx

    
xxx

   服务器托管网 
xxx

    
aaa

    
bbb

    cccc





    const ul=document.querySelector('ul')  //给父元素添加委托时事件，当点击li的时候响应。

    ul.addEventListener('click',function (e) {

        if (e.target.tagName==='LI'){

            e.target.style.color='red'

        }

    })

e.preventDefault();阻止默认行为。

40.其他事件：1.页面加载事件：load:等dom元素加载完后在执行。document.addEventLListener(‘DomContentLoaded’,function)这是等HTML中标签加载完就可以运行。

2.scroll监听滚动：document.documenElement返回的是HTML对象，document.documenElement.scrolltop=设置页面往下滚动到多少

3.页面尺寸事件：resize尺寸改变的时候。window.addelistener(‘resize’,function){窗口大小发生改变的时候 执行 }clientwidth和clientheight是测量div的宽高（除去边框大小）

offsetleft受定位影响，会找最近一级有定位的祖先元素来测量自己的位置。

41.获取对象元素大小位置的方法：getBoundingClientRect(它的数值是针对当前窗口来说的)

42.时间戳：1970年01月01日到现在的毫秒数，所以倒计时=将来的时间戳-现在的时间戳

获取方法：1.getTime()此方法必须实例化。2.+new Date()//常用

43.Dom节点：parentNode获取本节点的父节点。children[0]第一个孩子：获得所有的亲孩子元素节点，返回一个伪数组。

nextElementSiBling：下一个兄弟 。previousElementSiBling:上一个兄弟

44.增加节点：createElemnet（）创建元素节点。appendChild（元素）：在末尾添加元素。insertBefore(要插入的元素，在哪个元素的前面) 。元素.cloneNode（true）：克隆节点 true代表后和后代节点一起克隆返回一个对象，false只是克隆标签。 removeChildren（）：删除孩子元素。

45.伪类选择器input:checked表示选中状态的按钮 input[name]表示带有name属性的input

46.BOM对象：浏览器对象模型

let n=setTimeOut(函数名,延迟毫秒数):延迟函数，它只执行一次。清除clearTimeOut(n)

47.js执行机制:它是一个单线程语言，如果遇到耗时的函数或者操作，它会异步执行（需要等待时间，或者耗时的任务会被放到任务队列）

同步任务都在主线程上执行，形成一个执行栈。

异步任务：js的的异步是通过回调函数实现的，异步任务一般放到任务队列中。

事件循环：主线程不断地获取任务队列，执行任务，再取任务。。。。。

48.bom的location对象。location.href代表本网站的链接。location.href=’xx’自动跳转。location.reload(true)强制刷新页面 不写就是一个函数，调用就刷新。hash方法是获得url #后面的内容。

49.navigation对象：userAgent（）检测浏览器信息，判断pc端还是手机端分别跳转不同页面。

50.history：back()后退 forward()前进方法。

51.localStorage:将数据永久存储在用户本地。存储数据：localStorage.setItem(key)

本地存储只能存字符串,存储对象的时候要转成json字符串再存储到本地。localStorage.setItem(‘obj’,JSON.stringify(obj))

JSON.parse:字符串转成对象JSON.parse(localStorage.getItem(‘obj’))

52.

const initData=[{stuId:1,uname:'迪丽热巴',age:18,gender:'女',salary:'12000',citu:'北京',time:'2099/09/09 08:09:09'}]
 localStorage.setItem('arr',JSON.stringify(initData))
 const arr=JSON.parse(localStorage.getItem('arr'))||[]
 map方法
 const a=['red','blue','pink']
const ar=a.map(function (ele,index) {
     return ele+'颜色'
 })
 document.write(ar)
 join方法把数组中的元素都转成一个字符串
 ar.join()  字符串逗号隔开

53.正则表达式：匹配字符串中字符组合的模式。定义正则表达式语法：const 变量名=/表达式/

console.log(/^哈$/ 以哈开头以哈结尾为真,test(”))

2.量词：

console.log(/^哈$/.test('哈'))
    console.log(/^哈*$/.test('哈哈哈哈'))//*代表出现次数
    console.log(/^哈*$/.test('哈'))
    console.log(/^哈*$/.test('哈很哈'))
    console.log(/^哈{4}$/.test('哈很哈'))//哈重复4次
    console.log(/^哈{4}$/.test('哈很哈哈'))
    console.log(/^哈{4}$/.test('哈哈哈哈'))
    console.log(/^哈{4,}$/.test('哈哈哈哈'))//4,重复次数>=4
    console.log(/^哈{4,}$/.test('哈哈哈哈哈哈'))
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈'))// 重复次数4-6
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈'))
true 正则表达式.html:12:13
true 正则表达式.html:13:13
true 正则表达式.html:14:13
false 正则表达式.html:15:13
false 正则表达式.html:16:13
false 正则表达式.html:17:13
true 正则表达式.html:18:13
true 正则表达式.html:19:13
true 正则表达式.html:20:13
true 正则表达式.html:21:13
false

[]:代表只是匹配一个字符 /[abc]/:意思是只要有a,b,c中任何一个，就返回true []的意思是只是匹配一个 console.log(/^[abc]$,test(‘ab’))=false

[A-Z]:只能出现大写A-Z的一个字母 [0-9]数字的一个 [a-zA-Z0-9]小写大写和数字的一个

{4，}重复的是离它最近的那个数,所以是[0-9]重复4次

d w重点

3.修饰符 i不区分大小写 g是全局查找

console.log(/^java$/i,test(‘java’))=true console.log(/^java$/i,test(‘JAVA’))=true

4.str.replace

const str='java很好。JAVA很难，Java天下第一'
const rs=str.replace(/java/ig,'前端')
console.log(rs)

54.注意className=’ ‘会覆盖类名

55.input change事件是当文本内容发生改变时的事件。

56.块作用域:{里面的都是块作用域}比如for(){块作用域}，记住var声明的变量不受块作用域影响，let 和 const受。

57.垃圾回收机制：全局变量一般不会被自动回收，当关闭页面时回收。局部变量不使用就会立马被回收。

内存泄漏：程序中分配的内存由于某种原因无法释放叫内存泄漏

对象或者数组赋值是引用地址。let person{name:’xujiawei,age:’18’} let p=person是把person的地址给p

58闭包:闭包=内层函数+外层函数的变量 闭包的作用：外部访问函数内部的变量

let a=1
let b=2
function outer() {
    let a=1
    function inner() {
        a=2   //a使用了outer函数的a变量，所以这叫闭包
        console.log(a)
        //先查当前作用域 找不到再依次向父级查找
    }
    inner()
}
outer()

//闭包的使用
let a=1
function outer() {
    let a=2
    function inner() {
        console.log(a)
    }
    return inner  //此时inner是个函数名叫inner  === outer(）
}

const fn=outer()  outer()===fn===inner
fn()

a不会被销毁，因为从全局可以找到，所以会内存泄漏。

59.动态参数

function f() {
    //arguments只存在于函数里面
    let sum=0
    for (let i=0;i

60.

let arr=[1,2,3]

console.log(…arr)

输出为1，2，3

箭头函数里面不包含arguments，包含剩余参数

箭头函数没有this，所以箭头函数里面的this指向的上一层作用域

61.解构赋值

const arr=[60,70,80]
const [min,avg,max]=arr
//相当于min=60 avg=70 max=80
//例子  交换ab值
let a=1
let b=2;
[a,b]=[b,a]
document.write(a,b)
const pc=['海尔','联想','小米','方正'];
const [he,dasd,da,de]=pc
document.write(he)
function f() {
    return [100,50]
}
[max,min]=f()
document.write(max,min)
const [a,b,...c]=[1,2,3,4]
console.log(c)

61.foreach

只遍历不返回，只能遍历数组。map是返回数组，最后要加return

62.filter。对数组进行filter筛选。return数组。arr.filter(function(item,idnex){

return item>20

})更简便arr.filter(item=>return item>=20)//

63构造函数：用来创建多个类似的对象。名字第一个字母必须大写。

用new实例化。构造函数里面的方法和属性叫静态成员

64.

//取得obj里面的所有属性
const o={name:'旋鸡尾',age:10,gender:1,tall:175}
const arr=Object.keys(o)
console.log(arr)
//values获得值
console.log(Object.values(o))

Object.assign(目标对象,{添加的属性})追加属性。

65

//reduce方法

const arr1=[1,2,3,4,5,6]

let x=arr1.reduce(function (pre,next) {

    return pre+next

},起始值)

consol服务器托管网e.log(x) x=起始值+[arr1]求和

arr.find(function())返回的是第一个符合条件的值。

split是把字符串转成数组。例如const str=’pink red’ const arr=str.split(‘,’) //join是把数组转成字符串

str.startsWith(‘搜索字符串’,position) 返回true或者false

includes方法(判断字符是不是包含在字符串里面)区分大小写str.includes(‘字符串’,position)//position是从此处开始配对。return true or false

66.需要共享的函数写在原型上。（注意构造函数和原型里面的this都是指向实例化对象）

例子。数组扩展方法 求最大值和求和

Array.prototype.max=function () {
    document.write(Math.max(...this))
}
const arr=[1,2,431,41,4,1441,151]
arr.max()
Array.prototype.sum=function () {
    const sum=this.reduce(function (prev,item) {
        return prev+item
    })
    document.write(sum)
}
arr.sum()

67.constructor

68原型对象

69.原型链（只要是对象就有proto，只要是原型对象就有constructor，指向本构造函数）

70.深拷贝和浅拷贝：1.浅拷贝：拷贝的是地址 拷贝对象是简单数据类型的话直接拷贝数值，如果是引用数据类型，那么拷贝的是地址。

const obj={name:'xx',age:18}
const ob={...obj}
console.log(ob)
ob.age=20
console.log(ob.age)//这样的话ob.age=20   obj.age还是18

//如果改成obj={name:'xx',age:18,family:{baby:'babe'}}的话
ob.family.baby='baby'
那么拷贝后obj 和 ob的baby值都要变。

2.深拷贝：针对引用类型。有3种方式，1.通过递归方式 2.lodash/cloneDeep 3.通过JSON.stringfy()实现。

1.递归拷贝
function copy(newObj,oldObj) {
    for(let k in oldObj){
        if(oldObj[k] instanceof Array){
            newObj[k]=[]
            copy(newObj[k],oldObj[k])
        }
        newObj[k]=oldObj[k]
    }
}
const a={name:'xx',age:18,hobby:['唱歌','跳舞']}
const b={}
copy(b,a)
console.log(b)

2.

3.const o=JSON.parse(JSON.stringfy())

71.普通函数this指向的是调用者。 箭头函数this一直向外层查找，知道找到有this定义的。（调用者的上一层）

72。改变this指向。1.apply(obj,[arr])方法 apply后面只能放数组（传的是数组），返回值是函数的返回值。apply会立马调用函数

const obj={age:18}
function f(x,y) {
    console.log(x+y)
    console.log(this)
}
f.apply(obj,[1,2])

2.bind():不会调用函数，能改变this指向，返回值是一个函数

//bind
const o={age:18}
function fn() {
   console.log(this)
}
const gn=fn.bind(o)//赋值fn函数再返回一个相同的函数，里面的this指向的是o
console.log(gn())

73.JS-防抖：单位时间内如果频繁地触发某事件，那么就只执行最后一次。

const div=document.querySelector('div')

let i=0

function add(){

    i++

    div.innerHTML=`${i}`

}

function debounce(fn,time){

    let timer

    return function () {

        if (timer) clearTimeout(timer)

        timer=setTimeout(function () {

            fn()

        },time)

    }

}

    div.addEventListener('mousemove',debounce(add,500))

74.节流:

单位时间内事件只能触发一次。

const div=document.querySelector('div')
  let i=0
  function add(){
      i++
      div.innerHTML=`${i}`
  }
function throttle(fn,time){
      let timer     //1
    return function (){ //2
        if (timer){}     //3
        else{            //3
            timer=setTimeout(function () { //4
                fn()
                timer=null
            },time)//注意定时器执行顺序，执行顺序是1234但是不会执行定时器里面的内容，定时器里面的内容要到下一次触发监听事件前并判断是否过了time的时间才会执行。
        }
    }
}
  div.addEventListener('mousemove',throttle(add,500))

75.页面打开可以记录上一次的播放位置。两个事件：ontimeupdate当前播放位置改变时触发 onloadeddata事件在当前帧的数据加载完成且还没有足够的数据播放视频的下一帧触发

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: Spring MVC相关注解运用 —— 上篇一、@Controller、@RequestMapping二、@RequestParam三、@RequestHeader、@CookieValue四、@SessionAttributes五、@Mo

目录 一、@Controller、@RequestMapping 1.1 示例程序 1.2 测试结果 二、@RequestParam 2.1 示例程序 2.2 测试结果 三、@RequestHeader、@CookieValue 3.1 示例程序 3.2 测试…