JavaScript学习笔记第一天——字符串连接的N种方法

Javascript 字符串的连接方法有多种,但效率却有很大区别。

1、逐个字符串相加

var arr = [‘item 1‘, ‘item 2‘, ‘item 3‘, ...];

var list = ‘‘;

for (var i = 0, l = arr.length; i < l; i++) {

  list += ‘<li>‘ + arr[i] + ‘</li>‘;

}

list = ‘<ul>‘ + list + ‘</ul>‘;

这种最常见的,但是效率最低!代码逻辑相对来说复杂。

2、逐个 push 进数组

var arr = [‘item 1‘, ‘item 2‘, ‘item 3‘, ...],

list = [];

for (var i = 0, l = arr.length; i < l; i++) {

list[list.length] = ‘<li>‘ + arr[i] + ‘</li>‘;

}

list = ‘<ul>‘ + list.join(‘‘) + ‘</ul>‘;

逐个 push 进数组,比上一种方法稍微快一些,但还是不够好!

3、直接join()

var arr = [‘item 1‘, ‘item 2‘, ‘item 3‘, ...];

var list = ‘<ul><li>‘ + arr.join(‘</li><li>‘) + ‘</li></ul>‘;

使用原生的方法(比如 join()),不管它后面是怎么实现的,一般都比其他方法快很多,而且代码非常简洁。

JavaScript学习笔记第一天——字符串连接的N种方法

时间: 2024-12-25 04:29:17

JavaScript学习笔记第一天——字符串连接的N种方法的相关文章

Java程序猿的JavaScript学习笔记(5——prototype和Object内置方法)

计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript学习笔记(3--this/call/apply) Java程序猿的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序猿的JavaScript学习笔记(5--prototype) Java程序猿的JavaScript学习笔记(6--面向对象模拟) Java程

python字符串连接的三种方法及其效率、适用场景详解

python字符串连接的方法,一般有以下三种:方法1:直接通过加号(+)操作符连接website=& 39;python& 39;+& 39;tab& 39;+& 39; com& 39;方法2 python字符串连接的方法,一般有以下三种: 方法1:直接通过加号(+)操作符连接 1 website = 'python' + 'tab' + '.com' 方法2:join方法 1 2 listStr = ['python', 'tab', '.com'] 

JavaScript学习笔记(第一章——第三章)

说明 参考资料:<JavaScript高级程序设计(第3版)> 笔记主要为<JavaScript高级程序设计(第3版)>读书记录,按照此书的章节学习记录.方便以后查询复习(PS:正版书99大洋,没舍得买.在淘宝46买了一本盗版的并带一本 <JavaScript DOM编程艺术(第2版)>).两本书同时阅读,但以<JavaScript高级程序设计(第3版)>为主要学习路线.重要说明性内容将以近似书中原文摘出(以免出现个人解释歧义),外加自己遇到特殊情况说明(不

javascript学习笔记第一周Array

Javascript第一周 Array数组 创建数组 自定义方式和实例化方式 使用数组 1. join() join方法是将数组中的元素连接成字符串.参数可选.参数即是连接符.为空时,参数为逗号. 2.reverse() reverse方法是将数组里的元素的顺序全部颠倒,逆序排列. 3.sort() sort方法,是将数组中的元素排序.默认无参时按ascii增序排列.可以一个参数.该参数是一个比较函数,比较函数有两个参数. 4.concat() 将数组和参数合并成一个新数组并返回.参数可以是单个

javascript学习笔记第一周DOM

Javascript第一周 DOM基础 DOM (Document Object Model) 即文档对象模型 DOM 有三个等级,分别是 DOM1.DOM2.DOM3. 获取DOM元素的方法根据W3C标准有以下几种: 1.getElementById() getElementById()方法,接受一个参数:获取元素的 ID.如果找到相应的元素则返回该元素的 HTML 对象,如果不存在,则返回 null. 2.getElementsByTagName() getElementsByTagName

javascript学习笔记第一周Math

Javascript第一周 Math常用的方法 1.parseInt() 取整:把字符串最前边的整数取出来并返回 2.Math.ceil() 向上取整:有小数就整数部分加1 3.Math.round() 四舍五入 4.Math.floor() 向下取整 5.Math.abs() 返回数的绝对值 Math的方法 Math.abs():计算绝对值. Math.acos():计算反余弦值. Math.asin():计算反正弦值. Math.atan():计算反正切值. Math.atan2():计算从

Javascript学习笔记First day(字符串和数组常用函数)

这些之前有学习过,但是工作中已经很长时间没有接触前端了,所以重新温习一下. $ 在控制台输出一条信息 console console.log(); console.error(); console.warn(); console.info(); $ 常用字符串操作函数 console.log(person.city.length); console.log(person.city.toUpperCase()); console.log(person.city.toLowerCase()); co

javascript学习笔记整理(字符串对象)

一.属性 1.length——字符串的长度(不区分中英文) var a="chen陈"; alert(a.length); //结果:5 2.constructor——对象的构造函数 二.方法 A.获取类型 1.charAt()——返回在指定位置的字符 var a="chen陈"; alert(a.charAt(2)); //结果:e 2.charCodeAt()——返回在指定的位置的字符的Unicode编码 var a="chen陈"; ale

Java程序员的JavaScript学习笔记(5——prototype和Object内置方法)

计划按如下顺序完成这篇笔记: 理念. 属性复制和继承. this/call/apply. 闭包/getter/setter. prototype. 面向对象模拟. jQuery基本机制. jQuery选择器. jQuery工具方法. jQuery-在"类"层面扩展. jQuery-在"对象"层面扩展. jQuery-扩展选择器. jQuery UI. 扩展jQuery UI. 这是笔记的第5篇,聊聊prototype.内置的Object对象和Object对象的属性和