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
…
表单的目的: 提交信息

7.6 提交表单

JavaScript_学习笔记相关推荐

JavaScript学习笔记02【基础——对象（Function、Array、Date、Math）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记03【基础——对象（RegExp、Global）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...
容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
2020年Yann Lecun深度学习笔记（下）
2020年Yann Lecun深度学习笔记(下)
2020年Yann Lecun深度学习笔记（上）
2020年Yann Lecun深度学习笔记(上)
知识图谱学习笔记（1）
知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...

JavaScript_学习笔记