我的第一篇博客
——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():把一个给定父元素里的一个节点替换为另一个节点。
顺序有点乱,但是很迫不急的发出去了!希望能收到大神们的意见,谢谢!