Javascript入门速成课3 循环,条件和函数

1.循环

设置一个实验用的数组:

const todos = [
    {
        id: 1,
        text: 'Take out trash',
        isCompleted: true
    },
    {
        id: 2,
        text: 'Meeting with boss',
        isCompleted: false
    }
]

for循环

for(let i = 0; i <= 5; i++){
    console.log(`For loop number: ${i}`);
}

遍历数组

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

while循环

let i = 0;
while(i < 3){
    console.log(`while-loop number: ${i}`);
    i++;
}

高阶数组high-order-array
(1) forEach
(2) map 从数组中创建新数组
(3) filter 根据条件创建新数组

(1) forEach迭代器 方法的参数是函数
//回调函数callback function可以写多个参数
//第一个参数是迭代对象

todos.forEach(function(todo){
    console.log(todo.text);
});

(2)map迭代器 会返回一个数组

const todoText = todos.map(function(todo){
    return todo.text;
});
console.log(todoText)

调试器输出:
['Take out trash', 'Meeting with boss']
0: "Take out trash"
1: "Meeting with boss"
length: 2
[[Prototype]]: Array(0)

(3) filter选择器,选出符合条件的

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

调试器输出:
0: {id: 1, text: 'Take out trash', isCompleted: true}
length: 1
[[Prototype]]: Array(0)

//组合使用:输出isCompleted为true的text

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

//output: ['Take out trash']

2.条件

if-else

const x = 10;
if(x == 10){
    console.log('x is 10');
// ===必须考虑类型,==会做类型转换
//所以如果改成const x = '10'
//则 == true   === false
//尽量习惯用===因为经常需要匹配类型
}else if(x > 10){
    console.log('x is bigger than 10')
}else{
    console.log('x is smaller than 10');
}
//if条件内 或|| 与&&  

三元操作符 ternary operator

const y = 10;
const color = y > 10 ? 'red' : 'blue';
console.log(color);

switch

switch(color){
    case 'red':
        console.log('R');
        break;
    case 'blue':
        console.log('B');
        break;
    default:
        console.log('not R or B');
        break;
}

3.函数function

function addNums(n1 = 1, n2 = 2){
    console.log(n1 + n2);
}
addNums(5, 4);//9
addNums(6,);//8
addNums();//3

箭头函数arrow functions(ES6引入)

const addNumnew = (num1, num2) => num1 + num2;
console.log(addNumnew(5,6));

可运行的完整代码:

//1.循环
const todos = [
    {
        id: 1,
        text: 'Take out trash',
        isCompleted: true
    },
    {
        id: 2,
        text: 'Meeting with boss',
        isCompleted: false
    }
]//用到的数组

//for-loop
for(let i = 0; i <= 5; i++){
    console.log(`For loop number: ${i}`);
}

//遍历数组
for(let todo of todos){
    console.log(todo.text)
}

//while-loop
let i = 0;
while(i < 3){
    console.log(`while-loop number: ${i}`);
    i++;
}

//高阶数组high-order-array
//forEach 
//map 从数组中创建新数组
//filter 根据条件创建新数组

//forEach迭代器 方法的参数是函数
//回调函数callback function可以写多个参数
//第一个参数是迭代对象
todos.forEach(function(todo){
    console.log(todo.text);
});

//map迭代器 会返回一个数组
const todoText = todos.map(function(todo){
    return todo.text;
});
console.log(todoText)
/*
调试器输出:
(2) ['Take out trash', 'Meeting with boss']
0: "Take out trash"
1: "Meeting with boss"
length: 2
[[Prototype]]: Array(0)
*/

//filter选择器,选出符合条件的
const todoCompleted = todos.filter(function(todo){
    return todo.isCompleted == true;
});
console.log(todoCompleted);
/**调试器输出:
0: {id: 1, text: 'Take out trash', isCompleted: true}
length: 1
[[Prototype]]: Array(0)
 */

//组合使用:输出isCompleted为true的text
const todo1 = todos.filter(function(todo){
    return todo.isCompleted == true;
}).map(function(todo){
    return todo.text;
})
console.log(todo1)
//output: ['Take out trash']




//2.条件


const x = 10;
if(x == 10){
    console.log('x is 10');
// ===必须考虑类型,==会做类型转换
//所以如果改成const x = '10'
//则 == true   === false
//尽量习惯用===因为经常需要匹配类型
}else if(x > 10){
    console.log('x is bigger than 10')
}else{
    console.log('x is smaller than 10');
}
//if条件内 或|| 与&&  

//三元操作符 ternary operator
const y = 10;
const color = y > 10 ? 'red' : 'blue';
console.log(color);

switch(color){
    case 'red':
        console.log('R');
        break;
    case 'blue':
        console.log('B');
        break;
    default:
        console.log('not R or B');
        break;
}

//3.函数function
function addNums(n1 = 1, n2 = 2){
    console.log(n1 + n2);
}
addNums(5, 4);//9
addNums(6,);//8
addNums();//3

//箭头函数arrow functions(ES6引入)
const addNumnew = (num1, num2) => num1 + num2;
console.log(addNumnew(5,6));

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容