01-Modern Javascript Basic

变量声明

• let
• const 固定不能赋予新值，且必须初始化
• var (之前声明变量的方式)

assign variable

stackoverflow: assign multiple variables to the same value in Javascript

let a = true;
let b = true
//-------------------
let a = true,b = true;
//-------------------
let a = b = true

Data type

String

String basic

// String 可用单引号，也可用双引号
let name = 'Q10Viking'
let email = "1193094618@qq.com"
// String concatenation
console.log(name+" "+email);
// getting characters
console.log(name[0])
// String length
console.log(name.length)
// String methods
console.log(email.toUpperCase())
let rs = name.toLowerCase()
console.log(rs)

String Methods

let email = "cau1403090523@gmail.com"

let lastIndex = email.lastIndexOf('a')
let firstIndex = email.indexOf('a')
// 切取出字符串：[start,end)
let res = email.slice(firstIndex,lastIndex)
// 切取出字符串：start开始，然后是length长度
res = email.substr(firstIndex,10)
// 提换字符
console.log(email.replace('a','A'))
console.log(email)

// 注意以上操作都不会改变原始的email值

Number

• Nan Not a number

let likes = 10;
const PI = 3.14;
// 平方 
console.log(likes*PI**2)
// 简便的运算方式
likes += 10;
likes **= 2;
console.log(likes); //400

// Nan: Not a Number
console.log(10 / 'hel');

Boolean(Nan)会返回false,所以我们可以使用它，当数据可以转化为数字时，我们转化为数字，如果不能，那么我们就不转化保持原有的类型

Number(val) ? Number(val) : val

vue中子组件更新父组件的例子

但是值得注意的如果val是空字符串，那么Number("")得到的值是0,这是我们不需要的，所以需要进一步优化,用到了isNaN函数

 if (val === '') {
      val = null
    } else {
      val = isNaN(Number(val)) ? val : Number(val)
    }

Template String

• Template String 能够很好的处理换行以及数据填充

let title = "Best Morden Javascript of 2020"
let author = "Q10Viking",likes = 100

// concatenation way
let res = "The blog call "+title+" by "+author+" has "+likes+" likes";
console.log(res);

// template String
res = `The blog call ${title} by ${author} has ${likes} likes`;
console.log(res);

// html template
let html = `
    <h2>${title}</h2>
    <span>${author}</span>
    <p>The blog has ${likes} likes</p>
`

console.log(html);

Object-complex Data Structures

Array

// 数组可以有不同类型的数据
let container = ["Q10","learn",200]

// 常用的方法
// join together
let res = container.join(' ')

// indexOf
console.log(container.indexOf('learn'))

// concat another array,return a new array,origin array not change
let newArr = container.concat(['morden','JS'])
console.log(newArr)

//  push 可以添加多个值到end，["Q10", "learn", 200, "morden", "JS", "pushItem", 10]
newArr.push(...['pushItem',10])
console.log(newArr)

// pop from array end and return the end item
console.log(newArr.pop())

undefined vs null

let age;
// age 没有声明值，浏览器会赋值给它undefined
// undefined NaN "age is undefined"
console.log(age,age+3,`age is ${age}`)

age = null
// null 3 "age is null"
console.log(age,age+3,`age is ${age}`)

Loose vs Strict comparison

let year = 2020
// loose comparison (different types can be equal)
console.log(year == 2020) // true
console.log(year == '2020') // true
console.log(year != 2020) // false
console.log(year != '2020') // false

// strict comparison (different types cannot be equal)
console.log(year === 2020) // true
console.log(year === '2020') // false
console.log(year !== 2020) // false
console.log(year !== '2020') // true

type conversion

1. typeof keyword

// type conversion
let score = "100"
// string 1001
console.log(typeof score,score+1);
score = Number(score)
//  number 101
console.log(typeof score,score+1);

Control Flow

Condition flow

Loops Flow

Logical Operators

1. OR ||
2. AND &&
3. NOT !

switch

1. 注意switch执行的是严格比较，不同类型的比较都是不相等的

let grade = '50'
// strict comparison
switch (grade) {
    case 'A':
        console.log('You got A');
        break;
    case 'B':
        console.log('You got B');
        break;
    case 50:
        console.log('You got 50 grade');
        break;
    default:
        console.log('Not a valid grade');
}
// output: 'Not a valid grade'

variable in block scope

// variables of block scope

let book="Thinking In Java"
// OK
if(true){
    console.log(book);
}
// OK
if (true) {
    let book = "Spring in Action"
    console.log(book);
}

// error: Uncaught ReferenceError: Cannot access 'book' before initialization
if(true){
    console.log(book)
    let book = "Spring in Action"
    console.log(book);
}

var ignore scope

这是var的优势呢，还是缺陷呢

for (var i=0;i<3;i++);
// 3
console.log(i) 

for (let j = 0; j < 3; j++);
// Uncaught ReferenceError: j is not defined
console.log(j);