JavaScript基础篇1（Mosh的视频）

chap1 welcome

1. seperation of concerns: 分离html-关于内容 和 JavaScript-关于行为（浏览器动作、鼠标移过某个元素时应该怎样）
2. node.js

chap2 basics

变量

1. 命名：不能是关键字、要有意义、不能以数字开头、不能包含空格和减号（多个单词拼在一起firstName）、大小写敏感
2. 一行定义一个变量
3. 没有初始化的变量类型：undefined

常量

不想重新赋值

值类型（value types）数据

• String
• Number
  NaN表示不是一个数字，但是它的类型是number, 但它是一个不能用来做运算的数字
  
• Boolean
• undefined 是一个类型，同时是一个值let firstName = undefined;，firstName类型也是undefined
• null 清空一个变量的值,let selectedColor = null; selectedColor类型为object
• Symbol（ES6新增）

引用类型（reference types）数据

• Object
• Array
• Function

动态类型

静态语言：一个变量被声明，类型不能再更改，string name = ‘princess’;
动态语言：变量类型可以在运行时改变，基于赋值给它的数据，let name = ‘princess’;

• 所有的数都是数字类型，不分浮点数和整数

对象objects

let person = {//对象包含姓名、年龄两个属性
    name:'appple', //一个键值对
    age: 30
};

//两种访问方法：dot notation
person.name = 'banana';

//中括号：bracket notation
person['name'] = 'orange';

console.log(person.name);

中括号访问好处：直到运行时都不知道访问的属性名是什么，在运行时计算出来，eg.客户端，用户可以选择访问的属性目标。
输出结果一样：

let selection = 'name';
person[selection] = 'orange';

console.log(person.name);

数组Arrays

用来保存一组数据（a list of items）的结构

• 数组的长度动态、可变，数组中元素类型也是动态
• 技术上说，数组是一个对象，每创建一个数组，继承了一些属性（原型）

let selectedColors = ['red', 'blue'];
selectedColors[2] = 'green';
console.log(selectedColors.length);

函数Functions

功能：执行一个任务performing a task 或 计算一些值calculating a value

function greet(name, lastName){
    console.log('Hello ' + name + ' ' + lastName);
}

greet('John','Smith');

Types of Functions

函数是一组语句（a set of statements）

function square(number){
    return number * number;
}

console.log(square(2));

chap3 oprators

算数操作符

console.log(x ** y);//x的y次方

赋值操作符

比较操作符

//关系运算符relational
console.log(x > 0 );
console.log(x >= 10 );
console.log(x < 10 );
console.log(x <= 10 );

//equality oprators 
console.log(x === 10); //全等于
console.log(x !== 10); //不等于

equality oprators

stricte equality( ===) 比较的结果更加准确
lose equality(= =)抽象相等：两边不关心是否同类型，如果类型不一样，它会将右边的类型转为左边的

//strict equality严格相等（符号两边的type + value 都要完全一样）
console.log(1 === 1);
//lose equality抽象相等（只检查value 相等）
console.log(1 == 1);  //输出true
console.log('1' == 1); //true
console.log(true == 1); //true

三元运算符

//如果一个顾客有100点就是金牌客户，否则就是银牌客户
let points = 110;
let type = points > 100 ? 'gold' : 'silver';
console.log(type);

逻辑（logical）操作符

1、 与 &&、或 ||、非 !
2、在非布尔值中进行逻辑运算
如下，计算表达式时，会查看每个参数，如果参数不是一个逻辑值，就会尝试将值转换为一个类真或者类假值

• Falsy 类假 不是真的布尔类型的假值(false)
• 可以是undefined, null, 0 , false, ‘’ 空字符串, NaN 非数字
• 除了以上，其他都是—> Truthy

3、短路（就近原则）short-circuiting

false || 1 || 1
1 //结果

实例：

let userColor = 'red';
let defaultColor = 'blue';
let currentColor = userColor || defaultColor; //用户选择的颜色或者默认颜色，如果没选就使用默认颜色

console.log(currentColor);

位元(bitwise)操作符

位元的或、与运算： | 、&
实例：假设一个接入控制系统，用户有三种权限：read, write, execute

//read, write, execute
//00000100, 00000110, 00000111

const readPermission = 4; //转换为十进制
const writePermission = 2; //00000010
const executePermission = 1; //00000001

let myPermission = 0;
//使用位或可以添加权限
myPermission = myPermission | readPermission | writePermission;
//使用位与可以查询权限
let message = (myPermission & readPermission) ? 'yes' : 'no';
console.log(message);

运算符优先级

本章练习-swapping variables

chap4 Flow Control

条件语句：

1. if…else（用的更多）
2. switch…case
   拿多个情况与判断条件变量比较

let role = 'guest'; //代表用户当前的角色

switch(role){
    case 'guest':
        console.log('Guest User');
        break;
    //版主
    case 'moderator':
        console.log('Moderator User');
        break;

    default:
        console.log('Unknown User');
}

等同于以下：

if(role === 'guest') console.log('Guest');
else if (role === 'moderator') console.log('moederator');
else console.log('Unknown User');

循环Loops

1. for
2. while
   先判断再循环
3. do…while（用得少）
   先循环再判断，永远至少执行一次循环体的内容，就算判断的条件不满足

let i = 0;
do{
    if(i % 2 !== 0) console.log(i);
    i++;
}while(i <= 5);

• 无限循环（死循环）
  忘记写自增++，或者 while( true)

---

5. for…in
   遍历一个对象的所有属性

const person = {
    name: 'Mark',
    age: 30
};

for(let key in person)
    console.log(key, person[key]);

const colors = ['red', 'green', 'blue'];

