舌尖上的javascript数组和字符串基本操作

Javascript数组基本操作

Javascript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数,然而这些数字索引在内部被转换为字符串类型,这是因为javascript对象中的属性名必须是字符串。

一:如何创建数组?

创建数组有2中方式,第一种是对象字面量如下:

var  arrs = [];  // 定义了一个空数组。

还有一种方式是:调用Array的构造函数创建数组

var arrs = new Array();

二:数组的基本操作如下:

1. 把字符串转换为数组 可以使用split方法。如下:

console.log("aabbcc".split(""));

打印:["a", "a", "b", "b", "c", "c"]

2. 把数组转换为字符串,可以使用join方法。如下:

console.log([‘aa‘,‘bb‘,‘vv‘].join(""));

打印如下:aabbvv

3. indexOf查找元素。用来查找元素是否在数组中,如果存在就返回数组的索引,否则就返回-1;

     ["aa",‘bb‘].indexOf(‘bb‘);  // 1

indexOf()函数总是返回第一个与参数相同的元素的索引,有另一个功能与之类似的函数是 lastIndexOf()方法,该函数返回相同元素中最后一个元素的索引,如果没有找到,则返回-1.

如:["aa",‘bb‘,‘cc‘,‘aa‘].lastIndexOf(‘aa‘); // 3

["aa",‘bb‘,‘cc‘,‘aa‘].indexOf(‘aa‘);  // 0

4. 数组合并使用concat()方法。

如:console.log(["aa",‘bb‘].concat([‘cc‘]));

返回 [“aa”,”bb”,”cc”];

5. splice()方法从现有数组里截取一个新数组,该方法的第一个参数是截取的起始索引,第二个参数是截取的长度。比如如下代码:

["aa","bbb","vvv","ddd","ee"].splice(2,2)

返回是:["vvv", "ddd"]

6. slice()方法 从已有的数组中返回选定的元素

arrs.slice(start,end);

start 必须,规定从何处开始选取,如果是负数,那么规定从数组尾部开始算起的位置,比如:-1是最后一个元素,-2是倒数第二个元素。

end 可选,规定从何处结束选取,该参数是数组片段结束处的数组下标,如果没有指定该参数,那么切分的数组包含从start到数组结束的所有元素。            比如如下:

[‘aa‘,‘bb‘,‘cc‘,‘dd‘].slice(1,2);

返回[“bb”];

7 . push()方法,从数组最后添加元素;比如如下代码:

var nums = [1,2,3,4,5];

nums.push(6);

console.log(nums); // [1,2,3,4,5,6];

8. unshift()方法 可向数组的开头添加一个或更多元素,并返回新的长度。如下:

var arrs = [1,2,3,4,5];

console.log(arrs.unshift("aa","bb")); 返回7

console.log(arrs); // ["aa", "bb", 1, 2, 3, 4, 5]

9. pop()方法 删除数组末尾的元素。返回被删的元素

var arrs = [1,2,3,4,5,6];arrs.pop();

console.log(arrs.pop()); // 6

console.log(arrs);// 1,2,3,4,5

10. shift()方法 删除数组的第一个元素,如下代码:

var nums = [9,1,2,3,4,5,6];

console.log(nums.shift()); // 9

console.log(nums);// [1,2,3,4,5,6];

从数组中间位置添加和删除元素,可以使用splice()方法,需要提供如下参数:

1. 起始索引。

2. 需要删除元素的个数(添加元素时该参数设置为0);

3. 想要添加进数组的元素。

比如如下:

在数组中间插入元素。

var nums = [1,2,3,7,8,9];

nums.splice(3,0,4,5,6);

console.log(nums);// [1,2,3,4,5,6,7,8,9]

在数组中删除元素。

var nums = [1,2,3,100,200,300,400,4,5];

nums.splice(3,4);

console.log(nums);// 1,2,3,4,5

11. 数组排序,第一个方法是:reverse(); 该方法将数组中元素的顺序进行翻转。比如如下代码:

