JavaScrip总结

最新推荐文章于 2024-04-26 16:47:03 发布

无丶言LL

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量140

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_52171741/article/details/125357537

版权

JavaScrip总结

文章目录

JavaScrip总结

1、概念

JavaScript 最开始是专门为浏览器设计的一门语言，但是现在也被用于很多其他的环境。
如今，JavaScript 已经成为了与 HTML/CSS 完全集成的，使用最广泛的浏览器语言。
运行JavaScript有多种方式，可以直接在浏览器的控制台编写运行；也可以编写一个独立的js文件，然后在Html文件中引入，（这两种方法由浏览器解释执行，是以前唯一的方式）。也可以用编辑软件如Webstrom或VSCode编写独立的js文件，由安装好的Node.js解释执行运行（ node-v10.11.0-64位下载）。

2、基本语法

大小写敏感
标识符
注释
语句
关键字/保留字
变量

我们可以使用 var、let 或 const 声明变量来存储数据。
1. let — 现代的变量声明方式。
2. var — 老旧的变量声明方式。一般情况下，我们不会再使用它。但是，我们会在旧时的 “var” 章节介绍 var 和 let 的微妙差别，以防你需要它们。
3. const — 类似于 let，但是变量的值无法被修改。
变量应当以一种容易理解变量内部是什么的方式进行命名。

3、操作符

一元操作符 ++ --
布尔操作符 && || ！

除下列值为假外其余皆为真： false、null、undefined、''、0、NaN

&&和||都属于短路操作！
算术操作符 + - * / %
关系操作符 <> <=>= == === != !==

注意: ===称为全等（值和类型）。
条件（问号）操作符 ? :
赋值操作符 = += -+ *= /= %=

4、语句

if do-while while for for-in for-of break continue switch

注意，请为语句块添加 {}，不要吝啬

另外， for-of、forEach能简洁的遍历集合中的元素，

5、函数

函数声明方式如下所示：

function name(parameters, delimited, by, comma) {

/* code */

}

复制代码

作为参数传递给函数的值，会被复制到函数的局部变量。
函数可以访问外部变量。但它只能从内到外起作用。函数外部的代码看不到函数内的局部变量。
函数可以返回值。如果没有返回值，则其返回的结果是 undefined。

为了使代码简洁易懂，建议在函数中主要使用局部变量和参数，而不是外部变量。

与不获取参数但将修改外部变量作为副作用的函数相比，获取参数、使用参数并返回结果的函数更容易理解

6、对象Object

对象 Object 是ECMAScript 中使用最多的一个类型。我们常将数据和方法封装在对象中。

创建对象有如下两种方式，我们常用第二种。


//方式一new
var person = new Object();//生成空对象
person.name = 'Elon Musk';//设置对象的属性
person.age = 46;
person.job = 'SpaceX Rocket';
person.sayName = function(){    //设置对象的方法/函数，注意此处
  console.log(this.name);
};
//方式二字面量
var person = {
  name: 'Lary Page',
  age: 47,
  job: 'Software Engineer',
  sayName: function(){        //注意此处
      console.log(this.name);
  }
};
console.log(person.job);
person.sayName();

缺点：
Object 构造函数或对象字面量都可以用来创建单个对象，但使用同一个接口创建很多对象，会产生大量的重复代码。

优化方法：
为解决这个问题，人们开始使用工厂模式的一种变体。代码如下：


function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
}
var person1 = createPerson('Steve Jobs',56 , 'Inventor');
var person2 = createPerson('Linus Torvalds', 49, 'Software Engineer');
var person2 = createPerson('Julian Assange', 47, 'Ethical Hacker');

7、数组

除了 Object 之外， Array 类型恐怕是 ECMAScript 中最常用的类型了。
数组是一种特殊的对象，适用于存储和管理有序的数据项。

声明:

方括号 (常见用法) let arr = [item1, item2...];

new Array (极其少见) let arr = new Array(item1, item2...);

调用 new Array(number) 会创建一个给定长度的数组，但不含有任何项。

length 属性是数组的长度，准确地说，它是数组最后一个数字索引值加一。它由数组方法自动调整。

如果我们手动缩短 length，那么数组就会被截断。

我们可以通过下列操作以双端队列的方式使用数组：

push(...items) 在末端添加 items 项。
pop() 从末端移除并返回该元素。
shift() 从首端移除并返回该元素。
unshift(...items) 从首端添加 items 项。

遍历数组的元素：

