JavaScript 个人笔记

JAVA百练成魔
53 阅读8分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Day 1：

学习输出语句

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>helo</title>
        <script type="text/javascript">
            alert("这是我的第一条代码");
            document.write("在body中写内容");
            console.log("你猜我在哪里出来");
        </script> 
    </head>
    <body>
        
    </body>
</html>

 <!--可以将js代码写入到标签的属性中
            点击后js代码才会执行
        -->
        <button onclick="alert('讨厌')">点我一下</button>
        <!--也可以将js代码写入超链接中-->
        <a href="javascript:alert('让你点就点');">哈哈哈</a>

写入js方法建议写到外部

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>helo</title>
        <script type="text/javascript"src="new_file.js">

        </script> 
    </head>
    <body>
        
    </body>
</html>

如果引用了外部类标签那么内部类就不会执行除非在创建一个script标签

变量：

在js中使用var关键字来声明一个变量

var a =889900;

console.log(a);

在js中一共有六种数据类型 String 字符串 用单引号或者双引号 可以添加/当转义字符输出双引号 number 数值 Boolean 布尔值 null 空值 undefined 未定义 声明一个变量未赋值默认就是他 object 对象 其中 String number boolean null undefined属于基本数据类型 而object属于引用数据类型

var仅仅是一个关键字，是一个新的数据类型，可以用var声明任何类型的局部变量，它只是负责告诉编译器，该变量需要根据初始化表达式来推断变量类型，并且只能是局部变量。

Day 2：

不确定 一个数是什么类型时候可以用typeof 输出看看

var a =123;
var b ="123";

console.log(typeof b);

强制类型转换 数值类型转换成String

var a =123;
var b ="123";
var c =a.toString();
console.log(typeof c);
//字符串转数值
a=number（a）
//将一个字符串转换整数 把其他类型转换字符串在进行操作
c=parseInt(a)

在js中用{}来分组 要么都执行要么都不执行 代码块有分组的作用 没有其他用途

{var a =123;
var b ="123";
var c =a.toString();
c=parseInt(a)
console.log( c);
alert(c);}

输入框

prompt可以弹出一个输入框让用户输入

对象：

在这里插入图片描述

var obj = new Object;
obj.name="孙悟空";
obj.age =15;
delete obj.name;
alert(obj.name)

day3

向对象添加属性

属性名 没有要求规范遵守标识符 乱七八糟的名字都可以使用。

obj["123"]=789; 特殊的属性名要用特殊的方式来存，读取也是。

```java ![在这里插入代码片](https://img-blog.csdnimg.cn/20210616155709759.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDA3NTY3,size_16,color_FFFFFF,t_70)

在这里插入图片描述

var obj = {name:"吴彦祖",
			age:16,
			gendr:"女"};
alert(obj.gendr);

函数

在这里插入图片描述 在这里插入图片描述

var fun = new Function("console.log('Hello 这是我的第一个函数');");
fun();

但是这种方法不好用

function fun(){
	alert("hhh");
}
fun();
``使用这种方式方便`

