js基础

  一、JS三个组成部分

  ES:ECMAScript语法

  DOM:document对象模型 => 通过js代码与页面文档(出现在body中的所有可视化标签)进行交互

  BOM:borwser对象模型=>通过js代码与浏览器自带功能进行交互

  二、引入方式

  行间式

  出现在标签中的全局事件属性中

  this代表该标签,可以访问全局属性,再访问具体操作对象(eg: this.style.color = "red")

  内联式

  出现在script脚本标签中

  可以通过标签的id唯一标识,在js代码块中操作页面标签

  js采用的是小驼峰命名规范,属于解释型语言(由上至下一次解释执行)

  外联式

  通过script标签的src属性链接外部js文件,链接后,script标签本身内部的js代码将会被屏蔽

  在任何位置都可以使用this对象,当this对象不指向任意一个标签时,代表的是window对象

  js具体出现的位置

  head标签的底部: 依赖性js库

  body标签的底部(body与html结束标签的之间):功能性js脚本

  三、变量的定义

  四种定义变量的方式

  语法: 关键词 变量名 = 变量值

  num = 10; //省略关键词,定义的为全局变量,在任何位置定义,在任何位置都可以访问,但不建议使用

  var num = 10; //var关键词, 无块级作用域, 定义在块级作用域中的变量,外界也可以访问

  let num = 20; //let关键词, 有块级作用域,定义在块级作用域中的变量,外界无法访问

  const NUM = 30; //const关键词,有块级作用域,定义在块级作用域中的变量,外界无法访问,且变量的值不能在被二次修改,所以为常量

  产生块级作用域的方式

  {

    直接书写

    }

  if语句可以产生

  while语句可以产生

  for语句也可以产生

  函数可以产生局部作用域,除了定义在局部作用域中的全局变量(没有关键字的变量声明),外界可以访问,其他定义方式,外界都不可以访问。

  ES5 | ES6

  是ECMAScript两个语法版本, ES6是ES5之后的一个版本,但是对ES5向下兼容,ES6中支持ES5语法

  命名规范

  变量命名规范

  可以由哪些组成: 字母,数字,_,$,中文(一般不考虑)

  可以以什么开头:字母,_, $,中文

  不能出现什么: 关键字,保留字

  提倡什么书写规范: 小驼峰,支持_连接语法

  好的 = “真好”

  console.log(好的)

  四、三种弹出框

  普通弹出框

  alert("你丫真帅!!!");

  输入框: 以字符串形式接收用户输入内容

  var info = prompt("请输入内容:");

  console.log(info)

  确认框: 根据用户选择确认或取消 ,得到 true | false 两个布尔结果

  var res = confirm("你是猪吗?")

  console.log(res)

  五、数据类型

  值类型

  var a = 10;   //Number 10

  var a = 'abc';  //String abc

  var a = true;   //Boolean true

  var a = undefined   // undefined undefined

  引用类型

  var a = function() {}  //function f(){}

  var a = {}       //Object {}

  var a = null  // Null null

  其他Object具体体现

  Array | Date | RegExp

  六、值类型的类型转换

  1.通过类型声明转换

  Number() | String() | Boolean()

  2.方法(函数)

  parseInt('10') | parseFloat('3.14')

  123..toString()

  3.隐式转换

  + '10' => 10

  '' + 10 => '10'

        七、JS常用类

  一、Number  

  1、常用数字

  整数:10

  小数:3.14

  科学计数法: 1e5 | 1e-5

  正负无穷: Infinity | -Infinity  

  2.常用进制

  二进制: 0b1010

  八进制: 012

  十进制: 10

  十六进制:0xA

  3.NaN

  非数字类型,通过isNaN()进行判断

  4.常用常量

  最大值: MAX_VALUE(1.7976931348623157e+308)

  最小值:MIN_VALUE(5e-324)

  正负无穷: NEGTIVE_INFINITY | POSITIVE_INFINITY(Infinity | -Infinity)

  5、常用实例方法

  toExponential(n) => 3.14.toExponential(1) => 1.3e + 1 (先科学计数,再确定精度,n为小数精度)

  toFixed(n) => 3.14.toFixed(1) => 3.1 (先确定精度,再普通计数,n为小数精度)

  toPrecision(n) => 13.14.toPrecision(1|2) => 1e+1|13 (先确定精度,再计数,n为位数进度)

  二、时间

  1.创建并获取时间

  var date = new Date();

  2.时间戳

  date.getTime();

  3.获取时间

  年: date.getFullYear()

  月: date.getMonth() + 1

  日: date.getDate()

  星期: date.getDay()

  小时: date.getHours()

  分钟: date.getMinutes()

  秒: date.getSeconds()

  毫秒: date.getMilliseconds()

  四、常见格式时间

  getUTCFullYear()

  getUTCDate()

  getUTCHours()

  三、字符串

  1、常用字符串

  'string' | "string" | 'my name is "zero"' | "I'm boy" | "I "love" you"

  2、常用属性

  length: 字符串长度

  3、常用方法

  chartAt(n): 指定索引字符,同[n]

  concat(str): 将目标字符串拼接到指定字符串之后

  indexOf(str): 指定字符串第一次出现的位置

  lastIndexOf(str): 指定字符串最后一次出现的位置

  replace(re, str): 将正则匹配到的字符串替换为指定字符串

  substr(n,m):从索引n开始,截取m个字符长度(m省略代表截取到最后)

  substring(n,m): 从索引n开始,截取到索引m(m省略代表截取到最后)

  slice(n,m): 同substring(n,m)

  split(re): 以指定正则将字符串拆分为数组

  toUpperCase(): 转换为大写

  toLowerCase(): 转换为小写

  trim(): 去除首尾空白字符

  四、数组

  1、常见数组

  [1,2,3] | ['1' , '2' , '3' ] | [1, '2' , true]

  2、常用属性

  length: 数组元素个数

  3、常用基础方法

  concat(arr): 将目标数组拼接到指定数组之后

  indexOf(ele): 指定元素第一次出现的位置

  lastIndexOf(ele): 指定元素最后一次出现的位置

  reverse(): 反转数组

  includes(ele, n): 从索引n开始往后,元素ele是否在数组中, 做全等匹配,索引从头开始n可以省略(in只做值匹配)

  fill(ele): 以指定元素填充整个数组

  slice(n, m): 从索引n开始, 截取到索引m(m省略代表截取到最后)

  join(str): 以指定字符串连接成字符串

  4、增删改方法

  push(ele): 从尾加

  unshift(ele): 从头加

  pop(): 从尾删

  shift(): 从头删

  splice(begin, length,... eles):完成增删改

  begin开始索引 length长度 新元素们(可以省略)

  5、回调函数方法

  fliter(function(value, index) {return true | false}): 过滤器

  every(function(value, index){return 条件表达式;}): 全部满足条件

  some(function(value, index){return 条件表达式;}): 部分满足条件

  reduce(function(prev,value,index){return prev * value;}): 累积

  sort(function(0,n){return 0>n}): 正逆向排序

  五、 Math

  1、常用常量

  E:返回算数常量e, 即自然对数的底数(约等于2.718)

  LN2:返回2的自然对数(约等于0.693)

  LN10:返回10的自然对数(约等于2.302)

  LOG2E:返回以2为底的e的对数(约等于1.4426950408889634)

  LOG10E:返回以10为底的e的对数(约等于0.434)

  PI:返回圆周率(约等于3.14159)

  2、常用方法

  abs(x):返回x的绝对值

  ceil(x):向上取整

  floor(x):向下取整

  max(...n):求最大值

  min(...n):求最小值

  pow(x,y):返回x的y次幂

  random(): 返回 0~ 1 之间的随机数

  round(x):四舍五入

  六、正则

  1、正则对象

  构造函数

  var re = new RegExp('^\w','igm');

  字面量

  var re = /^w/igm;

  2、修饰符

  i: 不区分大小写

  g: 全文匹配

  m:多行匹配

  3、正则方法

  test(): 匹配目标字符串,结果为true | false

  exec(): 匹配目标字符串,结果为第一条结果所有信息的数组

  4、字符串方法

  match(re): 匹配指定正则,结果为数组可全文匹配)

  search(re): 匹配指定正则,结果为匹配的索引,反之-1

  replace(re, newStr): 匹配指定正则,替换匹配的结果(可全文匹配)

  split(re,n):按正则进行拆分,n的值可以决定结果的数组长度(可选参数)

原文地址:https://www.cnblogs.com/xiaocaiyang/p/10133833.html