0

0

JS数组、字符串及数学函数

jacklove

jacklove

发布时间:2018-05-21 11:55:55

|

1608人浏览过

|

来源于php中文网

原创

本篇将会对js数组和字符串以及函数进行讲解。

数组方法里push、pop、shift、unshift、join、split分别是什么作用

push:在数组最后添加一个元素,语法是数组.push (所要添加的元素);,返回值为数组长度

pop: 删除数组最后一个元素,语法为数组.pop( );返回值为删除的元素名称

shift:删除数组第一个元素,语法为数组.shift( );返回值为删除的元素名称

unshift:在数组首位添加一个元素,后面元素向后偏移,语法为数组.unshift (所要添加的元素);,返回值为数组长度

join:将数组连接为字符串,不修改原本的数组,语法为数组.join(),返回值为连接完成的字符串

split: 将字符串分隔并变为数组,不修改原本的字符串,语法为字符串.split('分隔符');

代码:

用 splice 实现 push、pop、shift、unshift 方法

splice实现push:

new1
[91, 3, 2, 1, 34, 5]          //new1数组的元素new1.splice(new1.length,0,91)     //new1.length代表数组最后一位后面,0为关键字添加,91为所要添加元素[]

new1
[91, 3, 2, 1, 34, 5, 91]    //成功在数组new1最后添加元素91

用splice实现pop:

new1
[91, 3, 2, 1, 34, 5, 9, 91]  //new1数组的元素new1.splice(new1.length-1,1)   //new1.length代表数组最后一位,1为长度[91]

new1
[91, 3, 2, 1, 34, 5, 9]    //成功删除最后一位元素91

splice实现shift:

new1                              
[91, 3, 2, 1, 34, 5, 645]       //new1数组的元素new1.splice(0,1)   //0代表数组下标索引数,1代表删除个数[91]                      //返回删除的元素new1                          
[3, 2, 1, 34, 5, 645]            //成功删除new1数组第一个元素

splice实现unshift:

new1
[3, 2, 1, 34, 5, 645]       //new1数组的元素new1.splice(0,0,91)    //第一个0代表数组下标索引数,第二个0为关键字添加,91为所要添加的元素[]

new1
[91, 3, 2, 1, 34, 5, 645]     //成功在数组第一位添加元素91

使用数组拼接出如下字符串