var nums = [1,2,3,4,5];

nums.reverse();

console.log(nums);// 5,4,3,2,1

如果是字符串排序,可以使用sort()方法。如下代码:

var arrs = [“Da”,”ade”,”cdf”,’bfg’];

arrs.sort();

console.log(arrs);// ["Da", "ade", "bfg", "cdf"]

但是如果数组元素是数字类型,就有问题了,比如如下代码:

var nums = [3,1,2,100,4,200];

nums.sort();

console.log(nums);// [1, 100, 2, 200, 3, 4]

sort()方法是按照字典顺序对元素进行排序的,因此他假定元素都是字符串类型。但是对于数字型的我们可以简单写一个函数即可。比如如下代码:

function compare(num1,num2) {

return num1 – num2;

}

var nums = [3,1,2,100,4,200];

num.sort(compare);

console.log(nums);// 1,2,3,4,100,200

下面介绍的几种新元素 分别是 forEach(),every(),some(),reduce(),reduceRight(),map(),filter().是针对标准浏览器做的,IE9+,firefox,chrome操作的,IE8及以下不支持的。

一:forEach()方法:该方法接受一个函数作为参数,对数组的每个元素使用该函数,如下代码:

function square(num) {

console.log(num*num);

}

var nums = [1,2,3,4,5,6,7,8,9,10];

console.log(nums.forEach(square));

// 1,4,9,16,25,36,49,64,81,100

二:every()方法 该方法接受一个返回值为布尔类型的函数,对数组中每个元素使用该函数,如果返回所有的为true,则true,否则返回false,如下代码:

function isEven(arrs) {

return arrs % 2 == 0;

}

var arrs = [2,4,6,8];

console.log(arrs.every(isEven));

返回true;如果上面的arrs 是 [2,4,5,6];则返回false

三:some()方法接受一个返回值为布尔类型的函数,只要有一个为true,则返回true,如下代码:

function isEven(arrs) {

return arrs % 2 == 0;

}

var arrs = [1,5,3,7];

console.log(arrs.some(isEven));

返回false,如果上面的arrs = [1,5,3,6];则返回true。

四:reduce()方法接受一个函数,返回一个值,该方法会从一个累加值开始,不断对累加值和数组中的后续元素调用该函数,直到数组中的最后一个元素,最后返回得到的累加值。如下代码:

function add(total,currentVal) {

return total + currentVal;

}

var nums = [1,2,3,4];

console.log(nums.reduce(add));

返回10.

Javascript还提供了reduceRight()方法,和reduce()方法不同,它是从右到左执行的,下面demo是对数组中的字符串做操作,如下代码:

function concat(accumulatedString,item) {

return accumulatedString + item;

}

var words = ["aa",‘bb‘,‘cc‘];

console.log(words.reduce(concat));

返回aabbcc。

但是如果使用reduceRight()方法的话,则值是从右边开始的。如下代码:

function concat(accumulatedString,item) {

return accumulatedString + item;

}

var words = ["aa",‘bb‘,‘cc‘];

console.log(words.reduceRight(concat));

打印 ccbbaa

五:map()方法对数组中的每个元素使用某个函数,产生新数组。如下代码:

function curve(grade) {

return grade +=5;

}

var grades = [77,78,89,13];

console.log(grades.map(curve));// [82,83,94,18]

下面是一个字符串使用map()方法对数组的demo,如下:

function first(word) {

return word[0];

}

var words = ["ased","bvc","cde"];

console.log(words.map(first)); // [‘a‘,‘b‘,‘c‘];

console.log(words.map(first).join("")); //"abc"

六:filter()方法:传入一个返回值为布尔类型的函数,对数组中所有元素使用该函数,返回一个新数组,如下代码:

function isEven(num) {

return num % 2 == 0;

}

function isOdd(num) {

return num % 2 != 0;

}

var nums = [];

