javascript之基础篇

Posted 2021-03-24 kuishen

浅谈前端发展史

• 第一阶段
  • 从C/S(client(应用程序) server)() -> B/S (Brower(浏览器) server)
• 第二阶段:
  • 从静态到动态，从后端到前端 前后端分离
  • 后台：完成数据的分析和业务逻辑编写
  • 前端： 网页制作，js交互效果，数据的交互和绑定
  • 技术栈
    • javascript AJAX(跨域技巧:nginx cors jsonp proxy), jQuery...
• 第三阶段
  • 从前端到全端(从pc到移动端)
    • 技术栈： H5 css3 响应式布局， zepto hybrid(混合APP)
• 从前端到全栈
  • 全栈开发： 前后端都可以，NODE(Express/Koa...)
• 为了前端的发展和维护，js诞生了前端高性能的高性能的框架：Vue React webpack...

浏览器基础

浏览器内核

1. webkit内核(v8)
   • Google/Safari/opera >= 14 /大部分国内浏览器, 手机浏览器
2. Gecko

• 火狐fireFox

3. Presto

• Opera < v14

4. Trident

• IE
• IE Edge
• 浏览器内核的作用：按照一定的规范,把代码给予GPU(显卡)绘制成对应的图形和页面等 为什么会出现兼容性：
• 部分浏览器提前开发的更好的功能，后期会被W3C收录，但是在收录之前，会出新一定的兼容性

JavaScript基础

JS时一门轻量级的客户端脚本语言(全栈编程语言) 编程语言:具备一定逻辑的，拥有自己的编程思想(面向对象[OOP]，面向过程) JS的组成部分

• ECMAScript:JS的核心语法
• BOM 浏览器对象模型，提供各种API，让js操作浏览器
• DOM: 文档对象模型,提供各种API让js操作html元素(DOM元素)

JS的变量

• 不是具体的值，是用来存储值的容器，存储的值可以改变,所以称为变量

  • var(es3)
  • function(es3) 创建函数,存储的值是函数
  • let [es6]
  • const [es6] 创建常量
  • import [es6] 给予模块化到处信息
  • class [es6] 给予es6创建类

  var [变量名] = 值
  let [变量名] = 值
  const [变量名] = 值
  function 变量名() {
  
  }
  var n = 13
  

• 基本数据类型

  • 数字 number
  • 字符串 string
  • 布尔 boolean
  • null
  • undefined

• 引用数据类型

  • 对象 object
    • 普通对象
    • 数组
    • 正则
    • 日期
    • ...
  • 函数

• ES6新增特殊的类型Symbol,特殊类型

• [基本数据类型]
   var n = 13  // 0 -13 10.2 NaN不是一个有效数据，但是属于number类型
  var s = ‘a‘; //‘{}‘，所有使用单引号和双引号包裹起来的都是字符串
  var bool = true // false 只有两个值
  
  [引用数据类型]
  var o = {name: ‘anan‘, age: 9} //{}包含多组键值对 {}空对象
  var arr = [1,2,3] // []包裹起来的，包含0项或多项，这种是数组对象 []空数组
  var reg = /-?(d|([1-9]d+))(.d+)?/g  // 由元字符组成一个完整的正则
  function fn () {
  }
  [Symbol]
  创建出来的是唯一的值
  var a = Symbol(‘anan‘)
  var b = Symbol(‘anan‘)
  // a != b
  

  　　

JS代码如何被运行以及运行后如何被输出

• [如何被运行]
  • 把代码运行在浏览器中(浏览器内核来进行渲染)
  • 给予Node来运行(Node也是一个基于V8引擎渲染和解析js的)
• [如何被输出]
• alert:在浏览器中通过弹窗的方式输出(alert的输出结果都是字符串)
  • alert先计算的表达式的结果，在使用toString()转化输出
• confrim:和alert的用法一致，只不过包含确认和取消两个按钮,确认返回的是true， 取消返回的是false
• prompt: 在confirm的基础上增加了输入框
• console.log: 在浏览器控制台输出日志
• 控制台
  • Elements: css和html的结构和样式
  • Console: 控制台js代码的输出结果，也可以之间编写js代码
  • Sources: 前端源代码
  • netWork: 网络交互
  • Application: 本地存储 cookies...
• console.dir: 比log输出的更加详细一些
• console.table: 把一个Json数据按照表格的方式输出

   

检测机制

数字类型

首先验证当前的值是不是数字类型的，如果不是，浏览器会把值转换为数字类型