//每次迭代过程中index 会被赋值为数组元素的序号
for(let index in colors)
    console.log(index, colors[index]);

7. for…of
   遍历一个数组中的元素

//迭代变量color直接表示一个元素
for(let color of colors)
    console.log(color);

• break(常用）：终止循环
• continue：跳过本次循环后面的语句，进入下一次循环

Exercise

1. 求两个函数的最大值

let number = max(1, 2);
console.log(number);


function max(a, b){
    if (a > b)  return a;
    else    return b;   //优化:else可以去掉
}

优化法二：return (a > b) ? a : b;

2、完成函数

console.log(isLandScape(700, 600));

function isLandScape(width, height){
    return (width > height) ? true : false; //优化：不用刻意返回真和假
}

优化：直接返回表达式，因为要的是布尔值，return (width > height)；

3、FizzBuzz

const output = fizzBuzz(false);
console.log(output);

//用什么判断是不是数字？typeof
function fizzBuzz(input) {
    if(typeof input !== 'number')
        return NaN;
    if((input % 5 === 0) && (input % 3 === 0))  return 'FizzBuzz';

    if(input % 3 === 0)  return 'Fizz';
    if(input % 5 === 0)  return 'Buzz';
    return input;
}   

4、完成速度函数，每超过5公里就给司机扣一分
用到js的内置函数：Math.floor(1.3)

checkSpeed(130);

// function checkSpeed(speed){ 
//     let count = Math.floor((speed - 70) / 5);//<70的时候用不着计算count的
//     if (count >= 12) console.log('suspend');
//     else if (speed <= 74) console.log('ok'); //不要在程序中使用神秘数字，如70，使用常量或者变量
//     else console.log('point:' + count);
// }

function checkSpeed(speed){ 
   const speedLimit = 70;
   const kmPerPoint = 5;
   if( speed < speedLimit + kmPerPoint){
        console.log('ok');
        return; //直接终止函数，后面的代码都不会运行
   }
       
//    else{ 使用else产生了缩进，使得需要左右滚动才能看全，为了简洁 ->改进
    const points = Math.floor((speed - speedLimit) / kmPerPoint);//使用常量，防止意外地修改了这个值（修改时会报错）
    if (points >= 12) 
        console.log('License suspended');
    else 
        console.log('Points', points);
 //   }
}

5、for循环显示奇偶数

showNumbers(10);

function showNumbers(limit){
    for(let i = 0; i <= limit; i++){
        // if(i % 2 === 0) console.log(i,'EVEN');
        // else console.log(i,'ODD');

        //避免使用两次打印
        const message = (i % 2 === 0) ? 'EVEN' : 'ODD';
        console.log(i, message);
    }
}

6、输入一个数组，计数类真值Truthy

• 如果不是布尔值，JS会自动尝试转换为类真或类假，若为类真，计数增加

所以不用去比较每个类假值，直接if(value)

const array = [null,2,3,0,false];
console.log(countTruthy(array));

function countTruthy(array){
    let count = 0;
    for(let value of array){
     //   if(value !== undefined && value !== null && value !== '' && value !== false && value !== 0 && value !== NaN)
        if(value)//如果不是布尔值，JS会自动尝试转换为类真或类假，若为类真，计数增加
            count++;
    }
    return count;
}

7、显示对象当中的所有string 属性
if(typeof obj[key] === 'string')

const movie = {
    title:'a',
    releaseYear: 2018,
    rating: 4.5,
    director: 'b'
};

showProperties(movie);

function showProperties(obj){
    for(let key in obj){ //每次循环，key都会得到一个属性名（title...之类的）
     if(typeof obj[key] === 'string') //中括号得到对象的属性,如果属性的值的类型是字符串，输出
        console.log(key, obj[key]);
    }
}

8、返回limit之内的3和5的倍数的数字的和

console.log(sum(10));

function sum(limit){
    let sum = 0;
    for(let i = 0; i <= limit; i++){
        if(i % 3 === 0 || i % 5 === 0)
            sum += i;
    }//高度相关的代码应该靠在一起，与别的分开

    return sum;
}

9、计算分数的平均值，并输出不同分数段的等级

• 数组长度：marks.length
• 单一职责原则:一个函数完成一个功能

const marks = [80, 80, 50];

console.log(calculateGrade(marks));

function calculateGrade(marks){
    let sum = 0;
    for(let value of marks)
        sum += value;
    let average = sum / marks.length;
    
    if(average < 60) return 'F';//比起用0<=average && average<=59,这样更简洁
    if(average < 70) return 'D';//走到这说明>=60
    if(average < 80) return 'C';
    if(average < 90) return 'B';
    return 'A';
}

10、每行输出与行数相等的‘*’

• 字符可以用加号连接变长pattern += '*';

showStars(5);

function showStars(rows){
    for(let row = 1; row <= rows; row++){
        let pattern = '';
        for(let j = 0; j < row; j++)
             pattern += '*';  
        console.log(pattern);
    }
}

11、求出limit之内的所有质数

showPrimes(10);

function showPrimes(limit){
    for(let number = 2; number <= limit; number++){

        let isPrime = true;
        for(let factor = 2; factor < number; factor++){
            if(number % factor === 0){
                isPrime = false;
                break;     
            }
         }
            
       if(isPrime) console.log(number);     
    }
}

单一职责原则优化：
遇到嵌套循环，就说明应该可以将内循环部分移出，创建一个新的函数

showPrimes(10);

function showPrimes(limit){
    for(let number = 2; number <= limit; number++)     
        if(isPrime(number)) console.log(number);     
}

function isPrime(number){
    for(let factor = 2; factor < number; factor++)
        if(number % factor === 0)
            return false;//找到了第一个因数直接返回false

    return true;  //没有找到任何因数
}