for(var i = 0; i < 10; i++) {

nums[i] = i + 1;

}

console.log(nums.filter(isEven));  // 2,4,6,8,10

console.log(nums.filter(isOdd));   // 1,3,5,7,9

下面总结下 javascript字符串的基本方法如下:

1. concat()方法:该方法可以把多个参数到指定字符串的尾部。如下代码:

var a="Hello"; var b="World";

console.log(a.concat(b)); // HelloWorld

2. charAt(),charCodeAt()方法。

charAt()用于返回字符串中第N个字符,charCodeAt用于返回字符串中的第N个字符串的代码。如下代码:

var a = "hello world";

console.log(a.charAt(2)); // l

console.log(a.charCodeAt(2)) // 108

3. indexOf(),lastIndexOf()方法,2个都是查找字符串的位置,indexOf()是从头开始查找,lastIndexOf()是从尾部开始查找的,该2个方法分别有2个参数,第一个参数为查找的对象,第二个参数为查找的起始位置。如下代码:

var a = "hello world";

console.log(a.indexOf("lo",1));  // 3

console.log(a.indexOf(2));   // -1

       4. substr(),substring()方法。

substr(start,end);该方法根据指定的长度来截取字符串,包含2个参数,第一个参数为截取字符串的起始下标,第二个参数为表示截取的长度。

如下代码:

var a = "hello world";

console.log(a.substr(0,5));// hello

substring(start,stop); start 参数字符串开始的位置,stop字符串结束的位置。如下代码:

var a = "hello world";

console.log(a.substring(2,5)); // llo

     5. slice()方法:

slice()与substring()类似,都是根据起始下标与结束下标来截取子字符串。slice()方法声明:slice(start, [end])

如下代码:

var a = "hello world";

console.log(a.slice(2,5)); // llo

slice()方法与substring()方法的区别:

区别1:如果第一个参数的值比第二个参数的值大,即起始下标大于结束下标,substring()方法能够在执行截取之前,先交换2个参数,而slice()方法无效,返回空字符串,      如下代码:

var a = "hello world";

console.log(a.substring(11,6)); // world

console.log(a.slice(11,6)); // 返回空

区别2:如果参数值为负数,slice()方法能够把负号解释为从右侧开始定位,右侧第一个为-1,第二个为-2,以此类推。而substring()方法无效,并返回空字符串。如下代码:

var a="Hello World";

console.log(a.substring(-5,-1));  // 空

console.log(a.slice(-5,-1)); // worl

6. replace()方法

replace(regexp,replacement);  第一个参数表示执行匹配的正则表达式,也可以是字符串;第二个参数表示准备代替匹配的子字符串。

var a = "hello a";

console.log(a.replace(/a/g,‘world‘)) // hello world

      7. toLowerCase(),toUpperCase()方法。

toLowerCase() 将字符串转换成为小写,toUpperCase() 将字符串转换成为大写。

如下代码:

var a="Hello World"

console.log(a.toLowerCase());  // hello world

console.log(a.toUpperCase()); // HELLO WORLD

时间: 2024-12-23 08:17:35

舌尖上的javascript数组和字符串基本操作的相关文章

JavaScript数组与字符串常用方法总结

先来一段代码引子: var str='hello world'; alert(str.charAt(1));//通过下标查找值: alert(str.indexOf('w',3));//通过值查找字符串下标:没有找到返回-1:有两个参数(第二个参数可以没有,有的话是从这里开始查找): alert(str.charCodeAt('w'));//转化unicode编码: alert(String.fromCharCode(119));//把Unicode的编码变为具体的值 alert(str.toU

JavaScript数组转字符串,字符串转数组

1 //--------------------数组转字符串--------------------------- 2 3 //需要将数组元素用某个字符连接成字符串 4 var a1, b1,c1; 5 a1 = ["a","b","c","d","e"]; 6 b1 = a1.join('-'); //a-b-c-d-e 使用-拼接数组元素 7 c1 = a1.join(''); //abcde 8 9

