JavaScript知识点总结

最新推荐文章于 2024-08-03 17:05:14 发布

氧小氢

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量1k

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_42510210/article/details/112463979

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

type属性不是必需的。JavaScript是HTML默认的脚本语言。
脚本放置的位置
1. 脚本可被放置在HTML页面的<body>或<head>部分中，或兼而有之。
```
提示：把脚本置于<body>元素的底部，可改善显示速度，因为脚本编译会拖慢显示
```
2. 脚本可放置在外部文件中
  
  如需使用外部脚本，请在<script>标签的src属性中设置脚本的名称。
```
<script src="myscript.js"></script>
```
  注意：外部脚本不能包含<script>标签
外部JavaScript的优势：

A. 分离了HTML和代码

B. 使HTML和JavaScript更易于阅读和维护

C. 已缓存的JavaScript文件可加速页面加载
JavaScript标识符用于命名变量（以及关键词、函数和标签），构造变量名称（唯一标识符）的通用规则：
1. 名称可包含字母、数字、下划线和美元符号；
2. 名称只能以字母、 $ 和 _ 开头；
3. 名称对大小写敏感
4. 保留字无法用作变量名称
JavaScript中不能使用连字符，它是为减法预留的

重复声明JavaScript变量，值不会丢失

var carName = "porsche";
var carName;

// 以上两条语句执行后，变量carName的值仍然“porsche”

JavaScript类型运算符

运算符描述
typeof 返回变量的类型。
instanceof 返回 true，如果对象是对象类型的实例。
% 是系数运算符，它返回除法的余数
在JavaScript中，数组属于对象（数组是特殊类型的对象，具有数字索引），null 的数据类型是对象，可以通过设置值为null和undefined来清空对象
Undefined 与 null 的值相等，但类型不相等
JavaScript对象无法进行比较，将始终返回false
【JavaScript字符串方法】

原始值，比如“Bill Gates"，无法拥有属性和方法（因为它们不是对象）

但是通过JavaScript，方法和属性也可用于原始值，因为在执行方法和属性时JavaScript将原始值视为对象
JavaScript只有一种数值类型，书写数值时带不带小数点均可，JavaScript数值始终时64位的浮点数

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

若在数学运算中使用了NaN，则结果也将是NaN

var x = NaN;
var y = 5;
var z = x + y;         // z 将是 NaN

// 结果也许是串连接
var x = NaN;
var y = "5";
var z = x + y;         // z 将是 NaN5

NaN 是数，typeof NaN 返回 number

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。

除以 0（零）也会生成 Infinity

var x =  2 / 0;          // x 将是 Infinity
var y = -2 / 0;          // y 将是 -Infinity

Infinity 是数：typeOf Infinity 返回 number

【如何识别数组】
1. 解决方案A：使用ES5定义的新方法Array.isArray()
```
var fruits = ["Banana", "Orange", "Apple", "Mango"];
Array.isArray(fruits);     // 返回 true
```
  此方案的问题在于 ECMAScript 5 不支持老的浏览器。
2. 解决方案B:假如对象由给定的构造器创建，则 instanceof 运算符返回 true
```
var fruits = ["Banana", "Orange", "Apple", "Mango"];
 
fruits instanceof Array     // 返回 true
```

【JavaScript数组方法】

toString()方法把数组转换为数组值（逗号分隔）的字符串；

【所有JavaScript对象都有toString()方法】
join()方法可以将所有数组元素结合为一个字符串；
pop()方法从数组中删除最后一个元素，并返回“被弹出”的值；
push()方法（在数组结尾处）向数组添加一个新的元素，并返回新数组的长度；
shift()方法会删除首个数组元素，并把其他所有元素“位移”到更低的索引，返回被删掉的值；
unshift()方法（在开头）向数组添加新元素，并返回新数组的长度；
因为JavaScript数组属于对象，其中的元素就可以使用JavaScript delete运算符来删除；
```
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined
```
使用delete会在数组留下未定义的空洞。请使用pop()或shift()取而代之

splice()方法可用于向数组中添加新项

// splice(参数1,参数2,参数3,参数4……)

// 参数1定义了应添加新元素的位置
// 参数2定义应删除多少元素
// 其余参数定义要添加的新元素

// 例如：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

splice()方法返回一个包含已删除项的数组

concat()方法通过合并（连接）现有数组来创建一个新数组

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

concat()方法不会更改现有数组。它总是返回一个新数组。

concat()方法可以使用任意数量的数组参数

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

slice()方法用数组的某个片段切出新数组，slice()方法创建新数组，它不会从源数组中删除任何元素

// slice()方法可接受两个参数，slice(索引1,索引2)
// 该方法从开始参数选取元素，直到结束参数（不包括）为止
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); 
// citrus的结果为['Orange','Lemon']

