🎈个人公众号:🎈 :✨✨ 可为编程 ✨✨ 🍟🍟
🔑个人信条:🔑知足知不足 有为有不为 为与不为皆为可为🌵
🍉本篇简介:🍉 本片详细说明了前端JS基础知识点总结编程实战，并给出具体操作实例，如有出入还望指正。关注公众号【可为编程】回复【面试】领取年度最新面试题大全!!!
1、js[][] 第一个索引表示第几个数组，第二个索引表示该数组第几个数
2、将数据追加到一个数组末尾的最简单的方法是通过 push() 函数。
改变数组中数据的另一种方法是用 .pop() 函数。
.pop() 函数移除的是最后一个元素
.shift()移除的是第一个元素
.push()在数组末尾添加元素
.unshift()是在数组头部添加元素3、全等（=）是相对于相等操作符（）的一种操作符。
与相等操作符不同的是全等比较严格，它会同时比较元素的值和 数据类型。
4、js声明实体类属性名称加双引号和不加双引号都可以
5、修改对象属性名称为:对象名称.属性名称=‘属性新名称’！
6、添加对象新属性名为:对象名称.bark='XX'
7、删除对象属性为：delete myDog.tails;8、.hasOwnProperty(propname)方法来检查对象是否有该属性
有时检查一个对象属性是否存在是非常有用的，我们可以用.hasOwnProperty(propname)方法来检查对象是否有该属性。如果有返回true，反之返回 false
如果你需要通过变量来访问对象的属性值，请用中括号操作符，点操作符不支持变量。
return myObj.checkProp; 除非myObj中有该属性
否则：
return myObj[checkProp];用变量名来替代
属性的名字带有空格，请使用中括号操作符来访问属性的值。ssClass[“xx dd”]
关注公众号【可为编程】回复【面试】领取年度最新面试题大全!!!
9、for循环
JavaScript 中最常见的循环就是“for循环”因为它可以允许特定次数的循环。
for循环中的三个表达式用分号隔开：
for ([初始化]; [条件判断]; [计数器])
初始化语句只会在执行循环开始之前执行一次。它通常用于定义和设置你的循环变量。
条件判断语句会在每一轮循环的开始执行，只要条件判断为 true 就会继续执行循环。当条件为 false的时候，循环将停止执行。这意味着，如果条件在一开始就为 false，这个循环将不会执行。
计数器是在每一轮循环结束时执行，通常用于递增或递减。
在下面的例子中，先初始化i = 0，条件 i < 5 为真，进入第一次循环，执行大括号里的代码，第一次循环结束。递增i的值，条件判断，就这样依次执行下去，直到条件判断为假，整个循环结束。
var ourArray = [];
for (var i = 0; i < 5; i++) {
ourArray.push(i);
}
最终 ourArray 的值为 [0,1,2,3,4].10、JS数组
如果你有一个二维数组，可以使用嵌套循环的逻辑，先遍历外面的数组，再遍历里面的子数组。下面是一个例子：
var arr = [
[1,2], [3,4], [5,6]
];
for (var i=0; i < arr.length; i++) {
for (var j=0; j < arr[i].length; j++) {
console.log(arr[i][j]);
}
}这样就可以一次输出 arr 中的每个子元素。请注意，对于内部循环，我们可以通过 arr[i] 的 .length 来获得子数组的长度，因为 arr[i] 的本身就是一个数组。
关注公众号【可为编程】回复【面试】领取年度最新面试题大全!!!
例子：
function multiplyAll(arr) {
var product = 1;
// Only change code below this line
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
product *=arr[i][j];
}
}
// Only change code above this line
return product;
}
// Modify values below to test your code
multiplyAll([[1,2],[3,4],[5,6,7]]);11、JS随机数
很好，我们可以生成随机的小数，但如果我们使用它来生成随机的整数，这将是更有用的机整数。
用 Math.random() 生成一个随机小数。
把这个随机小数乘以 20。
用 Math.floor() 向下取整 获得它最近的整数。
记住 Math.random() 永远不会返回 1。同时因为我们是在用 Math.floor() 向下取整，所以最终我们获得的结果不可能有 20。这确保了我们获得了一个在0到19之间的整数。
把操作连缀起来，代码类似于下面：
Math.floor(Math.random() * 20);
我们先调用 Math.random()，把它的结果乘以20，然后把上一步的结果传给 Math.floor()，最终通过向下取整获得最近的整数。
我们之前生成的随机数是在0到某个数之间，现在我们可以生成一个落在两个特定数字范围内的随机数间。
我们需要定义一个最小值和一个最大值。
下面是我们将要使用的方法，仔细看看并尝试理解这行代码正在干什么：
关注公众号【可为编程】回复【面试】领取年度最新面试题大全!!!
Math.floor(Math.random() * (max - min + 1)) + min
12、JS正则表达式：
Regular expressions 正则表达式被用来根据某种匹配模式来寻找strings中的某些单词。
例如：如果我们想要找到字符串The dog chased the cat中单词 the，我们可以使用下面的正则表达式: /the/gi
我们可以把这个正则表达式分成几段：
/ 是这个正则表达式的头部
the 是我们想要匹配的模式
/ 是这个正则表达式的尾部
g 代表着 global(全局)，意味着返回所有的匹配而不仅仅是第一个。
i 代表着忽略大小写，意思是当我们寻找匹配的字符串的时候忽略掉字母的大小写。
关注公众号【可为编程】回复【面试】领取年度最新面试题大全!!!我们可以在正则表达式中使用特殊选择器来选取特殊类型的值。
特殊选择器中的一种就是数字选择器\d，意思是被用来获取一个字符串的数字。
在JavaScript中, 数字选择器类似于: /\d/g。
在选择器后面添加一个加号标记(+)，例如：/\d+/g，它允许这个正则表达式匹配一个或更多数字。
尾部的g是’global’的简写，意思是允许这个正则表达式 找到所有的匹配而不是仅仅找到第一个匹配。
我们也可以使用正则表达式选择器 \s 来查找一个字符串中的空白。
空白字符有 " " (空格符)、\r (回车符)、\n (换行符)、\t (制表符) 和 \f (换页符)。
空白正则表达式类似于：
/\s+/g
\S 匹配任何非空白字符$($(".slot")[0]).html(slotOne);
$($(".slot")[1]).html(slotTwo);
$($(".slot")[2]).html(slotThree);最后一个老虎机的小游戏 还挺神奇
代码如下：
<script>
function runSlots() {
var slotOne;
var slotTwo;
var slotThree;
var images = ["https://www.w3cschool.cn/statics/codecamp/images/9H17QFk.png", "https://www.w3cschool.cn/statics/codecamp/images/9RmpXTy.png", "https://www.w3cschool.cn/statics/codecamp/images/VJnmtt5.png"];
slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
// Only change code below this line.
$($('.slot')[0]).html('<img src = "' + images[slotOne-1] + '">');
$($('.slot')[1]).html('<img src = "' + images[slotTwo-1] + '">');
$($('.slot')[2]).html('<img src = "' + images[slotThree-1] + '">');
// Only change code above this line.
if (slotOne === slotTwo && slotTwo === slotThree) {
$('.logger').html("It's A Win");
return null;
}
if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){
$(".logger").html(slotOne + " " + slotTwo + " " + slotThree);
}
$('.logger').append(" Not A Win");
return [slotOne, slotTwo, slotThree];
}
$(document).ready(function() {
$('.go').click(function() {
runSlots();
});
});
</script>
<div>
<div class = 'container inset'>
<div class = 'header inset'>
<img src='/statics/codecamp/images/freecodecamp_logo.svg' alt='learn to code JavaScript at Free Code Camp logo' class='img-responsive nav-logo'>
<h2>FCC Slot Machine</h2>
</div>
<div class = 'slots inset'>
<div class = 'slot inset'>
</div>
<div class = 'slot inset'>
</div>
<div class = 'slot inset'>
</div>
</div>
<br/>
<div class = 'outset'>
<button class = 'go inset'>
Go
</button>
</div>
<br/>
<div class = 'foot inset'>
<span class = 'logger'></span>
</div>
</div>
</div>
<style>
.slot > img {
margin: 0!important;
height: 71px;
width: 50px;
}
.container {
background-color: #4a2b0f;
height: 400px;
width: 260px;
margin: 50px auto;
border-radius: 4px;
}
.header {
border: 2px solid #fff;
border-radius: 4px;
height: 55px;
margin: 14px auto;
background-color: #457f86
}
.header h2 {
height: 30px;
margin: auto;
}
.header h2 {
font-size: 14px;
margin: 0 0;
padding: 0;
color: #fff;
text-align: center;
}
.slots{
display: flex;
background-color: #457f86;
border-radius: 6px;
border: 2px solid #fff;
}
.slot{
flex: 1 0 auto;
background: white;
height: 75px;
width: 50px;
margin: 8px;
border: 2px solid #215f1e;
border-radius: 4px;
text-align: center;
}
.go {
width: 100%;
color: #fff;
background-color: #457f86;
border: 2px solid #fff;
border-radius: 2px;
box-sizing: none;
outline: none!important;
}
.foot {
height: 150px;
background-color: 457f86;
border: 2px solid #fff;
}
.logger {
color: white;
margin: 10px;
}
.outset {
-webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
}
.inset {
-webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
}
</style>
欢迎大家关注【可为编程】，成长，进步，编程，技术、掌握更多知识！