```带返回值的方法函数
function fun(a,b,c){
	return a+b+c;
}
alert(fun(1,2,3));

在这里插入图片描述 函数可以是任何的数据类型 你传的是什么类型的数他就是什么数据类型

DAY4

全局变量

function fun(){
	console.log("我是一个全局变量函数");
}
fun();

函数中也有着作用域的存在

function fun5(){
	console.log(a);//运行失败
	var a =10;
}

如果一个变量没有使用var关键字那么他就会默认为全局变量

this 在这里插入图片描述

function fun(){ //直接调
	alert(this);
}
fun();

function fun(){
	alert(this);
};

var obj= {//带方法进行调用
		name:"林志颖",
		sali:fun
};


alert(obj.sali());

在这里插入图片描述

使用工厂方法创建对象

//创建新的对象
funtion creat（name,age）{
var obj = new Obj();
obj.name =name;
obj.age = age
//写一个方法
obj.sename = funtion(){
alert(this.name);

}
return creat;//把对象进行返回
{
//创建一个对象 这样这个对象能通过自定义属性值内容
var obj2 =creat("WYZ",18);

//使用工厂模式创建的构造方法他们的对象都是object一个类型

DAY5

创建一个构造函数

function fun(){
	
}
var obj = fun(); //没有加new就是单纯的调方法
alert(obj)

function fun(){
	
}
var obj = new fun(); //加了后就是一个构造函数
alert(obj)

在这里插入图片描述 在这里插入图片描述


function fun(name,age,honme){
//2
	this.name = name;//给上一层的对象创建方法
	this.age  = age;
	this.honme = honme;
}
//1
var obj = new fun("孙悟空",111,"石头");
//4
alert(obj.honme);

在这里插入图片描述 是就返回true

function fun(name,age,honme){
	this.name = name;
	this.age  = age;
	this.honme = honme;
}
var obj = new fun("孙悟空",111,"石头");

alert(obj instanceof fun);

在这里插入图片描述 修改方法 以前的方法不方便修改 在这里插入图片描述

function fun(name,age,honme){
	this.name = name;
	this.age  = age;
	this.sayName = funay;
}
//单独把方法写道外边然后让他去进行调用共享方法 
function funay(){
	alert(this.name);
};
var obj = new fun("孙悟空",111,"石头");

obj.sayName();

构造函数里面的方法 尽量不要放在全局作用域中

原型对象

在这里插入图片描述 原型就是一个公共区域可以把共有的放进原型里面来

function  myClass () {
	
}
var mc = new myClass();
myClass.prototype.a=123;
alert(mc.a);

里面还可以存放方法

function  myClass () {
	
}
var mc = new myClass();
myClass.prototype.prin=function(){
	alert("hhh");
};
mc.prin();

对于每个类都需要用的属性或者方法都统一添加到一个原型里面来

可以使用in来检查对象中是否包含某个属性 在这里插入图片描述 hasOwnProperty 判断这个对象的自身是否含有属性

alert(mc.hasOwnProperty("name"));

在这里插入图片描述 toString是一个方法中的返回值我们可以重写他

function  myClass (name,age) {
	this.name = name;
	this.age=age;
	
}
var ove = new myClass("hhh",11);
myClass.prototype.toString= function(){//修改toString的返回值在放到他的原型中这样我们调用时候返回值就不一样了
 return this.name
};
alert(ove)


function  myClass (name,age) {
	this.name = name;
	this.age=age;
	
}
var ove = new myClass("hhh",11);
ove.toString = function(){//直接修改不放原型中
 return this.name
};
alert(ove)

垃圾回收

在这里插入图片描述

var ove = new myClass("hhh",11);
ove=NULL;

数组

在这里插入图片描述 尽量不要创建非连续的数组 但是可以给数组长度一个规定就不会有多的空出来 在这里插入图片描述

var arr = new Array();//创建一个数组
arr[0]=1;//数组赋值
//数组读取
arr[0]
arr.length//返回数组长度
arr.length=19;//指定数组长度
var arr= [];//也可以这样直接创建数组

使用字面量创建数组，可以在创建时候指定数组元素

var arr=[1,2,3,4,5,6,"7"];

数组中可以是任意的数据类型,也可以在里面放对象

var obj = {name:"wyy"};
arr[arr.length]=obj;

二维数组形式


var arr = [[1,2,3],[1,22,2]];//里面是两个数组

数组常用方法

在这里插入图片描述

数组遍历

foreach 进行遍历数组 但是他需要一个函数作为他的参数 像他这种函数由我们创建但是不由我们调用的叫回调函数 有多少个数组就会遍历多少次数组会把遍历的数组元素用实参的形势传递进来

var s1 = new cheng("www",11);
var s2 = new cheng("s2",15);
var s3 = new cheng("s3",17);
var s4 = new cheng("s4",18);
var s5 = new cheng("s5",10);

var arr = [s1,s2,s3,s4,s5];
arr.forEach(function(a，b,c){
	console.log(a.name+"  ");
})

在这里插入图片描述

splice可以删除元素还可以替换元素

DAY 6

call和apply 函数对象方法 需要通过函数对象来调用 在调用Call和apply可以将一个对象指定为第一个参数

var oer ={};
function fun () {
	saye:function(){
		alert(this)
	}
	
}
fun.saye.call(oer);//更改指向的函数

在这里插入图片描述

call方法可以在后面添加元素

arguments 他不是数组但是跟数组很像 在这里插入图片描述 在这里插入图片描述

function  fun () {
	console.log(arguments.length);//获取实参的长度
	console.log(arguments[0]);//不定义形参也可以通过这个函数用实参
}
fun("HHH",11,2);

Date对象用js创建一个时间，则会封装为当前这段代码执行的时间

var d = new Date();
alert(d);

var d = new Date("11/01/2021 11:11:11");//指定方法的时间 月/日/年
alert(d);

包装类

var a = new String("sss");//这种new一个的方法就是创建了一个的对象
var b = new Number(111);

在这里插入图片描述 如果使用这种数据类型对象在做一些比较时，会出一些其他的问题 在这里插入图片描述 他是浏览器底层自己用的一种方法他临时转换成基本数据类型进行运算在转换回来。

字符串方法

字符串在底层是字符数组存在 具体的看 www.w3school.com.cn/js/index.as…

正则表达式

在这里插入图片描述 在这里插入图片描述

var reg = new RegExp("@");//判断他是否符合我们制定的表达式规则 如果设置 
//i就是不匹配大小写 设置g就是全局匹配
var reg = new RegExp("@"，"i");//不匹配大小写模式

var str = "qqq@qq.com";
var rst = reg.test(str);
console.log(rst);

正则语法

使用字面量方式创建表达式

var reg = /@|b/i;//这种方式更简单 但是用构造函数更灵活 添加|表示或的意思
var str = "qqq@qq.com";
var rst = reg.test(str);
console.log(rst);

在这里插入图片描述


```java
var reg = /[a-z]/i;//这样a到z只要期间包含的字母都算真
var str = "s.com";
var rst = reg.test(str);
console.log(rst);

