接上篇 最全js个人总结 （适合小白选手）11-20

_## 11,数组的操作方法

JavaScript提供的函数方法

数组的基本方法

• 1,push()

  • 作用

    • 在数组的末位,新增单元

  • 语法

    • 数组.push(参数)

  • 参数

    • 新增的单元的数据,可以是一个或者多个,使用逗号间隔

  • 返回值

    • 新增单元之后,新数组的长度,单元个数

• 2,unshift()

  • 作用

    • 在数组的首位,新增单元

  • 语法

    • 数组.unshift(参数)

  • 参数

    • 新增的单元的数据,可以是一个或者多个,使用逗号间隔

  • 返回值

    • 新增单元之后,新数组的长度,单元个数

• 3,pop()

  • 作用

    • 在数组的末位,删除单元

  • 语法

    • 数组.pop()

  • 参数

    • 一次只能删除一个单元,没有参数

  • 返回值

    • 删除单元的数据内容

• 4,shift()

  • 作用

    • 在数组的首位,删除单元

  • 语法

    • 数组.shift()

  • 参数

    • 一次只能删除一个单元,没有参数

  • 返回值

    • 删除单元的数据内容

• 8,splice()

  • 作用

    • 删除数组指定单元

  • 语法

    • arr.splice(参数1,参数2,参数3)

  • 参数

    • 参数1

      • 删除单元的起始索引下标

    • 参数2

      • 从起始索引开始,删除的单元的个数

    • 参数3

      • 可选参数
      • 删除的所有的单元,作为一个整体,用一个内容来替换

• 9,sort()

  • 作用

    • 数组的排序

  • 默认按照首位的数值大小进行排序

  • 按照数值的大小进行排序

    • 数组.sort(function(a,b){return a-b})

      • 从小到大

    • 数组.sort(function(a,b){return b-a})

      • 从大到小

• 7,join()

  • 作用

    • 数组单元拼接为字符串

  • 语法

    • arr.join(参数)

  • 参数

    • 设定的间隔符号
    • 默认为逗号
    • 如果不需要间隔符号,需要设定为空字符串

• 5,reverse()

  • 作用

    • 数组单元反转排序
    • 不改变原始数组

  • 语法

    • arr.reverse()

  • 参数

    • 没有参数

  • 返回值

    • 反转之后的数组

• 6,concat()

  • 作用

    • 数组拼接

  • 语法

    • arr1.concat(arr2)

  • 参数

    • 需要拼接上的数组

  • 返回值

    • 拼接之后的新的数组

数组的循环遍历方法

• for…in循环

  • 可以遍历数组和对象

  • 基本语法

    • for(var 自定义变量 in 数组/对象 ){执行内容}
    • 循环遍历数组或者对象的每个单元,将索引下标或者属性,存储在自定义变中

• forEach()循环

  • 基本语法

    • 数组.forEach(function(形参1,形参2,形参3){
      循环体
      })

    • 形参1

      • 存储数组单元的数据

    • 形参2

      • 存储数组单元的索引下标

    • 形参3

      • 存储原始数组

    • 数组,推荐使用forEach()循环遍历

12,字符串的基本操作方法

字符串是一个包装类型

• 如果按照数组的操作方式操作,可以包装自己为一个伪数组
• 有length属性,可以使用[]语法操作,但是不能使用数组的操作方法
• 不能通过修改length属性,修改字符串长度,不能通过给索引下标赋值,修改字符串内容

操作方法

• indexOf()

  • 作用

    • 查询某个字符串,是否是字符串内容
    • 查询首次出现的位置的索引下标

  • 参数

    • 查询的字符
    • 区分大小写

  • 返回值

    • 如果有匹配的字符,查询结果是索引下标
    • 如果没有匹配内容,执行结果是-1

• lastIndexOf()

  • 作用

    • 查询某个字符串,是否是字符串内容
    • 查询最后一次出现的位置的索引下标

  • 参数

    • 查询的字符
    • 区分大小写

  • 返回值

    • 如果有匹配的字符,查询结果是索引下标
    • 如果没有匹配内容,执行结果是-1

• substring()

  • 作用

    • 截取字符串子串

  • 参数

    • 参数1

      • 截取字符串的起始下标

    • 参数2

      • 截取字符串的结束下标
      • 如果不写第二个参数,是截取至原串的最后一个字符
      • 如果第二个参数是负数,是从起始字符位置向字符串起始位置开始截取,但是不包括第一个参数对应的字符

    • 截取的子串,包括第一个参数,但是不包括第二个参数

• substr()

  • 作用

    • 截取字符串子串

  • 参数

    • 参数1

      • 截取字符串的起始下标
      • 如果第一个参数是负数,是从倒数第几个字符开始截取

    • 参数2

      • 截取字符串的字符个数
      • 如果不写第二个参数,是截取至原串的最后一个字符

