文章目录
1 JavaScript的引入方式
- 内接式
<script type="text/javascript"></script>
- 外接式
<!--相当于引入了某个模块-->
<script type="text/javascript" src = './index.js'></script>
2 注释
-
单行注释
单行注释以 // 开头。
-
多行注释
多行注释以 /* 开始,以 */ 结尾。
3 变量
-
变量的声明的两种方式
// 1.变量的声明和定义(赋值) 大部分前端工程师 都是使用的这种方式 var a = 100; // 2.先声明变量 未来定义 var b; b = '200';
-
变量的命名规范
- 变量由字母、数字、下划线组成
- 必须以字母开头
- 变量也能以 $ 和 _ 符号开头
- 变量名称对大小写敏感
4 基本数据类型
-
数字类型 number
var a = 100; //定义了一个变量a,并且赋值100 console.log(typeof a); //输出a变量的类型 使用typeof函数 检测变量a的数据类型 //特殊情况 var b = 5/0; console.log(b); //Infinity 无限大 console.log(typeof b); //number 类型
ps:在JavaScript中,只要是数,就是数值型(number)的。无论整浮、浮点数(即小数)、无论大小、无论正负,都是number类型的。
-
字符串类型 string
var a = "abcde"; var b = "路飞"; var c = "123123"; var d = "哈哈哈哈哈"; var e = ""; //空字符串
连字符和+号的区别
键盘上的
+
可能是连字符,也可能是数字的加号。如下:console.log("我" + "爱" + "你"); //连字符,把三个独立的汉字,连接在一起了 console.log("我+爱+你"); //原样输出 console.log(1+2+3); //输出6
总结:如果加号两边都是数值,此时是加。否则,就是连字符(用来连接字符串)。
如果有数字和字符串,就会转换成字符串
-
布尔类型 boolean
var isShow = 1>1; console.log(typeof isShow);
-
空对象 null
var c1 = null;//空对象. object console.log(typeof c1);
-
未定义 undefined
var d1; //表示变量未定义 console.log(typeof d1);
5 运算符
赋值运算符
以var x = 12,y=5来演示示例
算数运算符
var a = 5,b=2;
比较运算符
var x = 5;
6 数据类型转换
将number类型转换成string类型
隐式转换
var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隐式转换
console.log(typeof n3);
强制转换
// 强制类型转换String(),toString()
var str1 = String(n1);
console.log(typeof str1);
var num = 234;
console.log(num.toString())
将string类型转换成number类型
var stringNum = '789.123wadjhkd';
var num2 = Number(stringNum);
console.log(num2); //NaN Not a Number 但是一个number类型
// parseInt()可以解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum)); //789
// parseparseFloat()可以解析一个字符串 并且返回一个小数
console.log(parseFloat(stringNum)); //789.123
任何的数据类型都可以转换为boolean类型
var b1 = '123'; //true
var b2 = 0; //false
var b3 = -123 //true
var b4 = Infinity; //true
var b5 = NaN; //false
var b6; //false
var b7 = null; //false
//使用Boolean(变量) 来查看当前变量的真假
7 流程控制
if 语句
var age = 20;
if(age>18){
//{}相当于作用域
console.log('可以去会所');
}
alert('alex'); //下面的代码照样执行
if-else 语句
var age = 20;
if(age>18){
//{}相当于作用域
console.log('可以去会所');
}else{
console.log('好好学js,年纪够了再去会所');
}
alert('alex'); //下面的代码照样执行
if-else if-else 语句
var age = 18;
if(age==18){
//{}相当于作用域
console.log('可以去会所');
}else if(age==30){
console.log('该娶媳妇了!!');
}else{
console.log('随便你了')
}
alert('alex'); //下面的代码照样执行
switch 语句
var gameScore = 'better';
switch(gameScore){
//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break,那么直到该程序遇到下一个break停止
case 'good':
console.log('玩的很好')
//break表示退出
break;
case 'better':
console.log('玩的老牛逼了')
break;
case 'best':
console.log('恭喜你 吃鸡成功')
break;
default:
console.log('很遗憾')
}
//注意:switch相当于if语句 但是玩switch的小心case穿透
8 循环
while 循环
// 例子:打印 1~9之间的数
var i = 1; //初始化循环变量
while(i<=9){ //判断循环条件
console.log(i);
i = i+1; //更新循环条件
}
练习:将1~100所有是2的倍数在控制台打印。使用while循环
var i = 1;
while(i <= 100){
if(i%2==0){
console.log(i);
}
i +=1;
}
do while 循环
//不管有没有满足while中的条件do里面的代码都会走一次
var i = 3;//初始化循环变量
do{
console.log(i)
i++;//更新循环条件
}while (i<10) //判断循环条件
for 循环
//输出1~10之间的数
for(var i = 1;i<=10;i++){
console.log(i)
}
for 循环嵌套
for(var i = 0; i < 3;i++){ //控制着你的行数
for(var j = 1;j <=6;j++){ //控制的星星
document.write("*");
}
document.write('<br>');
}
9 常用内置对象(复杂数据类型)(重点)
1 数组Array
-
数组的创建方式
-
字面量方式创建(推荐大家使用这种方式,简单粗暴)
var colors = ['red','green','yellow'];
-
使用构造函数
var colors = new Array(); //通过下标进行赋值 colors[0] = 'red'; colors[1] = 'green'; colors[2] = 'yellow'; console.log(colors);
-
-
数组的常用方法
-
concat() 数组的合并
var north = ['北京','山东','天津']; var south = ['东莞','深圳','上海']; var newCity = north.concat(south); console.log(newCity)
-
join() 将数组转换成字符串,元素使用指定的字符串连接起来
var score = [98,78,76,100,0]; var str = score.join('|'); console.log(str);//"98|78|76|100|0"
-
slice(start,end); 切片,顾头不顾尾
var arr = ['张三','李四','王文','赵六']; var newArr = arr.slice(1,3); console.log(newArr);//["李四", "王文"]
-
pop 移除数组的最后一个元素
var arr = ['张三','李四','王文','赵六']; arr.pop(); console.log(arr);//["张三", "李四","王文"]
-
push() 向数组最后添加一个元素
var arr = ['张三','李四','王文','赵六']; arr.push('小马哥'); console.log(arr);//["张三", "李四","王文","赵六","小马哥"]
-
reverse() 翻转数组
var names = ['alex','xiaoma','tanhuang','angle']; //4.反转数组 names.reverse(); console.log(names);
-
sort() 对数组排序
var names = ['alex','xiaoma','tanhuang','abngel']; names.sort(); console.log(names);// ["alex", "angle", "tanhuang", "xiaoma"]
-
判断是否为数组:isArray()
// 布尔类型值 = Array.isArray(被检测的值) ; var a = 2; // isArray() 判断是否为数组 返回为ture|false var iArray = Array.isArray(a); if (iArray) { console.log('是数组'); }else{ console.log('不是数组'); }
-
forEach 方法
// forEach(fn)==回调函数 匿名函数 通过forEach遍历数组的每一项内容 回调函数中的参数 第一个参数为item (每一项内容) 第二个参数 是数组的索引 names2.forEach(function(item,index){ console.log(item); console.log(index); })
2 字符串string
-
chartAt() 返回指定索引的位置的字符
var str = 'alex'; var charset = str.charAt(1); console.log(charset);//l
-
concat 返回字符串值,表示两个或多个字符串的拼接
var str1 = 'al'; var str2 = 'ex'; console.log(str1.concat(str2,str2));//alexex
-
replace(a,b) 将字符串b替换成字符串a
var a = '1234567755'; var newStr = a.replace("4567","****"); console.log(newStr);//123****755
-
indexof() 查找字符的下标,如果找到返回字符串的下标,找不到则返回-1 。跟seach()方法用法一样
var str = 'alex'; console.log(str.indexOf('e'));//2 console.log(str.indexOf('p'));//-1
-
slice(start,end) 左闭右开 分割字符串
var str = '小马哥'; console.log(str.slice(1,2));//马
-
split(‘a’,1) 以字符串a分割字符串,并返回新的数组。如果第二个参数没写,表示返回整个数组,如果定义了个数,则返回数组的最大长度
var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈'; console.log(str.split('a'));//["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]
-
substr(statr,end) 左闭右开
var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈'; console.log(str.substr(0,4));//我的天呢
-
toLowerCase()转小写
var str = 'XIAOMAGE'; console.log(str.toLowerCase());//xiaomage
-
toUpperCase()转大写
var str = 'xiaomage'; console.log(str.toUpperCase());//XIAOMAGE
-
trim() 去除字符串两边的空格
var str10 = ' alex '; console.log(str10.trim()); //alex
-
toFixed() 四舍五入
//特殊: var num = 132.32572; //四舍五入 var newNum = num.toFixed(3); console.log(newNum);
3 Math内置对象
-
Math.ceil() 向上取整,‘天花板函数’
var x = 1.234; //天花板函数 表示大于等于 x,并且与它最接近的整数是2 var a = Math.ceil(x); console.log(a);//2
-
Math.floor 向下取整,‘地板函数’
var x = 1.234; // 小于等于 x,并且与它最接近的整数 1 var b = Math.floor(x); console.log(b);//1
-
求两个数的最大值和最小值
//求 两个数的最大值 最小值 console.log(Math.max(2,5));//5 console.log(Math.min(2,5));//2
-
随机数 Math.random()
var ran = Math.random(); console.log(ran);[0,1)
如果让你取100-200之间的随机数,怎么做?
背过公式:min - max之间的随机数: min+Math.random()*(max-min);
console.log(200+Math.random()*(500-200));
10 函数
//js中声明函数
function add(x,y){
return x+y;
}
//js中调用函数
console.log(add(1,2));
解释如下:
- function:是一个关键字。中文是“函数”、“功能”。
- 函数名字:命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号,不能以数字开头。
- 参数:后面有一对小括号,里面是放参数用的。
- 大括号里面,是这个函数的语句。
11 实参 arguments
function add(){
console.log(arguments);
// arguments 到底是不是数组吧?? arguments 伪数组 它有数组的索引 length 属性 但是它没有数组的方法
// arguments.push('哈哈哈');
// console.log(arguments);
// arguments.forEach(function, thisArg?: any) 不能使用数组的forEach
for(var i =0; i < arguments.length; i ++){
console.log(arguments[i]);
}
}
add('alex','wusir')
12 对象Object
-
使用Object或对象字面量创建对象
//第一种方式 // 对象 是属性和方法 var person = new Object(); console.log(person); console.log(typeof person); // 给对象赋值 person.name = 'alex'; person.age = 20; //第二种方式 // var favfn = function(){ // // this 指的是当前的对象 跟python中的self类似 // console.log(this.name); // } var person2 = { name:'wusir', age:26, fav:function(){ // this 指的是当前的对象 跟python中的self类似 console.log(this.name); } } console.log(person2); person2.fav();
-
工厂模式创建对象
// 2.工厂模式创建对象 function createPerson(name, age) { var o = new Object(); o.name = name; o.age = age; return o; } var person1 = createPerson('alex', 20); var person2 = createPerson('alex2', 20); var person3 = createPerson('alex3', 20); var person4 = createPerson('alex4', 20); // instanceof 判断person1、person2是否是object类型 console.log(person1 instanceof Object); console.log(person2 instanceof Object); function createFruit(name, age) { var o = new Object(); o.name = name; o.age = age; return o; }
-
构造函数模式创建对象
function Person(name, age) { this.name = name; this.age = age; this.alertName = function() { alert(this.name); } } function Fruit(name, age) { this.name = name; this.age = age; this.alertName = function() { alert(this.name); } } var p1 = new Person('alex1', 20); p1.alertName(); var f1 = new Fruit('香蕉',30); f1.alertName(); console.log(p1 instanceof Person); console.log(f1 instanceof Fruit); console.log(p1 instanceof Object);
-
原型模式创建对象
function Person(name,age){ this.name = name; this.age = age; } Person.prototype.alertName = function(){ alert(this.name); }; var p1 = new Person('alex',20); var p2 = new Person('alex2',23); // 内存地址 和值 console.log(p1===p2); //False p1.alertName(); //alex p2.alertName(); //alex2
13 Date 日期对象
![Date 日期对象](F:\前端\image\Date 日期对象.png)
//返回本地时间
console.log(myDate().toLocalString());
14 JSON
JSON对象和JSON字符串转换
在数据传输过程中,JSON是以字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:
- JSON字符串:
var jsonStr ='{"name":"alex", "password":"123"}' ;
- JSON对象:
var jsonObj = {"name":"alex", "password":"123"};
- JSON字符串转换JSON对象
var jsonObject= JSON.parseJSON(jsonstr);
- JSON对象转化JSON字符串
var jsonstr = JSON.stringify(jsonObject );
遍历JSON对象和JSON数组
- 遍历JSON对象代码如下:
var packAlex = {"name":"alex", "password":"123"} ;
for(var k in packAlex ){//遍历packAlex 对象的每个key/value对,k为key
alert(k + " " + packAlex[k]);
}
- 遍历JSON数组代码如下
var packAlex = [{"name":"alex", "password":"123"}, {"name":"wusir", "password":"456"}];
for(var i in packAlex){//遍历packJson 数组时,i为索引
alert(packAlex[i].name + " " + packAlex[i].password);
}