• 1 把非数字类型的值转化为数字

  1. 其他基本数据类型的值转化为数字：使用Number()转换,字符串转换类型出现非有效数字字符就是NaN

     • Number(‘12‘) => 12
     • Number(‘12px‘) => NaN
     • Number(true/false) => 1/0
     • Number(null) => 0
     • Number(‘‘) => 0
     • Number(undefined) => NaN

  2. 引用数字类型转化为数字，先把引用值待用toString()转化为字符串，再使用Number()转化为数字, 浏览器的转换规则

     • Number({}) => ({}).toString() => [object Object] => NaN
     • Number([12,13]) =>[12,13].toString() => ‘12,13‘ => NaN
     • Number([12]) =>[12].toString() => ‘12‘ => 12

  3. parseInt/ parseFloat

     • parseInt: 把一个字符串当中整数的部分解析出来,直到找到非有效数字，可以传递第二个参数表示转换的进制数
     • parseFloat: 把字符串中的小数部分解析出来，直到找到非有效数字，只能转化位十进制
     • == 进行比较的时候，会出现把其他类型的值转化数字类型，进行比较

  4. isNaN检测当前值是不是有效数字，是有效数字返回false,不是返回true,数字中只有NaN不是有效数字

• NaN和任何值都不相等

           

 var num = 12
    isNaN(num) => false 检测变量存储的值是不是为有效数字
    isNaN(‘12‘) => false
    isNaN(true) => false
    isNaN(false)=> false
    isNaN(null) => false
    isNaN(undefined) => true
    isNaN({name: ‘anan‘}) => true
    isNaN([12]) => false
    isNaN([12,13]) => true
    isNaN(/^$/) => true
    isNaN(function(){}) => true
    if (Number(num) == NaN) {
        alert(‘num不是有效数字‘) // 永远不会执行，NaN和任何值都不相等
    }
    if (isNaN(num)) { // 正确的检测方式，而且只有一种
        alert(‘num不是有效数字‘)
    }
    parseInt(‘12.5px‘) => 12
    parseFloat(‘12.5px‘) => 12.5
    parseInt(‘width: 12.5px‘) => NaN　　

布尔类型

在js中只有0/NaN/‘‘/false/undefined/null六个值转为Boolean为false，其余的都为true

• Boolean
• !
• !!

•  Boolean(0)
   Boolean(NaN)
   Boolean(‘‘)
   Boolean(false)
   Boolean(undefined)
   Boolean(null)
  

  　　

null 和 undefined

都代表空或者没有

• null: 空对象指针， 一般为手动复制的值,后续会分配值
• undefined: 为定义， 一般是浏览器自己分配

 

字符串数据类型

• 1 在js中使用单引号和双引号包裹起来的，由0到多个字符组成的，以数字为索引，从0开始
• 2 有一个length可以获取当前字符串的长度
  • str.length: 获取字符串的长度
  • str[0]：获取字符串的第一个字符
  • str[str.length-1]: 获取字符串的最后一个字符
  • str[10000] => undefined 不存在的字符是undefined

  String的常用方法

  • 3.1 charAt()/charCodeAt(): 返回当前字符的索引的字符和和当前字符索引的ASCll值

    • [ASCLL 48-57 -> 0-9 65-90 -> a-z 97-122 -> A-Z]

  • 3.2 substr&&substring&&slice

    • 实现字符串的截取
    • substr(n,m): 从字符索引n开始，截取m个字符
    • substring(n,m): 从字符索引n开始，截取索引m处
    • slice(n, m): 从字符索引n开始，截取索引m处,支持负数作为索引

  • 3.3 toUpperCase()/toLowerCase() 字符串全部转换大/小写

  • 3.4 indexOf&&lastIndexOf

    验证字符串是否存在, IE6-8不兼容

    • indexOf():查看当前字符串在当前的索引，不存在返回-1
    • lastIndexOf(): 自右向左查看当前字符串的索引, 不存在返回-1

  • split():把当前的字符串按照特定字符拆分为数组与数组的join()对应

  • replace(): 实现字符串的替换，可以使用正则匹配多次

  • trim()/trimLeft()/trimaRight():去除两边的空格

object对象数据类型

普通对象

• 由大括号包裹起来的

• 由0到多组属性名和属性值组成

  • 属性：用来描述当前对象的特征，属性名是当前具有这个特 征，属性值是对这个特征的描述,

• 对象的操作： 对键值对的增删改查

  var obj =  {
      name: ‘anan‘,
      age: 18
  }
  [获取]
  obj.name | obj[‘name‘] //对象的属性名一般是字符串格式的，也可能是数字格式(属性值不固定，任何格式都可以) 
  
  [增/该]
  js对象中，属性名是不允许重复的，是唯一的
  obj.name = ‘anan‘   => 修改原来name的属性zhi
  obj.sex = ‘男‘  => 没有久添加该属性
  
  [删除]
  彻底删除，对象中不存在这个属性了
  `delete obj.age`
  假删除： 直接对对象的属性赋值为null
  `obj.age = null`
  
    在获取属性值的时候，如果当前对象有这个属性名，则可以正常的获取到，
    但是如果没有这个属性名,则获取的结果为undefined
  

  　　