• replace()

  • 作用

    • 字符串内容替换函数
    • 默认执行懒惰模式,只替换第一个符合的内容

  • 参数

    • 换谁

      • 原始字符串中,需要被替换掉的内容

    • 换成谁

      • 准备替换原始内容的新内容

• split()

  • 作用

    • 字符串转化为数组

  • 参数

    • 参数1

      • 间隔符号

    • 参数2

      • 转化数组的单元个数
      • 不写第二个参数,就是按照间隔符号转化

• toLowerCase()

  • 作用

    • 字符串内容全部小写
    • 不会改变原始字符串

  • 参数

    • 需要改变的字符串

• toUpperCase()

  • 作用

    • 字符串内容全部大写
    • 不会改变原始字符串

  • 参数

    • 需要改变的字符串

• charAt()

  • 作用

    • 获取指定索引对应的字符

  • 参数

    • 索引下标

• charCodeAt()

  • 作用_

    • 获取指定索引对应字符的ASCII码表数值

  • 参数

    • 索引下标

13,严格模式

‘use strict’

注意问题

• 在学习时,不要使用严格模式,只有在封装函数,插件,框架时,会使用严格模式
• 使用严格模式,语法必须规范,并且,'use strict’必须要写在程序的第一行
• 经常出现的问题: 必须有var关键词,函数的形参不能重复定义,函数中没有this关键词…
• 不管分号

14,this指向问题

普通函数

• 普通函数,this的指向,是函数之前的对象

• 声明方式

  • window
  • function fun(){}
    fun() // window.fun()

• 赋值方式

  • window
  • var fun = function(){}
    fun() // window.fun()

• 对象方式

  • 绑定函数的对象
  • var obj = { fun : function(){} }
    obj.fun()

• 事件绑定方式

  • 绑定函数的标签
  • 标签对象.onclick = function(){}

定时器

• this,指向的是window
• 箭头函数定义,this指向的是父级程序的this

forEach()

• function中,this是undefined
• 箭头函数定义,this指向的是父级程序的this

箭头函数

• 指向的父级元素的this
• 如果父级元素有this,箭头函数的this就是父级元素的this
• 如果父级元素没有this,箭头函数的this指向window

构造函数

• this默认指向,通过构造函数生成的实例化对象
• 如果构造函数中,有事件绑定,事件绑定中的this指向的事件源
• 有时需要存储this,在事件绑定中使用

改变this指向

• call()

  • 语法

    • 函数.call(this指向 , 原函数的参数1, 原函数的参数2…)

• apply()

  • 语法

    • 函数.apple(this指向 , [原函数的参数1, 原函数的参数2…])

• bind()

  • 语法

    • const fun = 函数.bind(this指向)
    • 将改变this指向之后的函数,作为返回值,新函数与原始函数之间的只有this指向不同

this问题总结

• 需要注意在所有的函数中,this的指向问题
• 1,使用call()等方法,改变this的指向,箭头函数无法改变this指向的
• 2,可以通过将function,改为箭头函数,来实现改变this指向
• 3,在一个函数中,要使用两个this指向,先存储一个this,在事件中,使用变量,替换当前事件的this

jQuery事件中的this

• 普通的事件绑定,this指向的是绑定事件的标签对象

• 第二个参数是事件委托,this指向的是触发事件的标签对象

  • 例如,div标签中有span标签,给div绑定事件,然后通过事件委托,定义点击对象是span标签时,触发事件
  • JavaScript中,this的指向始终是div标签对象
  • jQuery中,事件委托的是span标签,this的指向就是span标签

注意

• 构造函数中,事件绑定中,定时器中,函数中调用函数,forEach中的this问题

15,ES5的数组操作方法

indexOf()

• 作用

  • 查找数组中是否有某个值

• 参数

  • 需要查找的数值

• 返回值

  • 如果有匹配内容,返回值是索引下标
  • 没有匹配内容,返回值是-1

forEach()

• 作用

  • 循环遍历数组
  • 只能循环遍历数组,不能遍历对象

• 语法

  • 数组.forEach(function(形参1,形参2,形参3){循环体})

• 形参

  • 形参1

    • 存储数组单元的数值

  • 形参2

    • 存储数组单元的索引

  • 形参3

    • 存储原始数组单元

map()

• 映射

  • 新数组的单元个数与原始数组的单元个数相同,只是对这些数据进行了操作

• 语法

  • 数组.map(function(value,key,arr){return val的操作})

• 返回值

  • 按照条件,返回的新数组

filter()

• 过滤

  • 只返回符合条件的数据单元

• 语法

  • 数组.filter(function(value,key,arr){return var > 5})

• 返回值

  • 按照条件,返回的新数组

some()

• 有一个符合条件的就行

