JavaScript_ study notes

1. Data Type

1.1 String

1.2 Array

1. length

arr.length

Note: If you assign a value to arr.length, the size of the array will change. If the value is too small, the element will be lost;

2. indixOf, get the subscript index through the element

arr.indexOf(2)

3. slice() intercepts part of Array and returns a new array, similar to subString in String
4. push(), pop() tail

push():// 压入尾部
pop(); // 弹出尾部的一个元素

5. unshift() ,shift() head

unshift(); // 压入到头部
shift();   //  弹出头部的一个元素

6. Sort()
7. Element reverse();

arr.reverse();

8. concat() splicing
   Note: concat() does not modify the array, but returns a new array
9. The join operator
   prints the array and uses a specific string to join
10. Multidimensional Arrays

1.3 Target

Several key-value pairs
are objects in js, which {....}represent an object. The key-value pairs describe attributes xx:xx. Each attribute is separated by a comma
JavaScript. All the keys without a comma after the last attribute are strings, and the value is any object. .
eg:

var person = {
    
    person:"lisi",age:22,address:"天津滨海"}

1. Object assignment

person.name="zhangsan"

2. Use a non-existent object property, no error will be reported, just undefined;
3. Dynamic deletion properties

delete person.name
true

4. Dynamically add attributes, just add values ​​to new attributes directly

person.phone=1333312110;

5. Determine whether the attribute value is in this object

'age' in person
true

6. Determine whether a property is owned by an object itself hasOwnProperty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

1.4 Map and Set

ES6 only supports

1. Map
2. Set: Unordered and non-repeating set

var set = new Set();
set.add(2);
set.delete(1);
set.has(2);   // 是否包含某个元素

2. Process control

1. if judgment
2. while loop
3. for loop
4. forEach loop

   var arr=[2,3,5,23,0,23];
    arr.forEach(function (value) {
    
    
        console.log(value);
    });

5. forIn loop

 var arr=[2,3,5,23,0,23,"hah"];
    for (let index in arr) {
    
    
        console.log(arr[index])
    }

6. forOf loop

var arr=[2,3,5,23,0,23,"hah"];
    for (let arrElement of arr) {
    
    
        console.log(arrElement)
    }

3. Functions

3.1 Function related

arguments It is a free keyword given by JS, which represents all the parameters passed in, and is an array

Question: argumentsAll parameters are included. Sometimes we want to use redundant parameters for additional operations, and we need to exclude existing parameters;
ES6 introduces a new feature to get all parameters except the defined parameters

function aa(a,b,...rest){
    
    
	console.log(a);
	console.log(b);
	console.log(rest);
}

Note: The rest parameter can only be written at the end and must be marked with...;

 function  a(a,b,c,...rest) {
    
    
        console.log('a===='+a);
        console.log('b===='+b);
        console.log('c===='+c);
        console.log('abc===='+rest);
    }

3.2 The scope of variables

In javascript, var defines the variable actually by scope.
Assuming that it is declared in the function body, it cannot be used outside the function;
if even a function uses the same variable name, as long as it is inside the function, there will be no conflict;
internal Functions can access external members, but internal members cannot be used externally;
Specification: All variable definitions are placed at the head of the function, don't mess around, to facilitate code maintenance;
By default, all global variables will be automatically bound under the windows object ;
JavaScript actually has only one global scope, any variable (a function can also be regarded as a variable), if it is not found in the scope of the function, it will look out, if it is not found in the global scope, an error will be reported RefrenceError;
specification : because All our global variables will be bound to our window. If different js files use the same global variables, there will be conflicts, so you need to define unique global variables;

 var qun = {
    
    };  // 全局变量
    qun.name='zhansan';
    qun.add=function (a,b) {
    
    
        return a+b;
    }

Put all your own code into the unique space name defined by yourself to reduce the problem of global naming conflicts

3.3 local scope

letKeywords in ES6 to solve the problem of local scope conflicts

3.4 Constants

Before ES6, define constants: only variables named with all capital letters are constants; this is just a convention;
the constant keyword is introduced in ES6const

4. Internal Objects

1. Standard object

 typeof 123
"number"
typeof "we"
"string"
typeof []
"object"
typeof {
    
    }
"object"
typeof NaN
"number"
typeof true
"boolean"
typeof Math.abs
"function"
typeof undefined
"undefined"

2. Date
3. JSON

  var user={
    
    
        name:"zhangsan",
        age:3,
        sex:'男'
    }
    console.log(user);
    //对象转化为json字符串
    var jsonUser =JSON.stringify(user);
    //json 字符串转化为对象,参数为json字符串
    var obj = JSON.parse(jsonUser);

• The difference between JSON and JS objects

var obj ={
    
    name: "zhangsan", age: 3, sex: "男"}   ;
var json='{"name":"zhangsan","age":3,"sex":"男"}'    ;

5. Object Oriented Programming

5.1 Prototype

 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 inheritance

classThe keywords were introduced in ES6
before :

function Student(name){
    
    
            this.name=name;
        }
        // 给student新增一个方法
        Student.prototype.hello=function() {
    
    
            alert('hello')
        }

After ES6 :

1. Define a class, attribute, method

  // ES6之后==================
        // 定义一个学生的类
        class Student{
    
    
            constructor(name){
    
    
                this.name=name;
            }
            hello(){
    
    
                alert("hello")
            }
        }
        var user = new Student("xiaoming");
        user.hello();

2. inherit
3. Prototype chain

6. Manipulate BOM objects

BOM: Browser Object Model

1 window Browser window

2 navigator encapsulates browser information

3 screen represents the screen

4 location

host:
href: 
protocol:"https:"    // 协议
reload: reload()  //刷新网页
location.assign('https://xxx')  

5 document current page

6 history The history of the browser

7. Manipulate DOM objects

DOM: Document Object Model

7.1 Get the dom node

document.getElementById();
document.getElementsByClassName()
document.getElementsByTagName()
...

7.2 Update node

<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 Delete node

Steps to delete a node: get the parent node first, and delete yourself through the parent node

<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>

Note: When deleting multiple nodes, children change all the time, so be careful when deleting nodes;

7.4 Insert node

We have obtained a certain Dom node, assuming this dom node is empty, we can add an element through innerHTML, but this DOM node already has an element, we can't do this, it will be overwritten;
append:

<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 Operation form (validation)

What form is?
The DOM tree
text box text
drop-down box <select>
radio button radio
checkbox checkbox
hidden fields hidden
password box password
...
the purpose of the form: submit information

7.6 Submit form