• ‘name‘和 name的区别？ => ‘name‘是一个字符串，代表的值 => name是一个变量, 是一个容器，存储的是值的容器 obj[name] 存储的是obj对象name变量所对应的值作为obj属性的值

• 当我们存储的属性值不是字符串或者数字的时候，浏览器会把这个值作为字符串toString()， 然后在进行存储 obj[{}] => 获取的时候实现把对象转化为字符串‘[object Object]‘, 再对属性存储值

数组对象

Array.prototype

1. 方法的作用和含义
2. 方法参数
3. 方法的返回值
4. 是否改变原数组

let arr = [1,2,3]
push [尾部增加]: 数组末尾追加元素，任意类型参数 返回当前数组长度，原数组发生改变
arr.push(4,5)  //[1,2,3,4,5]
arr[arr.length] = 100 // 使用对象方式，向对象的末尾追加元素

unshift [头部增加]: 数组末尾追加元素，任意类型参数 返回当前数组长, 原数组发生改变
arr.unshift(6) //[6,1,2,3,4,5]

pop[尾部删除]: 数组末尾删除元素，无参数，返回删除项，原数组发生改变

arr.pop() // [6,1,2,3,4,5]
shift[头部删除]: 数组头部删除元素，无参数，返回删除项，原数组发生改变, 之后的元素索引都会改变
delete arr[0] // [1,2,3,4,5] 删除指定索引对象 索引不会发生变化，length的长度不变,不会影响数组本身的结构特点
arr.length-- // 删除数组的最后一项

`splice[增删改]` splice(n,m):从索引n开始删除m个, 返回一个删除元素的新数组,原数组发生变化
splice(0)  清空原数组， 返回被删除的值
splice() 一项都不删除
splice(n,m,x) 原有删除的基础上插入内容
splice(n,0,x) 在索引n元素的前面插入数据
splice(0,0,x) 向数组头部增加元素
splice(arr.length,0,x) 向数组末尾增加元素
splice(0,1)
splice(arr.length-1)

`slice[查询]`: 从索引n开始找到m处(不包含m) 返回查询部分组成的数组,原数组不变，slice支持负数索引
slice(n) 从n处找到末尾
slice()  数组克隆

`concat[数组拼接]` 将多个数组拼接在一起,参数任意元素,返回拼接后的数组，原数组不变

`[toString]数组转化为字符串`, 把数组转化为字符串以,做分割， 没有参数，返回转换后字符串， 原数组不变
`[join]已指定的分隔符转化为字符串,和字符串方法split相对应`
[数组求和]
var total = 0;
//1
for (var i = 0; i < arr.length, i++) {
  total += arr[i]
}
//2
total = eval(arr.join(‘+‘)) // eval把js字符串当成表达式执行


`[indeOf/lastIndexOf]:数组是否包含某一项，返回数值当前的索引，查询不到返回-1，原数组不变，`
`includes(): 如果存在返回true, 不存在返回false`

`*ie6-8*不兼容字符串方法兼容`
Array.prototype.myIndex = function(value) {
  var result = -1
  for(var i = 0; i< this.length; i++) {
    if (value === this[i])
    result = i
    break
  }
  return result
}

[reverse]数组排序：数组倒叙, 无参数，排序后的结果,原数组发生改变

`[sort]数组排序：数组排序`参数无(10内的排序)或者回调函数，排序后的结果，原数组发生变化,回调函数[a-b升序] [b-a降序]
[forEach/map/filter/find/reduce...] 数组遍历
arr.forEach(ele => {})
arr.map(ele => { return ele})

　　

Date日期操作基础讲解

Date是日期类，通过它可以对时间进行处理

var time  = new Date()  // => 获取的是当前客户端本机时间
[一个日期格式对象]
typeof new Date()  => ‘object‘

[方法]
time.getFullYear()  获取当前的年份
time.getMonth() 获取当前的月份(0-11)
time.getDate()  获取月份日期
time.getDay()   获取当前的星期(0-6)
time.getHours() 获取小时
time.getMinutes() 获取当前分钟
time.getSeconds() 获取当前秒
time.getMillSeconds() 获取毫秒
time.getTime() 获取时间戳

var time = new Date(‘2017-10-01‘)  // 获取指定时间的标准时间
var time = new Date(‘2017/10/01‘)  // 获取指定时间的标准时间

　