• 语法

  • 数组.some(function(value){value的条件})

• 返回值

  • 布尔类型

every()

• 所有符合条件

• 语法

  • 数组.every(function(value){value的条件})

• 返回值

  • 布尔类型

16,Math方法

Math.random()

• 随机数

• 公式

  • 生成 a - b 范围的整数
    parseInt(Math.random()*(b+1-a) + a)

Math.round()

• 四舍五入取整

Math.floor()

• 向下取整

Math.ceil()

• 向上取整

Math.min()

• 返回参数中的最小值

Math.max()

• 返回参数中的最大值

Math.pow()

• 幂运算

• 功能与运算符 ** 是相同的

• 参数

  • 参数1

    • 幂运算的底数

  • 参数2

    • 幂运算的质数

Math.sqrt()

• 平方根
• JavaScript中的平方根,只有正数

Math.abs()

• 绝对值

补充知识

• 字符串操作方法

• .toFixed()

  • 转化为字符串,设定保留几位小数

17.Date()方法

1,声明方法

• 一个字符串参数

  • ‘2019-11-22 10:57:30’
  • 没有秒是00秒
  • 小时和分钟必须一起设定
  • 不设定时间,2位月份,显示8点,1位月份,显示0点
  • 日期月份不设定,默认都是以1

• 多个数值参数

  • (2019 , 11 , 22 , 10 , 57 , 30)

  • 设定多个参数,必须是2个以上参数

    • 至少要有年份和月份
    • 设定数值超出正常数值会进位
    • 月份如果是数值形式,是0-11,对应1-12月

2,获取时间

• 时间对象.getFullYear()

  • 4位年份

• 时间对象.getMonth()

  • 月份
  • 0-11

• 时间对象.getDate()

  • 获取日期

• 时间对象.getDay()

  • 获取星期
  • 0表示星期日

• 时间对象.getHours()

  • 小时

• 时间对象.getMinutes()

  • 分钟

• 时间对象.getSeconds()

  • 秒

3,获取当前时间的时间戳

• 时间对象.getTime()
• 从设定的时间到1970年1月1日0点0分0秒的时间差
• JavaScript中时间戳的单位是毫秒

4,设定当前时间对象中的时间

• 时间对象.setFullYear()

  • 4位年份

• 时间对象.setMonth()

  • 月份
  • 0-11

• 时间对象.setDate()

  • 设定日期

• 时间对象.setHours()

  • 设定小时

• 时间对象.setMinutes()

  • 设定分钟

• 时间对象.setSeconds()

  • 设定秒

• 时间对象.setTime()

  • 设定时间戳

18,计时器

定时器

• setInterval

  • 定时器

    • 按照间隔时间,循环往复执行程序
    • 执行多次

  • 语法

    • var time = setInterval( function(){执行的程序} , 间隔时间 ,单位毫秒)

      • 变量中存储的是,这个定时器,是真个程序中的第几个定时器

延迟器

• setTimeout

  • 延迟器

    • 按照延迟时间,执行程序
    • 只执行一次

  • 语法

    • var time = setTimeout( function(){执行的程序} , 延迟时间 ,单位毫秒)

      • 变量中存储的是,这个定时器,是真个程序中的第几个定时器

清除定时器

• clearInterval(需要去除的定时器)

clearTimeout(需要去除的定时器)

• 是可以混用的

异步操作

• 所有同步程序执行结束之后,再执行异步操作
• 所有的异步操作都是在同步操作执行结束之后,一起开始执行,时间间隔短的,先执行,显示效果
• 异步操作在操作之前,都存储在异步池中

19,DOM操作

对文档的操作

• Doucment Object Model
• 文档对象模型

获取标签对象

• document.getElementById()

  • 通过id的属性值
  • 获取到的是一个标签

• document.getElementsByTagName()

  • 标签名称
  • 获取到的是有一个伪数组
  • 可以通过[]语法操作,可也以通过forEach()循环遍历

• document.getElementsByClassName()

  • class的属性值
  • 获取到的是有一个伪数组
  • 可以通过[]语法操作,可也以通过forEach()循环遍历

• document.getElementsByName()

  • name 属性的属性值
  • 获取到的是有一个伪数组
  • 可以通过[]语法操作,可也以通过forEach()循环遍历

• document.querySelector()

  • 可以通过多种方式获取标签对象,只获取符合条件的第一个标签

  • 方式

    • ‘#id属性值’
    • ‘.class属性值’
    • ‘标签名称’
    • ‘css选择器’
    • ‘[属性=“属性值”]’
    • ‘父级标签>子级标签’

• document.querySelectorAll()

  • 获取所有符合条件的标签,执行结果是一个伪数组

  • 方式

    • ‘#id属性值’
    • ‘.class属性值’
    • ‘标签名称’
    • ‘css选择器’