for (let i=0; i<arr.length; i++) — 运行得最快，可兼容旧版本浏览器。
for (let item of arr) — 现代语法，只能访问 items。
for (let i in arr) — 永远不要用这个。

比较数组时，不要使用 == 运算符（当然也不要使用 > 和 < 等运算符），因为它们不会对数组进行特殊处理。它们通常会像处理任意对象那样处理数组，这通常不是我们想要的。

但是，我们可以使用 for..of 循环来逐项比较数组。

创建数组的方法：

元素联合

var colors = ['red', 'green', 'blue'];
console.log(colors.join(',')); //red,green,blue
console.log(colors.join('||')); //red||green||blue

堆栈方法

栈是一种 LIFO（Last-In-First-Out，后进先出）的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置——栈的顶部。

ECMAScript 为数组专门提供了 push() 和 pop() 方法，以便实现类似栈的行为。
```
var colors = []; // 创建一个数组
var count = colors.push('red', 'green'); // 末尾推入两项
console.log(count); //2
colors.push('black'); // 末尾推入另一项
console.log(colors); //3
var item = colors.pop(); // 末尾弹出最后一项
console.log(item); //'black'
console.log(colors); //2
```
队列方法

栈数据结构的访问规则是 LIFO（后进先出），而队列数据结构的访问规则是 FIFO（First-In-First-Out，先进先出）。队列在列表的末端添加项，从列表的前端移除项。

由于 push() 是向数组末端添加项的方法，因此要模拟队列只需一个从数组前端取得项的方法。实现这一操作的数组方法就是 shift() ，它能够移除数组中的第一个项并返回该项，同时将数组长度减1。

ECMAScript 还为数组提供了一个 unshift() 方法。它能在数组前端添加任意个项并返回新数组的长度。

总结: push、pop操作在数组末，而 unshift、shift操作在数组头；push、unshift压入而pop、shift弹出。

反转数组项

var values = [1, 2, 3, 4, 5];
values.reverse();
console.log(values); //5,4,3,2,1

链接方法

var colors1 = ['red', 'green', 'blue'];
var colors2 = ['yellow', 'black'];
console.log(colors1.concat(colors2));
console.log(colors2.concat(colors1));
console.log(colors2.concat('brown'));
console.log(color2)//注意：concat返回一个新数组，原数组没改变

分片方法

slice() ，它能够基于当前数组中的一或多个项创建一个新数组。 slice() 方法可以接受一或两个参数，即要返回项的起始和结束位置。

在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
注意， slice() 方法不会影响原始数组。
splice方法

splice() 方法恐怕要算是最强大的数组方法了，它可对数组如下3种操作。

注意， splice() 方法直接更改原始数组。
- 删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如，splice(0,2)会删除数组中的前两项。
- 插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。例如， splice(2,0,'red','green') 会从当前数组的位置 2 开始插入字符串 'red' 和 'green' 。
- 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如， splice (2,1,'red','green') 会删除当前数组位置 2 的项，然后再从位置 2 开始插入字符串 'red' 和 'green' 。
8、链式语法

链式语法已变得非常流行。实际上这是一种非常容易实现的模式。基本上，你只需要让每个函数返回 this代表包含该函数的对象，这样其他函数就可以立即被调用。
例如：
```
//链式语法
var bird = {//定义对象字面量
  catapult: function() {
    console.log( 'Yippeeeeee!' );
    return this;//返回bird对象自身
  },
  destroy: function() {
    console.log( "That'll teach you... you dirty pig!" );
    return this;
  }
};
bird.catapult().destroy();//destroy()后还可以再链接吗？
```

9、闭包

闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。

闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配。

当在一个函数内定义另外一个函数就会产生闭包。
例如：


function greeting(name) {
    var text = 'Hello ' + name; // local variable
    // 每次调用时，产生闭包，并返回内部函数对象给调用者
    return function() { console.log(text); }//注意该函数无名称，称为匿名函数
}
var sayHello = greeting('Closure');//调用greeting()返回了什么？
sayHello();  // 注意此处的使用方法。通过闭包访问到了局部变量text

上述代码的执行结果是：Hello Closure，因为sayHello指向了greeting函数对象，sayHello()则对其进行调用，greeting函数执行完毕后将返回greeting函数内定义的匿名函数对象，而该匿名函数仍然可以访问到了定义在greeting之内的局部变量text，注意此时我们已从greeting函数中退出了（但请留意，也只有该内部匿名函数能访问，其它任何代码都不能访问）。