JavaScript - First step - Arrays

2024-09-03 00:08
文章标签 java script step first arrays

本文主要是介绍JavaScript - First step - Arrays,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

创建数组

任何类型的对象,都可以放入数组中。

var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
shopping;
// (5) ["bread", "milk", "cheese", "hummus", "noodles"]var sequence = [1, 1, 2, 3, 5, 8, 13];
var random = ['tree', 795, [0, 1, 2]];

存取、变更,数组元素

shopping[0];
// returns "bread"shopping[0] = 'tahini';
shopping;
// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]

获取数组长度

sequence.length;
// should return 7var sequence = [1, 1, 2, 3, 5, 8, 13];
for (var i = 0; i < sequence.length; i++) {console.log(sequence[i]);
}

部分数组方法

字符串和数组之间的转换

var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';var myArray = myData.split(',');
myArray;myArray.length;
myArray[0]; // the first item in the array
myArray[1]; // the second item in the array
myArray[myArray.length-1]; // the last item in the arrayvar myNewString = myArray.join(',');
myNewString;var dogNames = ['Rocket','Flash','Bella','Slugger'];
dogNames.toString(); //Rocket,Flash,Bella,Slugger

添加、移除,数组元素

var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];// 向数组末尾添加元素
myArray.push('Cardiff');
myArray;
myArray.push('Bradford', 'Brighton');
myArray;var newLength = myArray.push('Bristol');
myArray;
newLength;// 移除数组末尾的元素
myArray.pop();var removedItem = myArray.pop();
myArray;
removedItem;// 向数组起首添加元素
myArray.unshift('Edinburgh');
myArray;// 移除数组起首元素
var removedItem = myArray.shift();
myArray;
removedItem;
let customName = document.getElementById('customname');
let randomize = document.querySelector('.randomize');
let story = document.querySelector('.story');function randomValueFromArray(array) {return array[Math.floor(Math.random() * array.length)];
}let storyText = "It was 94 fahrenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but was not surprised — :insertx: weighs 300 pounds, and it was a hot day.";
let insertX = ["Willy the Goblin", "Big Daddy", "Father Christmas"];
let insertY = ["the soup kitchen", "Disneyland", "the White House"];
let insertZ = ["spontaneously combusted", "melted into a puddle on the sidewalk", "turned into a slug and crawled away"];randomize.addEventListener("click", result);function result() {let newStory = storyText;let xItem = randomValueFromArray(insertX);let yItem = randomValueFromArray(insertY);let zItem = randomValueFromArray(insertZ);newStory = newStory.replace(":insertx:", xItem);newStory = newStory.replace(":inserty:", yItem);newStory = newStory.replace(":insertz:", zItem);if (customName.value !== '') {let name = customName.value;newStory = newStory.replace("Bob", name);}if (document.getElementById("uk").checked) {let weight = Math.round(300 * 0.0714286) + " stone";let temperature = Math.round((94 - 32) * 5 / 9) + " centigrade";newStory = newStory.replace("300 pounds", weight);newStory = newStory.replace("94 fahrenheit", temperature);}story.textContent = newStory;story.style.visibility = 'visible';
}

 

这篇关于JavaScript - First step - Arrays的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1131461

相关文章

Spring Boot集成/输出/日志级别控制/持久化开发实践

《SpringBoot集成/输出/日志级别控制/持久化开发实践》SpringBoot默认集成Logback,支持灵活日志级别配置(INFO/DEBUG等),输出包含时间戳、级别、类名等信息,并可通过... 目录一、日志概述1.1、Spring Boot日志简介1.2、日志框架与默认配置1.3、日志的核心作用

破茧 JDBC:MyBatis 在 Spring Boot 中的轻量实践指南

《破茧JDBC:MyBatis在SpringBoot中的轻量实践指南》MyBatis是持久层框架,简化JDBC开发,通过接口+XML/注解实现数据访问,动态代理生成实现类,支持增删改查及参数... 目录一、什么是 MyBATis二、 MyBatis 入门2.1、创建项目2.2、配置数据库连接字符串2.3、入

Springboot项目启动失败提示找不到dao类的解决

《Springboot项目启动失败提示找不到dao类的解决》SpringBoot启动失败,因ProductServiceImpl未正确注入ProductDao,原因:Dao未注册为Bean,解决:在启... 目录错误描述原因解决方法总结***************************APPLICA编

深度解析Spring Security 中的 SecurityFilterChain核心功能

《深度解析SpringSecurity中的SecurityFilterChain核心功能》SecurityFilterChain通过组件化配置、类型安全路径匹配、多链协同三大特性,重构了Spri... 目录Spring Security 中的SecurityFilterChain深度解析一、Security

SpringBoot多环境配置数据读取方式

《SpringBoot多环境配置数据读取方式》SpringBoot通过环境隔离机制,支持properties/yaml/yml多格式配置,结合@Value、Environment和@Configura... 目录一、多环境配置的核心思路二、3种配置文件格式详解2.1 properties格式(传统格式)1.

Apache Ignite 与 Spring Boot 集成详细指南

《ApacheIgnite与SpringBoot集成详细指南》ApacheIgnite官方指南详解如何通过SpringBootStarter扩展实现自动配置,支持厚/轻客户端模式,简化Ign... 目录 一、背景:为什么需要这个集成? 二、两种集成方式(对应两种客户端模型) 三、方式一:自动配置 Thick

Spring WebClient从入门到精通

《SpringWebClient从入门到精通》本文详解SpringWebClient非阻塞响应式特性及优势,涵盖核心API、实战应用与性能优化,对比RestTemplate,为微服务通信提供高效解决... 目录一、WebClient 概述1.1 为什么选择 WebClient?1.2 WebClient 与

Java.lang.InterruptedException被中止异常的原因及解决方案

《Java.lang.InterruptedException被中止异常的原因及解决方案》Java.lang.InterruptedException是线程被中断时抛出的异常,用于协作停止执行,常见于... 目录报错问题报错原因解决方法Java.lang.InterruptedException 是 Jav

深入浅出SpringBoot WebSocket构建实时应用全面指南

《深入浅出SpringBootWebSocket构建实时应用全面指南》WebSocket是一种在单个TCP连接上进行全双工通信的协议,这篇文章主要为大家详细介绍了SpringBoot如何集成WebS... 目录前言为什么需要 WebSocketWebSocket 是什么Spring Boot 如何简化 We

java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)

《java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)》:本文主要介绍java中pdf模版填充表单踩坑的相关资料,OpenPDF、iText、PDFBox是三... 目录准备Pdf模版方法1:itextpdf7填充表单(1)加入依赖(2)代码(3)遇到的问题方法2:pd