海飞丝网站建设中面临的技术问题_并提出可行的技术解决方案,做SEO公司多给网站,大连制作网站,遵义网站建设注#xff1a;最后有面试挑战#xff0c;看看自己掌握了吗 文章目录 使用 splice() 添加元素使用 slice() 复制数组元素使用展开运算符复制数组使用展开运算符合并数组使用 indexOf() 检查元素是否存在使用 for 循环遍历数组中的全部元素创建复杂的多维数组将键值对添加到对象…注最后有面试挑战看看自己掌握了吗 文章目录 使用 splice() 添加元素使用 slice() 复制数组元素使用展开运算符复制数组使用展开运算符合并数组使用 indexOf() 检查元素是否存在使用 for 循环遍历数组中的全部元素创建复杂的多维数组将键值对添加到对象中修改嵌套在对象中的对象使用方括号访问属性名称使用 delete 关键字删除对象属性检查对象是否具有某个属性使用 for...in 语句遍历对象使用 Object.keys() 生成由对象的所有属性组成的数组修改存储在对象中的数组 I could be bounded in a nutshell and count myself a king of infinite space. 使用 splice() 添加元素
还记得在上个挑战中我们提到 splice() 方法最多可以接收 3 个参数吗 第三个参数可以是一个或多个元素这些元素会被添加到数组中。 这样我们能够便捷地将数组中的一个或多个连续元素换成其他的元素。
const numbers [10, 11, 12, 12, 15];
const startIndex 3;
const amountToDelete 1;numbers.splice(startIndex, amountToDelete, 13, 14);
console.log(numbers);第二个 12 已被删除我们在同一索引处添加 13 和 14。 numbers 数组现在将会是 [ 10, 11, 12, 13, 14, 15 ]。
在上面的代码中数组一开始包含了若干数字。 接着我们调用 splice() 方法索引为 (3) 的地方开始删除元素删除的元素数量是 (1)。然后(13, 14) 是在删除位置插入的元素。 可以在 amountToDelete 后面传入任意数量的元素以逗号分隔每个都会被插入到数组中。
我们已经定义了一个 htmlColorNames 函数它以一个 HTML 颜色的数组作为输入参数。 请修改这个函数使用 splice() 来移除数组中的前两个元素并在对应的位置上添加 ‘DarkSalmon’ 和 ‘BlanchedAlmond’。
function htmlColorNames(arr) {// 只修改这一行下面的代码arr.splice(0,2,DarkSalmon ,BlanchedAlmond)// 只修改这一行上面的代码return arr;
}console.log(htmlColorNames([DarkGoldenRod, WhiteSmoke, LavenderBlush, PaleTurquoise, FireBrick]));使用 slice() 复制数组元素
接下来我们要介绍 slice() 方法。 slice() 不会修改数组而是会复制或者说*提取extract*给定数量的元素到一个新数组。 slice() 只接收 2 个输入参数第一个是开始提取元素的位置索引第二个是提取元素的结束位置索引。 提取的元素中不包括第二个参数所对应的元素。 如下示例
let weatherConditions [rain, snow, sleet, hail, clear];let todaysWeather weatherConditions.slice(1, 3);todaysWeather 值为 [snow, sleet]weatherConditions 值仍然为 [‘rain’, ‘snow’, ‘sleet’, ‘hail’, ‘clear’]。
在上面的代码中我们从一个数组中提取了一些元素并用这些元素创建了一个新数组。
我们已经定义了一个 forecast 函数它接受一个数组作为参数。 请修改这个函数利用 slice() 从输入的数组中提取信息最终返回一个包含元素 warm 和 sunny 的新数组。
使用展开运算符复制数组
slice() 可以让我们从一个数组中选择一些元素来复制到新数组中而 ES6 中又引入了一个简洁且可读性强的语法展开运算符spread operator它能让我们方便地复制数组中的所有元素。 展开语法写出来是这样...
我们可以用展开运算符来复制数组
let thisArray [true, true, undefined, false, null];
let thatArray [...thisArray];thatArray 等于 [true, true, undefined, false, null]。 thisArray 保持不变 thatArray 包含与 thisArray 相同的元素。
我们已经定义了一个 copyMachine 函数它接受 arr一个数组和 num一个数字作为输入参数。 该函数需要返回一个由 num 个 arr 组成的新的二维数组。 同时我们写好了大致的流程只是细节实现还没有写完。 请修改这个函数使用展开语法使该函数能正常工作提示我们已经学到过的一个方法很适合用在这里
function copyMachine(arr, num) {let newArr [];while (num 1) {// 只修改这一行下面的代码newArr.push([...arr])// 只修改这一行上面的代码num--;}return newArr;
}console.log(copyMachine([true, false, true], 2));使用展开运算符合并数组
展开语法spread的另一个重要用途是合并数组或者将某个数组的所有元素插入到另一个数组的任意位置。 我们也可以使用 ES5 的语法连接两个数组但只能让它们首尾相接。 而展开语法可以让这样的操作变得极其简单
let thisArray [sage, rosemary, parsley, thyme];let thatArray [basil, cilantro, ...thisArray, coriander];thatArray 会有值 [‘basil’, ‘cilantro’, ‘sage’, ‘rosemary’, ‘parsley’, ‘thyme’, ‘coriander’]
使用展开语法我们就可以很方便的实现一个用传统方法会写得很复杂且冗长的操作。
我们已经定义了一个返回 sentence 变量的 spreadOut 函数。 请修改这个函数利用 spread 使该函数返回数组 [‘learning’, ‘to’, ‘code’, ‘is’, ‘fun’]。
使用 indexOf() 检查元素是否存在
由于数组随时都可以修改或发生 mutated我们很难保证某个数据始终处于数组中的特定位置甚至不能保证该元素是否还存在于该数组中。 好消息是JavaScript 为我们提供了内置方法 indexOf()。 这个方法让我们可以方便地检查某个元素是否存在于数组中。 indexOf() 方法接受一个元素作为输入参数并返回该元素在数组中的位置索引若该元素不存在于数组中则返回 -1。
例如
let fruits [apples, pears, oranges, peaches, pears];fruits.indexOf(dates);
fruits.indexOf(oranges);
fruits.indexOf(pears);indexOf(‘dates’) 返回 -1indexOf(‘oranges’) 返回 2indexOf(‘pears’) 返回 1 (每个元素存在的第一个索引)。
indexOf() 在快速检查一个数组中是否存在某个元素时非常有用。 我们已经定义了一个 quickCheck 函数它接受一个数组和一个元素作为输入参数。 请通过 indexOf() 方法修改这个函数使得当传入的参数在数组中存在时返回 true否则返回 false。
function quickCheck(arr, elem) {// 只修改这一行下面的代码return arr.indexOf(elem)0?true:false// 只修改这一行上面的代码
}console.log(quickCheck([squash, onions, shallots], mushrooms));使用 for 循环遍历数组中的全部元素
使用数组时我们经常需要遍历数组的所有元素来找出我们需要的一个或多个元素抑或是对数组执行一些特定的操作。 JavaScript 为我们提供了几个内置的方法它们以不同的方式遍历数组以便我们可以用于不同的场景如 every()、forEach()、map() 等等。 然而最简单的 for 循环不仅能实现上述这些方法的功能而且相比之下也会更加灵活。
请看以下的例子
function greaterThanTen(arr) {let newArr [];for (let i 0; i arr.length; i) {if (arr[i] 10) {newArr.push(arr[i]);}}return newArr;
}greaterThanTen([2, 12, 8, 14, 80, 0, 1]);在这个函数中我们用一个 for 循环来遍历数组逐一对其中的元素进行判断。 通过上面的代码我们可以找出数组中大于 10 的所有元素并返回一个包含这些元素的新数组 [12, 14, 80]。
我们已经定义了 filteredArray 函数它接受一个嵌套的数组 arr 和一个 elem 作为参数并要返回一个新数组。 arr 数组中嵌套的数组里可能包含 elem 元素也可能不包含。 请修改该函数用一个 for 循环来做筛选使函数返回一个由 arr 中不包含 elem 的数组所组成的新数组。
function filteredArray(arr, elem) {let newArr [];// 只修改这一行下面的代码
for(let i0;iarr.length;i){if(arr[i].indexOf(elem)-1){newArr.push(arr[i])}
}// 只修改这一行上面的代码return newArr;
}console.log(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3));function filteredArray(arr, elem) {let newArr [];// 只修改这一行下面的代码
for(let i0;iarr.length;i){let j0for(;jarr[i].length;j){if(elemarr[i][j]){break;}}
if(jarr[i].length){newArr.push(arr[i]);
}
}// 只修改这一行上面的代码return newArr;
}console.log(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3));创建复杂的多维数组
很好 你现在已经学到很多关于数组的知识了 但这些只是个开始。我们将在接下来的中挑战中学到更多与数组相关的知识。 但在继续查看 对象 之前让我们再看一下看看数组如何变得比我们在之前的挑战中看到的更复杂一些。
数组的一个强大的特性是它可以包含其他数组甚至完全由其他数组组成。 在上一个挑战中我们已经接触到了包含数组的数组但它还算是比较简单的。 数组中的数组还可以再包含其他数组即可以嵌套任意多层数组。 通过这种方式数组可以很快成为非常复杂的数据结构称为多维multi-dimensional数组或嵌套nested数组。 请看如下的示例
let nestedArray [[deep],[[deeper], [deeper] ],[[[deepest], [deepest]],[[[deepest-est?]]]]
];deep 数组已嵌套 2 层。 deeper 数组嵌套了 3 层。 deepest 数组嵌套了 3 层 deepest-est? 嵌套了 5 层。
虽然这个例子看起来错综复杂不过尤其是在处理大量数据的时候这种数据结构还是会用到的。 尽管结构复杂不过我们仍可以通过方括号表示法来访问嵌套得最深的数组
console.log(nestedArray[2][1][0][0][0]);控制台打印的是字符串 deepest-est?。 既然我们知道数据的位置当然我们也可以修改它
nestedArray[2][1][0][0][0] deeper still;console.log(nestedArray[2][1][0][0][0]);现在控制台打印的是 deeper still。
我们已经定义了一个叫做 myNestedArray 的数组变量。 请修改 myNestedArray使用字符串string、数字number或布尔值boolean的任意组合作为数组的元素并让 myNestedArray 刚好有 5 层注意最外层的数组是第 1 层。 同时请在第 3 层的数组中包含字符串 deep在第 4 层的数组中包含字符串 deeper在第 5 层的数组中包含字符串 deepest。
将键值对添加到对象中
对象object本质上是键值对key-value pair的集合。 或者说一系列被映射到唯一标识符的数据就是对象习惯上唯一标识符叫做属性property或者键key数据叫做值value。 让我们来看一个简单的例子
const tekkenCharacter {player: Hwoarang,fightingStyle: Tae Kwon Doe,human: true
};上面的代码定义了一个叫做 tekkenCharacter 的“铁拳”游戏人物对象。 它有三个属性每个属性都对应一个特定的值。 如果我们想为它再添加一个叫做 origin 的属性可以这样写
tekkenCharacter.origin South Korea;上面的代码中我们使用了点号表示法。 如果我们现在输出 tekkenCharacter 对象便可以看到它具有 origin 属性。 接下来因为这个人物在游戏中有着与众不同的橘色头发 我们可以通过方括号表示法来为它添加这个属性像这样
tekkenCharacter[hair color] dyed orange;如果要设置的属性中存在空格或者要设置的属性是一个变量那我们必须使用方括号表示法bracket notation来为对象添加属性。 在上面的代码中我们把属性hair color放到引号里以此来表示整个字符串都是需要设置的属性。 如果我们不加上引号那么中括号里的内容会被当作一个变量来解析这个变量对应的值就会作为要设置的属性 请看这段代码
const eyes eye color;tekkenCharacter[eyes] brown;执行以上所有示例代码后对象会变成这样
{player: Hwoarang,fightingStyle: Tae Kwon Doe,human: true,origin: South Korea,hair color: dyed orange,eye color: brown
};我们已经为你创建了包含三个项目的 foods 对象。 请使用上述任意语法来为 foods 对象添加如下三个键值对bananas 属性值为 13grapes 属性值为 35strawberries 属性值为 27。
修改嵌套在对象中的对象
现在我们来看一个稍复杂的对象。 在对象中我们也可以嵌套任意层数的对象对象的属性值可以是 JavaScript 支持的任意类型包括数组和其他对象。 请看以下例子
let nestedObject {id: 28802695164,date: December 31, 2016,data: {totalUsers: 99,online: 80,onlineStatus: {active: 67,away: 13,busy: 8}}
};nestedObject 有 3 个属性id属性值为数字、date属性值为字符串、data属性值为嵌套的对象。 虽然对象中的数据可能很复杂我们仍能使用上一个挑战中讲到的写法来访问我们需要的信息。 如果我们想把嵌套在 onlineStatus 中 busy 的属性值改为 10可以用点号表示法来这样实现
nestedObject.data.onlineStatus.busy 10;我们已经定义了一个 userActivity 对象它包含了另一个对象。 请将 online 的属性值改为 45。
使用方括号访问属性名称
在关于对象的第一个挑战中我们提到可以在一对方括号中用一个变量作为属性名来访问属性的值。 假设一个超市收银台程序中有一个 foods 对象, 并且有一个函数会设置 selectedFood如果我们需要查询 foods 对象中某种食物是否存在 可以这样实现
let selectedFood getCurrentFood(scannedItem);
let inventory foods[selectedFood];上述代码会先读取 selectedFood 变量的值并返回 foods 对象中以该值命名的属性所对应的属性值。 若没有以该值命名的属性则会返回 undefined。 有时候对象的属性名在运行之前是不确定的或者我们需要动态地访问对象的属性值。在这些场景下方括号表示法就变得十分有用。
我们已经定义了 checkInventory 函数它接受一个被扫描到的商品名作为输入参数。 请让这个函数返回 foods 对象中以 scannedItem 的值所命名的属性对应的属性值。 在本挑战中只有合理有效的属性名会作为参数传入 checkInventory因此你不需要处理参数无效的情况。
使用 delete 关键字删除对象属性
现在我们已经学习了什么是对象以及对象的基本特性和用途。 总之对象是以键值对的形式灵活、直观地存储结构化数据的一种方式而且通过对象的属性查找属性值是速度很快的操作。 在本章余下的挑战中我们来了解一下对象的几种常用操作这样你能更好地在代码中使用这个十分有用的数据结构对象。
在之前的挑战中我们已经试过添加和修改对象中的键值对。 现在我们来看看如何从一个对象中移除一个键值对。
我们再来回顾一下上一个挑战中的 foods 对象。 如果我们想移除 apples 属性可以像这样使用 delete 关键字
delete foods.apples;请使用 delete 关键字来移除 foods 中的 oranges、plums 和 strawberries 属性。
检查对象是否具有某个属性
我们已经学习了如何添加、修改和移除对象中的属性。 但如果我们想知道一个对象中是否包含某个属性呢 JavaScript 为我们提供了两种不同的方式来实现这个功能 一个是通过 hasOwnProperty() 方法另一个是使用 in 关键字。 假如我们有一个 users 对象为检查它是否含有 Alan 属性可以这样写
users.hasOwnProperty(Alan);
Alan in users;这两者结果都应该为 true。
请完善这个函数如果传递给它的对象包含四个名字 Alan、Jeff、Sarah 和 Ryan函数返回 true否则返回 false。
使用 for…in 语句遍历对象
有时候你需要遍历一个对象中的所有键。 你可以使用 for...in 循环来做这件事。 for…in 循环是这样的
const refrigerator {milk: 1,eggs: 12,
};for (const food in refrigerator) {console.log(food, refrigerator[food]);
}以上代码记录 milk 1 和 eggs 12每个键值对单独为一行。
我们在循环头中定义了变量 food 这个变量被设置为每次迭代上对象的每个键值将每个食物的名称打印到控制台。
注意对象中的键是无序的这与数组不同。 因此一个对象中某个属性的位置或者说它出现的相对顺序在引用或访问该属性时是不确定的。
我们定义了一个函数 countOnline它接收一个参数 allUsers。 在这个函数中使用 for…in 语句来遍历 allUsers 对象并返回 online 属性为 true 的用户数量。 一个可以传递给 countOnline 的对象的例子显示如下。 每个用户都有 online 属性其属性值为 true 或 false。
{Alan: {online: false},Jeff: {online: true},Sarah: {online: false}
}使用 Object.keys() 生成由对象的所有属性组成的数组
我们可以给 Object.keys() 方法传入一个对象作为参数来生成包含对象所有键的数组。 这个方法将对象作为参数并返回代表对象中每个属性的字符串数组。 需要注意的是数组中元素的顺序是不确定的。
请完成 getArrayOfUsers 函数的实现使其返回一个由输入对象中的所有属性所组成的数组。
let users {Alan: {age: 27,online: false},Jeff: {age: 32,online: true},Sarah: {age: 48,online: false},Ryan: {age: 19,online: true}
};function getArrayOfUsers(obj) {// 只修改这一行下面的代码
return Object.keys(obj)// 只修改这一行上面的代码
}console.log(getArrayOfUsers(users));修改存储在对象中的数组
我们已经学习了 JavaScript 对象的这些基本操作 添加、修改、移除键值对、检查某个属性是否存在、遍历对象的所有属性。 在继续学习 JavaScript 的过程中我们会了解对象的更多用法。 另外在之后的数据结构课程中我们还会学习 ES6 的 Map 和 Set。 这两种数据结构与我们现在学到的对象十分类似但它们在对象的基础上提供了一些额外的功能。 目前我们已经学习了数组和对象的基础知识让我们试着来用所学的知识解决一些更复杂的问题。
请看一下代码编辑器中我们为你写好的对象。 user 对象包含 3 个属性 data 对象包含 5 个属性其中包含一个叫做 friends 的数组。 这就是对象作为数据结构所展现出的灵活性。 我们已经写好了 addFriend 函数的一部分 请你完成这个函数使其接受一个 user 对象将 friend 参数中的名字添加到 user.data.friends 数组中并返回该数组。
