前端-js-长期维护

牧云@^-^@ 提交于 2020-03-21 08:14:47

###############    JS简介和JS引入     ################

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
js简介
英文:javascript
这是一门编程语言,
要学习什么?
1,js的核心语法:
    1,基础语法
    2,数据类型
    3,函数
    4,面向对象(ES6)
2,BOM:这是操作浏览器的,比如浏览器弹窗
3,DOM:这是操作浏览器上面html内容的,
就是这三部分

js是一个解释性语言,是需要一个解释器的,但是解释器比较特殊,只要有浏览器就可以解释js,
-->

<!--
如何引入js文件
-->
<!--第一种方式,通过script标签-->
<!--<script>-->
    <!--alert(121212)-->
<!--</script>-->

<!--第二种方式,写一个js文件,-->
<script src="1.js"></script>
<div id="d1">sss</div>


</body>
</html>

 

###############    JS的基本语法和数据类型(数字和字符串)      ################

/*
js基础语法:
1,注释:
单行注释://
多行注释:
####################
2,语句必须以分号结尾
3,变量生命的关键字:var 变量名 = "值"
    js是属于动态类型,就是同一个变量可以存储不同类型的值,类似python,
4,变量
    变量命名的规则,js中$也可以作为变量名,
    1,变量区分大小写
    2,推荐使用驼峰命名法
    3,保留字不能用作变量名

*/

//变量声明
var name = "小明";
var age = 10;
var $ = "女";

console.log("name",name);
console.log("age",age);
console.log("$",$);
/*
5,数据类型:
整数,浮点数,科学计数法
还有一种NaN,表示不是一个数字,not a number
* */
//数字类型
var n1 = 18;
var n2 = 18.1;
var n3 = 1.8e5;

//字符串类型
var s1 = "123";
var s2 = "234";
var s3 = s1+s2; // 字符串拼接
console.log(s3)

/*
字符串常用方法:
.length    返回长度
.trim()    移除空白
.trimLeft()    移除左边的空白
.trimRight()    移除右边的空白
.charAt(n)    返回第n个字符
.concat(value, ...)    拼接,eg:  concat(1) 在后面拼接1,concat(1,2,3) 在后面拼接1,2,3
.indexOf(substring, start)    子序列位置,返回的是子字符串的起始位置,
.toLowerCase()    小写
.toUpperCase()    大写
.split(delimiter, limit)    分割,第一个参数是根据什么分割,第二个参数是限制分割多少个,第二个参数可以不写


#########################
.substring(from, to)    根据索引获取子序列
.slice(start, end)    切片

//substring和slice有什么相同之处:
两者的相同点:
如果start等于end,返回空字符串
如果stop参数省略,则取到字符串末
如果某个参数超过string的长度,这个参数会被替换为string的长度

substirng()的特点:
如果 start > stop ,start和stop将被交换
如果参数是负数或者不是数字,将会被0替换

silce()的特点:
如果 start > stop 不会交换两者
如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)


* */

 

###############    JS数据类型(布尔和数组类型)      ################

/*
布尔类型
区别于Python,true和false都是小写。
""(空字符串)、0、null、undefined、NaN都是false。
* */
//布尔类型
var a = true;
var b = false;


//数组类型
// 类似python中的列表
var a1 = [1,2,3]
a1[0] //返回1,
a1[3] //返回undefined
// a1[1:2] //不支持这种冒号的
/*

.length    数组的大小
.push(ele)    尾部追加元素
.pop()    获取尾部的元素,和python一样,会从列表取出,并且返回
.unshift(ele)    头部插入元素
.shift()    头部移除元素
.slice(start, end)    切片
.reverse()    反转
.sort()    排序  这个排序比较鸡肋,要转换成字符串,然后排序,
#############################
.join(seq)    将数组元素连接成字符串,

python中
l1=["1","2","3"]
("+").join(l1)
这是把列表中的元素,使用加号连接,返回是一个字符串

js中
l1=[1,2,3]
l1.join("+")  //返回1+2+3
#########################
.concat(val, ...)    连接数组,
l1=[1,2,3]
l1.concat(1,2,3) //结果:[1,2,3,1,2,3]
l1.concat([1,2,3])  //结果:[1,2,3,1,2,3]


###########################
null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
null表示变量的值是空,undefined则表示只声明了变量,但还没有赋值。

############################
var a1 =[12,2]
typeof a1 //这是查看数据的类型,记住数组和null,返回的是object类型
typeof是一个一元运算符(就像++,--,!,- 等一元运算符),不是一个函数,也不是一个语句。

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"
* */

 

###############    JS运算符      ################

/*
算数运算符:
+ - * / % ++ --

var n =10;
n++  //11,就是n=n+1
################################
比较运算符
> >= < <= != == === !==
注意:
1 == “1”  // true   这是弱等于,只判断值
1 === "1"  // false    这是强等于,既判断值也判断类型

################################
逻辑运算符
&&  与
||  或
!   非

################################
赋值运算符
=
+=   //n+=1   就是 n= n+1 
 -= *= /=

* */

 

###############    JS流程控制语句     ################

// for循环
// a1 = [1,2,3]
// for (var i =0;i<a1.length;i++){
//     console.log(a1[i])
// }

//while 循环
// var i = 0;
// while (i < 10) {
//   console.log(i);
//   i++;
// }

