javaScript初步学习

• 定义变量的三种方式
  var: 全局作用域
  let: 局部作用域 可以被重新赋值
  const: 常量，需要设置初值，不能被重新赋值
• 数据类型
  String :const name = 'kobe'
  Numbers const age = 30/const rating = 4.5
  Boolean const isCool = true
  null const x = null
  undefined const y = undefined/let z
  object
  symbol
• String的属性和方法

String - 字符串
const s = 'hello World'
获取字符串长度：
console.log(s.length)
大写：
console.log(s.toUpperCase())
小写：
console.log(s.toLowerCase())
截取（起始位置，截至位置）：
console.log(s.substring(0,5))
分割(分割依据):
console.log(s.split(''))

Arrays - 包含多个值的变量
创建方式1：
const numbers = new Array(1,2,3,4,5);
console.log(numbers)
创建方式2：
const fruits = ['apples',oranges,'pears',10,true];
console.log(fruits);
访问其中一个：
console.log(fruits[1]);
添加：
fruits[3] = 'grapes';
添加到末尾：
fruits.push('mangos');
添加到开头:
fruits.unshift('strawberries');
去掉最后一项:
fruits.pop();
检查是否是数组:
console.log(Array.isArray(fruits));
得到某个值的索引:
console.log(fruits.indexOf('orangles'))；

object - 对象类型(键值对)
const person = {
  firstName: 'Kobe',
  lastName:'Bryant',
  age:18,
  hobbies:['basketball','music','movies'],
  对象中可以嵌套:
  address:{
     street: '50 main st',
     city: 'Los Angeles',
     state:'MA'
     }
  }
  
console.log(person);
访问单个值：
console.log(person.firstNmae,person.lastName);
console.log(person.hobbies[1],person.address.city);

解构赋值(从person对象中取出)：
const {firstName,lastName,address:{city}} = person;
console.log(firstName);
console.log(city);

添加属性:
person.email = 'kobe@gmail.com';
console.log(person);

Arrays of objects 数组对象

const todos = [
{
id:1,
text:'Take out trash',
isCompleted: true
},

{
id:2,
text:'Meeting with Boos',
isCompleted: true
},

{
id:3,
text:'Take out trash',
isCompleted: true
},

];
console.log(todos);
console.log(todos[1].text)

JSON向服务器发送的数据
const todoJSON = JSON.Stringify(todos);
console.log(todoJSON)

Loop循环
For
for (let i =0;i < 10;i++){
console.log('For Loop Number: ${i}');
}

while
let i = 0;
while(i < 10){
console.log('While Loop Number: ${i}');
i++;
}

循环数组
for (let i =0;i < todos.length;i++){
console.log('todos[i].text');
}

for(let todo of todos){
console.log(todo.id);
}

高阶数组方法
forEach(loop),,map(可以让我们从数组中创建新数组），filter(可以根据条件创建新数组)
forEach
todos.forEach(function(todo){
  console.log(todo.id);
});

map(返回一个数组)
const todoText = todos.map(function(todo){
   return todo.text;
});
console.log(todoText);

filter
const todoCompleted = todos.filter(function(todo){
  return todo.isCompleted === true;
}).map(function(todo){
  return todo.text
  })
console.log(todoCompleted );

条件语句
if
const x = 10;
if(x == 10){
   console.log('x is 10')
}

double equal（==）不会关注数值类型，只关注值
const x = ‘10’;
if(x == 10){
   console.log('x is 10')
}

triple equal（===）会关注数值类型
const x = ‘10’;
if(x === 10){
   console.log('x is 10');
}
else{
console.log('x is not10');
}

else/else if
const x = 5;
if(x === 10){
   console.log('x is 10');
}
else if(x > 10){
console.log('x is greater than 10');
}
else{
console.log('x is less than 10');
}

or(||)
const x = 4;
const y = 11;
if(x > 5 || y > 10){
   console.log('x is more than 5 or y is more than 10');
}

and(&&)
const x = 6;
const y = 11;
if(x > 5 && y > 10){
   console.log('x is more than 5 or y is more than 10');
}

三元操作符（ternary operator)
const x = 10;

const color = x > 10 ?(?代表than) 'red' : (:代表else) 'blue';
(if x > 10 color =‘ red' else color = 'blue')
console.log(color)

switch
const x = 10;

const color = x > 10 ?(?代表than) 'red' : (:代表else) 'blue';

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

面向对象基础

function（函数）

function addNums(num1,num2){
   console.log(num1 + num2);
}
addNums();
addNums(5,4);

添加默认值
function addNums(num1 = 1,num2 = 1){
   console.log(num1 + num2);
}
addNums();

添加返回值
function addNums(num1 = 1,num2 = 1){
   return num1 + num2;
}
console.log(addNums(5,5));

箭头函数
只有一个表达式：
const addNums = (num1 = 1 , num2 = 1) =>  console.log(num1 + num2);
addNums(5,5);

想要return什么则：
（只有一行时不需要写return，写了会报错）
const addNums = (num1 = 1 , num2 = 1) =>  num1 + num2;
console.log(addNums(5,5));

forEach和箭头函数
todos.forEach((todo) => console.log(todo));

//通过实例化函数来实例化对象
function Person(firstName, lastName, dob) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.dob = new Date(dob);
    this.getBirthYear = function() {
        return this.dob.getFullYear();
    }
    this.getFullName = function() {
        return `${this.firstName} ${this.lastName}`;
    }
}

//实例化对象
const person1 = new Person('John', 'Doe', '4-3-1990');
const person2 = new Person('Mary', 'Smith', '3-4-1980');

console.log(person1);
console.log(person2.dob);
console.log(person2.dob.getFullYear());
console.log(person1.getBirthYear());
console.log(person1.getFullName());

//通过实例化函数来实例化对象
function Person(firstName, lastName, dob) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.dob = new Date(dob);
}


//原型
Person.prototype.getBirthYear = function() {
    return this.dob.getFullYear();
}

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

//实例化对象
const person1 = new Person('John', 'Doe', '4-3-1990');
const person2 = new Person('Mary', 'Smith', '3-4-1980');

console.log(person1);
console.log(person1.getBirthYear());
console.log(person2.getFullName());

//类
class Person {
    constructor(firstName, lastName, dob) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.dob = new Date(dob);
    }

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

    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

//实例化对象
const person1 = new Person('John', 'Doe', '4-3-1990');
const person2 = new Person('Mary', 'Smith', '3-4-1980');

console.log(person1);
console.log(person1.getBirthYear());
console.log(person1.getFullName());

DOM

//单元素选择期
document.getElementById('id');

document.querySelector('id')
document.querySelector('.class')
document.querySelector('tag')


//多元素选择器
document.getElementsByClassName('class')

document.querySelectorAll('.class')
document.querySelectorAll('tag')

//遍历
const items = document.querySelectorAll('.class');

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