Code Monkey home page Code Monkey logo

headfirstjavascript's People

Contributors

icytailu avatar

Watchers

 avatar

headfirstjavascript's Issues

编写代码:更进一步

第一次尝试---简化的战舰游戏

步骤

  • 1,启动游戏

游戏将一艘战舰随机放在网格中

  • 2,开始玩游戏

提示猜测一个位置(2,0)
将用户猜测的位置与战舰的位置进行比较,确定结果是击中还是未击中

  • 3,游戏结束

根据猜测次数打分

流程图

数据结构与算法:数组

为什么要用数组?

为了更好管理有顺序的数据,比如:购物车中所有商品,播放列表中所有歌曲,一系列恒星。
都需要数组来储存,

创建数组

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];
  • 01、用every迭代
numbers.every(isEven);

返回1;false结束。

  • 02、用some迭代
numbers.some(isEven);

返回 1 2 true

  • 03、用forEach方法迭代
numbers.forEach( x=>{
    console.log( x % 2 == 0);
});
// false true false true false true false true false true
  • 04、使用mapfilter方法
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]
  • 05、使用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;
})

ES6数组新功能

@@iterator 返回一个包含数组键值对的迭代器对象,可以通过同步调用得到数组元素的键值对
copyWithin 复制数组中一系列元素到同一数组指定的起始位置
entries 返回包含数组所有键值对的@@iterator
includes 如果数组中存在某个元素则返回true,否则返回false。ES7新增
find 根据回调函数给定的条件从数组中查找元素,如果找到则返回该元素
findIndex 根据回调函数给定的条件从数组中查找元素,如果找到则返回该元素在数组中的索引
fill 用静态值填充数组
from 根据已有数组创建一个新数组
keys 返回包含数组所有索引的@@iterator
of 根据传入的参数创建一个新数组
values 返回包含数组中所有值的@@iterator

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.