前端面试出的上机测码的三道题

最新推荐文章于 2024-07-09 17:50:54 发布

深山里的山鬼

最新推荐文章于 2024-07-09 17:50:54 发布

阅读量319

点赞数 3

文章标签：前端 css ajax js json

本文链接：https://blog.csdn.net/2301_77822157/article/details/139545839

版权

1.用flex布局出一个兼容性网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div Layout</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            /* gap 表示空格 */
            gap: 10px;
        }

        .item {
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }

        @media (max-width: 600px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

2.ajax与后端进行数据交互，并将结果打印在控制台上

let data = {

status: 200,

category: '家居用品',

productList: [

{

productId: 200012,

productPrice: 1299,

productName: '智能扫地机器人',

productStock: 45,

productPopularity: 4,

productBrand: 'ECOVACS',

{

productId: 200035,

productPrice: 999,

productName: '空气净化器',

productStock: 78,

productPopularity: 5,

productBrand: 'Philips',

{

productId: 200088,

productPrice: 2499,

productName: '多功能榨汁机',

productStock: 20,

productPopularity: 3,

productBrand: 'Hurom',

};

①如果 data 的 status 值为 200，则输出 category 的值。

②遍历 productList 数组，打印出每个产品对象的信息。

③查找 productName 为 "空气净化器" 的产品，并输出其价格。

④对于 productPrice 等于 2499 的产品，添加一个新的属性 promotionTag，值为 '热销推荐'，并输出修改后的该产品信息。

⑤筛选出 productPrice 小于等于 1000 的所有产品，放入新的数组 affordableProducts 中，并输出这个数组。

⑥在 affordableProducts 数组中，找到 productName 长度超过 5 字符的产品，输出这些产品的名称长度及名称本身。


    <script>
        let data = {  
  status: 200,
  category: '家居用品',
  productList: [
    {
      productId: 200012,
      productPrice: 1299,
      productName: '智能扫地机器人',
      productStock: 45,
      productPopularity: 4,
      productBrand: 'ECOVACS',
    },
    {
      productId: 200035,
      productPrice: 999,
      productName: '空气净化器',
      productStock: 78,
      productPopularity: 5,
      productBrand: 'Philips',
    },
    {
      productId: 200088,
      productPrice: 2499,
      productName: '多功能榨汁机',
      productStock: 20,
      productPopularity: 3,
      productBrand: 'Hurom',
    },
  ],
};

        // 输出 category 的值
        if (data.status === 200) {
            console.log(data.category);
        }

        // 遍历 productList 数组，打印出每个产品对象的信息
        data.productList.forEach(product => {
            console.log('产品名称：' + product.productName);
            console.log('价格：' + product.productPrice);
            console.log('库存：' + product.productStock);
            console.log('受欢迎程度：' + product.productPopularity);
            console.log('品牌：' + product.productBrand);
        });

        // 查找 productName 为 "空气净化器" 的产品，并输出其价格
        const airPurifier = data.productList.find(product => product.productName === '空气净化器');
        console.log('空气净化器的价格为：' + airPurifier.productPrice);

        // 对于 productPrice 等于 2499 的产品，添加一个新的属性 promotionTag，值为 '热销推荐'，并输出修改后的该产品信息
        const specialProduct = data.productList.find(product => product.productPrice === 2499);
        specialProduct.promotionTag = '热销推荐';
        console.log(specialProduct);

        // 筛选出 productPrice 小于等于 1000 的所有产品，放入新的数组 affordableProducts 中，并输出这个数组
        const affordableProducts = data.productList.filter(product => product.productPrice <= 1000);
        console.log(affordableProducts);

        // 在 affordableProducts 数组中，找到 productName 长度超过 5 字符的产品，输出这些产品的名称长度及名称本身
        const affordableProductsLongName = affordableProducts.filter(product => product.productName.length > 5);
        affordableProductsLongName.forEach(product => {
            console.log('产品名称长度：' + product.productName.length + '，产品名称：' + product.productName);
        });
    </script>

3.运用vue+element plus（此处博主先偷个懒，后面会出）写成增删改查的页面，不用接口，用本地化存储数据，然后在渲染在页面上，博主先写一点本地存储的基础代码，稍后会出综合案例。

    <script>
       //localStorage
       // 可以将数据存储到本地，永久生效，除非手动删除

        //以下是本都存储的语法

        // 设置本地存储 
        // localStorage.setItem(键, 值);
        //储存数据
        // localStorage.setItem('uname','pink老师')
        //获取方式
        // console.log(localStorage.getItem('uname'))
        //删除数据
        // localStorage.removeItem('uname')
        //修改数据
        // localStorage.setItem('uname','小猪老师')


        // 存储年龄
        // 本地存储只能存储字符串数据类型
        // localStorage.setItem('age',18)
        // console.log(localStorage.getItem('age'))
        // localStorage.setItem('age',20)

        // 复杂类型
        const obj = {
            uname:'深山里的山鬼',
            age:18,
            gender:'男'
        }


        // 不可取
        // 复杂类型   
        // localStorage.setItem('obj',obj)
        // 取
        // console.log(localStorage.getItem('obj'))//复杂类型不能直接存储
        
        //复杂类型存储转换为字符串存储
        localStorage.setItem('obj',JSON.stringify(obj))
        // console.log(localStorage.getItem('obj'))
        // 验证类型 typeof
        // console.log(typeof(localStorage.getItem('obj')))
        // 将JSON字符串转换为对象
        const str = localStorage.getItem('obj')
        console.log(JSON.parse(str))

看过的老铁们，点个赞，此后博主会出优质的文章0.0

深山里的山鬼

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端面试出的上机测码的三道题

3.运用vue+element plus（此处博主先偷个懒，后面会出）写成增删改查的页面，不用接口，用本地化存储数据，然后在渲染在页面上，博主先写一点本地存储的基础代码，稍后会出综合案例。④对于 productPrice 等于 2499 的产品，添加一个新的属性 promotionTag，值为 '热销推荐'，并输出修改后的该产品信息。⑥在 affordableProducts 数组中，找到 productName 长度超过 5 字符的产品，输出这些产品的名称长度及名称本身。
复制链接

扫一扫