初学JavaScript之第一周学习

最新推荐文章于 2021-12-21 21:31:54 发布

qq_35808394

最新推荐文章于 2021-12-21 21:31:54 发布

阅读量522

点赞数

本文链接：https://blog.csdn.net/qq_35808394/article/details/88779392

版权

前话：

JavaScript是什么 JavaScript是一门语言，和所有编程语言一样，能够有if, else, for, while,还有函数（方法），当然也可以自己定义函数（方法）。

JavaScript能做的事情主要有两方面：
Web页面
在Web页面上，目前主要有三种元素：HTML, CSS, JavaScript。HTML类似于结构，你可以用HTML定义一些结构，包括header, footer,
sidebar或者类似的，就像你在网页中看到的不同的“块”（仅是视觉上的块，并不是块级元素）。而CSS则用于定义样式和布局，比如字体，字号，“块”的大小，位置。那么JavaScript在做什么呢？
JavaScript做动态的东西。
动态的东西包括但不限于：表单提交，样式改变，用户操作监控与响应，比如用户点击后处理某些事情，还有就是自动化一些事情，比如在网页完全加载完成后，自动发送一些数据或者从服务器端获取一些数据并展示在页面上。
Web服务器端
有了Node.js，人们才会想到把JavaScript用在服务器端，或者说人们想到把JavaScript放到服务器端，才有了Node.js。听说trello就是用的Node.js，配合Socket.io实现更高效的通信。
一说服务器端，大多会想到大数据处理，并发，线程，进程或者其他的概念。在这里明确一下，Node.js适合做的是服务器端前端的响应，比如用户请求来了，推一条数据回去，或者用户数据来了，记录一些东西。如果你希望收集一些用户的数据，然后在后面做分析，那么这一类的工作，最好不要让Node.js,或者不要让JavaScript来做。

1.基本语法

1.1.引入方式：
向HTML页面插入JavaScript的主要方法，就是使用< script >元素。

嵌入式
直接使用< script >标签包裹JavaScript代码，直接编写到HTML文字当中如：

<html>
 <body>
   <p>script 标签之前...</p>
   <script>
     alert('Hello, world!');
   </script>
   <p>...script 标签之后</p>
 </body>
 </html>

外链式
将JavaScript代码单独编写保存到一个文件中，然后在HTML文件中使用< script >标签导入这个文件，具体示例如下：

< script type="text/javascript" src="文件位置">< /script>

行内式
行内式是将JavaScript代码作为HTML标签的属性值使用。例如，单击“test”按钮时，弹出一个警告框，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js使用方式1：行内js</title>
</head>
<body>
  <a href="javascript:alert('Hello');">test</a>
</body>
</html>

1.2标识符：
(1).由大小写字母、数字、下划线和美元符号($)组成，如str、arr3、get_name、&a。
(2).不能以数字开头，如56name是非法标识符。
(3).严格区分大小写，如it与IT表示两个不同的标识符。
(4).不能使用JavaScript中的关键字命名，如var作为变量名是不合法的。
(5).要尽量做到“见其名知其意”，如name表示名称，age表示年龄等。
值得一提的是当标识符中需要多个单词进行表示时，常见的表示方法有下划线标识法（如user_name）、驼峰法（userName）和帕斯卡法（UserName）。

1.3. 变量：
变量是弱类型的，无特定的类型，定义变量时只用 var 运算符，可以将它初始化为任意值。因此，可以随时改变变量所存数据的类型（尽量避免这样做）。
使用细节：
1、 var关键字在定义变量的时候可以省略不写
2、变量名可以重复，后面的将覆盖前面的变量
3、变量的类型取决于值的类型
一条语句定义多个变量
中间使用豆号隔开即可，可初始化，也可以不初始化

1.4.基本数据类型：
(1)布尔类型:只有true和false两个值
(2)数值型:包含整数和浮点数
(3)字符型:字符串必须使用双引号或单引号括起来
(4)空型:用于表明某个变量的值为空（赋了值，但是值为null）
(5)未定义型:专门用来确定一个已经创建但没有初值的变量