var prod = {    name: '女装',    styles: ['短款', '冬季', '春装']
};function getTp(data){  var new1  = prod.name;  var new2  = prod.styles;  var arrey =[];
  arrey.push('
'); arrey.push("
"+new1+"
"); for(var i =0;i"+new2[i]+"") } arrey.push('
'); console.log(arrey.join()); } getTp(prod)//
,
女装
,
短款
,
冬季
,
春装
,

写一个find函数,实现下面的功能

var arr = [ "test" , 2 , 1.5 , false ]function find(arr,add){  for(var i = 0;i < arr.length; i++){    if(add==arr[i] && add !== 0){      return console.log(i)
    }
  }  console.log(-1)
}
find(arr, "test") // 0find(arr, 2) // 1find(arr, 0) // -1

写一个函数filterNumeric,实现如下功能

arr = ["a", 1,3,5, "b", 2];var arre = [];function filterNumeric(arr){  for(var i= 0; i< arr.length;i++){      if(typeof arr[i]==='number'){
      arre.push(arr[i])
      }
  }  console.log(arre);
}
filterNumeric(arr)  //[1, 3, 5, 2]

对象obj有个className属性,里面的值为的是空格分割的字符串(和html元素的class特性类似),写addClass、removeClass函数,有如下功能:

I-Shop购物系统
I-Shop购物系统

部分功能简介:商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品,下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩,恢复,备份数据库功能上传文件管理商品类别管理商品添加/修改/

下载
var obj = {  className: 'open menu'};  var shu = obj.className.split(" ");     
function addClass(obj,nano){                
  for(var i = 0;i< shu.length; i++) {        
    if(shu[i] === nano) {              
      return console.log("因为"+nano+"已经存在,此操作无任何办法");
    }                             
  }
  shu.push(nano);                   
 //console.log(shu);
  obj.className = shu.join(" ");   console.log(obj);
} 
addClass(obj, 'new');          //Object {className: "open menu new"}addClass(obj, 'open');        //因为open已经存在,此操作无任何办法addClass(obj, 'me');           // Object {className: "open menu new me"}console.log(obj.className);    // open menu new mefunction removeClass(obj,habo){  //console.log(shu)
  for(var i = 0;i

写一个camelize函数,把my-short-string形式的字符串转化myShortString形式的字符串

function camelize(lama){  var lala = lama.split("-");  //["list", "style", "image"]
  var a =[lala[0]];  for(var i =1; i

如下代码输出什么?为什么?

arr = ["a", "b"];  
arr.push( function() { alert(console.log('hello hunger valley')) } );
arr[arr.length-1]()  //

输出的是function函数的内容'hello hunger valley'并弹出窗口显示underfined。因为第二段直接将整个函数添加到数组arr后面成为它最后一个元素,最后一句代表将arr数组的最后一个元素执行调用,console.log执行完会销毁,所以打印结果为'hello hunger valley',而弹窗结果为underfined

写一个函数filterNumericInPlace,过滤数组中的数字,删除非数字

arr = ["a", 1 , 3 , 4 , 5 , "b" , 2];function filterNumericInPlace(arr){ 
  for(var i= 0; 0< arr.length; i++) {    
    if( typeof arr[i] !== 'number'){
      arr.splice(i,1)
    }       
  }  console.log(arr);  // [1,3,4,5,2]}
filterNumericInPlace(arr);

写一个ageSort函数实现如下功能

var john = { name: "John Smith", age: 23 };var mary = { name: "Mary Key", age: 18 };var bob = { name: "Bob-small", age: 6 };var people = [ john, mary, bob ];function ageSort(data){
  data.sort(function (a,b){    return a.age-b.age;
  })  console.log(data);
}
ageSort(people); // [ bob, mary, john ]

写一个filter(arr, func)函数用于过滤数组,接受两个参数,第一个是要处理的数组,第二个参数是回调函数(回调函数遍历接受每一个数组元素,当函数返回true时保留该元素,否则删除该元素)

function isNumeric (el){    return typeof el === 'number'; 
}
arr = ["a",3,4,true, -1, 2, "b"];function filter(arr, func){  
  for(var i =0;i 0});console.log(arr); 
[3, 4, -1, 2]
[3, 4, 2]

字符串

写一个 ucFirst函数,返回第一个字母为大写的字符

function ucFirst(daho){  var add= daho[0].toUpperCase();
  daho=daho.replace(daho[0],add)  console.log(daho);
}
ucFirst("hunger")"Hunger"

写一个函数truncate(str, maxlength), 如果str的长度大于maxlength,会把str截断到maxlength长,并加上...,如

function truncate(str, maxlength){  if(str.length-1>maxlength){
    add = str.substr(0,maxlength);    console.log(add+"...");
  }else{    return console.log(str);
  }
}
truncate("hello, this is hunger valley,", 10)
truncate("hello world", 20)"hello, thi...""hello world"

数学函数

写一个函数limit2,保留数字小数点后两位,四舍五入, 如:

var num1 = 3.456;function limit2(num){
  num=Math.round(num*100)/100;  console.log(num);
}
limit2(num1)
limit2(2.42)3.462.42

写一个函数,获取从min到max之间的随机数,包括min不包括max

function habo(min,max){   console.log(Math.random()*(min-max)+max)
 }
 habo(5,15)

写一个函数,获取从min都max之间的随机整数,包括min包括max

function habo(min,max){
  add = Math.random()*(min-max)+max;  console.log(Math.round(add));  
 }
 habo(5,12)

写一个函数,获取一个随机数组,数组中元素为长度为len,最小值为min,最大值为max(包括)的随机数

function damo(len,min,max){
  arr=[];
  len == arr.length;  for(var i =0;i

本篇对JS数组、字符串及数学函数相关内容进行了讲解,更多相关知识请关注php中文网。

相关推荐:

关于JS时间对象和递归问题

一些CSS样式基础知识

关于JS定时器和闭包问题的讲解

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号