date: 2021-10-14title: js基础 #标题
tags: js #标签
categories: 前端 # 分类
基础知识
js代码引入方式
<!--方式1:--><script>// js代码alert('澳门皇家赌场上线啦!!!')</script><!--方式2:外部文件引入 xx.js文件--><script src="js文件路径"></script>
注释符号
// 这是单行注释
/*
这是
多行注释
*/
结束符号
结束符 JavaScript中的语句要以分号（;）为结束符。也就是说和缩进没关系。
声明变量
// 方式一
var a = 10;
// 方式二：声明变量时可以先不赋值
var a; // 此时a的值为undefined
a=10; // 然后就可以这样赋值了
基础数据类型
数值类型 Number
var a = 10
typeof a // typeof 查看数据类型为number
'number'
var b = 1.123
typeof b
'number'
字符类型
var a = 'cdefeff';
typeof a // 类型为 string
'string'
// 字符串拼接
var a = "Hello"
var b = "world";
var c = a + b; //字符串拼接
console.log(c); // 得到Helloworld
类型转换
parseInt("123") // 转换为数字类型，返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") // 返回123.456
字符串的常用方法
.length属性,查看字符串长度
var a = "hello"
a.length; // 查看a的长度
5
.trim() 移除空白
var a = ' hello ';
a.trim(); //"hello"
/*
.trimLeft()：移除左边的空格
.trimRight()：移除右边的空格
*/
返回索引为N的那个字符
a
'hello'
a.charAt(4) // 输出索引为4的字符
'o'
.concat() 字符拼接
var a = 'hello';
var b = 'world';
a.concat(b) //"helloworld"
indexOf() 通过元素找索引
a
"hello"
a.indexOf('e') // 1
a.indexOf('h',1) // 可以指定索引起始位置，表示从指定索引位置开始搜索
-1 // 找不到，则返回 -1
a.indexOf('h')
0
.slice() 切片
var a = 'hello';
a.slice(1,4) // 切片和python一样，顾头不顾尾
'ell'
.toLowerCase() 全部变小写
var a = "HEllo";
a.toLowerCase()
'hello'
.toUpperCase() 全部变大写
a
'HEllo'
a.toUpperCase()
'HELLO'
split（）字符串分割
var a = 'hello'
a.split('e')
(2) ['h', 'llo']
a.split('e',1)
['h']
a.split('e',2)
(2) ['h', 'llo']
布尔值
var a = true;
var b = false;
""(空字符串)、0、null、undefined、NaN都是false。
null和undefined
- null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
- undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
- null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。
对象类型 object
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…此外，JavaScript 允许自定义对象。
// 比如声明一个字符串对象
var a = new String('bb')
数组 Array
// 创建数组:
var a = [11, 22, 33];
var b = new Array([22, 33])
typeof a; //object类型
数组常用方法和属性
通过索引取值
var a = [123, "ABC"];
console.log(a[1]); // 输出"ABC"
.length 获取数组的元素个数
a
(2) [123, 'ABC']
a.length
2
.push()/.pop()尾部追加/删除
var a = [11, 22, 33]
// 末尾追加元素
a.push("hello")
4
a // 确认已追加
(4) [11, 22, 33, 'hello']
a.pop() // 末尾删除元素
'hello'
a // 确认已删除
(3) [11, 22, 33]
.unshift()/ .shift()头部追加/删除
var a = [11, 22, 33];
a.unshift(44, 55) // 头部追加
5
a // 查看当前值
(5) [44, 55, 11, 22, 33]
a.shift(); // 头部删除，每次只能删除一个
44
a // 查看当前值
(4) [55, 11, 22, 33]
流程控制
if语法
var a = 10;
if (a > 5) {
console.log("a > 5");
} else if (a < 5) {
console.log("a < 5");
} else {
console.log("a = 5");
}
for语法
// 定义i的初始值为0，判断是否小于10，如果小于10，则自增1
for (var i = 0; i < 10; i++) {
console.log(i);
}
// 打印列表
// 方式一：
var Info = ['张三', '李四', '王五']
for (var i in Info) {
console.log(i,Info[i]);
}
// 方式二
var l2 = ['aa', 'bb', 'dd', 'cc']
for (var i = 0; i < l2.length; i++) {
console.log(i, l2[i]);
}
// 打印字典
var Zs_Info = {name: '张三', age: 18}
for (var i in Zs_Info) {
console.log(i);
}
// 打印如下（遍历的是字典中的key）：
name
age
// 如果想遍历字典中的value，可以使用如下语句：
var Zs_Info = {name: '张三', age: 18}
for (var i in Zs_Info) {
console.log(Zs_Info[i]);
}
while语法
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
switch语法
var a = 20;
// switch常用语比较是否等于某个值
switch (a) {
case 9: // 等于9 则执行下面的代码
console.log('999');
break; // 每一个case语句都需要通过break来终止，否则会继续执行匹配后的下面case中的代码
case 10:
console.log('101010');
break;
case 11:
console.log('111111');
break;
default : //上面的条件都不成立的时候,走default
console.log('啥也不对!!')
}
// 如果要使用switch来做比较，那么需要使用下面的语法
switch (true) { // 这里必须传入true
case a > 100: // case后面写条件
console.log(a + "大于100");
break;
case a < 100:
console.log(a + "小于100");
break;
case a === 100:
console.log(a + '等于100');
break;
default:
console.log("对比失败！");
}
三元运算符
var a = 1;
var b = 2;
var c = a > b ? a : b //如果a>b这个条件成立，就把冒号前面的值给c，否则把冒号后面的值给c
// 类似于python中的：a = x if x>y else y
函数的语法
普通函数定义
function f1() {
console.log("Hello world!");
}
// 执行
f1()
// 打印如下：
Hello world!
带参数的函数
function f2(a, b) {
console.log(arguments); // 内置的arguments对象
console.log(arguments.length);
console.log(a, b);
}
带返回值的函数
function sum(a, b) {
return a + b; // 在js中，如果你想返回多个值是不行的，比如return a ，b；只能给你返回最后一个值
// 如果就想返回多个值，你可以用数组包裹起来 return [a,b]；
}
执行函数
sum(1, 2); // 调用函数 sum(1,2,3,4,5)参数给多了，也不会报错，还是执行前两个参数的和，
// sum(1)，少参数或者没参数也不报错，不过返回值就会是NAN
匿名函数
var sum = function (a, b) { //在es6中，使用var，可能会飘黄，是因为在es6中，建议使用let来定义变量，不过不影响使用
return a + b;
}
sum(1, 2);
立即执行函数
// 页面加载到这里，这个函数就直接执行了，不需要被调用执行
(function (a, b) {
return a + b;
})(1, 2); //python中写可以这么写：ret=(lambda x,y:x+y)(10,20) 然后print(ret)
函数的全局变量和局部变量
- 局部变量：在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
- 全局变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
变量生存周期： JavaScript变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
面向对象
对象的基本语法
function Person(name) {
this.name = name;
}
// new一个对象
var p = new Person('taibai');
p.name // 取对象中的值
// 对象中添加一个匿名函数
Person.prototype.sum = function (a, b) {
return a + b
}
// 执行匿名函数
p.sum(12,34)
Date对象
var d1 = new Date(); //获取当前时间
console.log(d1.toLocaleString()); //当前时间日期的字符串表示：2021/10/5
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12"); // 月 / 日 / 年(可以写成04 / 03 / 2020)
//方法3：参数为毫秒数，了解一下就行
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004, 2, 20, 11, 12, 0, 300);
console.log(d4.toLocaleString()); //毫秒并不直接显示
\\ date的其他方法
var d = new Date();
//getDate() 获取日
//getDay () 获取星期 ，数字表示（0-6），周日数字是0
//getMonth () 获取月（0-11,0表示1月,依次类推）
//getFullYear () 获取完整年份
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜),时间戳
json
var str1 = '{"name": "chao", "age": 18}';
var obj1 = {"name": "chao", "age": 18};
// JSON字符串转换成对象 反序列化
var obj = JSON.parse(str1);
// 对象转换成JSON字符串 序列化
var str = JSON.stringify(obj1);
RegExp
// 创建正则对象的方法(匹配以小写字母开头，以字母、数字、下划线结尾并且有5到11位的字符串，也就是总共有6到12位)
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
// 简写方式:
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
// test方法: 测试某个字符串是否符合正则规则,符合返回True, 不符合返回false
var s1 = 'hello'
var s2 = 'helloo'
reg1.test(s1) // 输出false，因为不满足6到12位
reg1.test(s2) // 输出true
// 注意：一个坑（里面什么也不写, 会默认放一个 "undefined" 字符串)
reg1.test() // true
// 其他正则方法
var s2 = "hello world";
s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正则 的内容 ，/o/g后面这个g的意思是匹配所有的o,
s2.search(/h/g); // 0,查找字符串中符合正则表达式的内容位置，返回第一个配到的元素的索引位置，加不加g效果相同
s2.split(/o/g); // ["hell", " w", "rld"] 按照正则表达式对字符串进行切割，得到一个新值，原数据不变
s2.replace(/o/g, "s"); // "hells wsrld": 对字符串按照正则进行替换
var s1 = "name:Alex age:18";
s1.replace(/a/, "哈哈哈"); // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:Alex 哈哈哈ge:18" 全局匹配
s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18" 不区分大小写
// 坑
var reg = /a/g; // 定义一个正则
var s = 'alex a sb'; // 定义字符串
reg.test(s); //第一次匹配是 true
reg.lastIndex; // 查看索引位置为：1
reg.test(s); // 再次判断还是：true
reg.lastIndex; // 再次查看索引位置为：6
reg.test(s); // 再次判断为：false
reg.lastIndex; // 查看索引位置为：0
reg.test(s); // 再次判断为：true
reg.lastIndex; // 查看索引位置为：1
/*
之所以出现上面那种情况，是因为每次test匹配时，都记录下来了匹配到的索引位置
等下次匹配时，会从上次记录的位置开始匹配，
当匹配到最后为false时，会从头开始匹配。
*/
reg.lastIndex = 0; // 重新赋值, 让其归零
Math计算模块
Math.abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 小数部分进行直接舍去。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
若有收获，就点个赞吧
0 人点赞
