前端入门整理（3）Javascript

谁践踏了优雅 2023-06-23 12:50 12阅读 0赞

\#前端入门整理（3）Javascript

--------------------

社团培训讲到js课程，整理的过程正好复习一遍。-.-

### 一、JavaScript简介 ###

前端基础：html是骨架，css是血肉，那么JavaScript就是灵魂所在，可以说，想要做出交互的动态网页，没有js是行不通的。虽然最初始作为是web页面的脚本语言而产生的，但现在越来越流行而且功能也越来越强大，还是要好好掌握的。

### 二、JavaScript写在哪里？ ###

内部：Html网页的<body></body>中；
    内部：Html网页的<head></head>中；
    外部：外部js文件里。

区别：

在HTML `<body>`部分中的JavaScripts会在页面加载的时候被执行。

在HTML `<head>`部分中的JavaScripts会在被调用的时候才执行。

通俗来讲：需调用才执行的脚本或事件触发执行的脚本放在head部分中；放在body部分的脚本通常被用来生成页面的内容。如果定义了一个对象绑定到页面的一个按钮上的时候，就必须要把代码写到body里，否则按钮还没加载出来，调用的话只能是undefind。

### 三、JS基本知识 ###

#### 1.数据类型 ####

*  Number：js中不分整型和浮点型，只要是数字就都能用number表示。（1 ； 0.1 ； 1.234e3；-1都是合法的，还有特殊的NaN表示结果无法计算Not a Number）
 *  String：字符串，`''` `""`中的任意文本（```'小明'``"abc"``"1234"```）
 *  布尔：true false
 *  数组：\[1,2,a,‘abc’,true\]
 *  Null和Undefined：null表示一个“空”的值，它和0以及空字符串 ’ ’ 不同，0是一个数值， ’ ’ 表示长度为0的字符串，而null表示“空”。undefined，它表示“未定义”。  
    JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。区分两者的意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。

#### 2.赋值 ####

`var a;` 定义a变量，undefined

`var b=1;` 定义b，并赋值为1

`var c= true;` 定义c为布尔值true

`var d="sdasd";` 定义d为字符串

`var arr = [1, 2, 3.14, 'Hello', null, true];`定义数组

！值得注意的是js中的使用等号=对变量进行赋值。可以把任意数据类型赋值给变量，同一个变量可以反复赋值，而且可以是不同类型的变量，但是要注意只能用var申明一次

var a =1;
    a='hey';       //是完全可行的

这就是js作为 动态语言 的优势所在。

`var`、`const`和`let`区别

let是块级作用域  
var是全局  
const是常量定义  
（var声明会被提升,而let const不会被提升！）

Tips
    赋值 =
    比较 ==或===

要特别注意相等运算符：

==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

=== 比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。  
建议不要使用==比较，始终坚持使用 ===比较。

（NaN和任何值都不相等，包括自己）需要判断只能通过`isNaN()`函数

#### 3.字符串操作 ####

①转义字符  
如果我们想定义一个`I'm going to "RushB"`字符串，字符串中包含```'``"```，就要用到转义字符`\`，正确写法为`' I\'m going to \"RushB\" '`

②字符串拼接

var a = '海风网络部';
    var b = 2019;
    var user = 'XXX';
    var tip = '你好, ' +a + b+'级的'+user;
    alert(tip);

③常见字符串操作

var s ='abcdefg';
    var l= s.length;
    alert(l);

var s = 'Hello, world!';
    s[0]; // 'H'
    s[6]; // ' '
    s[7]; // 'w'
    s[12]; // '!'
    s[13]; // undefined 超出范围的索引不会报错，但一律返回undefined

需要特别注意的是，字符串是不可变的，如果对字符串的某个索引赋值，没有任何效果;

toUpperCase()把一个字符串全部变为大写
    toLowerCase()把一个字符串全部变为小写
    indexOf()会搜索指定字符串出现的位置
    substring()返回指定索引区间的子串

#### 4.数组 ####

1.和字符串类似，数组也有.length方法
    2.数组可以通过索引修改对应元素（需要注意的是，如果通过索引赋值时，索引超过了范围，会自动改变数组大小）
    3.和字符串类似，数组也有.indexof（）方法
    4.和字符串类似的.slice（）返回指定区间新数组
    5.push(）pop（）在末尾添加删除，类似进栈出栈
    6.unshift（）和shift（）在头部添加和删除，可用push(),和shift()模拟队列。
    7.sort()默认排序
    8.reverse()翻转元素
    9.concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array
    10.join()它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串

#### 5.条件与循环 ####

js的条件和循环和其他语言大同小异，详细可以去w3c上了解[http://https://www.w3school.com.cn/js/js\_if\_else.asp][http_https_www.w3school.com.cn_js_js_if_else.asp]

#### 6.函数 ####

函数定义

function functionName(参数) {
     要执行的代码
     }

函数调用

function();

箭头函数  
`x => x * x`  
等价于  
`function (x) { return x * x; }`

[http_https_www.w3school.com.cn_js_js_if_else.asp]: http://https://www.w3school.com.cn/js/js_if_else.asp