javaScript学习日记 1 数组

indexOf

与String类似,Array也可以通过indexOf()来搜索一个指定的元素的位置:

var arr = [10, 20, ‘30‘, ‘xyz‘];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素10的索引为1
arr.indexOf(30); // 元素30没有找到
arr.indexOf(‘30‘); // 元素‘30‘的索引为2

slice

slice()就是对应String的substring()版本,它截取Array的部分元素,然后返回一个新的Array


var arr = [‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘];
arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: [‘A‘, ‘B‘, ‘C‘]
arr.slice(3); // 从索引3开始到结束: [‘D‘, ‘E‘, ‘F‘, ‘G‘]
 

注意到slice()的起止参数包括开始索引,不包括结束索引。

如果不给slice()传递任何参数,它就会从头到尾截取所有元素。利用这一点,我们可以很容易地复制一个Array

var arr = [‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘];
var aCopy = arr.slice();
aCopy; // [‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘]
aCopy === arr; // false

push和pop

push()Array的末尾添加若干元素,pop()则把Array的最后一个元素删除掉:

var arr = [1, 2];
arr.push(‘A‘, ‘B‘); // 返回Array新的长度: 4
arr; // [1, 2, ‘A‘, ‘B‘]
arr.pop(); // pop()返回‘B‘
arr; // [1, 2, ‘A‘]
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错,而是返回undefined
arr; // []

unshift和shift

如果要往Array的头部添加若干元素,使用unshift()方法,shift()方法则把Array的第一个元素删掉:

var arr = [1, 2];
arr.unshift(‘A‘, ‘B‘); // 返回Array新的长度: 4
arr; // [‘A‘, ‘B‘, 1, 2]
arr.shift(); // ‘A‘
arr; // [‘B‘, 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错,而是返回undefined
arr; // []

sort

sort()可以对当前Array进行排序,它会直接修改当前Array的元素位置,直接调用时,按照默认顺序排序:

var arr = [‘B‘, ‘C‘, ‘A‘];
arr.sort();
arr; // [‘A‘, ‘B‘, ‘C‘]

reverse

reverse()把整个Array的元素给掉个个,也就是反转:

var arr = [‘one‘, ‘two‘, ‘three‘];
arr.reverse();
arr; // [‘three‘, ‘two‘, ‘one‘]

splice

splice()方法是修改Array的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素:

var arr = [‘Microsoft‘, ‘Apple‘, ‘Yahoo‘, ‘AOL‘, ‘Excite‘, ‘Oracle‘];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, ‘Google‘, ‘Facebook‘); // 返回删除的元素 [‘Yahoo‘, ‘AOL‘, ‘Excite‘]
arr; // [‘Microsoft‘, ‘Apple‘, ‘Google‘, ‘Facebook‘, ‘Oracle‘]
// 只删除,不添加:
arr.splice(2, 2); // [‘Google‘, ‘Facebook‘]
arr; // [‘Microsoft‘, ‘Apple‘, ‘Oracle‘]
// 只添加,不删除:
arr.splice(2, 0, ‘Google‘, ‘Facebook‘); // 返回[],因为没有删除任何元素
arr; // [‘Microsoft‘, ‘Apple‘, ‘Google‘, ‘Facebook‘, ‘Oracle‘]

concat

concat()方法把当前的Array和另一个Array连接起来,并返回一个新的Array

var arr = [‘A‘, ‘B‘, ‘C‘];
var added = arr.concat([1, 2, 3]);
added; // [‘A‘, ‘B‘, ‘C‘, 1, 2, 3]
arr; // [‘A‘, ‘B‘, ‘C‘]

请注意concat()方法并没有修改当前Array,而是返回了一个新的Array

实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里:

var arr = [‘A‘, ‘B‘, ‘C‘];
arr.concat(1, 2, [3, 4]); // [‘A‘, ‘B‘, ‘C‘, 1, 2, 3, 4]

join

join()方法是一个非常实用的方法,它把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串:

var arr = [‘A‘, ‘B‘, ‘C‘, 1, 2, 3];
arr.join(‘-‘); // ‘A-B-C-1-2-3‘

如果Array的元素不是字符串,将自动转换为字符串后再连接。

多维数组

如果数组的某个元素又是一个Array,则可以形成多维数组,例如:

var arr = [[1, 2, 3], [400, 500, 600], ‘-‘];

