学习《JavaScript经典实例》之第2章


第2章 JavaScript数组

2.1 在数组中搜索

  • indexOf()、lastIndexOf()
1
2
3
4
5
var animals = new Array('dog', 'cat', 'seal', 'elephant', 'walrus', 'lion');
var index = animals.indexOf('cat');
var index2 = animals.lastIndexOf('lion');
console.log('i',index); //1
console.log('i2',index2); //5
  • findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
1
2
3
4
5
var nums = [2, 4, 199, 80, 400, 30, 90];
var over = nums.findIndex(function(ele) {
return (ele >= 100);
});
console.log('nums',nums[over]); //199

2.2 用concat()和apply()将一个二维数组扁平化

  • concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
    • arrayObject.concat(arrayX,arrayX,......,arrayX)
1
2
3
4
5
6
7
var fruitarray = [];
fruitarray[0] = ['stranwberry', 'orange'];
fruitarray[1] = ['lime', 'peach', 'banana'];
fruitarray[2] = ['tangerine', 'apricot'];
console.log('array',fruitarray.concat());
var newArray = fruitarray.concat.apply([], fruitarray);
console.log(newArray);
1
2
3
4
5
6
7
8
9
10
11
function add(a, b) {
console.log('add', this);
}
function sum(a, b) {
console.log('sum', this);
}
add(1, 2); //Window
sum(1, 2); //Window

add.call(sum, 1, 2); //sum(a, b)
sum.call(add, 1, 2); //add(a ,b)
  • arguments装换为数组, 返回的是数组,但是arguments本身保持不变
1
2
var arg = [].slice.call(arguments);
// [].slice.call(document.getElementsByTagName('li'));
  • 借用别人的方法
1
2
3
4
5
6
7
8
9
10
11
var foo = {
name: 'jack',
showName: function() {
console.log('this name:',this.name);
}
}
var bar = {
name: 'rose'
}
foo.showName(); //jack
foo.showName.call(bar); //rose
  • 实现继承
1
2
3
4
var Student = function(name, age, high) {
Person.call(this, name, age);
this.high = high;
}
  • 封装对象保证this的指向
1
2
3
4
var _this = this;
_this.$box.on('mousedown', function()) {
return _this.fndown.apply(_this);
}

2.3 删除或替换数组元素

  • splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var animals = new Array('dog', 'cat', 'rabbit', 'pig', 'apple');
// 从数组删除元素
animals.splice(animals.indexOf('apple'), 1);
console.log(animals); // ["dog", "cat", "rabbit", "pig"]
// 替换
animals.splice(animals.indexOf('pig'), 1, 'monkey');
console.log(animals); //["dog", "cat", "rabbit", "monkey"]

// 使用循环和分割来替换和删除元素
var charSets = ["ab", "bb", "cd", "ab", "cc", "ab", "dd", "ab"];
while(charSets.indexOf('ab') != -1) {
charSets.splice(charSets.indexOf('ab'), 1, '**');
}
console.log(charSets); //["**", "bb", "cd", "**", "cc", "**", "dd", "**"]
while(charSets.indexOf('**') != -1) {
charSets.splice(charSets.indexOf('**'), 1);
}
console.log(charSets); //["bb", "cd", "cc", "dd"]

2.4 提取一个数组中的一部分

  • 不更改原数组,使用slice()
1
2
3
4
var animals = new Array('dog', 'cat', 'rabbit', 'pig', 'apple');
var newAnimals = animals.slice(1, 2);
console.log(animals); //["dog", "cat", "rabbit", "pig", "apple"]
console.log(newAnimals); //["cat"]

2.5 对每一个数组元素应用一个函数

1
2
3
4
5
var charSets = ["ab", "bb", "cd", "ab", "cc", "ab", "dd", "ab"];
charSets.forEach(function(element, index, array) {
if(element == 'ab') array[index] = '**';
});
console.log(charSets); //["**", "bb", "cd", "**", "cc", "**", "dd", "**"]

2.6 使用forEach()和call()遍历querySelectorAll()的结果

1
2
3
4
var cells = document.querySelectorAll('td + td');
[].forEach.call(cells, function(cell) {
sum += parseFloat(cell.firstChild.data);
});

2.7 对数组中的每个元素执行一个函数并返回一个新数组

  • 将一个十进制的数组转化为新的等价的十六进制数组
  • map()方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
  • 与forEach()不同,不会修改原数组,但是必须返回一个值
1
2
3
4
5
6
var decArray = [23, 3, 24, 45, 500, 9, 70];
var hexArray = decArray.map(function(ele) {
return ele.toString(16);
});
console.log(decArray); //[23, 3, 24, 45, 500, 9, 70]
console.log(hexArray); //["17", "3", "18", "2d", "1f4", "9", "46"]

2.8 创建一个过滤后的数组

  • filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
1
2
3
4
5
var charSet = ['**', 'bb', 'cc', '**', 'cd'];
var newArray = charSet.filter(function(element, index, array) {
return element != "**";
});
console.log(newArray); //["bb", "cc", "cd"]

2.9 验证数组内容

  • 使用Array every()方法来检查每个元素是否符合给定的条件
  • some() 方法确保至少某些元素符合该条件
  • 区别:every()方法只要函数返回一个false值,处理就会结束,而some()方法会继续测试每个元素,直至返回true,此时,不再验证其他元素,即可返回ture
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function testValue(element, index, array) {
var testExp = /^[a-zA-Z]+$/;
return testExp.test(element);
}
var elemSet = ['**', 123, 'adv', '-', 45, 'AAA'];
var result = elemSet.every(testValue);
var result2 = elemSet.some(testValue);
console.log(result); //false
console.log(result2); //true

var elemSet2 = ['aaa', 'animals', 'vvv'];
result = elemSet2.every(testValue);
result2 = elemSet2.some(testValue);
console.log(result); //true
console.log(result2); //true

2.10 使用一个关联数组来存储表单元素名和值

  • keys() 方法返回一个新的Array迭代器,它包含数组中每个索引的键。
1
2
3
4
5
6
7
8
var elemArray = {};
var elem = document.forms[0].elements[0];
elemArray[elem.id] = elem.value;
var elemArray = {name: 'yt', age:25};
Object.keys(elemArray).forEach(function(key) {
var value = elemArray[key];
console.log(value);
});

待续~


 评论