[JavaScript知识库]learn js

1.声明变量

let/const

let :可变
const:不可变

2.数组

//Array 数组，可以是混合数据类型

const fruits = ['oranges','apple',true,2];

console.log(fruits)

const fruits = ['oranges','apple'];
fruits[2] = 'mangos'
fruits.push('banana')
fruits.unshift('pears')
fruits.pop()
console.log(fruits)

3.对象

//对象

const person = {
    firstName:'jhon',
    age : 30,
    hobbies:['music','movie']
}

console.log(person.firstName,person.age)

//解构 es6新特性

const {firstName,hobbies} = person

console.log(hobbies[0])

4.数组对象

//json

const todos = [
    {
        id:1,
        text:"Take out crash",
        isCompleted:false
    },
    {
        id:2,
        text:"Meeting with boss",
        isCompleted:false
    },
    {
        id:3,
        text:"Dentist appt",
        isCompleted:false
    }
];

const toJson = JSON.stringify(todos);
console.log(toJson)

//遍历
todos.forEach(function(todo){
    console.log(todo.text)
})

5 == ===

== 比价的数值是否相等，===比较类型和数值

//  == ===

const x = "10"

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

6 函数

//  函数
function addNum(num1,num2){
   return num1+num2;
}

console.log(addNum(1,2))

7.对象

// 对象

function Person(firstName,age,dob){
    this.firstName = firstName
    this.age = age
    this.dob = new Date(dob)

    this.getBirthYear = function(){
        return this.dob.getFullYear();
    }
}

const person1 = new Person("mary",30,"4-30-1991")

console.log(person1.getBirthYear())

8. 类

// 类

class Person{
    constructor(firstName,age,dob){
        this.firstName = firstName
        this.age = age
        this.dob = new Date(dob)
    }

    getBirthYear(){
        return this.dob.getFullYear();
    }
}

const person1 = new Person("mary",30,"4-30-1991")

console.log(person1.getBirthYear())

9.DOM (doncument)

// console.log(window)

const ul = document.querySelector('.items')

console.log(ul)

// ul.remove()
ul.firstElementChild.textContent = 'hello'

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

btn.style.background = 'red'

参考

视频链接:
https://www.bilibili.com/video/BV1jE411T7ya?share_source=copy_web

html代码参考链接：
https://embed.plnkr.co/plunk/8ujYdL1BxZftGoS4Cf14

工具：VsCode
小插件：liveserver