菜鸡的 JavaScript 学习之路

最新推荐文章于 2022-07-11 07:37:00 发布

qq_40909940

最新推荐文章于 2022-07-11 07:37:00 发布

阅读量217

点赞数 1

本文链接：https://blog.csdn.net/qq_40909940/article/details/86642089

版权

JavaScript寒假学习笔记

js是真的菜啊，是该好好学学了，基础不牢，地动山摇

2019/1/25
一些要注意的基础点：

要特别注意相等运算符==。JavaScript在设计时，有两种比较运算符：
第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；
第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。
NaN这个特殊的Number与所有其他值都不相等，包括它自己：
NaN === NaN; // false
唯一能判断NaN的方法是通过isNaN()函数：
isNaN(NaN); // true
注意浮点数的相等比较：
1 / 3 === (1 - 2 / 3); // false
这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

字符串

toUpperCase()把一个字符串全部变为大写
toLowerCase()把一个字符串全部变为小写
indexOf()会搜索指定字符串出现的位置
substring()返回指定索引区间的子串
值得注意的是，字符串是不可变的，JavaScript为字符串提供了一些常用方法，注意，调用这些方法本身不会改变原有字符串的内容，而是返回一个新字符串。
你好${x}，同学！
x是一个变量，用美元符括起来之后就不用写+号了

数组

在数组中，与String类似，Array也可以通过indexOf()来搜索一个指定的元素的位置。
slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

注意到slice()的起止参数包括开始索引，不包括结束索引。
如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array.

push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉
如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉
sort()可以对当前Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认顺序排序
reverse()把整个Array的元素给掉个个，也就是反转
splice()方法是修改Array的万能方法，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array
join()方法是一个非常实用的方法，它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

对象

访问对象的属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用’ '括起来如：
```
var xiaohong = {
    name: '小红',
    'middle-school': 'No.1 Middle School'
};
```
xiaohong的属性名middle-school不是一个有效的变量，就需要用’'括起来。访问这个属性也无法使用.操作符，必须用[‘xxx’]来访问：
```
xiaohong['middle-school']; // 'No.1 Middle School'
```
如果in判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的
```
'toString' in xiaoming; // true 
```
因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以xiaoming也拥有toString属性。

要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法
```
var xiaoming = {
    name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false
```
循环

for循环的一个变体是for … in循环，它可以把一个对象的所有属性依次循环出来：
- 对象
```
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
console.log(key); // 'name', 'age', 'city'
}
```
要过滤掉对象继承的属性，用hasOwnProperty()来实现：
```
	var o = {
	    name: 'Jack',
	    age: 20,
	    city: 'Beijing'
	};
	for (var key in o) {
	    if (o.hasOwnProperty(key)) {
	        console.log(key); // 'name', 'age', 'city'
	    }
	}
```
数组
```
var a = ['A', 'B', 'C'];
for (var i in a) {
console.log(i); // '0', '1', '2'
console.log(a[i]); // 'A', 'B', 'C'
}
```
其实以上这些和Python很像
-------------------------------分割线，今天先理到这里----------------------------

变量的作用域和解构赋值
- 函数体内的变量的作用域为整个函数体
- 若函数存在嵌套，函数内部的变量可以方位外部的变量，外部的变量却不能访问内部的
- 如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。
- 要知道变量提升的概念
- 为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量
- ES6标准引入了新的关键字const来定义常量，const与let都具有块级作用域
- 知道解构赋值

方法

在一个对象中绑定函数，称为这个对象的方法
要保证this指向正确，必须用 obj.xxx ()的形式调用！
廖雪峰牛逼！

express框架

在使用post和get时的不同
signin.html代码

<html>
<body>
<form action="http://127.0.0.1:8081/process_post" method="post">
账号: <input type="text" name="account">  <br>
 
密码: <input type="text" name="password">
<input type="submit" value="Submit">
</form>
</body>
</html>

server.js代码

app.post('/process_post',urlencodedParser,function (req, res) {
 
   // 输出 JSON 格式
   var response = {
       "first_name":req.body.account,
       "last_name":req.body.password
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

req.body.account 中间是body而不是query，而body是来自urlencodedParser的，urlencodedParser是要通过

var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: false })

引入的，此外浏览器的地址栏和get也是有区别的
get的代码写法

app.get('/process_get',urlencodedParser,function (req, res) {
 
    // 输出 JSON 格式
    var response = {
        "first_name":req.query.first_name,
        "last_name":req.query.last_name
    };
    console.log(response);
    res.end(JSON.stringify(response));
 })

2019/2/4
express新建项目
https://blog.csdn.net/qq_38209578/article/details/82593591
.Npm提供了mysql数据库驱动模块的，通过npm install mysql将mysql模块安装到本项目

辛苦了一天，从昨天的自闭到今天稍微对express这个框架有了一点点的概念，努力总算没有白费，那就总结一下今天的经历吧

环境配置啥的就不多说了第一个链接里有的
先从route里的user.js开始

 var express = require('express');
 var router = express.Router();
 var sql = require('../conf/mysql.js');
 //mysql.js是数据库连接的一些配置代码，直接抄就行

 router.get('/',function(req,res){
  sql.query('select * from user',function(err,result){
    if (err) {
      res.render('index',{title:"用户列表无返回值",datas:[]});
    }else{
      res.render('index',{title:"用户列表有返回值",datas:result});
      console.log(result);
    }
  });
});

 /* GET users listing. */
  router.get('/try', function(req, res, next) {
        res.render('hsr',{title:'韩世容这个傻逼'});
  });

router.get()里面的路由都是输入在浏览器地址栏里的，输入localhost:3000/user可以访问view里的index页面并且将其渲染
同理：访问localhost:3000/user/try可以访问view里的hsr.ejs页面并将其渲染。
app.js里面就处理一些路由，项目的结构就变得清晰了

var indexRouter = require('./routes/index');//这里是把user.js和index.js都require进来
var usersRouter = require('./routes/users');//

/..中间省略许多行代码../

app.use('/', indexRouter);
app.use('/users', usersRouter);//这个'user'路径，即在浏览器里输入http://localhost:3000/users ,就会访问到user.js渲染的页面

明天再把器材柜的取出器材写一写，今天肝不动了。