小白总结的一些关于JS的基础概念

Posted 2020-08-06 只要闪电降临 就会有跳舞的火焰

我的第一篇博客

——JS的那些基础概念

    接触前端已经整整一学年了，这是我第一次写博客，感觉心里装了无数只兔子，很紧张，很激动，也很兴奋。

    第一次写，也不知道有没有什么套路，需不需要注意文采之类的。不管了，太激动了，我就直接写只要内容吧！下面是我总结的一些关于JS的基础概念：

    【变量】
从字面上面，变量是可变的量；从编程角度讲，变量是用于存储某些/某种数值的存储器。我们可以把变量看作一个盒子用来存储物

品。

    【数组】
变量用来存储数据，一个变量只能存储一个内容。如果你想存储多个内容，那么就可以用数组解决，一个数组变量可以存放多个数

据，好比一个团，团你有很多人。数组是一个值得集合，每个值都有一个索引号，从0开始，每个索引都有一个相应的值，根据需要

添加更多数值。

创建数组：使用数组之前首先要创建，需要把数组本身赋值给一个变量。
1、创建数组是空数组，没有值，如输出，则显示undefined。
2、虽然创建数组时，指定了长度，但它是可以变长的，根据需要而添加内容，长度随即变长。

    【数组方法】
即对一个或多个数组进行的一系列操作。
（1）数组连接方法：concat()方法，用于连接两个或多个数组，返回一个新数组，不改变原来的数组，仅仅返回被连接数组的一个

副本。
语法：arrayObject.concat(array1,array2,...,arrayN)
用法如下：
<script type="text/javascript">
  var mya = new Array(3);
  mya[0] = "1";
  mya[1] = "2";
  mya[2] = "3";
  document.write(mya.concat(4,5)+"<br>");
  document.write(mya);
</script>
返回结果：
1,2,3,4,5
1,2,3
（2）指定分隔符连接数组元素方法：join()方法，该方法用于把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行

分隔。
语法：arrayObject.join(分隔符（默认为逗号）)；
用法：
<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join("."));
</script>
运行结果：
I.love.JavaScript
（3）颠倒数组元素顺序：reverse()方法，用于颠倒数组中元素的顺序。
语法：arrayObject.reverse()；
用法如下：
<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "1"
  myarr[1] = "2"
  myarr[2] = "3"
  document.write(myarr + "<br />")
  document.write(myarr.reverse())
</script>
运行结果：
1,2,3
3,2,1
（4）选定元素：slice()方法，该方法可从已有的数组中返回选定的元素。
语法：arrayObject.slice(start,end)
参数说明：
start，必需，规定从何处开始选取。如果为负数，那么它规定从数组尾部算起的位置，即：-1为最后一个元素，-2为倒数第二个元

素，以此类推。end，可选，规定从何处结束选取。该参数是数组片段结束处的数组下标（不包含该下标所指元素）。如果没有指定

参数，那么切分的数组包含从start到数组结束的所有元素。如果为负数，那么它规定从数组尾部算起。
该方法不会修改数组，而是返回一个子数组。
注意：
String.slice()与Array.slice()相似。
用法如下：
<script type="text/javascript">
  var myarr = new Array(1,2,3,4,5,6);
  document.write(myarr + "<br>");
  document.write(myarr.slice(2,4) + "<br>");
  document.write(myarr);
</script>
运行结果：
1,2,3,4,5,6
3,4
1,2,3,4,5,6
（5）数组排序：sort()方法，该方法用于使数组中的元素按照一定的顺序排序。
语法：arrayObject.sort(方法函数)
参数说明：可选，规定排序顺序，必须是函数。如果不指定<方法函数>，则按unicode码顺序排列：myArray.sort(sortMethod);。
该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b，起返回值如下：
若返回值  <= -1,则表示A在排序后的序列中出现在B之前。
若返回值  > -1 && < 1,则表示A和B具有相同的排列顺序。
若返回值  >= -1,则表示A在排序后的序列中出现在B之后。
例子：
<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序，如降序，把“a - b”该成“b - a”
}
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));
</script>
运行结果：
80,16,50,6,100,1
1,6,16,50,80,100
（6）数组元素删除（数组拼接）：splice()方法，用于删除数组中从特定位置开始的元素，返回删除的值，会修改原数组。
语法：arrayObject.splice(start,end,添加的项...)
参数说明：start，必需，规定从何处开始删除。数字为元素下标（删除值包括该下标）。
end，可选，表示删除的数目。
splice()方法还可以添加元素，因此称为字符串拼接。
例子如下：
var arr=[1,2,3,4,5];
arr.splice(2);//returns [3,4,5]
arr;//[1,2]

var arr=[1,2,3,4,5];
arr.splice(2,2);//returns [3,4]
arr;//[1,2,5]