Javascript:数组和字符串的相互转化

中午吃饭的时候,和室友讨论前端的问题,然后一个有趣的问题被抛出来: javascript用什么方法可以把“hello world”位置反转输出,即输出:"dlrow olleh"? 听到这个问题,我的思路就是要把这个字符串分割成数组,因为数组里面有个常用的函数reverve()可以很好的实现反转效果,然后将分割成的数组拼接起来就ok啦: 背景知识: 1# split() 方法 将字符串分割为字符串数组,并返回此数组: 之前的总结:http://www.cnblogs.com/kevin

Shell编程之数组、字符串基本操作

数组 概念 一对括号表示是数组,数组元素用"空格"符号分割开,格式为:array=(value0 value1 value2 value3 ...),此时数组的下标默认是从0开始的 基本操作 1.arr=(1 2 3 4 5) 2.arr=( 1 2 3 ) 3.echo ${#arr[@]},${#arr[*]}   #获取数组长度,用${#数组名[@或*]} 可以得到数组长度 4.echo ${arr[0]},${arr[1]},${arr[2]}  #获取数组元素的值 5.ech

JavaScript数组和字符串基础

数组的一些常用用法及练习 Array.concat( ) 连接数组 练习:    var arr=[1,2,3,4,5];     arr1=[7,8,9];     document.write(arr.concat(arr1[0]))//返回1,2,3,4,5,7 Array.join( ) 将数组元素连接起来以构建一个字符串  Array.length 数组的大小 Array.pop( ) 删除并返回数组的最后一个元素 练习:     var arr=[1,2,3,4,5]     doc

JavaScript数组、字符串相关操作

任务描述 l  基于任务四进行升级 l  将新元素输入框从input改为textarea l  允许一次批量输入多个内容,格式可以为数字.中文.英文等,可以通过用回车,逗号(全角半角均可),顿号,空格(全角半角.Tab等均可)等符号作为不同内容的间隔 l  增加一个查询文本输入框,和一个查询按钮,当点击查询时,将查询词在各个元素内容中做模糊匹配,将匹配到的内容进行特殊标识,如文字颜色等.举例,内容中有abcd,查询词为ab或bc,则该内容需要标识 <textarea> 标签定义多行的文本输入控

Javascript 数组和字符串的常用操作方法

一.数组 Array 1.创建数组 /* 构造函数 */ var arr1 = new Array(); //创建一个空数组 var arr1 = new Array(5); //创建指定长度数组(数组长度随时可以变,用处不大) var arr1 = new Array(2, 'hello', new Date()); //创建数组,并带初始化数值 /* 字面量 */ var aar2 = [] //创建一个空数组(等同于调用无参构造函数) var aar2 = [5,8] //创建一个带值的数

JavaScript 数组基本操作

简介 数组操作无论是在JavaScript中还是在其他语言中都是很常见.经常会用到的,现在我把JavaScript 数组基本操作整理一下,供大家参考学习.里边包含我自己的见解以及案例,希望能够帮助大家,使用的是ECMAScript 5. 字符串与数组转换 有时候我们需要把字符串进行转换为数组,则需要split方法,把数组转换为字符串则需要join方法 var star="js,php,java,c++"; star=star.split(","); console.

javascript中数组和字符串的方法比较

前面的话 字符串和数组有很多的相同之处,它们的方法众多,且相似度很高:但它们又有不同之处,字符串是不可变值,于是可以把其看作只读的数组.本文将对字符串和数组的类似方法进行比较 可索引 ECMAScript5定义了一种访问字符的方法,使用方括号加数字索引来访问字符串中的特定字符 可索引的字符串的最大的好处就是简单,用方括号代替了charAt()调用,这样更加简洁.可读并且可能更高效.不仅如此,字符串的行为类似于数组的事实使得通用的数组方法可以应用到字符串上 如果参数超出范围或是NaN时,则输出un