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

我的第一篇博客

——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():把一个给定父元素里的一个节点替换为另一个节点。

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

时间: 2024-10-10 02:52:15

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

js基础--javascript基础概念之语法

掌握一门语言 必须先掌握它的语法! javascript 的语法和C.Java.Perl 的语法有些相似.但是比它们更加宽松. javascript 中的一切都是严格区分大小写的.例如变量: demo 和 Demo 两个变量是完全不同的. javascript 标示符,所谓标示符 是指 变量.函数.属性 的名字或函数的参数.标示符的格式是按照以下规则组合的一个或多个字符. 1.第一个字符必须是字母,下划线,或 $ 符号. 2.其他字符可以是字母.下划线.$ . 或数字. 注意 不能把关键字 保留

JS面试基础

问题: 1.JS中typeof能够得到哪些类型? 考点:JS 的变量类型 2.何时用 双等于 == ?何时用 三等 ===? 考点:强制类型转换 3.window.onload 与 DOMContentLoaded的区别. 4.用JS创建10个<a>标签 ,点击的时候弹出来对应的序号 . 考点:作用域 5.简述如何实现一个模块加载器,实现类似require.js的基础功能. 考点:JS的模块化 6.实现数组的随机排序 考点:JS的基础算法. 1.变量分为值类型和引用类型. var a = 10

Node.js系列基础学习----安装,实现Hello World, REPL

Node.js基础学习 1:简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好 2:安装 à安装node.js 在官网安装自己win版本的node.js的版本,下载,安装完毕后在运行中输入node -v若是出现版本号就证明安装成功. à安装n

js基础--javascript基础概念之数组(二)

js基础--javascript基础概念之数组 数组栈方法 数组可以像栈一样.栈是一种先进后出的数据结构,最先添加的数据最后一个出来.栈方法添加数据也称为 推入  移除数据称为 弹出. js为数值栈方法提供了 push()   和  pop() ;  两个方法. push() push() 方法接受参数就是你要添加进入到数组的值.push()  方法会将他们逐一添加到数组的末尾  数组的length属性会跟着更新数据. *push(多个数组元素值) 返回的修改后的数组长度 var array =

js基础--javascript基础概念之数组

js基础--javascript基础概念之数组 在ECMAScript 中 ,数组是很常用的数据类型,js中的数组和其他很多语言的数组有明显的区别.js的数组可以保持任何类型的数值,一个数组中可以保存着多个不同类型的数值.js数组大小(长度)是可以调整的.可以随着数据的添加自动增长数组长度. 创建数组: 一.数组字面量 数组字面量由一对包含数组项的方括号[]表示. var array = [ 'kin', 'cheong', 'change', 'hello', 'haha', 'hi' ];

js基础--javascript基础概念之语句(二)

js基础--javascript基础概念之语句(二)label,break,continue.. break .  continue 语句. break  continue 语句用于在循环中精确控制代码的执行,其中break语句会立即退出循环,执行循环后面的语句. continue 则退出循环后返回到再次进入循环中. 如: var num = 0; for(var i = 0; i<=100; i++){ if(i >= 10){ break; } num = i; } alert(num);

js写基础insertAfter()方法

DOM没有提供insertAfter()方法,使用js写一个基础的insertAfter()方法. ? 1 2 3 4 5 6 7 8 9 10 11 12 <script type="text/javascript"> function insertAfter(newElement,targetElement){     var parent = targetElement.parentNode;     if(targetElement == parent.lastCh

7月14日:JS的基础语法

首先,是最近的课程安排: JS的基础语法→BOM→DOM→DOM样式表→JS事件→JS表单→正则表达式: 以下为今天的学习内容: 一.JS的介绍 JS是一种弱类型的解释语言,它用var来定义变量.JS要在网页环境中运行,而Java可以在任何平台使用 二.JS的原始数据类型 undefined:未定义类型和值,无返回值 null:表示不存在的对象 boolean:只有2个值true和false number:数字型,可表示32位的整数和64位的浮点数 string:字符串类型 三.类型的转换 Bo

js基础--javascript基础概念之变量与作用域

js基础--javascript基础概念之变量.作用域 javascript按照ECMA-262 的定义,变量与其他语言变量有所不同.js变量时松散的,不需要事先定义变量类型的.这使得他只是一个保存特定值的一个名称.变量与其数据类型可以在脚本的生命周期内改变. 还有明白几点: JavaScript的变量作用域是基于其特有的作用域链的,JavaScript没有块级作用域. 基本类型和引用类型的值 ECMAScript 的变量有两种不同的数据类型:分别是 基本数据类型值 和 引用类型值 : 基本数据