• 特殊标签对象的获取

  • body

    • document.body

  • html

    • document.documentElement

  • head

    • document.head

  • titile

    • document.title

获取标签的属性

• 标签对象.id

  • id属性的属性值

• 标签对象.className

  • class属性的属性值

• 标签对象.title

  • title属性的属性值

设定标签属性

• 标签对象.id = 数值

  • 设定id 属性的属性值

• 标签对象.className = 数值

  • 设定class 属性的属性值

• 标签对象.title = 数值

  • 设定title 属性的属性值

• 只要是标签支持的属性都可以设定属性值

• 布尔属性的属性值

  • true
  • false

标签属性的获取和设定方式

• 标签对象.getAttribute(‘属性’)

  • 获取标签的属性的属性值

• 标签对象.setAttribute(‘属性’ , 属性值)

  • 设定标签的属性以及属性值

• 标签对象.removeAttribute(‘属性’)

  • 移除标签属性

内容的读取和设定

• innerHTML

  • 可以解析支持标签

• innerText

  • 不支持解析标签,标签只是以字符串的形式输出

• 都是全覆盖操作

行内样式的读取和设定

• 只能获取到行内样式的设定的css属性和属性值

• 标签对象.style.css样式

• 不支持减号,去除减号,第二个单词首字符大写

• 有px单位

• 获取标签执行时的样式属性值

  • 有可能是行内样式,有可能是非行内样式设定的显示效果
  • if(window.getComputedStyle){
    // 这个方法是可以使用的
    console.log(window.getComputedStyle(oDiv).width);
    }else{
    // 兼容IE的方法
    console.log(oDiv.currentStyle.width);
    }

标签的占位

• 宽高 + padding + border

  • 宽

    • 标签对象.offsetWidth

  • 高

    • 标签对象.offsetHeight

• 宽高 + padding

  • 宽

    • 标签对象.clientWidth

  • 高

    • 标签对象.clientHeight

• 边框线宽度

  • 上

    • 标签对象.clientTop

  • 左

    • 标签对象.clientLeft

• margin外边距

  • 上

    • 标签对象.offsetTop

  • 左

    • 标签对象.offsetLeft

• 没有px单位

20,BOM操作

Browser Object Model

• 浏览器对象模型

• 对浏览器的操作

  • 浏览器是一款独立的软件,如果要操作浏览器,必须要浏览器自己本身同意,BOM操作就是通过浏览器同意的操作方式,可以操作浏览器

获取浏览器的宽度高度

• 包含滚动条

• window.innerWidth

  • 浏览器宽度

• window.innerHeight

  • 浏览器高度

浏览器地址栏信息

• window.location

• 获取url地址

  • window.location.href

• 设定url地址

  • 编程式导航
  • 给标签添加事件,触发事件时,设定一个跳转url地址
  • oDiv.onclick = function(){
    window.location.href = ‘http://www.baidu.com’;
    }

• 解决地址栏的中文

  • decodeURL(‘字符串’)

  • 将地址栏中的%XX 符号,转化为对应的中文

  • 将获取到的字符串,转化为对象

    • function getUrlVal(val) {
      let obj = {};
      // 现根据经&符号,将字符串转化为数组
      let arr = val.split(’&’);
      // 在根据=等号,转化数组中的数据为新的数组
      let newArr = [];
      // 循环遍历数组arr
      arr.forEach(function (item) {
      // 将数组arr中的数据,根据=,再分割为新数组
      newArr = item.split(’=’);
      // 新数组中的[0]就是键值对的键名
      // 新数组中的[1]就是键值对的数据
      // 作为对象中的属性和属性值,赋值给对象
      obj[newArr[0]] = newArr[1];
      })
      // 最终返回值是获取到的对象
      return obj;
      }

浏览器对象信息

• window.navigator

• window.navigator.userAgent

  • 浏览器的型号,内核,版本信息等

• window.navigator.appVersion

  • 浏览器的版本信息

• window.navigator.appName

  • 浏览器软件名称,统一都是网景

• window.navigator.platform

  • 获取电脑的操作系统信息

浏览器的历史记录

• window.history

• window.history.length

  • 历史记录次数
  • 浏览了几个网页,有几次

• window.history.back()

  • 上次一次浏览的页面

• window.history.forward()

  • 下一次浏览的页面

• window.history.go(数值)

  • 设定跳转的浏览器次数
  • 从第一次浏览器的页面,跳转到第5次浏览器的页面,数值是4
  • 整数等于执行多次forward()
  • 负数等于执行多次back()

浏览器的弹出层

• window.alert()

  • 提示框

• window.prompt()

  • 输入框
  • 获取输入的数据,数据类型是字符串类型

• window.confirm()

  • 确认框
  • 执行结果是布尔类型
  • 点击确定,是true,点击取消是false