例题1:var arr = [[1, 2, 3], [400, 500, 600], ‘-‘];   如何通过索引取到500这个值:

var arr = [[1, 2, 3], [400, 500, 600], ‘-‘];
var x = arr[1][1];
alert(x); 

例题2:在新生欢迎会上,你已经拿到了新同学的名单,请排序后显示:欢迎XXX,XXX,XXX和XXX同学!

alert(‘欢迎‘+ arr.slice(0,3).join(‘,‘)+‘和‘+arr.splice(3,1)+‘同学‘);
时间: 2024-08-11 03:17:16

javaScript学习日记 1 数组的相关文章

javascript学习日记之变量的作用域

``` 很显然第一个弹出框并没有如我所想弹出的global而是undefined 这是为什么呢? 其实由于函数作用域特性 函数域始终优于全局域 同名的局部变量会覆盖掉全局变量 而第一次调用alert的时候scope还没正式定义 所以为undefined 以上代码可以理解为: ``` function f(){ var scope; alert(scope); var scope ="local"; alert(scope); }; f(); //等价与函数内变量的声明'提前'至函数体顶

JavaScript学习笔记:数组reduce()和reduceRight()方法

很多时候需要累加数组项的得到一个值(比如说求和).如果你碰到一个类似的问题,你想到的方法是什么呢?会不会和我一样,想到的就是使用for或while循环,对数组进行迭代,依次将他们的值加起来.比如: var arr = [1,2,3,4,5,6]; Array.prototype.sum = function (){ var sumResult = 0; for (var i = 0; i < this.length; i++) { sumResult += parseInt(this[i]);

JavaScript学习日记5 map和set

map 是一组键值对的结构,具有极快的查找速度. 例如:查找学生的成绩,普通Arry数组操作会创建两个普通的Arry var name = {'aaaa','bbbb','cccc'}; var scores = { 96,97,98 } 给定一个名字,要查找对应的成绩,就先要在names中找到对应的位置,再从scores取出对应的成绩,Array越长,耗时越长. 如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢.用JavaScr

JavaScript 学习日记 第一篇 Arrays

Arrays Arrays 的一系列方法 pop & push function myFunction() { var testArray = []; testArray = [1, 2, 3, 4]; alert(testArray.pop()); //show 4 for (var i = 0; i < testArray.length; i++) { alert(testArray[i]); }//show 1 2 3 testArray.push(4); for (var i = 0

JavaScript学习笔记——4.数组

1.数组的作用 批量处理数据 2.声明数组 var arr=[元素1,元素2,元素3...] //快速声明 arr[1] //调用元素 var arr=new Array(元素1,元素2,元素3); //使用Array对象方式声明 3.遍历数组 for循环 4.数组处理函数 .length //数组长度(属性) .sort() //排序(可有回调函数) .push() //在数组后面加入元素(入栈) .pop() //移除数组后面的元素(出栈\栈为后进先出) .unshift() //在数组前面

JavaScript学习日记3 条件判断

JavaScript使用if () { ... } else { ... }来进行条件判断. 1 var age = 20; 2 if (age >= 18) { // 如果age >= 18为true,则执行if语句块 3 alert('adult'); 4 } else { // 否则执行else语句块 5 alert('teenager'); 6 } 多行条件判断 如果还要更细致地判断条件,可以使用多个if...else...的组合: 1 var age = 3; 2 if (age &

JavaScript学习日记2 对象

JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成. JavaScript用一个{...}表示一个对象,键值对以xxx: xxx形式申明,用,隔开. 如: var xiaoming={name:'小明',birth:1990,school:'No.1 Middle School', height:1.70,weight:65,score:null} 注意:最后一个键值对不需要在末尾加,,如果加了,有的浏览器(如低版本的IE)将报错. 访问属性是通过.操作符完成的,但这要求属性

javascript学习日记1

1.JavaScript:写入 HTML 输出document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph</p>"); 2.JavaScript:对事件作出反应<button type="button" onclick="alert('Welcome!')">点

javascript 学习日记

alert(0.1 + 0.2); //不是0.3 alert(NaN + NaN); //不是false  alert(isNaN(NaN)); //true alert(isNaN(1)); //false alert(isNaN('1')); //false alert(isNaN('blue')); //true alert(isNaN(true)); //false