数据类型转换：
(1)转布尔型:常见的类型转换，经常用于表达式和流程控制语句中，如数据的比较、判断。Boolean()函数可以对用户输入的任何内容进行布尔类型的转换。除此之外，Boolean()函数将任何非空字符串和非零的数值转换为true将空字符串、0，NaN、underfined和null转化为false。
(2)转数值型：通过Number()函数、parseInt()函数或parseFloat()函数对参与运算的数据进行转换，保证数据都是数值型数据。值得一提的是，转数值型的函数在使用时有一定的区别：

Number()
如果参数是Date对象，返回从1970年1月1日至今的毫秒数。
如果是Boolean值，true和false将分别被替换为1和0
如果是数字值，只是简单的传入和返回
如果是null值，返回0
如果是undefined，返回NaN
如果是字符串，遵循下列规则：
如果字符串只包含数字（包括十六进制格式“0x”），则将其转换成对应的十进制。
如果字符串是空的，返回0。
如果字符串包含其它字符，返回NaN。
如果是对象，则调用对象的valueOf()方法，然后依照前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString()方法，然后再依次按照前面的规则转换返回的字符串值。

parseInt()
方法返回与保存在numString中的数字值相等的整数。如果numString的前缀不能解释为整数，则返回NaN（而不是数字）。它会忽略字符串前面的空格，直至找到第一个非空格字符。

parseFloat()
方法返回与numString中保存的数相等的数字表示。如果numString的前缀不能解释为浮点数，则返回NaN（而不是数字）。

(3)转字符型：通过String()函数和toString()方法进行转换，他们的区别是前者可以将任意类型转换为字符型，后者出来null和undefind没有toString()方法，其他都可以转换

2.流程控制

2.1.条件判断语句：
2.1.1.if语句

if (condition) statement1 else statement2

其中的condition条件可以是任意表达式，而且对这个表达式的求值结果不一定是布尔值。ECMAScript会自动调用Boolean()转换函数将这个表达式的结果转换为一个布尔值。如果对condition求值的结果为true，则执行statement1，如果对condition求值结果为false，则执行statement2。这两个语句既可以是一行代码，也可以是一个代码块(推荐)。

if (condition1) statement1 else if(condition2) statement2 else statement3

2.1.2.switch语句

switch(expression) {
  case value: statement
    break;
  case value: statement
    break;
  case value: statement
    break;
  default: statement
}

switch语句中每一个case的含义是:“如果表达式等于这个值value，则执行后面的语句statement”。而break会导致代码执行跳出switch语句。如果省略break关键字，就会导致执行完当前case后，继续执行下一个case。最后的default关键字则用于在表达式不匹配前面任何一种情形时，执行机动代码(因此，也相当于一个else语句)。

例子1

var num = 25;
switch (true) {
  case num < 0:
    alert("Less than 0");
    break;
  case num >= 0 && num <= 10:
    alert("Between 0 and 10");
    break;
  case num > 10 && num <= 20:
    alert("Between 10 and 20");
    break;
  default:
    alert("More than 20");
}

注意:switch语句在比较值时使用的是全等操作符，因此不会发生类型转换。

2.2.循环语句：
后测试循环语句。
在对表达式求值之前，循环体内的代码至少被执行一次。
2.2.1.do-while语句

do {
  statement
} while (expression)

例子2

var i = 0;
  do {
    i += 2;
  } while (i < 10);
  alert(i);//10

前测试循环语句

2.2.2.while语句

while(expression) statement

例子3

var i = 0;
 while(i < 10) {
   i += 2;
 }
 alert(i);//10

2.2.3.for语句
它具有在执行循环之前初始化变量和定义循环后要执行代码的能力。
例子4

for(var i = 0;i < 10;i++) {
  alert(i);
}

迭代语句
for-in语句
for-in 语句是一种精准的迭代语句，可以用来枚举对象的属性

for (var prop in window) {
    console.log(prop);
  }

ECMAScript对象的属性没有顺序。因此通过for-in循环输出的属性名是不可预测的，具体来讲，所有属性都会被返回一次，单反毁的先后次序可能会因浏览器而异。建议在使用之前，先检测确认该对象的值不是null或unedfined。
2.3.控制执行语句：
2.3.1.break语句
立即退出循环
例子5

var num = 0;
 for(var i = 1;i < 10;i++) {
   if(i % 5 == 0) {
     break;
   }
   num++;
 }
 alert(num);//4

2.3.2.continue语句
退出当前正在执行的循环代码，然后开始继续循环。

var num = 0;
    for(var i = 1;i < 10;i++) {
      if(i % 5 == 0) {
        continue;
      }
      num++;
    }
    alert(num);//8