sort()方法以字母顺序对数组进行排序

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序

sort()方法在对数值进行排序时会产生不正确的结果，可以通过比值函数来修正这个问题

var points = [40, 100, 1, 5, 25, 10];
// 升序排列
points.sort(
    function(a, b){
        return a - b
    }); 

// 降序排列
points.sort(
    function(a, b){
        return b - a
    });

reverse()方法反转数组中的元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();         // 反转元素顺序

【数组迭代方法】

Array.map()

map() 方法通过对每个数组元素执行函数来创建新数组;

map() 方法不会更改原始数组

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

// 该函数有3个参数，即项目值，项目索引，数组本身
// 当回调函数仅使用 value 参数时，可以省略索引和数组参数

Array.filter()

filter()方法创建一个包含通过测试的数组元素的新数组；

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

// 该函数有3个参数，即项目值，项目索引，数组本身
// 当回调函数仅使用 value 参数时，可以省略索引和数组参数

Array.reduce()

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值;

reduce() 方法在数组中从左到右工作;

reduce() 方法不会减少原始数组

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

// 该函数有4个参数，即总数（初始值/先前返回的值），项目值，项目索引，数组本身

Array.indexOf()

indexOf()方法在数组中搜索元素值并返回其位置(从数组开头开始搜索)，如果要从数组结尾开始搜索，可使用Array.lastIndexOf()
```
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple"); // 返回0

var a = fruits.lastIndexOf("Apple"); // 返回2
```
Array.find()

find() 方法返回通过测试函数的第一个数组元素的值;

var numbers = [4,9,16,25,29];
var first = numbers.find(myFunction);

function myFunction(value,index,array){
    return value > 18;
}

注意：JavaScript从0到11计算月份，也就是说一月是0
在HTML中显示日期对象时，会使用toString()方法自动转换为字符串
JavaScript Math对象允许你对数字执行数学任务
1. Math.round(x)的返回值是x四舍五入后最接近的整数；
2. Math.pow(x,y)的返回值是x的y次幂；
3. Math.sqrt(x) 返回 x 的平方根；
4. Math.ceil(x) 的返回值是 x 上舍入最接近的整数；
```
Math.ceil(6.4);     // 返回 7
```
5. Math.floor(x) 的返回值是 x 下舍入最接近的整数
```
Math.floor(2.7);    // 返回 2
```
6. Math.random() 返回介于 0（包括）与 1（不包括）之间的随机数

生成一个随机整数

// 返回介于 min（包括）和 max（不包括）之间的随机数
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
}

// 返回介于 min 和 max（都包括）之间的随机数
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1) ) + min;
}

条件（三元）运算符

// variablename = (condition) ? value1:value2

var viteable = (age < 18) ? "太年轻": "足够成熟";

如果将字符串与数字进行比较，那么在做比较时JavaScript会把字符串转换为数值。空字符串将被转换为0。非数值字符串将被转换为始终为false的NaN

比较两个字符串时，会按照字母排序，所以"2"<"12"将返回false，因为1小于2

为了确保正确的结果，在比较值之前应该把变量转换为合适的类型

JavaScript Switch语句

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
} 

// 计算一次switch表达式
// 把表达式的值与每个case的值进行对比
// 如果存在匹配，则执行关联代码

switch (new Date().getDay()) {
    case 0:
        day = "星期天";
        break;
    case 1:
        day = "星期一";
         break;
    case 2:
        day = "星期二";
         break;
    case 3:
        day = "星期三";
         break;
    case 4:
        day = "星期四";
         break;
    case 5:
        day = "星期五";
         break;
    case 6:
        day = "星期六";
} 


// default关键字：规定不存在 case 匹配时所运行的代码
switch (new Date().getDay()) {
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
        break; 
    default: 
        text = "期待周末~";
} 

// 默认的 case 不必是 switch 代码块中最后一个 case
// 如果 default 不是 switch 代码块中最后一个 case，请记得用 break 结束默认 case
switch (new Date().getDay()) {
    default: 
        text = "期待周末！";
         break;
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
}

如果多种case匹配一个case值，则选择第一个case;

注意：Switch case 使用严格比较（===）

Do/While循环

do {
    要执行的代码块
}

while (条件);


do {
    text += "The number is " + i;
    i++;
}
while (i<10);

氧小氢

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript知识点总结

type属性不是必需的。JavaScript是HTML默认的脚本语言。脚本放置的位置脚本可被放置在HTML页面的<body>或<head>部分中，或兼而有之。提示：把脚本置于<body>元素的底部，可改善显示速度，因为脚本编译会拖慢显示脚本可放置在外部文件中如需使用外部脚本，请在<script>标签的src属性中设置脚本的名称。<script src="myscript.js"></script>注意...
复制链接

扫一扫

专栏目录