CS Notes

03 JavaScript

11分钟阅读

JavaScript教程

来源：w3cschool js教程

js注释

// 单行注释
/* 多行注释*/

js变量

var x = 7;
var y = 8;
var z = x + y;

js let

作用域问题

js const

JS运算符

JS运算符

JavaScript数据类型

字符串，数值，布尔值，数组，对象

  • JavaScript 拥有动态类型

  • JavaScript 从左向右计算表达式。不同的次序会产生不同的结果：

var x = 911 + 7 +'Porsche'   // 918Prosche
  • js数组
var cars = ["Porsche", "Volvo", "BMW"]
  • js对象
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

typeof 运算符

typeof ""                  // 返回 "string"
typeof "Bill"              // 返回 "string"
typeof "Bill Gates"          // 返回 "string"

undefined

在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。

var person;                  // 值是 undefined，类型是 undefined。

任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined

person = undefined;          // 值是 undefined，类型是 undefined。

空值

var car = "";                // 值是 ""，类型是 "string"

null

在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。

不幸的是，在 JavaScript 中，null 的数据类型是对象。

您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。

您可以通过设置值为 null 清空对象

var person = null;           // 值是 null，但是类型仍然是对象

Undefined 与 Null 的区别

Undefined 与 null 的值相等，但类型不相等：

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true
  • 对象

JS函数

函数声明

function functionName (arg1, arg2){
   // code
    return 0;
}

函数表达式

// 函数表达式 要以分号结尾
var x = function(){ return a*b};
var x = function (a, b) {return a * b};
var z = x(4, 3);

函数提升

函数调用

  • 当事件发生时
  • 当JavasScript代码调用时
  • 自动的（自调用）

访问没有 () 的函数将返回函数定义

函数是对象

function myFunction(a, b) {
    return arguments.length;
}
function myFunction(a, b) {
    return a * b;
}
 
var txt = myFunction.toString();

箭头函数

// ES5
var x = function(x, y) {
  return x * y;
}
 
// ES6
const x = (x, y) => x * y;

箭头函数没有自己的 this。它们不适合定义对象方法。

箭头函数未被提升。它们必须在使用前进行定义。

使用 const 比使用 var 更安全，因为函数表达式始终是常量值。

如果函数是单个语句，则只能省略 return 关键字和大括号。因此，保留它们可能是一个好习惯：

const x = (x, y) =>{return x * Y };

函数参数

自执行函数

在 JavaScript 里，自执行函数（Self-Executing Anonymous Function）也被叫做立即调用函数表达式（Immediately Invoked Function Expression，简称 IIFE），它是一种在定义之后马上就会执行的函数。下面将从语法、使用场景、优势几个方面详细介绍。

语法

自执行函数的基本语法有两种形式：

形式一：使用括号包裹函数定义和调用

(function() {
    // 函数体
    console.log('这是一个自执行函数');
})();

在这个例子中，(function() {... }) 把匿名函数包裹起来，后面紧跟的 () 则是用来调用这个函数。

形式二：使用运算符包裹函数调用

(function() {
    // 函数体
    console.log('这也是一个自执行函数');
}());

这种形式同样是将匿名函数定义后立即调用，只是括号的位置稍有不同。

使用场景

1. 创建独立的作用域

(function() {
    var privateVariable = '这是一个私有变量';
    console.log(privateVariable);
})();
// 这里无法访问 privateVariable

在这个例子中，privateVariable 是在自执行函数内部定义的，它属于该函数的局部变量，外部代码无法访问，从而避免了全局变量的污染。

2. 模块模式

var myModule = (function() {
    var privateValue = 0;
    function privateFunction() {
        return privateValue;
    }
    return {
        increment: function() {
            privateValue++;
        },
        getValue: function() {
            return privateFunction();
        }
    };
})();
 
myModule.increment();
console.log(myModule.getValue());

在这个模块模式的示例中，自执行函数返回一个对象，该对象包含了一些公共方法，这些方法可以访问和操作函数内部的私有变量和函数。