//  三元运算
var a = 1;
var b = 2;
var c = a > b ? a : b;
//? 号前面是条件,成立就是第一个a,不成立就是第二个b

 

###############    JS函数      ################

//js中函数和python中的函数非常的相似,只是定义的方式有些不同

//函数的定义
function foo(a,b) {
    console.log(a);
    console.log(b);
    return a+b;  //带返回值的函数
}

//匿名函数
//需要使用一个变量去接收他,
var func = function (a,b) {
    console.log(a);
    console.log(b);
    return a+b;  //带返回值的函数
};

//立即执行函数
//先写两个括号,第一个括号内部定义,第二个括号内部传递具体的参数
(function (a,b) {
    console.log("立即执行函数");
    console.log(a+b)
})(11,222);


//arguments
function foo(a,b) {
    console.log(a);
    console.log(b);
    console.log(arguments.length);
    //这个 arguments 根据传入的参数,是一个列表[a,b]
    //可以遍历这个arguments对象
    return a+b;  //带返回值的函数
}

//函数的调用
var ret1 = foo(11,22);
// 调用的时候,如果传递的超出定义的,超出的不起作用,并不会导致程序报错,
//如果传递的参数少于定义的,未定义的就会显示undefined,也不会程序报错,
//这是js比较随便的地方,
console.log(ret1);

var ret2 = func(11,12);
console.log(ret2);


/*
局部变量:
在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。

全局变量:
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

变量生存周期:
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除
* */

 

###############    JS词法分析      ################

//js的词法分析
var age =18;
function foo() {
    console.log(age);
    var age =22;
    console.log(age);
}

foo(); //结果是 undefined ,22 ,
//为什么?
//因为函数执行的时候,会对函数内部进行词法分析

/*
JavaScript中在调用函数的那一瞬间,会先进行词法分析。
词法分析的过程:
当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面:
1:函数参数,如果有,则将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作。
2:函数局部变量,如果AO上有同名的值,则不做任何操作。如果没有,则将此变量赋值给AO,并且值为undefined。
3:函数声明,如果AO上有,则会将AO上的对象覆盖。如果没有,则不做任何操作。
函数内部无论是使用参数还是使用局部变量都到AO上找。

* */

  

###############    JS内置对象-自定义对象     ################

/*
js中内置的对象和方法:
* */


//js中自定义对象
var person = {name:"andy",age:18};//在js对象中,属性名默认不需要加引号,你加了js也会给你去掉的,值可以是单引号和双引号,单引号会转换成双引号
console.log(person);

// 单个取属性
console.log(person.name);
console.log(person.age);

//遍历取属性
for (var i in person){
    console.log(i);
    console.log(person[i])
}

//自定义对象的第二种方式:
var person2 = new Object();
person2.name="xiaoxiao";
person2.age=22;
console.log(person2);

 

###############    JS内置对象-Date对象     ################

 

//内置的Date对象,就相当于python中的模块

var d1 = new Date();
console.log(d1); //这是默认生成当前时间,这是一个时间对象,
console.log(d1.toLocaleString()); //这是一个字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());

/*

var d = new Date();
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月(0-11)
//getFullYear ()            获取完整年份
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

* */

 

 

###############    JS内置对象-json对象      ################

//json对象
var s = '{"name":"andy","age":12}'; //这是一个字符串,怎么使用js转换成为json格式的,
var ret = JSON.parse(s);
console.log(ret);
console.log(typeof ret); //类型是一个对象

// 怎么把js中的对象,转换成字符串呢?
var s2 = JSON.stringify(ret);
console.log(s2);
console.log(typeof s2); //类型是一个字符串

// 这两个一定要学会,后面使用ajax传递数据的时候,会使用到

 

###############    JS内置对象-Math对象      ################

//math对象
var n = -5;
n2 = Math.abs(n); //绝对值
console.log(n2);
Math.floor(5.9); //直接往下去,这就是5,
Math.min(1,2);
Math.max(1,2);
Math.pow(10,2); //返回x的y次幂
Math.random(); //返回一个0-1之间的随机数
Math.round(5.5); //四舍五入

 

###############    JS内置模块-RegExp模块,正则模块      ################

//RegExp对象,正则,类似python中的re模块
//生成RegExp对象,
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
//这是以字母开头,5-11位的字母数字下滑线组成
var reg2 = reg1.test('xiaoming');
console.log(reg2); //true
var reg3 = reg1.test('2xiaoming');
console.log(reg3); //false

//简单写法
console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("xiaoming"));
console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("3xiaoming"));

//这里面有很多的坑
// 1,re表达式内部不能加空格,否则会产生意想不到的错误,
// console.log(/^[a-zA-Z][a-zA-Z0-9_]{5, 11}$/.test("xiaoming"));

//2,test里面不写值,默认不是空,是校验的一个undefined,这是大坑啊,
console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test());//等同于console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("undefined"));

//3,字符串替换
//两种模式,g,i,
var ss = 'Ahahaha';
var sss = ss.replace("a","哈");//这样写只会替换第一个a,这个要记住,
var sss = ss.replace(/a/,"哈");//这样写只会替换第一个a,这个要记住,这是正则的写法
var sss = ss.replace(/a/g,"哈");//加一个g,就是说全局有多少就替换多少,
var sss = ss.replace(/a/gi,"哈");//加一个i,就是说忽略大小写,都替换
console.log(sss);

  

###############   结束线      ################

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!