JS速成课笔记

JS速成课笔记

视频来自于YouTube，FishC translate

Let's jump in

建议使用VS Code -> live server 插件，自动重载html页面，注意live server打开文件必须在一个文件夹中

/* in script file its no need to put script tags or 
anything like that */
//alert('hello word');
// use console to debug web page
// also can scan MDN to find any method for JavaScript such as MDN console
console.log('hello world')
console.error('this is an error')
console.warn('this is a warning')
// let variable can change but const not
let age = 30;
age=31;
//const age = 30;
console.log(age);

数据类型

// String, Numbers, Boolean, null, undefined, Symbol(ES6 add)
// ';' is not necessary
const name = 'John';
const age = 30;
//In JS there's no float or decimal data type,its just a number
const rating = 4.5;
const isCool = true;
const x = null;//object
const y = undefined;
let z; //undefined 
console.log(typeof y)

字符串

简单介绍了字符串的拼接，字符串的长度获取及大小写转换等，与Java语法类似

const name = 'John';
const age = 30;

//Concatenation 字符串拼接
console.log('My name is ' + name + ' and age is '+ age)
// focus: input ` to use ${var} 
const hello = `My name is ${name} and age is ${age}`;
console.log(hello)
const s = 'hello world';
// programming like java
console.log(s.length);
console.log(s.toUpperCase(),s.toLowerCase());
console.log(s.substring(0, 5));
//including space , split everyone letter
console.log(s.split(''));

数组（Array）

简单介绍了字符串与数组之间的转换（typeof类型注意）

数组的插入，索引，类型判断等，与python类似

const s1 = 'technology, computer, it, code';
console.log(typeof s1.split(', '));//object
// new one object
// javascript array can include diff type data
const fruit = ['apples','oranges','pears'];
// push -> insert end unshift -> insert start
fruit.push('mangos');
fruit.unshift('strawberries');
const numbers = new Array(1,2,3,4);
console.log(fruit,numbers);
// isinstance(var, object)
console.log(Array.isArray(fruit));
// like python find -> if not exist return -1 else return index
console.log(fruit.indexOf('aa'));
console.log(fruit.join(','));

类字典处理（dict）

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    hobbies: ['music', 'movies', 'sport'],
    address: {
        street: '50 main st',
        city: 'Boston',
        state: 'MA'
    }
}
//alert(person) // show [object Object]
console.log(person);
console.log(person.firstName);
// its pulling these out of this person object(ES6)
const {firstName, lastName, address:{city}} = person;
console.log(city);
// directly add properties
person.email = 'john@email.com';

const todos = [
    {
        id: 1,
        text: 'Take out trash',
        isCompleted: true
    },
    {
        id: 2,
        text: 'Meeting with Boss',
        isCompleted: true
    },
    {
        id: 3,
        text: 'Dentist appt',
        isCompleted: false
    }
];
console.log(todos)
// translate its to JSON
const todoJSON = JSON.stringify(todos)
console.log(todoJSON)

高阶用法（map，filter等）

// iteration arrays(like python) -> for each, map, filter 
todos.forEach(function(todo){
    console.log(todo.text);
});
// filter to choose useful item fit conditions,and map 
// to do something for item which been choose
const todoCompleted = todos.filter(function(todo){
    // '===' -> value and type both must be same 
    // '==' -> only value be same
    return todo.isCompleted === true;
}).map(function(todo){
    return todo.text;
})
console.log(todoCompleted);

条件判断与循环

条件判断

const x = 10;
const y = 4;
// conditions just like C++
// 'or' use || , 'and' use &&
if (x > 5 || y < 5) {
    console.log('x is greater than 5 or y is more than 10');
} else if (x > 10) {
    console.log('x is bigger than 10');
} else {
    console.log('x is less than 10');
};
// 三元运算符
const x = 10;
// use like C++ or java '?' means then,':' means else
const color = x >10 ? 'red' : 'blue'
console.log(color)

Switch与Case

// switch use like C++ or java but focus python without switch
switch(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;
}

For循环与While循环的简单使用

// sample for loop,like C++ or C
for (let i = 0; i < 10; i++) {
    console.log(`for loop number:${i}`);
}
let i = 0;
while(i<10){
    console.log(`while Loop Number: ${i}`);
    //warning ;if not with 'i++' your computer(at least browser ) may be died
    i++;
}

Function简析

function addNums(num1, num2) {
    console.log(num1 + num2);
}
// if params num is less->NaN
// '+' can be use in difference type data
addNums(1111, 'aa');
// use arrow function(ES6) 
// even not have to use return or '{}' function can live in one row
const addNums1 = (numA, numB) => numA + numB
console.log(addNums1(1,4))

面向对象简析

// object-oriented
// constructor function
function Person(firstName = 'aa', lastName, dob) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.dob = new Date(dob);
}
// instantiate object like java
const person1 = new Person('john', 'Doe', '4-3-2001');
const person2 = new Person('Mary', 'Smith', '3-6-1990');
console.log(person1);
console.log(person2.dob.getFullYear());