优势

  • 避免全局变量污染：自执行函数内部定义的变量和函数不会影响到全局作用域，减少了命名冲突的可能性。
  • 封装私有变量和函数：可以将一些不希望被外部访问的变量和函数封装在自执行函数内部，只暴露必要的接口。
  • 代码隔离：将相关的代码封装在一个独立的作用域中，提高了代码的可维护性和可读性。

综上所述，自执行函数是 JavaScript 中一种非常有用的技术，它可以帮助开发者更好地管理代码和避免潜在的问题。

arguments对象

JS对象

var car = {type = "porsche", model = "911", color:"red"};
 
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

对象属性

对象方法

对象构造器

this关键词

在函数定义中，this 引用该函数的“拥有者”。

对象定义

JS对象原型

JS事件

<!DOCTYPE html>
<html>
<body>
 
<h1 onclick="this.innerHTML = 'Hello!'">点击此文本！</h1>
 
</body>
</html>
<element event = 'some JavaScript code'>
  • 常见的HTML事件
事件描述
onchangeHTML元素被改变
onclick用户点击了HTML元素
onmouseover用户把鼠标移动到 HTML 元素上
onmouseout用户把鼠标移开 HTML 元素
onkeydown用户按下键盘按键
onload浏览器已经完成页面加载

onload 和 onunload 事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。

onload 和 onunload 事件可用于处理 cookie。

onchange 事件

onchange 事件经常与输入字段验证结合使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段内容时，会调用 upperCase() 函数。

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：

HTML DOM Event 对象参考手册

如需所有 HTML DOM 事件的列表，请访问我们完整的 HTML DOM 事件对象参考手册。

JS字符串

  • 字符串长度 length
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
vat sln = txt.length
  • 查找字符串中的字符串

indexOF() lastIndexOf()

  • 检索字符串中的字符串

search()

  • slice()
  • substring()
  • substr()
  • replace()
  • toUpperCase()
  • toLowerCase()
  • concat()
  • trim()
  • charAt() charCodeAt()
  • split()

JS数字

JavaScript数值始终是64位的浮点数

JS数字方法

  • toString()
  • toExponential() * toFixed()
  • ` toPrecision()
  • valueOf()

JS数组

数组方法

数组排序

数组迭代

数组和对象的区别

在 JavaScript 中，数组_使用_数字索引。

在 JavaScript 中，对象_使用_命名索引。

数组是特殊类型的对象，具有数字索引。

JS日期

JS 类

JS Async

JavaScript HTML DOM

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

JS Browser BOM

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。

window

screen

Location

History

弹出框

Timing

Cookies

WEB API

AJAX

jQuery

jQuery 由 John Resig 于 2006 年创建。它旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。

十多年来，jQuery 一直是世界上最受欢迎的 JavaScript 库。

但是，在 JavaScript Version 5（2009）之后，大多数 jQuery 实用程序都可以通过几行标准 JavaScript 来解决

jQuery选择器

通过id来查找HTML元素

通过标签名来查找 HTML 元素

通过类名来查找 HTML 元素

通过 CSS 选择器查找 HTML 元素

jQuery HTML

设置HTML内容

获取 HTML 内容

jQuery CSS样式

隐藏HTML元素

显示HTML元素

样式化HTML元素

jQuery HTML DOM

删除元素

获取父元素

vue

每个 Vue 应用都需要通过实例化 Vue 来实现。

 var vm = new Vue({
        el: '#vue_det',  // 
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
     	filters:{   // 过滤器
 		}
        computed:{
              site:{
                  // getter
                  get:function(){
     					return  this.xxx
 					}
				  // setter
				  set:function(){                      
                  	}
                  }    
 		}
    })

缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
 
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

指令

指令是带有 v- 前缀的特殊属性。

  • 使用 v-html 指令用于输出 html 代码
  • v-if
  • v-else
  • v-else-if
  • v-show
  • v-for

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

关系图谱

反向链接