var arr=[1,2,3,4,5];
arr.splice(1,1,"a","b");//returns [2]
arr;//[1,"a","b",3,4,5]
（7）数组遍历：forEach()方法，用于遍历数组。不会修改原数组。
语法：arrayObject.forEach(function(x,index,a(可选){})
参数说明：x，表示数组任意的元素，index表示元素的索引值，a表示指向数组，返回值为布尔值。
例子如下：
var arr=[1,2,3,4,5];
arr.forEach(function(x,index,a){
console.log(x + "|" +index +"|" + (a===arr));//console.log打印数据，相当于C语言里的printf
});
运行结果：
1|0|true
2|1|true
以此类推
（8）数组映射：map()方法，该方法用于对每一个数组元素进行操作，同样不会修改原数组。
语法：arrayObject.map(function(x){});
例子：
var arr=[1,2,3];
arr.map(function(x){
return x+10;
});//return [11,12,13]
arr;//[1,2,3]
（9）数组过滤：filter()方法，用于筛选一些我们需要的数组元素。不会修改原数组。
语法：arrayObject.filter(function(x,index){})
参数说明：x，表示数组任意的元素，index表示元素的索引值。
例子：
var arr=[1,2,3,4,5,6,7,8,9,10];
arr.filter(function(x,index){
  return index%3===0||x>=8;
});
运行结果：
[1,4,7,8,9,10]
（10）数组判断：every()和some()方法，用于判断数组元素是否满足条件，返回布尔值，与every()不同的是，some()表示只要有

一个元素满足条件就返回true。
（11）reduce()和reduceRight()方法，用于数组元素之间的两两比较，最终得到一个值（把数组聚合成一个结果），如：找最大值

，求和。而reduceRight()表示从右边开始两两比较。
（12）数组检索：indexOf()和lastIndexOf()方法，用于检索每个元素在数组中的索引值。lastIndexOf()表示从后往前检索。
语法：arrayObject.indexOf(x,start),arrayObject.lastIndexOf(x,start)
参数说明：x,表示需要检索的元素，start表示从何处开始检索（下标值），如果start为负数表示从倒数第几个元素开始检索。


    【函数】
就是一块javascript代码，被定义一次，但可执行和调用多次。js中的函数也是对象，，所以他也可以像其他对象那样操作和传递

，因此，js中的函数常被称为函数对象。定义函数的方式有两种：函数声明和函数表达式。

    【函数声明】
就是创建函数的一种方式，他有一个重要的特征：函数声明提升，即函数声明前置。意味着即使函数声明在在语句的后面，在执行

代码之前都会先读取函数声明。
函数声明格式：
function add(a,b){
  return a+b;
}
（它以function开头，拥有一个函数名，没有括号，没有叹号，也没有赋右值）


    【对象】
javascript中的所有食物都是对象，如：字符串，数组，数值，函数等。每个对象带有属性和方法。

对象属性：反映该对象某些特定的性质，如：字符串长度，图像长度等。
对象方法：能够在对象上执行的动作，比如：表单的提交（submit），时间的提取（getyear）。

    【window对象】
window对象是BOM的核心，window对象指的是当前的浏览器窗口，他表示浏览器的一个实例。在浏览器中window对象有双重角色，它

即是通过javascript访问浏览器窗口的一个接口，也是ECMAScript规定的Global对象，这意味着在网页中定义的任何对象、变量、

函数，都以window作为其Global对象。因此，所有全局作用域中声明的变量、函数都会成为window对象的属性和方法。虽然全局变

量会成为window对象的属性，但是，定义全局变量和在window对象上直接定义属性还是有区别：全局变量不能通过delete删除，而

直接在window对象上定义的可以。记住：尝试访问未声明的变量会有错，但是通过window对象查询可以知道那个可能未声明的变量

存在。

    【this对象】
javascript中的this比较灵活，在不同的环境下，同一个函数在不同的调用方式下，this都有可能不同。
在全局作用域中，this一般指向全局对象，在浏览器里面，这个全局对象就是window。
在一般函数的中，this任然指向全局对象，在浏览器里，就是window。但是，在严格模式下，调用一般函数的this会得到一个

undefine值。
总的来说，在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象，特别的，匿名函数的执

行环境具有全局性，因此其this对象通常指向window。（匿名函数：创建一个函数，并将它赋值给变量functionname,在这种情况下

创建的函数叫做匿名函数）

    【DOM及DOM操作】
文档对象模型DOM定义访问和处理html文档的标准方法。DOM和html文档呈现为带有元素（即标签）、属性（元素属性）和文本（向

用户展示的内容）的树结构（节点树）。

DOM操作有：
createElement(element)：创建一个新的元素节点；
createTextNode()：创建一个包含着给定文本的新文本节点
appendChild()：指定节点的最后一个子节点列表之后添加一个新的子节点；
insertBefore()：将一个给定节点插入到一个给定元素节点的给定节点前面；
removeChild()：从一个给定元素中删除一个节点；
replaceChild()：把一个给定父元素里的一个节点替换为另一个节点。

顺序有点乱，但是很迫不急的发出去了！希望能收到大神们的意见，谢谢！