HTML/CSS/JavaScript基础学习day03-作业

简介: 本内容包含多个 JavaScript 编程示例,涵盖数组遍历、条件筛选、字符串处理、数值计算等常见操作,适合练习基础算法与逻辑思维。

1. 遍历数组,只打印长度大于5的字符串

        console.log("1. 打印长度大于5的字符串");
        const words = ['apple', 'cat', 'javascript', 'dog', 'elephant', 'hi'];
        for (let i= 0; i< words.length; i++){
            if(words[i].length > 5){
                console.log(words[i]);
            }
        }

image.png


2. 计算数组中所有数字的总和,但只包括大于10的数字

        console.log("\n2. 计算大于10的数字的总和");
        const numbers = [5, 15, 3, 25, 8, 30];
        let sum = 0;
        for(let i=0; i< numbers.length; i++){
            if(numbers[i] > 10){
                sum = sum + numbers[i];
            }
        }
        console.log(sum);

image.png


3. 找出数组中最长的字符串

        console.log("\n3. 找出数组中最长的字符串");
        const fruits = ['apple', 'banana', 'kiwi', 'strawberry', 'orange'];
        let max = '';
        for(let i=0; i< fruits.length; i++){
            if(fruits[i].length > max.length){
                max = fruits[i];
            }
        }
        console.log(max);

image.png


4. 创建一个新数组,包含原数组中所有偶数索引的元素

        console.log("\n4. 创建包含偶数索引元素的新数组");
        const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange'];
        let newColors = [];
        for(let i=0; i< colors.length; i+=2){
            if( i % 2 === 0){
                newColors.push(colors[i]);
            }
        }
        console.log(newColors);

image.png


5. 统计字符串中元音字母的数量

        console.log("\n5. 统计字符串中元音字母的数量");
        const text = "Hello, welcome to JavaScript world!";
        let count = 0;
        for(let i=0; i< text.length; i++){
            if(text[i] === 'a' || text[i] === 'e' || text[i] === 'i' || text[i] === 'o' || text[i] === 'u'){
                count++;
            }
        }
        console.log(count);

image.png


6. 将数组中的字符串转换为大写,但只转换长度大于3的字符串

        console.log("\n6. 将长度大于3的字符串转换为大写");
        const animals = ['cat', 'elephant', 'dog', 'giraffe', 'ox'];
        for(let i = 0; i< animals.length; i++){
            if(animals[i].length > 3){
                animals[i] = animals[i].toUpperCase();
            } else {
                continue;

            }
        }
        console.log(animals);

image.png


7. 找出数组中第一个长度大于5的字符串

        console.log("\n7. 找出第一个长度大于5的字符串");
        const cities = ['NY', 'London', 'Tokyo', 'San Francisco', 'LA'];
        for(let i=0; i< cities.length; i++){
            if(cities[i].length > 5){
                console.log(cities[i]);
                break;
            }
        }

image.png


8. 创建一个新数组,包含原数组中所有包含字母'a'的字符串

        console.log("\n8. 创建包含字母'a'的字符串的新数组");
        const foods = ['apple', 'banana', 'cherry', 'date', 'fig'];
        let newFoods = [];
        for(let i=0; i< foods.length; i++){
            if(foods[i].includes('a')){
                newFoods.push(foods[i]);

            }
        }
        console.log(newFoods);

image.png


9. 计算数组中数字的平均值,但排除小于0的数字

        console.log("\n9. 计算数组中正数的平均值");
        const values = [10, -5, 20, 0, 15, -10, 30];
        let avg = 0;
        let sum1 = 0;
        let count1 = 0;
        for(let i = 0; i< values.length; i++){
            if(values[i] > 0){
                sum1 = sum1 + values[i];
                count1++;
            }
        }
        avg = count1 > 0 ? sum1 / count1 : 0;
        console.log(avg);

image.png



相关文章
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
176 0
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
132 0
|
2月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day03-作业
本教程通过多个实例讲解JavaScript中for循环的常见用法,包括遍历数组、元素加1、求最大值/最小值、计算平均值、过滤偶数及字符串拼接等操作,并附有代码示例和运行结果图。
52 3
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
3月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day01
阿铭学习HTML基础,包括VSCode快捷生成代码、常用标签如head、title、body、img、a、p等的使用,以及CSS选择器的优先级和基本样式设置,适合前端入门学习。
159 12
|
2月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day02-作业
本教程介绍了JavaScript基础编程练习,包括使用for循环打印数字、判断奇偶数、计算总和以及用if语句判断正数的方法。每部分均配有示例代码和运行结果图,帮助初学者理解循环与条件判断的应用。最后通过思维导图回顾所学内容,强化知识点记忆。
64 2
|
3月前
|
XML 人工智能 前端开发
HTML/CSS/JavaScript基础学习day02
阿铭学习day02内容涵盖VSCode常用插件安装与配置,如中文语言包、路径提示、Vue开发工具等,同时介绍了通义灵码AI编程助手的使用方法,提升开发效率。
59 1
|
2月前
|
前端开发 JavaScript 索引
HTML/CSS/JavaScript基础学习day04
阿铭学习JavaScript函数与对象的基础知识,包括函数定义、调用方式及参数使用,以及Array和String对象的常用操作。
77 0
|
2月前
|
JavaScript 前端开发 Java
HTML/CSS/JavaScript基础学习day03
本内容为阿铭学习JavaScript的第三天笔记,涵盖JavaScript基础概念、引入方式、基础语法、变量声明、数据类型、运算符、类型转换及流程控制语句等内容,适合初学者了解JavaScript编程语言的核心知识点。
75 0