博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于原生 JS
阅读量:6816 次
发布时间:2019-06-26

本文共 4999 字,大约阅读时间需要 16 分钟。

hot3.png

在 JavaScript 中有 5 种不同的数据类型:string、number、boolean、object、function

3 种对象类型:Object、Date、Array

2 个不包含任何值的数据类型:null、undefined

正则表达式

正则表达式是由一个字符序列形成的搜索模式。

语法

/正则表达式主体/修饰符(可选)

修饰符 可以在全局搜索中不区分大xiao 写:

修饰符 描述
i 执行对大 xiao 写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。

阻止冒泡和默认事件

冒泡简单来说就是 HTML 子元素与父容器之间都存在一些相同的事件,当触发子元素事件后,其父容器的事件也相应的触发。举例来说比如 click 事件,当触发了子元素事件后, 包括这个控件的父控件也有 click 事件,则会继续执行 。

阻止冒泡需要在子控件事件加入相关代码:

btn.onclick = function(e) {   var _event = e || event;   // 高版本浏览器   _event.cancelBubble = true;  // IE  window.event.cancelBubble = true;   // 非 IE  _event.stopPropagation();  }

阻止默认事件

function preventDefa(e){   if(window.event){     //IE中阻止函数器默认动作的方式      window.event.returnValue = false;    }   else{     //阻止默认浏览器动作(W3C)      e.preventDefault();   }  }

常见 DOM 操作

查找 HTML 元素

var x = document.getElementById("main"); // 通过 id 查找var y = x.getElementsByTagName("p");  // 查找 id="main" 元素中的所有 

元素var x = document.getElementsByClassName("intro"); // 通过类名查找

改变 HTML

document.write();  // 可用于直接向 HTML 输出流写内容。 document.getElementById(id).innerHTML=新的 HTML // 改变 HTML 元素的内容document.getElementById(id).attribute=新属性值 // 改变 HTML 元素的属性document.getElementById(id).style.property=新样式 // 改变 HTML 元素的样式

创建新的 HTML 元素

var para=document.createElement("p");var node=document.createTextNode("这是一个新段落。");para.appendChild(node);

删除 HTML  元素

var parent=document.getElementById("div1");// 找到 id="p1" 的 

元素:var child=document.getElementById("p1");// 从父元素中删除子元素:parent.removeChild(child);

注意:DOM 需要知道要删除的元素及其父元素才可删除,可使用以下简便写法

var child=document.getElementById("p1");child.parentNode.removeChild(child);

面向对象

JavaScript 对象是拥有属性和方法的数据。js 函数就是对象!

对象定义:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

对象键值对的写法类似于:PHP 中的关联数组

两种方式访问对象属性

person.lastName; person["lastName"];

对象方法通过添加 () 调用 (作为一个函数)。

name = person.fullName();

最简单的面向对象程序

封装重复使用的方法

升级 ---> 构造函数加 new

进阶面向对象编程

函数定义作为对象的属性,称之为对象方法。

函数如果用于创建新的对象,称之为对象的构造函数。

call 方法

调用一个对象的一个方法,以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[,  [,.argN]]]]])

参数

thisObj:可选项。将被用作当前对象的对象。

arg1, arg2,  , argN:可选项。将被传递方法参数序列。

说明

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj

实例1

var Add=function(a,b){        console.info(a+b);      }            var Sub=function(a,b){        console.info(a-b);      }            Add.call(Sub,3,3); //它输出6:用Add对象替换Sub对象来执行方法.

实例2

function Sister(){           this.age=18;          this.sayAge= function(){              document.write("Age:"+this.age);          }          this.yaya=function(){              document.write("yaya.....");          }      }      function Brother(){           this.age=25;          this.sayAge=function(){              document.write("Age:"+this.age);          }          this.hoho=function(){              document.write("hoho.....")          }      }      var sis=new Sister();      var bro=new Brother();      sis.sayAge.call(bro);  // 输出的是 Age:25

自调用函数

函数表达式可以 "自调用"。自调用表达式会自动调用。如果表达式后面紧跟 () ,则会自动调用。不能自调用声明的函数。通过添加括号,来说明它是一个函数表达式:

(function () {    var x = "Hello!!";      // 我将调用自己})();

JS 闭包

变量声明时如果不使用 var 关键字,那么它就是一个全局变量,即便它在函数内定义。

闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭。 就是一个函数引用另一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装一个私有变量。

var add = (function () {    var counter = 0;    return function () {return counter += 1;}})(); add();add();add(); // 计数器为 3

this

在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)

数组迭代

  • reduce() 接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数 描述
function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。
函数参数:
参数 描述
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue

可选。传递给函数的初始值

// 计算数组元素相加后的总和var numbers = [65, 44, 12, 4]; function getSum(total, num) {    return total + num;}function myFunction(item) {    document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);}
  • map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
array.map(function(currentValue,index,arr), thisValue)
参数 描述
function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数
函数参数:
参数 描述
currentValue 必须。当前元素的值
index 可选。当期元素的索引值
arr 可选。当期元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"
// 数组中的每个元素+3,并返回新数组:var oldArray = [1,2,3,4,5];var timesFour = oldArray.map(function(val){  return val + 3;});var newArray = timesFour;
  • filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
array.filter(function(currentValue,index,arr), thisValue)
参数 描述
function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数
函数参数:
参数 描述
currentValue 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"
// 返回<6的值var oldArray = [1,2,3,4,5,6,7,8,9,10];array  = oldArray.filter(function(val) {  return val < 6;});var newArray = array ;
  • sort() 方法用于对数组的元素进行排序。

注意:当数字是按字母顺序排列时"40"将排在"5"前面。

// 数字排序(数字和升序):var points = [40,100,1,5,25,10];points.sort(function(a,b){return a-b});

 

转载于:https://my.oschina.net/u/3460260/blog/1620994

你可能感兴趣的文章
maven阿里云中央仓库
查看>>
15.12.14listbox列表框
查看>>
sql 行转列
查看>>
(转)Python新手写出漂亮的爬虫代码1——从html获取信息
查看>>
配置Nim的默认编译参数 release build并运行
查看>>
图片下载
查看>>
《构建之法》第四章读后感
查看>>
python os.path.dirname()
查看>>
android 解析json数据格式
查看>>
Vs2013 头文件注释
查看>>
****** 六 ******、软设笔记【数据结构】-查找、静态查找表,哈希表
查看>>
[转] fitnesse中的Map处理
查看>>
js - 常用功能方法汇总(updating...)
查看>>
matlab 函数库
查看>>
Django博客功能实现—文章评论的显示
查看>>
Activity里面嵌入Fragment一点小代码
查看>>
C#中//注释和///注释的区别
查看>>
Java 面向对象之构造函数和 this 关键字
查看>>
HTML&JS 随手记
查看>>
Linux设备文件的命名
查看>>