码迷,mamicode.com
首页 > 编程语言 > 详细

javascript之基础篇

时间:2019-11-28 10:38:11      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:日期类   lin   封装   sources   word   table   固定   --   sort   

浅谈前端发展史

  • 第一阶段
    • 从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
  1. Presto
  • Opera < v14
  1. 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}
      • 首先开辟一个内存空间,把对象的值放在这个空间中(地址)
      • 声明一个变量
      • 把这个变量和这个地址进行相关联
    • 引用数据类型和基本数据类型都是先进行存值操作

javascript之基础篇

标签:日期类   lin   封装   sources   word   table   固定   --   sort   

原文地址:https://www.cnblogs.com/kuishen/p/11947306.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!