前端js分割字符串获取最后一个元素

时间: 2023-08-23 13:03:30 浏览: 272

javascript学习笔记2

### JavaScript 学习笔记2：字符串与事件对象总结 #### 字符串操作方法总结在JavaScript中，字符串是一系列字符的有序集合。JavaScript提供了一系列内置的方法来帮助我们处理字符串，这些方法可以用来检索、替换、查找子串等。 1. **charAt(num)**：此方法返回字符串中指定位置的字符。`num`参数表示要获取字符的位置索引。 - 示例： ```javascript var str = "Hello World"; console.log(str.charAt(0)); // 输出 'H' ``` 2. **charCodeAt(index)**：返回字符串中指定位置字符的ASCII码值。`index`参数是字符在字符串中的位置索引。 - 示例： ```javascript var str = "Hello World"; console.log(str.charCodeAt(0)); // 输出 72 ``` 3. **fromCharCode(codePoint)**：此静态方法用于根据Unicode编码创建一个新的字符串。它通常与`charCodeAt`配合使用。 - 示例： ```javascript console.log(String.fromCharCode(72, 101, 108, 108, 111)); // 输出 'Hello' ``` 4. **indexOf(searchValue[, fromIndex])**：返回第一次出现的指定值的索引，如果没有找到则返回-1。`fromIndex`参数可选，指定搜索的起始位置。 - 示例： ```javascript var str = "Hello World"; console.log(str.indexOf("World")); // 输出 6 ``` 5. **lastIndexOf(searchValue[, fromIndex])**：与`indexOf`类似，但返回的是最后一次出现的指定值的索引。 - 示例： ```javascript var str = "Hello World World"; console.log(str.lastIndexOf("World")); // 输出 12 ``` 6. **search(regexp)**：用于查找与正则表达式相匹配的第一个元素的索引。如果未找到，则返回-1。 - 示例： ```javascript var str = "Hello World"; console.log(str.search(/Wor/)); // 输出 6 ``` 7. **match(regexp)**：用于查找与正则表达式相匹配的第一个元素，返回一个数组或null。 - 示例： ```javascript var str = "Hello World"; console.log(str.match(/Wor/)); // 输出 ['Wor', index: 6, input: 'Hello World', groups: undefined] ``` 8. **replace(searchValue/newRegexp, replaceValue/newFunction)**：用于将字符串中的一些子串替换为新的子串或计算结果。 - 示例： ```javascript var str = "Hello World"; console.log(str.replace("World", "Universe")); // 输出 'Hello Universe' ``` 9. **localeCompare(other)**：用于比较两个字符串的顺序。 - 示例： ```javascript var str1 = "Apple"; var str2 = "Banana"; console.log(str1.localeCompare(str2)); // 输出 -1 ``` 10. **slice(start, end)**：用于提取字符串的一部分并返回一个新的字符串，不包括结束位置的字符。 - 示例： ```javascript var str = "Hello World"; console.log(str.slice(1, 5)); // 输出 'ello' ``` 11. **split(separator, limit)**：用于将字符串分割成子串，并返回由分割后的子串组成的数组。 - 示例： ```javascript var str = "Hello World"; console.log(str.split(" ")); // 输出 ['Hello', 'World'] ``` 12. **toLowerCase()**：将字符串转换为小写。 - 示例： ```javascript var str = "HELLO WORLD"; console.log(str.toLowerCase()); // 输出 'hello world' ``` 13. **toUpperCase()**：将字符串转换为大写。 - 示例： ```javascript var str = "hello world"; console.log(str.toUpperCase()); // 输出 'HELLO WORLD' ``` #### 事件对象与事件处理事件对象是在JavaScript中用于描述用户操作（如点击、移动等）的信息载体。通过事件对象，我们可以访问与特定事件相关的信息。 1. **event.clientX/clientY**：分别返回鼠标指针相对于视口的水平坐标和垂直坐标。 - 示例： ```javascript document.getElementById('myButton').addEventListener('click', function(event) { console.log('Mouse X position:', event.clientX); console.log('Mouse Y position:', event.clientY); }); ``` 2. **document.body.scrollTop/document.documentElement.scrollTop**：分别获取文档滚动条的当前位置（垂直方向）。 - 示例： ```javascript window.addEventListener('scroll', function() { console.log('Scroll Top:', document.documentElement.scrollTop); }); ``` 3. **取消冒泡**：在某些情况下，可能需要阻止事件冒泡到父元素。这可以通过设置`cancelBubble`属性为`true`实现。 - 示例： ```javascript element.addEventListener('click', function(event) { event.cancelBubble = true; // IE event.stopPropagation(); // 标准浏览器 }); ``` 4. **键盘事件**：JavaScript提供了几种键盘事件，如`keydown`、`keyup`和`keypress`。 - 示例： ```javascript document.addEventListener('keydown', function(event) { if (event.keyCode === 13) { // Enter key console.log('Enter key pressed'); } }); ``` 5. **keycode属性**：返回触发事件的按键的键码。 - 示例： ```javascript document.addEventListener('keydown', function(event) { console.log('Key code:', event.keyCode); }); ``` 6. **oncontextmenu**：当用户在元素上右击时触发。 - 示例： ```javascript document.getElementById('myElement').oncontextmenu = function(event) { event.preventDefault(); console.log('Right click detected'); return false; }; ``` 7. **鼠标事件**：如`mousedown`、`mousemove`、`mouseup`等，可以用于检测鼠标的动作。 - 示例： ```javascript document.getElementById('myElement').onmousedown = function(event) { console.log('Mouse down'); }; ``` 8. **拖动事件**：通过监听鼠标事件并结合`offsetLeft`和`offsetTop`等属性，可以实现简单的拖拽功能。 - 示例： ```javascript var oDiv = document.getElementById("div1"); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev) { var oEvent = ev || event; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function(ev) { var oEvent = ev || event; var l = oEvent.clientX - disX; var t = oEvent.clientY - disY; // 处理边界情况 if (l <= 0) l = 0; if (t <= 0) t = 0; if (l > document.documentElement.clientWidth - oDiv.offsetWidth) l = document.documentElement.clientWidth - oDiv.offsetWidth; if (t > document.documentElement.clientHeight - oDiv.offsetHeight) t = document.documentElement.clientHeight - oDiv.offsetHeight; oDiv.style.left = l + 'px'; oDiv.style.top = t + 'px'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; return false; }; ``` 通过以上介绍，我们可以看到JavaScript提供了丰富的字符串操作方法和事件处理机制，这些工具可以帮助开发者轻松地处理各种字符串操作和用户交互。