Math的方法

Math常用的属性和方法

Math.PI： 获取圆周率
Math.abs()： 获取绝对值
Math.ceil(): 向上取整
Math.floor(): 向下取整
Math.round(): 四舍五入
Math.max()/Math.min(): 最大值和最小值
Math.sqrt(): 开平方
Math.pow(): 数的幂乘
Math.random(): 获取0-1之间的随机数

函数数据类型

函数: js中指的是实现某一个功能的方法， 具有特定功能的代码块，减少页面中冗杂的代码，提高代码的复用

• 创建函数

 function [函数名] ([形参]) {
   函数体：某个方法的具体实现
 }

• 函数封装的特点

  1. 提高代码功能的开发效率
  2. 降低代码的冗余度，低耦合高内聚

• JS中函数的核心原理

函数作为js中引用类型中的一种，也是按照引用类型的来存储的

• 函数的函数名在内存中存储在栈中，函数体中的代码是按照字符串存储在堆中的，然后在把引用的地址和函数名相关联,当函数执行的时候，函数名入栈，函数名执行会把地址指定会那堆中的函数体按照自上而下执行（函数没有执行，函数是没有意义的）

• 函数执行会形成一个私有作用域(只能执行函数中存储的代码)

  • 执行过程
    1. 形参赋值
    2. 变量提升
    3. 自上而下执行代码
    4. 私有作用域销毁的问题

• 闭包

函数执行会形成一个私有的作用域，让李密胺的私有作用域和外界互不干扰，此时我们可以理解为私有作用域把私有变量保护起来，这种保护机制就是闭包 对象在堆中存储是以键值对进行存储的，而函数是以字符串存储的

函数中的行参和实参

为函数提供了一个入口，用来存储和接收实参传递过来的值

function fn(num1, num2) {  // num1, num2就是形参变量
  return [函数执行结果]
}
arguments实参集合
arguments只有函数才有，
函数天生自带的
arguments中始终存储的是实参信息
arguments类数组(以数字做索引，具有length的属性)
arguments.callee: 存储的是当前函数本身
arguments.callee.caller: 存储的是当前宿主函数在哪执行的，在全局下执行结果是null,执行函数的执行环境
function fn () {
  var total = null
  for(var i = 1; i< arguments.length; i++) {
   var curr = Number(arguments[i])
   if (isNaN(curr)){
     continue;
   }
   total += curr
  }
  return total  // return后面返回的都是值，而不是返回变量
}
函数的返回值return

直接返回return之后的代码都不在执行
js中的匿名函数

函数表达式 2. 定时器中的函数 3. 自执行函数
创建函数，开辟的堆内存中存储的是函数体中的函数代码字符串， 函数执行的目的就是把函数题中的代码执行，形成一个私有栈内存
函数的返回值，有return，返回的是return 后面的值，没有return 返回的是udfined
oBox.onclick = functions() {
}
(function(n) {
  创建函数和执行函数放在一起了，创建之后立马执行
})(10)

　　

js的内存运行机制

• 当浏览器内核渲染和解析js执行的时候，会提供一个共js指定的环境，我们把这个环境称为全局作用域

• 代码自上而下指定(之前要进行变量提升)

  var a = 12
  var b = a
  b = 13
  console.log(b)
  
  var obj1 = {n: 100}
  var obj2 = obj1
  obj2[‘n‘] = 200
  consoel.log(obj1.n)
  

  　　

• 解析

  • 基本数据类型的值会存在在当前作用域下(栈内存中)，
    • 栈内存本身会提供js代码的执行环境
    • 所有的基本数据类型都会在栈内存开辟一个值的存储空间 var a = 12
    • 1 首先开辟一个空间存储12
    • 2 在当前作用域中声明一个变量a( var a )
    • 3 让声明的变量和存储的12进行关联(把存储的12赋值给a) var b = a
    • 1 基本数据类型是按照值来操作的，把原来a存储的值复制一份给b，和原来的值没有关系 b = 13
    • 1 把新的内存空间的值13与b进行相关联
  • 引用数据类型的值不能存储到当前的作用域下,我们需要在堆中开辟一个空间名，把值凡在堆中的空间中
    • 引用类型是按照地址进行来操作的，复制的是相关联的地址，指向堆中的同一个内存空间，就会相互影响
    • 堆内存存储引用信息的值，对象存储的是键值对，函数存储的是代码字符串 var obj1 = {n: 100}
    • 首先开辟一个内存空间,把对象的值放在这个空间中(地址)
    • 声明一个变量
    • 把这个变量和这个地址进行相关联
  • 引用数据类型和基本数据类型都是先进行存值操作