2.3.2.return语句
可指定返回值,也可不指定(此时返回undefined)。
1.return语句后停止并立即退出函数，return后面的语句也永远不会执行
2.return语句只能在函数体内出现，如果不是的话会自动报语法错误

3.数组：

3.1.定义
3.1.1使用Array构造函数

let test1 = new Array();// []
let test2 = new Array(3);// [undefined, undefined] // 使用Array.of方法创建数组时可以消除这种差异
let test3 = new Array(3, 4);// [3, 4]

3.1.2使用数组字面量方法

let test1 = [];// []
let test2 = [3];// [3]
let test3 = [3, 4];// [3,4]

可以看到，数组字面量方法比较符合正常的逻辑。

3.2.属性
3.2.1.索引

索引是基于0的
索引小于0时返回undefined
索引最大值为arr.length - 1,获取超过索引最大值对应的值时返回undefined，赋值超过索引最大值对应的值时添加元素。arr[arr.length] =value相当于arr.push(value)

3.2.2.length

length是基于1的，是数组的项数
数组的length不是readonly项目，所以可以通过设置数组的length进行在数组末尾的增项减项（Gets or sets the
length of the array. This is a number one higher than the highest
element defined in an array.

3.3.检测

假定只有一个全局执行环境， array instanceof Array
ES5新方法， Array.isArray(array)

3.4.数组的常用方法

3.4.1.增加、删除方法

push() 向数组末尾添加一个元素

pop() 从数组末尾删除一个元素

unshift() 向数组开头添加一个元素

shift() 从数组开头删除一个元素

splice()

3.4.2.排序、反转

sort() 排序

var arr=[123,234,345,456]
arr.sort()//用于单字符
arr.sort(function(a,b){return a-b})//用于数字
arr.sort(function(a,b){a.localeCompare(b)})//用于中文
reverse() 反转数组的元素

3.4.3.迭代方法

every()

var arr=[12,23,34,45,56];
arr.every(function(item,index,array){
return item>30;

//item当前元素，index当前元素的下标，array是当前遍历数组
//表示数组每一项都运行给定函数，如果该函数每一项都返回true，则返回true
})
some() 对数组每一项都运行给定函数，如果该函数有一项返回true，则返回true

filter() 对数组每一项都运行给定函数，将返回true的项组成数组返回

map() 对数组每一项都运行给定函数，如果该函数有一项返回true，则返回true

forEach() 数组每一项都运行给定函数，如果该函数有一项返回true，则返回true

3.4.4.转换成字符串

jion()

toString()

toLocalString()

3.4.5.其他

concat()

indexOf()

lastIndexOf()

slice()

reduce()

reduceRight()

4.函数：

4.1.函数基本概念
　　为完成某一功能的程序指令(语句)的集合，称为函数。

4.2.JavaScript函数的分类

自定义函数(我们自己编写的函数)，如：function funName(){}
系统函数(JavaScript自带的函数)，如alert函数。

4.3.函数的调用方式

普通调用：functionName(实际参数…)
通过指向函数的变量去调用：
　　　　　　var myVar=函数名;
　　　　　　myVar(实际参数…);

4.4.函数返回值

当函数无明确返回值时，返回的值就是"undefined"。
当函数有返回值时，返回值是什么就返回什么。

4.5.变量的作用域
声明变量后并不意味着就可以在任意位置使用该变量

全局变量：不存在任何函数内声明的变量（显示定义）或在函数内省略var声明的变量都称为全局变量，它在同一个页面文件中的所有脚本内都可以使用
局部变量：在函数体内利用var关键字定义的变量成为块级变量，它仅在该函数体内有效
块级变量：ES6提供的let关键字声明的变量成为块级变量，它仅在“{}”中间有效，如if、for或while语句等

4.6.常用函数

4.6.1.匿名函数

var f1 = function(i1, i2) {
    return i1 + i2;
}
alert(f1(1,2));

这种匿名函数的用法在JQuery中的非常多

alert(function(i1, i2) { return i1 + i2; }(10,10));

直接声明一个匿名函数，立即使用。用匿名函数的好处就是省得定义一个用一次就不用的函数，而且免了命名冲突的问题，js中没有命名空间的概念，因此很容易函数名字冲突，一旦命名冲突以最后声明的为准。

