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

JavaScript_学习笔记