首页 > 编程语言 >关于Web前端使用JavaScript常见的数据类型处理小技巧

关于Web前端使用JavaScript常见的数据类型处理小技巧

时间:2024-10-31 10:31:13浏览次数:5  
标签:Web const log JavaScript 数据类型 oranges fruits console apple

1.1 获取字符串长度

  如果想获取这个字符串的长度,也就是它里面有多少个字符,可以使用 length 属性:

const s = "Hello World";
console.log(s.length)

1.2 转换大小写

  toUpperCase() 方法可以将字母全部大写

const s = "Hello World";
console.log(s.toLowerCase()); // HELLO WORLD

1.3. 截取字符串

  使用 substring 把字符串全部分割开,需要传入两个参数,分别是起始和终止位置的索引。

const s = "Hello World";
console.log(s.substring(0, 5)); // Hello

2.1. 数组添加元素

  在数组末尾添加一个元素,可以使用下标新增或 push() 方法

const fruits = ['apple', 'oranges', 'pears'];
fruits[3] = 'grapes';
fruits.push('mangos');
console.log(fruits); // ['apple', 'oranges', 'pears', 'grapes', 'mangos']

  在数组头部添加一个元素,可以使用 unshift() 方法

const fruits = ['apple', 'oranges', 'pears'];
fruits.unshift('mangos');
console.log(fruits); // ['mangos', 'apple', 'oranges', 'pears']

2.2. 数组删除元素

 删除数组末尾的元素,可以使用 pop() 方法

const fruits = ['apple', 'oranges', 'pears'];
fruits.pop();
console.log(fruits); // ['apple', 'oranges']

3.1 对象添加新属性

  可以通过 Person. 加一个不存在的属性名来添加一个新的属性,比如写 Person.email 就可以添加一个邮箱属性了。

const Person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    hobbies: ['music', 'movies', 'sports'],
    address: {
        street: "50 main st",
        city: "Boston",
        state: "MA",
    },
};
Person.email = "[email protected]";
console.log(Person.email ); // [email protected]

本文记录了 JavaScript 中的基本数据类型,包括字符串、数组和对象。通过示例代码,展示了如何使用模板字符串简化字符串连接,以及字符串的常用内置方法,如获取长度、大小写转换和分割。

此外,介绍了数组的创建、访问和常用操作,如添加和删除元素,以及分析了对象的创建和新增赋值。

标签:Web,const,log,JavaScript,数据类型,oranges,fruits,console,apple
From: https://www.cnblogs.com/xiaozhu007/p/18517137

相关文章

  • HTML5期末大作业:HTM+CSS+JS仿安徽开放大学官网(web前端网页制作课作业)
    ......
  • 获取数据类型js
    functiongetFieldType(field){if(field===null){return'null';}switch(typeoffield){case'undefined':return'undefined';case'string':return&......
  • 【Web前端】JavaScript 对象原型与继承机制
    JavaScript是一种动态类型的编程语言,其核心特性之一就是对象和原型链。理解原型及其工作机制对于掌握JavaScript的继承和对象关系非常重要。什么是原型每个对象都有一个内部属性 ​​[[Prototype]]​​​,这个属性指向创建该对象的构造函数的原型对象。这个内部属性通......
  • 568. 蜡笔小新动漫主题 大学生期末大作业 Web前端网页制作 html+css+js
    目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这......
  • 2024-SHCTF Web WP
    [Week1]1zflask按照提示访问robots.txt,访问/s3recttt得到一个python文件在api路由传参,直接执行命令得到[email protected]('/api')defapi():cmd=request.args.get('SSHCTFF','ls/')result=os.popen(cmd).read()returnresult[Week1......
  • WebProxy
    RouterSrv、AppSrv服务WebProxy安装Nginx组件。创建web.chinaskills.cn站点为www.chinaskills.cn配置代理前端,通过https访问后端Web服务器。配置文件名为proxy.conf,放置在/etc/nginx/conf.d/目录下。后端服务器日志内容需要记录真实客户端的IP地址。缓存后端Web服务器上......
  • 网关登录与web前端本地开发
    网关登录与web前端本地开发场景描述:管理后台和测试环境等服务部署在内网,访问这些资源需要网关验证访问权限;在线上访问这些资源时,会自动跳转要求网关登录,登录完成再重新跳回来。在本地开发时网关拒绝登录跳转。流程分析:在访问需要网关验证的资源时,请求会在cookie中携带权限tok......
  • 猿人学web端爬虫攻防大赛赛题第17题——天杀的http2.0
    题目网址:https://match.yuanrenxue.cn/match/17解题步骤:老方法,看触发的数据包。只有一个数据包,再看cookie中有没有特殊的字段。没有遇到第13题的特殊字段,直接访问。importrequestsurl="https://match.yuanrenxue.cn/api/match/17?page=1"headers={"user-ag......
  • CTF学习(1):WEB(upload)
    1.进入网站(文件上传题?)--->CTRL+U查看源码(无果)--->导入带有一句话木马的.php文件(无法上传非图片文件)2.使用JavascriptSwitch插件关闭网页的js设置后再次上传图片(成功)--->将文件上传后的路径添加进蚁剑(密码为先前上传的.php文件中POST['']内的字符)3.连入服务器后在......
  • 566. 火影忍者动漫主题网页 大学生期末大作业 Web前端网页制作 html+css
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这么好......