chap1 welcome
- seperation of concerns: 分离html-关于内容 和 JavaScript-关于行为（浏览器动作、鼠标移过某个元素时应该怎样）
- node.js
chap2 basics
变量
- 命名：不能是关键字、要有意义、不能以数字开头、不能包含空格和减号（多个单词拼在一起firstName）、大小写敏感
- 一行定义一个变量
- 没有初始化的变量类型：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
条件语句：
- if…else（用的更多）
- 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
- for
- while
先判断再循环 - do…while（用得少）
先循环再判断，永远至少执行一次循环体的内容，就算判断的条件不满足
let i = 0;
do{
if(i % 2 !== 0) console.log(i);
i++;
}while(i <= 5);
- 无限循环（死循环）
忘记写自增++，或者 while( true)
- 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]);
- for…of
遍历一个数组中的元素
//迭代变量color直接表示一个元素
for(let color of colors)
console.log(color);
- break(常用）：终止循环
- continue：跳过本次循环后面的语句，进入下一次循环
Exercise
- 求两个函数的最大值
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; //没有找到任何因数
}
扫一扫
1059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
