icytailu / headfirstjavascript Goto Github PK
View Code? Open in Web Editor NEW读书笔记
读书笔记
为了更好管理有顺序的数据,比如:购物车中所有商品,播放列表中所有歌曲,一系列恒星。
都需要数组来储存,
const arr = [1,2,3,4]
push()
和 unshift()
const numbers = [0,1,2,3,4,5,6,7,8,9];
numbers.push(11,12,13);
numbers;//0~13;
numbers.unshift(-3,-2,-1);
numbers;//-3~13
pop()
和 shift()
const numbers = [0,1,2,3,4,5,6,7,8,9];
numbers.pop();//9 返回删除的元素
numbers;//[0, 1, 2, 3, 4, 5, 6, 7, 8]
numbers.shift(); // 0 返回删除的元素
numbers; //[1, 2, 3, 4, 5, 6, 7, 8]
splice()
使用splice方法,简单地通过指定位置/索引,就可以删除相应位置和数量的元素:
numbers.splice(5,3);// [6, 7, 8] 删除的元素
//
numbers; // [1, 2, 3, 4, 5]
numbers.splice(5,0,2,3,4); // 返回 [] 因为没有删除元素
// splice方法接收的第一个参数,表示想要删除或插入的元素的索引值。5,从索引为5开始(包括5)
// 第二个参数是删除元素的个数(这个例子里,我们的目的不是删除元素,所以传入0)。
// 第三个参数往后,就是要添加到数组里的值(元素2、3、4)。
numbers; // [1, 2, 3, 4, 5, 2, 3, 4]
在JavaScript中,数组是可修改的对象,这意味着创建的每个数组都有一些可用的方法
好多好玩的方法
方法名 | 描述 |
---|---|
concat |
连接两个或多个数组,并返回连接后的数组 |
every |
对数组中的每一项运行给定函数,如果函数对每一项都返回true ,则返回true |
filter |
对数组中的每一项运行给定函数,返回该函数会返回true 的项组成的数组 |
forEach |
对数组中的每一项运行给定的函数。没有返回值 |
join |
将所有的数组元素连接成一个字符串 |
indexOf |
返回第一个与给定参数相等的数组元素的索引,没有找到则返回-1 |
lastIndexOf |
返回在数组中搜索到的与给定参数相等的元素的索引里最大的值 |
map |
对数组中的每一项运行给定的函数,返回函数调用的结果组成的数组 |
reverse |
颠倒数组中元素的顺序,整个数组元素反转 |
slice |
传入索引值,将数组里对应索引范围内的元素作为新数组返回 |
some |
对数组中的每一项运行给定函数,如果任一项返回true 就返回true |
sort |
按照字母顺序对数组排序,支持传入指定排序方法的函数作为参数 |
toString |
将数组作为字符串返回 |
valueOf |
和toString 类似,将数组作为字符串返回 |
concat
const zero = 0;
const rightNum = [1,2,3];
const leftNum = [-3,-2,-1];
const numbers = leftNum.concat(zero,rightNum);
numbers // [-3, -2, -1, 0, 1, 2, 3]
有时候,需要迭代数组中的元素。JavaScript内置了许多数组可用的迭代方法。
一个栗子:有一个数组,值是1~10;如果数组元素是偶数,函数返回true
,否则返回false
const isEven = function(x){
console.log(x);
return (x % 2 == 0);
}
const numbers = [1,2,3,4,5,6,7,8,9,10];
every
迭代numbers.every(isEven);
返回1;false结束。
some
迭代numbers.some(isEven);
返回 1 2 true
forEach
方法迭代numbers.forEach( x=>{
console.log( x % 2 == 0);
});
// false true false true false true false true false true
map
和filter
方法const maps = numbers.map(isEven);
maps //[false, true, false, true, false, true, false, true, false, true]
const evenNums = numbers.filter(isEven);
evenNums // [2, 4, 6, 8, 10]
reduce
方法对一个数组中的所有元素求和
numbers.reduce( (pre,cur,index) =>{
return pre + cur;
})
// 返回55
计算1+2+3+4+···+100
const nums = [];
for(let i=1;i<=100;i++){
nums.push(i);
}
nums.reduce((pre,cur) =>{
return pre+cur;
})
@@iterator | 返回一个包含数组键值对的迭代器对象,可以通过同步调用得到数组元素的键值对 |
---|---|
copyWithin | 复制数组中一系列元素到同一数组指定的起始位置 |
entries | 返回包含数组所有键值对的@@iterator |
includes | 如果数组中存在某个元素则返回true,否则返回false。ES7新增 |
find | 根据回调函数给定的条件从数组中查找元素,如果找到则返回该元素 |
findIndex | 根据回调函数给定的条件从数组中查找元素,如果找到则返回该元素在数组中的索引 |
fill | 用静态值填充数组 |
from | 根据已有数组创建一个新数组 |
keys | 返回包含数组所有索引的@@iterator |
of | 根据传入的参数创建一个新数组 |
values | 返回包含数组中所有值的@@iterator |
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.