JavaScript 语法笔记

JS前端笔记

1.如何在JS中创建数组，以及数组常见方法

//创建数组：
const numbers = new Array(1,2,3,4,5);


//js中一个数组可以存放的不同类型的语言

const fruits = ['apples','oranges',10,true];

fruits.push('mango');

fruits.unshift('strawberries');

fruits.pop();

Array.isArray(fruits);

fruits.indexOf('oranges');

2.如何创建一个person对象

const person = {
    firstName:'john',
    lastname:'doe',
    age:30,
    address:{
        street:'50 main st',
        city:'boston',
        state:'ma'
    }
}

const { firstName,lastName,address:{city}} = person;

//会直接将这一个属性加到person对象中去
person.email = 'yokna623660@163.com'

3.JS中定义对象数组，对象数组转Json、对象数组遍历、对象数组map、fielter

const todos = [
    {
        id:1,
        text:'take out trash',
        isCompleted:true
    }
    {
        id:2,
        text:'meet friends',
        isCompleted:true
    }
    {
        id:3,
        text:'sleep',
        isCompleted:true
    }
]
//对象数组

//将对象数组转换为json 
const todoJSON = JSON.stringify(todos);

//for循环
for(let i = 0;i < 10; i++){
    console.log(`for loop number :${i}`);
}

//遍历数组
for(let i = 0;i < todos.length; i++){
   console.log(todos[i].text);
}
for(let todo of todos){
    console.log(todo.text);
}

//foreach
todos.forEach(function(todo){
    console.log(todo.text);
});

//map 返回的是所有todos中的对象的text字段，是一个数组
const todoText = todos.map(function(todo){
   return todo.text;
});

//filter 返回的是isComplete == true的对象数组
const todoText = todos.filter(function(todo){
   return todo.isCompleted == true;
});

//filter + map 筛选完成了的任务
const todoText = todos.filter(function(todo){
   return todo.isCompleted == true;
}).map(function(todo){
   return todo.text; 
});

4.js中的 == 与 === 区别

const x = 10;

if(x == 10){
    console.log(x is 10);
}

const y = '10';
//“==”并不会关注数据类型 只关注值
if(y == 10){
    //仍然可以进到这里来
    console.log(y is 10);
}

if(y === 10){
    //不能进到这里来，因为前者是字符串，后者是数值
    console.log(y is 10);
}

5.js中选择分支结构的使用

const x = 10;

const color = x > 10 ? 'red' : 'blue';

switch(color){
    case 'red':
        console.log('red');
        break;
    case 'blue':
        console.log('blue');
        break;
    default:
        consloe.log('not red or blue');
        break;    
}

6.js定义一个函数，以及箭头函数的使用

//num1 = 1，num2 = 2是设置缺省值，在调用函数时，如果没有传入参数，就将1和2作为参数的值传进函数 
function addNums(num1 = 1,num2 = 2){
    return (num1+num2);
}

addNums();
addNums(5,4);

//使用箭头函数更好的表达出函数本身
const addNums = (num1 = 1,num2 = 2) => 
    num1 + num2

console.log(addNums(5,5));

7.定义一个类，用函数的形式定义

function Person(firstName,lastName,dob){
    this.firstName = firstName;
    this.lastName = lastName;
    this.dob = dob;
    this.getFullName = function(){
        return `${this.firstName} ${this.lastName}`;
    }
}

Person.prototype.getFullName = function(){
     return `${this.firstName} ${this.lastName}`;
}

const person1 = new Person('jhon','doe','2020');
const person2 = new Person('mary','smith','2021');

8.用OOP思想定义一个类

class Person{
 	constructor(firstName,lastName,dob){
        this.firstName = firstName;
        this.lastName = lastName;
        this.dob = dob;
    }
    
    getFullName(){
        return `${this.firstName} ${this.lastName}`;
    }
    
}

const person1 = new Person('jhon','doe','2020');
const person2 = new Person('mary','smith','2021');

9.如何获取html中的元素

一般我们使用querySelector()，或者querySelectorAll()来获取到符合查询条件的html元素

const form = document.getElementById('id_name');
console.log(form); 

//单一选择 如果有多个h1只会选择第一个
console.log(document.querySelector('h1'));
//选择类是item的元素
console.log(document.querySelector('.item'));

//多元素
//选择所有item类的元素
const item = document.querySelectAll('.item');

10.对获取的html元素进行遍历

const items  = document.querySelectorAll('.item');

items.forEach((item) => console.log(item));

11.如何进行用户交互

1.获取到html中的元素

2.对元素调用各种函数，例如remove函数，可以把这个元素从html中移除，这样在页面中就不会显示

3.也可以通过innerHTML方法，将我们要需要加入的html元素添加到页面中去。

4.也可以根据我们获取到的html元素，取到style属性，对style属性进行修改，就可以改变元素的css的样式。

const ul = document.querySelectorAll('.item');

ul.remove();
ul.lastElementChild.remove();
ul.firstElementChild.textContent = 'hello';
ul.Children[1].innerText = 'brad';
ul.lastElementChildren.innerHTML = '<h1>hello<h1>';
 
const btn = document.querySelector('.btn');
btn.style.background = 'red';

12.事件监听

1.获取到html元素

2.对这个元素事件监听，调用add.EventListener(‘系统自定的监听类型’,函数)

const btn = document.querySelector('.btn');

//为一个事件绑定动作
btn.addEventListener('click',(e) =>{
    //调用此方法可以阻止默认行为
    e.preventDefault();
    console.log('click');
    //获取到事件作用的元素的id   
    console.log(e.target.id);
})

13.点击事件发生时，我们动态的修改页面的样式

const btn = document.querySelector('.btn');

//为一个事件绑定动作
btn.addEventListener('click',(e) =>{
    document.querySelector('#my-form').style.background = '#ccc';
    
 //把bg-dark的css添加到body中去   
    documenr.querySelector('body').classList.add('bg-dark');
})

14.简单的表单验证

const myForm = document.querySelector('#myform');
const nameInput = document.querySelector('#name');

myForm.addEventListener('submit',onSubmit);

function onSubmit(e){
    e.preventDefault();
    
    if(nameInput.value === '' || myForm.value ==='')
{
    msg.classList.add('error');
    msg.innerHTML = 'Please enter all fields';
    
    //设置我们变化的过期时间
    setTimeout(() => msg.remove,3000);
    
}else{
    const li = documenr.createElement('li');
    li.appendChild(document.createTextNode(`${nameInput.value}:${myForm.value}`));

	userList.appendChild(li);
    
}

}