1. 数据类型
1.1 字符串
1.2 数组
- 长度
arr.length
注: 假如给arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失;
- indixOf,通过元素获得下标索引
arr.indexOf(2)
- slice() 截取Array的一部分,返回一个新数组,类似于String中的subString
- push(), pop() 尾部
push():// 压入尾部
pop(); // 弹出尾部的一个元素
- unshift() ,shift() 头部
unshift(); // 压入到头部
shift(); // 弹出头部的一个元素
- 排序 sort()
- 元素反转 reverse();
arr.reverse();
- concat() 拼接
注: concat() 并没有修改数组,只是会返回一个新的数组 - 连接符 join
打印数组,使用特定的字符串连接 - 多维数组
1.3 对象
若干个键值对
js中对象, {....}
表示一个对象,键值对描述属性 xx:xx
, 每个属性之间用逗号隔开,最后一个属性后不加逗号
JavaScript
中的所有的键都是字符串,值是任意对象.
eg:
var person = {
person:"lisi",age:22,address:"天津滨海"}
- 对象赋值
person.name="zhangsan"
- 使用一个不存在的对象属性,不会报错, 仅仅是undefined;
- 动态的删减属性
delete person.name
true
- 动态的添加属性,直接给新的属性添加值即可
person.phone=1333312110;
- 判断属性值是否在这个对象中
'age' in person
true
- 判断一个属性是否是一个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
1.4 Map和Set
ES6才支持
- Map
- Set: 无序不重复的集合
var set = new Set();
set.add(2);
set.delete(1);
set.has(2); // 是否包含某个元素
2. 流程控制
- if判断
- while循环
- for循环
- forEach 循环
var arr=[2,3,5,23,0,23];
arr.forEach(function (value) {
console.log(value);
});
- forIn 循环
var arr=[2,3,5,23,0,23,"hah"];
for (let index in arr) {
console.log(arr[index])
}
- forOf 循环
var arr=[2,3,5,23,0,23,"hah"];
for (let arrElement of arr) {
console.log(arrElement)
}
3. 函数
3.1 函数相关
arguments
是一个JS免费赠送的关键字,代表 传递进来的所有的参数,是一个数组
问题: arguments
包含所有的参数,我们有时候想使用多余的参数来进行附加操作,需要排除已有参数;
ES6 引入的新特性,获取除了已经定义的 参数之外的所有参数
function aa(a,b,...rest){
console.log(a);
console.log(b);
console.log(rest);
}
注: rest参数只能写在最后面,必须用…标识;
function a(a,b,c,...rest) {
console.log('a===='+a);
console.log('b===='+b);
console.log('c===='+c);
console.log('abc===='+rest);
}
3.2 变量的作用域
在javascript中,var 定义变量实际是由作用域的.
假设在函数体中声明,则在函数体外不可以使用;
如果连个函数使用了相同的变量名,只要在函数内部,就不冲突;
内部函数可以访问外部成员,外部不可以使用内部的成员;
规范: 所有的变量定义都放在函数的头部,不要乱放,便于代码维护;
默认所有的全局变量,都会自动绑定在windows对象下;
JavaScript 实际上只有一个全局作用域,任何变量(函数也可以视为变量), 假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错RefrenceError
;
规范: 由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件,使用了相同的全局变量,就会有冲突,所以需要定义唯一全局变量;
var qun = {
}; // 全局变量
qun.name='zhansan';
qun.add=function (a,b) {
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题
3.3 局部作用域
ES6 中let
关键字, 解决局部作用域冲突问题
3.4 常量
在ES6之前,定义常量: 只有用全部大写字母命名的变量就是常量;这个仅仅是约定;
在ES6 引入常量关键字 const
4. 内部对象
- 标准对象
typeof 123
"number"
typeof "we"
"string"
typeof []
"object"
typeof {
}
"object"
typeof NaN
"number"
typeof true
"boolean"
typeof Math.abs
"function"
typeof undefined
"undefined"
- Date
- JSON
var user={
name:"zhangsan",
age:3,
sex:'男'
}
console.log(user);
//对象转化为json字符串
var jsonUser =JSON.stringify(user);
//json 字符串转化为对象,参数为json字符串
var obj = JSON.parse(jsonUser);
- JSON 和JS对象的区别
var obj ={
name: "zhangsan", age: 3, sex: "男"} ;
var json='{"name":"zhangsan","age":3,"sex":"男"}' ;
5. 面向对象编程
5.1 原型
var user = {
name:'zhangsan',
age:33,
add:'tianjin',
run:function(x) {
console.log(this.name+'参加了'+x+'项目');
}
}
var xiaoming={
name:'xiaoming'
}
xiaoming.__proto__=user;
console.log(xiaoming.run('体育'));
console.log(xiaoming.add);
5.2 class继承
class
关键字是在ES6引入的
在以前:
function Student(name){
this.name=name;
}
// 给student新增一个方法
Student.prototype.hello=function() {
alert('hello')
}
ES6之后:
- 定义一个类,属性,方法
// ES6之后==================
// 定义一个学生的类
class Student{
constructor(name){
this.name=name;
}
hello(){
alert("hello")
}
}
var user = new Student("xiaoming");
user.hello();
- 继承
- 原型链
6. 操作BOM对象
BOM: 浏览器对象模型
1 window 浏览器窗口
2 navigator 封装了浏览器的信息
3 screen 代表屏幕
4 location
host:
href:
protocol:"https:" // 协议
reload: reload() //刷新网页
location.assign('https://xxx')
5 document 当前页面
6 history 浏览器的历史记录
7. 操作DOM对象
DOM : 文档对象模型
7.1 获得dom节点
document.getElementById();
document.getElementsByClassName()
document.getElementsByTagName()
...
7.2 更新节点
<div id="id1">
</div>
<script>
var id1=document.getElementById("id1");
id1.innerText='323';
id1.innerHTML='<a href="https://www.baidu.com">百度</a>'
id1.style.color='red';
id1.style.fontSize='20px';
</script>
7.3 删除节点
删除节点的步骤: 先获取父节点,在通过父节点删除自己
<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById("p1"); // 获取自己
var father = self.parentElement; //得到父节点
father.removeChild(self); //通过父节点删除自己
</script>
注意: 删除多个节点的时候,children是时刻变化的,删除节点的时候一定要注意;
7.4 插入节点
我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了,会产生覆盖;
追加:
<body>
<p id="js">JavaScrip</p>
<div id="list">
<p id="se">javaSE</p>
<p id="ee">javaEE</p>
<p id="me">javaME</p>
</div>
<script>
var js = document.getElementById("js");
var list = document.getElementById("list");
list.append(js)
</script>
7.5 操作表单(验证)
表单是什么?
DOM树
文本框 text
下拉框<select>
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…
表单的目的: 提交信息