可以使用 JavaScript 的 `split()` 方法将字符串分割成数组，然后取最后一个元素。具体实现如下： ```javascript const str = "apple,banana,orange"; const arr = str.split(","); const lastItem = arr[arr.length - 1]; console.log(lastItem); // "orange" ``` 首先，我们将字符串 `"apple,banana,orange"` 转换为数组 `["apple", "banana", "orange"]`，使用 `,` 作为分隔符。然后，通过数组的长度减一获取最后一个元素的索引，即 `arr.length - 1`。最后，通过索引获取最后一个元素 `"orange"` 并打印输出。

阅读全文

前端js分割字符串获取最后一个元素

相关推荐

前端高效获取URL链接参数的最新JavaScript方法

JavaScript数组和字符串练习教程

一个JavaScript用逗号分割字符串实例

一个JavaScript去除字符串末尾的空白实例代码

JS删除字符串中重复字符方法

JS常用字符串方法(推荐)

Javascript中字符串相关常用的使用方法总结

js字符串处理之绝妙的代码

JavaScript字符串处理常见操作方法小结

前端js代码规范

PHP中的多行字符串传递给JavaScript的两种方法

StringListHelper:处理以字符串形式存储的列表的 JavaScript 库

js使用ajax传值给后台,后台返回字符串处理方法

gradientstring炫彩风格的字符串

String-saw: JavaScript中高效的字符串匹配和替换库

【前端开发必学】：CSS和JavaScript的字符串格式化结合技巧

探索JavaScript API中的字符串处理

【Web开发进阶】：解析请求参数的字符串分割技术

散列表与字符串匹配：JavaScript模式识别技术

最新推荐

JS中split()用法（将字符串按指定符号分割成数组）

JS将时间秒转换成天小时分钟秒的字符串

C# 根据字符串生成二维码的实例代码

通过JS动态创建一个html DOM元素并显示

vue项目base64字符串转图片的实现代码

Angular实现MarcHayek简历展示应用教程

管理建模和仿真的文件

深入剖析：内存溢出背后的原因、预防及应急策略（专家版）

Java中如何对年月日时分秒的日期字符串作如下处理：如何日期分钟介于两个相连的半点之间，就将分钟数调整为前半点

Crossbow Spot最新更新 - 获取Chrome扩展新闻