中括号表示或的意思 在这里插入图片描述 除了的意思 除了ab都行 [^ab] 在这里插入图片描述

var s1 = "121j3j123khj12kh312kh4";
var arr = s1.split(/[1-9]/);//正则表达式还可以用在字符串分割上
var sou = s1.search(/a[bedf]c/);//搜索时候加表达式包含有bedf中间的都可以搜索到
console.log(arr);

在这里插入图片描述

var s1 = "121j3j123khj12kh312kh4";
var arr = s1.match(/[1-9]/g);//全局模式是g
alert(arr);
//match会把匹配到的数据封装到一个数组中返回

会把匹配到的数据进行替换

var s1 = "121j3j123khj12kh312kh4";
var arr = s1.replace(/[1-9]/g);//全局模式是g
alert(arr);
//match会把匹配到的数据封装到一个数组中返回

正则表达式量词 通过量词可以判断一个数出现了多少次

在这里插入图片描述

var s1 = /[a{3}]/;//他是个boolean型
var arr = "awdawaasdaaaaddaaadddd";
alert(s1.test(arr))

如果有多个数要判断就添加一个括号把他们的元素全部放里面 在这里插入图片描述

如果想规定次数

var s1 = /[ab{1,3}c]/;//意思就是1到3次
var arr = "a";
alert(s1.test(arr))

在这里插入图片描述

检查一个字符串是否是规定字符开头 如果结尾是 {9}$代码限制输入9 在这里插入图片描述

var s1 = /^qq/;//加一个^
var arr = "qqa";
alert(s1.test(arr))

如果想查找 . 的话需要使用转义字符. 两个\也表示一个.

在这里插入图片描述 在这里插入图片描述

邮箱判断的正则表达式

 var s1 ="abc@abc.com.123";
 var s2  =/^\w{3,}@([A-z0-9])+\.+[A-z]{2,5}$/;
alert(s2.test(s1))

DOM

avatar
文章
阅读
粉丝