JavaScript 学习记录

本文最后更新于 2022年5月18日上午

JavaScript

快速开始

将JS代码嵌入到HTML中：

使用script标签直接在html的任何地方写JS代码：

<html>
<head>
  <script type="text/javascript">
    alert('Hello, world');
  </script>
</head>
<body>
  ...
</body>
</html>

使用script标签引用js文件：
1
<script type="text/javascript" src="js/test.js"></script>
通常是放到html的head标签里面，加不加type="text/javascript"都一样

JS的语法特别自由：

声明变量以下的方式：

var

var i = 10
let
const
什么都不加

i = 10

这几种变量的声明方式有作用域和修改的区别，待完善

甚至每行语句不需要加;，因为JS会自动加上，这种方式如果代码编写不当将会有严重的问题：

function abc(){
    var a = 10
    return 
    	a;
}

调用这个函数将会返回undefined。

JS的注释和C/Java一样，单行//，块注释/* */

数据类型

Number

包括以下形式：

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

由于js浮点数是按照IEEE754规则，所以有些情况下不能直接比较，需要类似操作：

1	`console.log( Math.abs(0.1 + 0.2 - 0.3) <= Number.EPSILON);`

字符串

和Python类似，可以用''，或者""括起来的文本，字符串是不可变的，对字符串修改不会变化

转义相关：

ASCII：

1	`var a = '\x41'`

即将16进制转换为对应的字符，如\x41，十进制为65，对应A

UNICODE：

1	`var a = '\u4e2d\u6587'`

将4byte转换为UNICODE字符中文

多行字符串

ES6新特性：字符串用反引号括起来：

console.log(`多行
字符串
测试`);

字符串拼接

语法非常自由：

var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
alert(message);

JS可以将不同基本数据类型的变量拼接起来

模板字符串

是ES6新特性，用${var}引用

1
2
3

var name = '小明';
var age = 20;
console.log(`你好, ${name}, 你今年${age}岁了!`);

字符串的方法

参照https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String# 了解更多

布尔值

true，false

条件判断的结果为布尔值：

1 2	`1>2 true \|\| false`

取反操作：

!true

比较运算符

1	`>, <, <=, >= ,==, ===`

注意：JS中存在== 和===，区别：

== 会自动转换类型然后比较，例如1 == true，结果为true，但是===不会转换，结果显然为false

注意NaN，这个值不能用NaN === NaN判断，会返回false，应该使用isNaN()函数判断是否为NaN

JS基本的数据类型还有null和undefined，如单词含义：一个代表空，一个表示未定义

数组

JS的数组与Python类似，数组的创建方式有：

1	`var arr = [1, 2, 3.14, 'Hello', null, true];`

1	`new Array(1, 2, 3);`

如果访问数组下标越界，例如arr[15]，不会字节报错，而是返回undefined

获取数组长度：

1	`arr.length;`

直接给length赋值会改变数组的长度：

1 2	`arr.length = 6; //[1, 2, 3, undefined, undefined, undefined]`

直接给越界的下标赋值，不会报错，而是新建到该下标：

1
2
3

var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr变为[1, 2, 3, undefined, undefined, 'x']

获取指定值的index：

1	`arr.indexOf(searchElement[, fromIndex])`

var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引为2

数组切片slice()：

1
2
3

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']

如果想要复制一个Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false

push和pop：

如字面意思，push可以向arr末尾插入1-N个元素，pop则弹出最后一个元素

1	`arr.push('A', 'B');`

unshift和shift：

和push和pop刚好相反，unshift向arr头插入元素，shift则弹出第一个元素

sort：

排序，原地操作，默认升序

1
2
3

var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']

如果想要降序：

排序后reverse：

1
2
3

var arr = ['B', 'C', 'A'];
arr.sort();
arr.reverse();

排序函数（函数表达式写法）：

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});

更简单的方法：

1
2
3

var numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers);

反转reverse：

1
2
3

var arr = ['one', 'two', 'three'];
arr.reverse(); 
arr; // ['three', 'two', 'one']

万能方法splice：

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连接数组：

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

join连接数组的每一个元素：

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

对象

JS的对象类似Java的Map，键值对的形式，非常的自由，Value可以是基本数据类型，也可以是数组，但是Key只能用变量名的命名规则：

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};

访问对象：

1 2	`person.name; // 'Bob' person.zipcode; // null`

如果属性名middle-school不是一个有效的变量，就需要用''括起来。访问这个属性也无法使用.操作符，必须用['xxx']来访问：

变量名命名规则

变量在JavaScript中就是用一个变量名表示，变量名是大小写英文、数字、$和_的组合，且不能用数字开头。变量名也不能是JavaScript的关键字，如if、while等。

JS的对象是动态的，很自由，可以随意添加删除属性：

如上面的person，可以

1 2	`person.email = '123@qq.com' //添加属性 delete person.city //删除属性`

判断属性是否存在：

1 2	`'name' in xiaoming; // true 'grade' in xiaoming; // false`

注意使用 in 判断属性是否存在时，对象继承的属性也会存在：

1	`'toString' in xiaoming; // true`

要判断一个属性是否是自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：

var xiaoming = {
    name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

学习总结

#前端 #JavaScript #JS

JavaScript 学习记录

https://nanami.run/2022/05/07/JavaScript/

作者

Nanami

发布于

2022年5月7日

许可协议

高精度乘法上一篇

ElasticSearch 学习下一篇

JavaScript 学习记录

JavaScript

相关概念

快速开始

数据类型

Number

字符串

布尔值

数组

对象