1 引用方式
1.1 在html文件里面直接写js(弹出窗口输出)
<script>
alert("Hello,World!");
</script>
1.2 将js和html'文件分开,并在html中引用js(弹出窗口输出)
html文件
<script src="demo_01.js">
</script>
js文件
alert("好久不见")
1.3 页面输出
<script>
document.writeln("好久不见");
</script>
1.4 控制台输出
<script>
console.log("输出一条日志");//最常用
console.info("输出一条信息");
console.warn("输出一条警告");
console.error("输出一条错误");
</script>
2 数据类型
2.1 用var声明一个变量 ps:现在用let创建变量
var a=123
var a; //定义全局变量
let b; // 定义局部变量
const c=1;//定义常量且不能再被修改
let a=1; //定义a为整形,并且赋值为1
let a=1.3; //定义a为浮点形,并且赋值为1.3
let a="ab2ba"; //定义a为字符串形,并且赋值为ab2ba
let =True; //定义a为布尔形,并且赋值为True
let a=1,b=2; //定义a和b均为整形,并且赋值为1,2
注意var用来创建全局变量,let用来创建局部变量
2.2 number
Number 类型用来表示整数和浮点数,最常用的功能就是用来表示10进制的整数和浮点数。
Number表示的数字大小是有限的,如果超过了这个范围,则会返回 ±Infinity。
最大值:+1.7976931348623157e+308
最小值:-1.7976931348623157e+308
0以上的最小值:5e-324
特殊的数字:
Infinity:正无穷
-Infinity:负无穷
NaN:非法数字(Not A Number)
其它的进制:
二进制:0b 开头表示二进制,但是,并不是所有的浏览器都支持
八进制:0 开头表示八进制
十六进制:0x 开头表示十六进制
2.3 强制类型转换
将其它数值转换为字符串有三种方式:toString()、String()、 拼串。
转换为number类型
有三个函数可以把非数值转换为数值:Number()、parseInt() 和parseFloat()。Number()可以用来转换任意类型的数据,而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数,而parseFloat()可以将字符串转换为浮点数。
2.4 输出与输入
1) 输入
类似于C语言的scanf()函数,js的输入是prompt()函数。但是要注意输入的是默认为string类型
输入会在网页中弹出提示框
prompt("");
3 运算符号
类c
4 分支语句
类c
5 循环语句
类c
demo:
使用for循环连续打印出某个数
var a=2,b='';
for(var i=1;i<=5;i++) {
b+=a;
}
console.log(b);
6 数组和字符串
6.1 数组
JS的数组和C数组不同的是,JS的数组是动态的。比起这点它更像C++的vector。
var a=[];//定义空数组
var a=[1,2,'aaa',true,1.2]//定义有长度的数组
可以发现,和C不同的是,JS定义数组不用再方括号里写数组大小,并且由于JS定义是自适应,所以数组里的变量类型可以不是单一的。
访问数组的方式可以直接用下标索引。例如返回第2个元素,那么就是arr[1](注意下标是从0开始的)。
字符串的库函数和数组的库函数大致相同。
6.2 数组的增删改查
let a=[0,1,2,4]; //定义数组
console.log(a[1]); //访问第二个元素,输出1
console.log(a); //输出[0,1,2,4]
a[3]=3; //修改下标3的数据
console.log(a); //输出[0,1,2,3]
a[4]=4; //增加大小并赋值
console.log(a); //输出[0,1,2,3,4]
a[10]=10; //增加大小并赋值
console.log(a); //输出[0,1,2,3,4,空a~5,10],此时长度是返回的11
2)采用库函数a.push() 的方式进行尾插。
3)采用库函数a.unshift() 的方式进行头查。
删
删除数据可以利用库函数 a.pop() 进行尾删
查
1)查找数据可以利用a.find() 函数来查找,查到了返回下标,没查到返回-1
2)可以采用 a.indexOf(元素) 来查询下标。
3)利用 a.isArray(元素) 来查询该元素是否在数组中,若在返回true,若不在返回false。
改
1)改变数据可以直接利用下标索引的方式
至于排序依旧可以a.sort() 进行快排。
7.函数
JS声明函数的关键字:function。
由于JS没有主函数,被调函数之分,所以直接在下面调用即可。
语法格式:
function f() {
console.log('呵呵呵');
}
f();//调用函数
8.类与对象
8.1 创建对象方法一
1)字面量创建对象
数组是中括号,那么对象就是花括号了。
语法模板:
//创建对象的模板
let 对象名={
属性1:属性值, //注意是逗号
属性2:属性值,
//对象中的函数叫做方法
方法1:function(参数) {
xxxx; //函数的内容
},
方法2:function(参数) {
xxxx;
} //注意最后一个没有逗号
}
demo:
let person={
Name: '张三',
age: 18, //这些就叫做属性
Hobby: ['唱','跳','篮球','rap'], //属性值也可以是数组形式
//对象中也可以嵌套其他的对象
friend: {
Name: '李四',
age: 19,
...
}
}
2)访问方式
访问的方式也是大同小异,采用对象.属性,对象.方法() 的方式。
或者说采用 对象['属性'] 的方式调用
let person={
Name: '张三',
friend: {
Name: '李四',
}
}
console.log(person.Name); //张三
console.log(person['Name']) //张三
console.log(person.friend.Name); //李四
3)new一个对象
其方法是先new一个空的对象,然后再依次创建(可随时添加)属性和方法。
var obj =new Object();//创建空对象
obj.name='张三'; //创建属性
obj.age=18; //创建属性
4)构造函数创建对象
换句话说也就是创建类(结构体)。
//创建类
function Person(name,age) {
this.name=name;
this.age=age;
}
//实例化对象
let p1=new Person('张三',18);
let p2=new Person('李四',19);
console.log(p1.name)// 输出张三
5)数组对象
let person=[
{
Name: '张三',
age: 18,
},
{
Name: '李四',
age: 19,
},
{
Name: '王五',
age: 17,
}
] //定义数组对象
console.log(person[0]); //输出关于张三的这个对象
console.log(person[1].Name); //输出李四
9 迭代器
数组对象的迭代器也就是:forEach,map以及filter。
9.1 foreach
let person=[
{
Name: '张三',
age: 18,
},
{
Name: '李四',
age: 19,
},
{
Name: '王五',
age: 17,
}
] //定义数组对象
//函数形式
person.forEach( function(p) {
console.log(p.Name);
});
//箭头形式
person.forEach(p=>{
console.log(p.Name);
});
//依次输出 张三,李四,王五。
9.2 map
let person=[
{
Name: '张三',
age: 18,
},
{
Name: '李四',
age: 19,
},
{
Name: '王五',
age: 17,
}
] //定义数组对象
let name=person.map(function(p) {
return p.Name;
}); //定义数组name来接收map的返回值
console.log(name[1]); //李四
9.3 filter
let person=[
{
Name: '张三',
age: 18,
flag: true,
},
{
Name: '李四',
age: 19,
flag: false,
},
{
Name: '王五',
age: 17,
flag: true,
}
] //定义数组对象
let object=person.filter(function(p) {
return p.flag===true;
});
console.log(object); //这时候object储存的是对象,并且只有张三和王五的对象
9.4 map 和 filter区别
不过map和filter的区别是filter的返回可以有筛选效果,也就是说在filter迭代器中,可以选择是否返回,如果true才返回,false就不返回。