4.6.2.箭头函数

ES6中引入了一种新的语法编写匿名函数，称之为箭头函数。其中，一个箭头函数表达式的语法比一个函数表达式更短。多用来定义那些仅用作其他函数实参的函数。

//用法1：标准语法
(p1,p2, ..., pN) => {statments}
//用法2：返回值
(p1,p2 ...,pN) => {return expression;} 或 (p1,p2, ...pN) => expression
//用法3：含有一个参数
(singleParem) =>{statmanes;} 或 singlePeram => {statments;}
//用法4：无参箭头函数
() =>{statments;} 或 _ => {statments;}

上述语法中，箭头“=>”前的小括号式是传递的参数，后面的{}中的是函数体，当函数体中只有一条语句时可以省略{}同时函数体中只有一条返回值语句时可同时省略{}和return关键字。当参数列表中只有一个参数时可以省略（），当箭头函数没有参数时，箭头"=>"前必须含有小括号或下划线

//设置1个参数
var fn1 = x => x+2;
console.log(fn1(4));
//设置2个参数
var fn2=(x,y) =>x+y;
console.log(fn2(1,2));

4.6.3.回调函数
回调函数就是把函数作为一个参数对象传递给另外的函数调用

利用回调函数实现具体功能的方法：

方法名称	功能描述
find()	返回数组中满足回调函数的第一个元素的值，否则返回undefined
every()	测试数组中的某些元素是否通过由回调函数实现的测试
some()	测试数组中的某些元素是否通过由回调函数实现的测试
forEach()	对数组的每个元素执行一次提供的函数
map()	创建一个新数组，其结果是该数组中的每个元素都调用一次提供的回调函数后返回的结果
reduce()	对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值
reduceRight()	接收一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值

4.6.4.闭包函数
闭包函数可以在函数外部读取函数内部的变量。
可以让变量的值始终保持在内存中
闭包函数的实现：

<script>
function fn(){
var times=0;
var c=function(){
return ++times;
};
return c;
}
var count =fn();       //保存fn()返回的函数，此时count就是一个闭包
//访问测试
console.log(count());
console.log(count());
console.log(count());
console.log(count());
console.log(count());
</script>

上述代码4到6行利用闭包函数实现了在全局作用域中访问局部变量times，并让变量的值始终存储在内存中，第九行调用fn()函数后，将匿名函数的引用返回给count变量，且使用了局部变量times所以times不会在fn()函数执行完后被回收。

4.7.函数的嵌套与递归
递归：
一般是用来针对非匿名形式函数字面量和声明式函数。调用自身的函数称为递归函数；

缺点：递归占用的内存和资源比较多，同时难以实现和维护。
优点：在处理DOM之类的树形结构数据时，非常适合用递归。

例如：

function commonFunction()
    { 
var myFunc=function specialFunction(param1,param2,......,paramn)    
{    
function body;//存在某个判断条件使递归最终跳出循环    
return specialFunction(param1,param2,......,paramn);    
}    
var result=myFunc(param1,param2,......,paramn);    
    }

嵌套：
不适用于匿名式函数(动态式)，因为匿名式函数每次使用时都需要重构。
在某一函数内部存在了另一个函数就会形成嵌套。对于嵌套函数来言，内部函数在外部函数作用域内执行，并拥有对外部函数的参数和变量的访问权。而外部函数没有访问内部函数的权限。

内部函数通过外部函数传递给应用程序时将直接调用它，它可以使用作为参数传递给外部函数的参数值。

例如：

<script>    
function outerFunc(base)//外部函数    
{    
var outerStr="!!!!";    
return function(ext){        //内部函数  
return base+ext+outerStr;    
}    
}    
function myApplication()//应用函数    
{    
var baseStr=outerFunc("Hello");//创建对内部函数的访问    
var newStr=baseStr("World");    
alert(newStr);   
}    
</script>

qq_35808394

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
初学JavaScript之第一周学习

前话：JavaScript是什么 JavaScript是一门语言，和所有编程语言一样，能够有if, else, for, while,还有函数（方法），当然也可以自己定义函数（方法）。JavaScript能做的事情主要有两方面：Web页面在Web页面上，目前主要有三种元素：HTML, CSS, JavaScript。HTML类似于结构，你可以用HTML定义一些结构，包括header, f...
复制链接

扫一扫