javaScript_1
一、javaScript位置
1.写在标签中
如
<script>
alert("Hello woeld");
</script>
alert("弹出一个警告窗口");//弹出一个警告窗口
document.write("像文档写一个内容");
console.log("向控制台输出一个内容");//向控制台输出一个内容
2.行内代码，可以写在标签属性中
如
<button onclick="**alert('弹窗')**">点击</button>
<a href="**javascript:alert('超链接')**"> 链接</a>
注意：这种方式属于结构与行为耦合，不方便维护，不推荐使用
3.写在外部文件中js文件中 利用 <script type="text/javascript" src="文件位置"></script>
注意 引入后无法继续在标签内编写代码，如果想继续编写可以再写一个标签
二、基本语法
注意情况：
1. JS中严格区分大小写
2. JS中每条一语句后以分号（;）结尾 可以不写系统会自动添加，但消耗内存且可以加错
3. JS中会忽略多余的空格和换行
1.字面量 都是一些不可以改变的量
比如 1 2 3 4
字面量可以直接使用但我们一般不直接使用字面量
2.变量 变量可以保存字面量 而且可以任意改变
在开发中使用变量保存字面量 一般不直接使用字面量
声明变量 利用var关键字声明变量 var = a;
3.标识符 ： 在JS中所有可以有我们自主命名的都可以成为标识符
例如：变量名、函数名、属性名
命名规则：
1.标识符中可以柏寒字母、数字、_、$
2.标识符不能以数字开头
3.标识符不能是ES中的关键字或保留字
4.标识符一般采用驼峰命名法 如helloWorld xxxYyyZzz
三、数据类型
1.String 字符串
2.Number 数值
3.Boolean 布尔类型
4.Bull 空值
5.Undefined 未定义
6.Object 对象 引用类型 上面为基本类型
1.基本类型
1.String字符串
在JS中需要用引号包括起来
双引号和单引号不能混着使用
引号不能嵌套 双引号李不能放双引号 单引号里不能放单引号
需要输出引号是可以使用转义字符 \" \' 注意打印 \ 是用 \\
2.Number 数字
所有的数值都是Number类型 包括浮点数
JS中最大值number.MAX_VALUE 如果超过最大值 会返回 Infinity即 正无穷 负无穷加符号即可
最小的浮点数number_MIN_VALUE
NaN 表示不是一个数字 但类型为NaN
注意 JS进行浮点数运算会有精度丢失
3.Boolean 布尔值
只有true或false 用于一些逻辑判断
4.Null 只有一个值 null
表示一个为空的对象
5.Undefined 未定义的
指声明了一个变量但是未进行初始化 则会返回一个Undefined
2.强制类型转换
1.其它类型转化为String
方法一 调用toString()方法
var a = 123;
var b = a.toString();
console.log(typeof b);
a = a.toString();
console.log(typeof a);
//注意 此方法不会改变a的类型 如果想改变 可以使用 a = a.toString();
// null和undefined没有toString函数 不能转换
方法二 利用String()函数转换
var a = 123;
a = String(a);
console.log(typeof a)
//注意 此方法不会改变a的类型 如果想改变 可以使用 a = toString(a);
// 对于Number和Boolean实际上就是调用toString（）方法
// 但对于null和undefined不会调用toString（）方法
方法三 使用 + 拼接 （隐式类型转换）
可以加任意类型转换为字符串
var a = 123;
a = 123 + "";
2.将其它类型转换为数值类型
方式一 使用Number()函数
字符串 转 数字
1.如果是纯数字则直接转换为数字
2.如果是非数字内容转换为NaN
3.如果字符串是空串或者全是空格的串则会转为0
注意 如果是 12px 不能使用Number 会转换成 NaN
布尔值 转数字
true -> 1
false -> 0
Null 转 数字
null -> 0
Undefined 转 数字
undefined -> NaN
方式二 使用parseInt()函数
可以将字符串中有效的整数转换出来
123px -> 123
123px13 -> 123
123.12 ->px
取出有效小数可以用parseFloat()
123.32 -> 123.32
注意如果对像字符串类型使用parseInt 会先转换为String在使用
方法三 利用 - 转换 （隐式类型转换）
可以通过为一个值 -0 *1 /1 来将其转换为Number
还可以 在前加一个+转换
var a = "123";
a = a - 0;
a = "123";
a = +a;
3.将其他类型转换为Boolean
调用Boolean()函数来将a 转换为布尔值
数字 转 Boolean 除了0和NaN是false 其它都是 true
字符串 转 Boolean 除了空串是false 其它都是 true
null 和 undefined 转 Boolean 都是 false
对象也会转换为true
2.对象
对象分类
1.内建对象
—有ES标准中定义的对象在任何ES的实现哦都可以
比如Math String Number Boolean Function Object
2.宿主对象
由JS的运行环境提供的对象，目前来讲主要指浏览器提供的对象
比如BOM DOM
3.自定义对象
由开大人员自己创建的对象
对象创建
//方式一：利用new关键字调用构造函数
var obj = new Object();
//利用 对象.属性名 = 属性值 添加属性
obj.name = "小明“;
obj.age = 18;
//读取对象中的属性
console.log(obj.name);
//修改对象属性
obj.age = 10;
//删除对象属性
delete obj.age;
//方式二 使用对象字面量 可以在创建对象是直接指定对象中的属性
var obj = {
name:"小明",
age:18
};
//注意最后属性后面没有 ,
//方式三构造方法
//一
function f(name , age) {
var a = new Object();
a.name = name;
a.age = age;
return a;
}
var p = f("!",1);
console.log(p);
//注意这样定义的对象类型都是Object
//二
function Person(name, age) {
this.name = name;
this.Age = age;
}
Person.prototype.sayName = function () {
console.log(this.name)
}
var p = new Person("1",1);
console.log(p);
p.sayName();
//注：这样定义的函数都属于Person可以调用Person原型对象中的函数
对象的调用
1.对象名.属性名
2.对象名["属性名"] 注 [] 内可以是一个变量
3.in 运算符
可以用用in运算符检测对象中是否含有指定属性有返回true 没有返回false
使用方式 ”属性名“ in 对象名
4.对象枚举
var obj ={
name:"小明";
age : 18;
sex: 男;
};
for(var n in obj) {
console.log("属性名："+n);
console.log("属性值"+obj[n]);
}
对象原型 prototype
我们所创建的每一个函数，解析器都会想函数中添加一个属性prototype
这个属性对应这一个对象，这个对象就是原型对象
如果函数作为普通函数调用prototype没有任何作用
当函数以构造函数的形式调用时，他所创建的对象中都会有一个隐含的属性，
只想改构造函数的函数原型对象，我们可以通过__proto__来访问该属性
原型对象相当用于一个公共区域，同一类的实力都可以访问这个原型对象，
我们可以将对象中共有的内容，同意设置到原型对象中
我们访问对象的一个属性或方法是，他会先在对象自胜者寻找，如果有则直接使用，
如果没有则会去原型对象中寻找，如果找到则直接使用，如果没有则取原型的原型
对象中寻找，直到找到Object对象的原型，他如果依然没有找到则返回undefined
四、函数
函数 Function
函数也是一个对象
函数可以封装一些代码，在需要时调用这些代码
1.创建函数
//当方法一 可以将要封装的代码以字符串的形式传递给构造函数
var fun = new Function("condole.log('Hello World!'));
//这种方法发一般不使用
//方法二 利用函数声明创建函数
// function 函数名(形参1，形参2...形参n) {代码}
function fun(){
console.log("helooWorld!");
//方法三 使用函数表达式创建一个函数
// var 函数名 = function(形参。。。){}
// 实际是将一个匿名函数赋值给一个变量`
2.调用函数 fun();
3.形式参数
调用函数时，解析器不会检查实参数量
多余的实参不会被赋值
如果实参数量少于形参数量，则没有对应实参的形参会被定义成undefined
4.返回类型
使用 return返回值 注 函数执行完return后函数就会结束 不会执行后面的代码
function sum(a ,b){
var c = a+b;
return c;
}
5.立即执行函数
(function(){
alert("我是一个匿名函数"）;
})()
//适用于只调用一次的场景
（function（a,b){
var d = a +b;
alert("b")}(1,2);
6.arguments
在调用函数时，浏览器每次都会传递两个隐含的参数
1.函数的上下文对象 this
2.封装实参的对象arguments
arguments是一个类数组，它可以通过索引操作数据，也可以获得长度
在调用函数时，我们传递的参数会保存在arguments
不定义形参就可以利用arguments使用实参，但比较麻烦
他里面有一个属性callee
这个属性对应一个函数对象，就是当前正在指向的函数对象
========================================
五、作用域
1.变量声明提前
使用var关键字声明变量，会在所有的代码之前声明（但不会被赋值），
但是如果声明变量是不适用var关键字，则变量不会被声明提前
2.函数声明提前
使用函数声明形式创建的函数function函数(){}
他会在所有代码之前就创建，所有可以在函数声明前调用
function fun(){}
使用函数表达式创建函数不会被声明提前，所以不能在声明前调用
var a = function(){}
六、数组（Array）
数组也是一个对象
他和我们普通对象功能类似，也用来存储一些之
不同的是对象使用字符串作为属性名
而数组使用数组来作为索引操作元素
1.索引
从0开始的证书就是索引
2.数组创建
//方式一使用构造函数
var arr = new Array();
var arr = new Array(1,2,4);
//方式二 使用字面量创建函数 可以在创建时就指定数组中的元素
var arr = [];
var arr = [1,2,3,4,5,6];
//注意
arr = [10];//意思是创建一个长度为10的数组
arr = new Array(10);//意思为创建一个长度为1数值为10的数组
3.向数组中添加元素 语法 数组名[索引] = 值
如果读到不存在的索引，会返回undefined不会报错
arr[0] = 10;
4.获取数组的长度
length可以连续数组的长度
如果非连续的数组可以获得最大索引+1的长度
尽量不要创建非连续的数组
arr.length;
5.修改数组长度
arr.length = 10;
如果修改的length大于原肠毒，则多出空的值
如果修改的length小于原长度，则多出的长度会被删除
6.数组一些方法
1.push()
该方法可向数组末尾添加一个或多个，并返回数组的新长度
可以将要添加的元素作为方法的参数传递
a.push(1)
a.push(1,2,3);
a.var len = push(1,2);
2.pop()
该方法可向数组末尾删除一个或多个，并返回数组的新长度
可以将要添加的元素作为方法的参数传递
a. pop(1)
a. pop(1,2,3)
var len = pop(1,2,3);
3. unshift()
该方法可向数组开头删除一个或多个，并返回数组的新长度
可以将要添加的元素作为方法的参数传递
a.unshift(1)
a.unshift(1,2,3)
var len = unshift(1,2,3);
4.shift()
该方法可以删除数组的第一个元素，并返回删除元素
a.shift();
var p = a.shift();
5.slice()
可以用来从数组中提取指定元素
该方法不会修改原来数组，会返回一个新的数组
参数
1.截至开始位置的索引
2.截至结束位置的索引（不包括结束位置，及前开后闭）
索引可以是负值 循环开始 -1是导数第一个元素
var a = [1,2,3,4];
a.slice(1,2); //a = [1,4];
6.splice() 可以删除元素 替换元素 插入元素
可以删除数组中指定元素,并添加新的元素（自动插入开始位置索引前面）
使用splice()会改变原数组
参数
1.第一个开始位置的索引
2.第二个是删除的数量
3.第三个及以后
可以传递一些新的元素，这些元素将会自动插入到开始位置索引前面
var a = [1,2,3,4,5];
console.log(a);
a.splice(1,2); //删除 a = [1,4,5]
console.log(a);
a.splice(1,1,1); //替换 a = [1,1,3,4,5]
console.log(a);
a.splice(2,0,2) //插入 a = [1,2,2,3,4,5]
console.log(a);
7.concat()
可以链接两个或多个数组，并返回新的数组
该方法不会修改原数组
var a = [1,2,3];
var b = [4,5,6];
var c = a.concat(b); // c = [1,2,3,4,5,6]
8.join()
可以将数组转化为字符串
该方法不会修改原数组
在join()中可以使用一个字符串作为参数，这个字符串会成为数组元素的连接符
如果不指定连接符会默认使用 “，”
var a = [1,2,3];
var c = a.join(); // c = “1,2,3”；
var c = a.join(‘!’); // c = “1!2!3”；
9.reverse()
将原来数组进行反装
该方法会修改原数组
var a = [1,2,3];
a.reverse(); // a = [3,2,1]；
10.sort()
对数组进行排序
该方法会修改原数组,默认使用Unicode编码进行排序
var a = [1,2,3];
a.reverse(); // a = [1,2,3]；
我们可以来指定排序规则
我们可以在sort()添加一个回调函数
浏览器会根据回调函数的返回值来决定排序元素的顺序
返回一个大于0的数 元素会交换位置
返回一个小于0的数 元素不会交换位置
返回0 元素相等不会交换位置
//升序
var a = [1,2,3,11,6,4,10,1];
a.sort(function (a,b) {
return a - b;
});
console.log(a);
//降序
var a = [1,2,3,11,6,4,10,1];
a.sort(function (a,b) {
return b - a;
});
console.log(a);
7.数组的遍历
//方法一 for循环
var a = [1,2,3];
for (let i = 0; i < a.length; i++) {
console.log(a[i]);
}
//方法二 forEach 注：此方法只是有支持IE8以上的才可以使用
a.forEach(function (a) {
console.log(a);
});
a.forEach(function (a1,a2,a2) {
console.log(a);
});
//第一个参数a1是正在遍历的元素
//第二个参数a2是当前正在遍历元素的索引
//第三个参数a3是正在遍历的数组
====================
七、Date对象 在JS中Date表示一个时间
1.创建对象
如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
var d = new Date(); d = Wed Sep 29 2021 16:06:23 GMT+0800 (中国标准时间)
如果创建一个指定时间的对象则需要一个表示时间的字符串作为参数
日期格式 月份/日/年 时:分:秒
var d = new Date("12/03/2011 16:10:20"); //d = Sat Dec 03 2011 16:10:20 GMT+0800 (中国标准时间)
2.方法
1.getDate()
获取当时间对象是几号
var d = new Date("12/03/2011 16:10:20");
var a = d.getDate();// a = 3;
2.getDay()
获取当时间对象是星期几
var d = new Date("12/03/2011 16:10:20);
var a = d.getDay(); //a = 3;
3.getMonth()
获取当时间对象的月份
会返回一个0-11的值 返回值加1 表示时间对象的月份
var d = new Date("12/03/2011 16:10:20);
var a = d.getMonth(); //a = 11;
4.getFullYear()
获取当时间对象的年份
var d = new Date("12/03/2011 16:10:20);
var a = d.geyFullYear(); //a = 2011;
5.获取时间对象的时分秒
d.getHours();//获取时间对象的小时
d.getMinutes();获取时间对象的分组
d.getSeconds();//获取时间对象的秒
6.getTime()
获取当前日期对象的时间戳
时间戳指从格林威治时间的1970年1月1日0时0分0秒到当前日期所华为的毫秒数
var d = new Date();
var a = d.getTime();
console.log(a/1000/60/60/24/365);
//获得当前时间戳
var d = Date.now();
八、Math类 Math和其它对象不同，他不是一个构造函数 它属于一个工具类 不用创建
1.Math.ceil() 向上取整
var a = Math.ceil(1.2); //a = 2;
2.Math.floor() 向下取整
var a = Math.floor(1,8); //a = 1;
3.Math.round() 四舍五入
var a = Math.round(1,4)// a = 1;
4.Marh.random()
可以随机产生一个0-1的随机数
//生成一个0-x的随机整数
var a = Math.round(Math.random()*x);
// 生成一个x-y之间的随机整数
var d = Math.round(Math.random()*(y - x)) + x;
5.Math.max() && Math.min()
可以获得多个数中的最大(小)值
var a = Math.max(1,2,3); // a = 3;
var a = Math.min(1,2,3); // a = 1;
6.Math.pow()
获得x的y次幂
var a = pow(2,3) // a = 8;
7.Math.sqrt()
获得一个数的开放
var a = Math.aqrt(4); // a = 2;
九、正则表达式 用于定义一些字符串的规则
计算机可以根据正则表达式来检查一个字符串是否符合规则，
获取将字符串中符合规则的内容提取出来
1.创建正则表达式对象
方法一：
语法： var 变量名 = new RegExP("正则表达式“,”匹配模式“);
var a = new RegExp("a");
//这个表达式可以用来检测字符串中是否含有”a” 及是否包含参数
var b = new RegExp("i","i");
//可以传第二个参数 匹配模式
// i 表示 忽略大小写
// b 表示 全局匹配模式
方法二： 使用字面量创建正则表达式
语法 ：var 变量 = /正则表达式/匹配模式
var str = "abcd";
var r = /a/i ;
console.log(r.test(str));
注意：使用字面量创建方式更加简单
使用构造函数创建成家灵活
2.正则表达式方法：
test()
使用这个方法可以用来检查一个字符串是否妇喝正则表达式规则
如果符合返回true，否则返回false
//检查一个字符串是否含有i
var str = "aiggfs";
var b = /i/;//或var b = new RegExp("i");
console.log(b.test(str)); //true
//检查一个字符串是否含有i 忽略大小写
var str = "aIggfs";
var b = /i/;//或var b = new RegExp("i","i");
console.log(b.test(str));//true
//检查一个字符串是否含有i或g 且忽略大小写
var str = "aiggfs";
var b = /i|g/;//或var b = new RegExp("i|g","i");
console.log(b.test(str));//true
//检查一个字符串是否含有i和g 且忽略大小写
var str = "aiggfs";
var b = /i|g/; //或var b = new RegExp("i&g","i");
console.log(b.test(str));//true
//检查一个字符串是否含有i或g 且忽略大小写
var str = "aiggfs";
或var b = /i|g/;//var b = new RegExp("i|g","i");
console.log(b.test(str));//true
//检查一个字符串是否含有字母
//注 []中的内容也是或关系 [ab] == a|b
//可以使用使用- [a-z] == [abc....z]
//[A-z] 表示 任意字母
var str = "aiggfs";
var b = /[A-z]/;//或var b = new RegExp("[A-z]");
console.log(b.test(str));//true
//检查一个字符串是否含有abc ,adc 或 aec
var str = "aiggfs";
var b = /[bde]c/;//或var b = new RegExp("a[bde]c");
console.log(b.test(str));
//[^ ] 除了... 例如 [^ab] 是否含有除了 a b之外的字母
//查找连续多个相同的字符可以使用量词
// 使用量词可以设置一盒内容出现次数
// 量词只对他前面的内容起作用
// {n} 正好出现n次
// {m,n} 出现m-n次
// {m,} 出现m次以上
//检查一个字符串中是否含有gg
var str = "aiggfs";
var b = /b{2}/;//或var b = new RegExp("b{2}");
console.log(b.test(str));//true
//检查一个字符串中是否含有abab
var str = "ababab";
var b = /(ab){2}/;//或var b = new RegExp("(ab){2}");
console.log(b.test(str));//true
//检查一个字符串中a出现一次或者两次或者三次
var str = "aaaa";
var b = /a{1,3}/;//或var b = new RegExp("a{1,3}");
console.log(b.test(str));//true
//其它
// + 至少出现一次,相当于{1,}
// * 0个或多个,相当于{0,}
// ? 0个或1个 相当于{0,1}
//检查一个字符串中a是否出现在开头
var str = "aaaa";
var b = /^a/;//或var b = new RegExp("^a");
console.log(b.test(str));//true
//检查一个字符串中a是否出现在结尾
var str = "aaaa";
var b = /$a/;//或var b = new RegExp("$a");
console.log(b.test(str));//true
//如果在正则表达式中如果同时使用^$则要求字符串必须完全符合正则表达式
var str = "a";
var b = /^a$/;//或var b = new RegExp("^a$");
console.log(b.test(str));//true
//检查一个字符串是否是一个手机号
var str = "15866129702";
var s = /^1[3-9][0-9]{9}$/;
if(str.length == 11 && s.test(str)) {
console.log(1);
}
//检查一个字符串中是否含有一个(需要使用转义字符)
// . || \ 表示任意字符
//注:使用构造函数时,由于他的参数是一个字符串.而 \ 是字符串转义字符.如果要使用\则需要用\\代替
var reg = /\./ ; //var reg =new RegExp("\\.)
var str = "...";
console.log(b.test(str));
//其它
// \w 任意字母、数字、_ 相当于[A-z0-9_]
// \W 除了字母、数字、_ 相当于[^A-z0-9_]
// \d 数字 相当于 [0-9]
// \D 除了数字 相当于[^0-9]
// \s 空格
// \S 除了空格
// \b 单词边界a
// \B 除了单词边界
//检查一个字符串中是否含有boy
var reg = /\bboy\b/;
var str1 = "my boy";
var str2 = "myboy";
reg.test(str1) true;
reg.test(str2) false;
小练习
//一:
// 删除一个字符串中的空格
var str1 = " Hello ";
var str2 = " He llo ";
var r1 = /\s/g;
str1 = str1.replace(r1,"");
str2 = str2.replace(r1,"");
console.log(str1); //str1 = Hello
console.log(str2); //str1 = Hello
//二:
// 只删除字符串开头和结尾的空格
var str = " He llo ";
var r = /^\s* | \s*&/;
str = str.replace(r,"");
console.log(str); // str = He llo;
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
