Web前端-JavaScript基础教程上

叁歲伎倆 2021-09-18 10:58 293阅读 0赞

![Web前端-JavaScript必备知识点][Web_-JavaScript]

> `Web`前端-`JavaScript`基础教程

将放入菜单栏中，便于阅读！

`JavaScript`是`web`前端开发的编程语言，大多数网站都使用到了`JavaScript`，所以我们要进行学习，`JavaScript`是必备的前端技能。

`HTML`是用来描述网页的结构，`css`是用来描述网页的延时，而`JavaScript`是用来描述网页的行为的。

`JavaScript`是一种高端，动态，弱类型的编程语言。来源于`Java`，它的一等函数来源于`Scheme`，原型来源于`Self`。

var x; // 声明变量为x
    x=0; // 给变量赋值为0
    
    var student = {
     name: "dashu",
     age: "12"
    };
    
    // 通过"."或"[]"来访问对象属性
    student.name;
    
    student["age"];
    
    // 创建新的属性，进行添加操作
    student.tall = "123";
    
    // {}空对象，没有属性
    student.dog = {};
    
    var num = [1,2,3,4,5];
    num[0];
    num.length;
    num[num.length-1];
    
    // 添加新元素
    num[num.length] = 6;
    // 改变已有的元素
    num[num.length] = 7;
    
    // 定义空元素 
    var em = [];
    em.length;
    
    // 数组对象
    var students = [
     { name: dashu1, age: 1 },
     { name: dashu2, age: 2 }
    ];
    
    var dashu = {
     dog: [ [1,2], [3,4] ],
     dog1: [ [2,3] ]
    };

windwo.onload = function() {
     var images = document.getElementsByTagName("img");
     for(var i = 0; i<images.length; i++){
      var image = images[i];
      if(image.addEventListener){
        image.addEventListener("click", hide, false);
       }else{
        image.attachEvent("onclick", hide);
       }
     }
    }

font-weight: bold;
    text-decoration: underline;
    border: solid black 1px;
    vertical-align: top;

保留字：

break, delete, function, return, typeof
    case, do, if, switch, var
    catch, else, in, this, void
    continue, false, instanceof, throw, while
    debugger, finally, new, true, with
    default, for, null, try

class const enum export extends import super

implements let privae public yield
    interface package protected static

abstract double gote native static 
    boolean enum implements package supper
    byte export import private synchronized
    char extends int protected throws
    class final interface public transient
    const float long short volatile

Math.pow() 次幂
    Math.round() 四舍五入
    Math.ceil() 向上求整
    Math.floor() 向下求整
    Math.abs() 求绝对值
    
    Math.max()
    Math.min()
    
    Math.random() 随机数
    Math.PI 圆周率
    Math.E 自然对数的底数
    
    Math.sqrt() 平方根
    Math.pow() 立方根

日期和时间：`Date()`构造函数，创建时间和日期的对象。

var now = new Date(); 当前日期和时间

文本：是字符串，是由一组16位组成的不可变的有序列。

字符串

var s = "dashu";
    s.charAt(0);

布尔值，在`JavaScript`中有布尔值类型，为`true`和`false`。

`null`在`JavaScript`中表示空值，`null`的`typeof`运行为字符串`object`。null为特殊的对象值，含义为非对象。

`null`类型的唯一一个成语，它表示数字，字符串和对象是“无值”的。

`undefined`值表示“空值”，表明变量没有初始化，表明属性或元素不存在，返回没有值就为`undefined`。值为“未定义”，运行`typeof`时，返回的“undefined”。

全局属性：

undefined，Infinity，NaN

String()，Number()，Boolean()
    
    var s = "dashu";
    var n = "123";
    var b = true;
    var S = new String(s);
    var N = new String(n);
    var B = new String(b);

““和”=”

第一个将原始值和其包装对象视为相等  
第二个则是视为不等

undefined, null, 布尔值, 数字, 字符串
    数组和函数

var str = "dashu";
    str.toUpperCase();
    s;

对于上面的也是不相等的。

只有指向一样的引用才是相等的。

var a = [];
    var b = a;
    b[0] = 1;
    a[0]; // 1
    a === b // true

复制数组：

var a = [ 1,2,3 ];
    var b = [];
    for(var i = 0; i<a.length; i++){
     b[i] = a[i];
    }

比较数组：

function equalArrays(a,b){
     if(a.length != b.length) return false;
     for(var i = 0; i<a.lenght; i++)
      if(a[i] !== b[i]) return false;
     return true;
    }

类型转换：

"2" * "3" // 6
    undefined 转 字符串 "undefined"，数字"NaN"，布尔值"false"
    
    null 转字符串"null"， 数字为0
    
    "" 空字符串 转数字 0

相等：

null == undefined
    "0" == 0
    0 == false
    "0" == false

Number("2"); // 2
    String(false); // "false"
    Boolean([]); // true
    Object(2) // new Number(2);

`toFixed`根据小数点后的指定数字转字符串

var a = 1234.567;
    a.toFixed(0) // "1234"
    a.toFixed(2) // "1234.56"

parseInt("1 dash"); // 1
    parseFloat(" 2, dashu") // 2

`toString()`返回一个反映对象的字符串。

[1,2,3].toString(); // "1,2,3"

`valueOf()`方法返回对象本身

变量声明：

var i;

循环：

for(var i = 0; i<6; i++){
     console.log(i);
    };
    
    for(var item in lists) console.log(item);

作用域：

var q = "dashu"; // 声明一个全局变量
    function add() {
     var q = "da"; // 声明一个局部变量
     return q;
    }
    
    声明全局变量可以不用var声明

function test(item) {
     var i = 0;
     if(typeof item == "object"){
      var j = 0;
     for(var k = 0; k < 10; k ++){
       console.log(k);
      }
      console.log(j);
     }
    }

函数定义表达式：

var a = function(x) {
     return x++;
    }

ECMAScript 6 入门

`let`用于声明变量，只有在所在代码块有效

{
     let a = 1;
     var b = 2;
    }
    
    a // ReferenceError: a is not defined.
    b // 2

`let`只有在它所在的代码块有效：

for (let i = 0; i < 10; i++) {
    }
    console.log(i);
    // ReferenceError: i is not defined

for (let i = 0; i < 3; i++) {
      let i = 'a';
      console.log(i);
    }
    // a
    // a
    // a

函数内部变量i和循环变量i不在同一作用域。

// var 
    console.log(a); // 输出undefined
    var a= 2;
    
    // let 
    console.log(b); // 报错ReferenceError
    let b= 2;

`var`命令会发生变量的提升，运行时，变量`a`已经存在了，而`let`不会。

暂时性死区：

var a= 123;
    
    if (true) {
      a= '123'; // ReferenceError
      let a;
    }

如果一个变量没有被声明，不会报错：

typeof a // "undefined"

如果调用函数，而函数中的参数变量没有被声明，就会导致死区，报错。

// 不报错
    var a = a;
    
    // 报错
    let a = a;
    // ReferenceError: x is not defined

不可以重复声明：

// 报错
    function b() {
      let a = 100;
      var a = 10;
    }
    
    // 报错
    function b() {
      let a = 100;
      let a = 10;
    }

块级作用域的需要，如果没有块级作用域可能会覆盖外层变量，块级作用域，如，变量循环i，循环结束后，没有消失，而是变为全局变量。

外层代码块不受内层代码块的影响。

function add() {
      let a = 5;
      if (true) {
        let a = 1;
      }
      console.log(a); // 5
    }

在ES6中允许使用块级作用域中声明函数。

## `const`命令 ##

`const`声明常量的值，一旦声明，就不能改变。

const PI = 3.14;
    PI // 3.14
    
    PI = 1;
    // TypeError: Assignment to constant variable.

`const`一旦声明变量，就要进行初始化，不赋值，就报错

const a;
    // SyntaxError: Missing initializer in const declaration

`const`只在声明的块中有效，声明的变量不会提升，存在暂时性死区，不能重复声明，本质是指变量指向内存地址所保存的数据不能改动。

const a= {};
    
    a.prop = b;
    a.prop // b 
    
    // 将 a 指向另一个对象，就会报错
    a= {}; // TypeError: "a" is read-only
    
    const ab = [];
    ab.push('dashu'); // 可执行
    ab.length = 0;    // 可执行
    ab = ['dashu'];    // 报错，这就导致了错误，因为把一个数组赋值给变量，就不是同个地址了

`Object.freeze`对象冻结

const foo = Object.freeze({});
    
    // 下面一行不起作用；
    // 会报错
    foo.prop = 12;

## 顶层对象 ##

window.a = 1;
    a // 1
    
    a = 2;
    window.a // 2
    
    // es6开始
    // var,function声明变量是全局变量，是顶层对象的属性
    
    var a = 1;
    window.a // 1
    
    // let const class 声明就不是了
    let b = 1;
    window.b // undefined

IE: trident内核
    Firefox: gecko内核
    Safari: webkit内核
    Opera: Blink内核
    Chrome: Blink

`<!DOCTYPE>` 声明位于文档中的最前面位置，处于`<html>`标签之前。

用于告诉浏览器文档使用哪种HTML或XHTML规范。

区分`Quirks`模式和`Standards`模式区别：

`Standards`模式是标准模式，遇到一个问题是以前的规则不兼容新的规则，使用了新的功能，就弄个参数，如果等于就使用新的规则，不等于就使用之前的规则，这就是`Quirks`模式。

区分与，布局，样式解析，脚本执行，三个方面。

`div+css`布局`table`优点，改变的时候方便，只改`css`文件，页面加载速度快，结构化清晰，页面显示简洁，表现与结构分离，易于seo优化。

JavaScript的数据类型有：

基本数据类型：

String, Boolean, Number, Undefined, Null

引用数据类型：

Object

`JavaScript`中的继承：

原型链继承，构造函数继承，组合继承，寄生式继承等

`DOM`操作：

createDocumentFragment();
    createElement()
    createTextNode()
    appendChild()
    removeChild()
    replaceChild()
    insertBefore()
    getElementsByTagName()
    getElementsByName()
    getElementsById()

`JavaScript`中`typeof`返回的数据：

object number function boolean underfined

`JavaScript`本地对象可以实例化，内置对象不能实例化，宿主自带`document,window`。

var str = '123';
    str = str.split('').reverse().join('');
    // '321'

200：请求已成功  
302：请求的资源临时从不同的 URI 响应请求  
403：服务器已经理解请求，但是拒绝执行它  
404：请求失败

node.js, mongodb, npm, mvvm, react, angularjs, webpack等

应用 web 标准进行设计，99%的网站都需要被重构。

数组解构：

let a = 1;
    let b = 2;
    let c = 3;
    
    let [a, b, c] = [1, 2, 3];

![效果][1240]

![效果][1240 1]

let [x, y, z] = new Set(['a', 'b', 'c']);
    x // "a"

![效果][1240 2]

let [x = 1] = [undefined];
    x // 1
    
    let [x = 1] = [null];
    x // null

var {x = 2} = {x: undefined};
    x // 2
    
    var {x = 2} = {x: null};
    x // null
    
    let {length : len} = 'hello';
    len // 5

如何优化页面的加载速度？

减少css文件的数量和大小，压缩css和js文件代码；图片的大小；把css样式表放在顶部，把js放置在底部；减少http请求数，使用外部js或css。

页面性能优化：压缩，合并，减少请求，diam层析优化

内存泄漏的原因有：内存泄漏是任何对象在不使用时它还存在，导致内存泄漏为`setTimeout`，闭包，控制台日志，循环等。

从服务器推送数据到客户端：

html5 websocket
    websocket flash

库：

jquery, yui, prototype, dojo, ext.js

框架：

modernizr, underscore, backbone

前端开发：

Sublime Text, Eclipse, Notepad, Firebug, HttpWatch

> 前端路由  
> 是指  
> 在不进行后端请求的情况下对页面进行跳转

双向数据绑定：`angular`

单向数据绑定：`knockout`

单纯地 `View` 层: `React`

`jquery`优化，优先使用`id`选择器，`jquery`如果要使用`dom`元素，就建议存储一个变量保存使用，使用`dom`操作的过程非常耗性能。

`class`前使用`tag`。

`jquery`操作`dom`的框架，`jqueryui`是基于`jquery`做的一个`ui`组件库。

`jquery`一个对象可以同时绑定多个事件，底层实现原理：`addEventListener`与`attachEvent`兼容处理做事件注册。

`Jquery.extend` 用来扩展 `jQuery` 对象本身  
`jquery.fn.extend` 用来扩展 `jQuery` 实例的

如何将数组转换为`json`字符串，然后换回来？

$.parseJSON('{"name":"dashu"}');
    JSON.stringify

在jquery.fn中的init返回的this指的是？返回this又是？

`this`是执行`init`构造函数自身的，其实就是`jquery`实例对象，返回`this`实现`jquery`的链式操作。

`http`状态码：

1\#\#: 用于指定客户端的动作；  
2\#\#: 用于表示请求成功；  
3\#\#: 用于定位头信息；  
4\#\#: 用于指出客户端的错误；  
400 语义有误  
401 当前请求需要用户验证  
403 服务器已经接收请求，但拒绝执行  
5\#\#: 用于指出服务器的错误  
503: 服务不可用

前端开发优化：

减少`http`请求次数，`css,js`代码压缩，图片大小控制适合，`CDN`托管，`Data`缓存。可以用`innerHTML`代替`dom`操作，减少`dom`操作次数，优化`js`性能。

可以多用`className`,少用全局变量，缓存`dom`节点。

少用`css`表达式，图片预加载，样式放顶部，脚本放在底部，使用`div+css`布局。

var str=$("a").attr("href")

将数组转化为 `json` 字符串

$.fn.stringifyArray = function(array) {
    return JSON.stringify(array)
    }
    $.fn.parseArray = function(array) {
    return JSON.parse(array)
    }

`jquery`是一个`js`库，而`jquery ui`是在`jquery`基础上，利用`jquery`的扩展性设计的插件。

sub，add.call(sub,3,1) == add(3,1) 
    alert(4);
    
    function add(a,b){
    alert(a+b);
    }
    function sub(a,b){
    alert(a-b);
    }
    add.call(sub,3,1);

异步加载方式：

defer, ie
    async,
    callBack

上述描述的`json`术语是一种轻量级的数据交换格式，数据格式简单，易于读写。

判断对象是否属于某个类：

instanceof

原型对象也是普通的对象，不为Null，就叫原型链

setInterval（fn1,500）// 重复执行

setInterval（fn1(),500）// 只执行一次

![效果][1240 3]

![效果][1240 4]

![效果][1240 5]

> 原生`JavaScript`，return false;只阻止默认行为  
> jQuery中的return false; 既阻止默认行为，又阻止冒泡

![效果][1240 6]

事件委托指利用冒泡的原理，自己所要触发的事件，让其他元素取执行。

`join()`表示用数据中所用元素拼接成字符串。  
`split()`把字符串分割开。  
`slice()`可以从已有的数组返回选定的元素。  
`splice()`从数据中添加或删除，返回被删除的部分数组。

![效果][1240 7]

闭包读取函数内部的变量值，并保持在内存中。

`apply()`和 `call()`

作用是一样的，传递的参数就不同了。

Object.call(this,obj1,obj2,obj3)
    Object.apply(this,arguments)

阻止冒泡：

ev.stopPropagation();
    ev.cancelBubble = true;

![效果][1240 8]

![效果][1240 9]

高性能的`JavaScript`?

使用`DocumentFragment`，`clone`，`innerHTML`，`switch`，三目运算符，`setInterval`等。

![效果][1240 10]

`call()`和`apply()`区别在于`apply`的参数是数组形式，而`call`的参数是单个的值。

`dom`操作：

createDocumentFragment()
    createTextNode()
    appendChild()
    removeChild()
    replaceChild()
    insertBefore()
    getElementsByTagName()
    getElementsByName()
    getElementById()

![效果][1240 11]

class Point {
    add(x, y) {
    this.x = x;
    this.y = y;
    }
    toString() {
    return '('+this.x+', '+this.y+')';
    }
    }

判断一个对象是否属于某个类:

instanceof constructor

> 严格模式

"use strict";

function strict(){
    　　　　"use strict";
    　　　　return "这是严格模式。";
    　　}
    
    　　function notStrict() {
    　　　　return "这是正常模式。";
    　　}

`window.onload()`方法需要等所有元素加载完毕才执行，`$(document).ready`只要`dom`结构加载完毕就行。

![效果][1240 12]

页面加载性能优化：

压缩`css,js`文件；合并`Js.css`文件，减少`http`请求，使用外部`js,css`文件，减少`dom`操作。

![效果][1240 13]

`this`:

var User = {
    count: 1,
    add: function() {
    return this.count;
    }
    };
    console.log(User.add()); 
    var func = User.add;
    console.log(func());
    
    1 和 undefined

数组去重：

// 数组去重：
    
    function add(array){
        var aaa = []; //一个新的临时数组
        for(var i = 0; i < array.length; i++){
            if(aaa.indexOf(array[i]) == -1){
                aaa.push(array[i]);
            }
        }
        return temp;
    }
    
    var arr = [1,2,2,4,9,6,7,5,2,3,5,6,5];
    console.log(add(arr));

function add(arr){
     arr.sort();
     for(var i = 0; i<arr.length-1; i++){
      if(arr[i] == arr[i+1]){
       arr.splice(i,1);
       i--;
       }
     }
     return arr;
    }

![效果][1240 14]

`ajax`的过程，创建`XMLHttpRequest`对象，创建一个异步调用对象，创建新的`HTTP`请求，并指定`HTPP`请求的方法，`url`以及验证信息，设置响应`HTTP`请求状态变化的函数，发送`HTTP`请求，获取异步调用返回的数据。

如何解决跨域问题，跨域就是，协议，域名，端口相同才同域，否则为跨域。`ajax`不可以跨域获取数据，可以获取文件内容，使用`js`脚本，函数调用，调用的参数为服务器返回的数据。

`ajax`请求，`XMLHttpRequest`标准浏览器，`ActiveXObject`ie浏览器：

标签语义化复合物文档语义的标签。  
用正确的标签做正确的事情，`html`语义化让页面的内容结构化，便于对浏览器，搜索引擎解析。

![效果][1240 15]

![效果][1240 16]

伪类清除浮动，`after`伪元素，`clear:both`，

![效果][1240 17]

![效果][1240 18]

window, document, location, screen, history, navigator
    alert() open() close() setInterval() setTimeout() clearInterval() clearTimeout()

![效果][1240 19]

$.ajax({
     url: "",
     data: // post数组
     dataType: "json",
     type: "POST",
     success: function(data){
     },
     error: function(){
     }
    });

内存泄漏：`setTimeout`,闭包，控制台日志，循环。

`<script>`标签的位置

<!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <script></script>
    </head>
    <body>
    </body>
    </html>

<!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <script></script>
    </body>
    </html>

异步脚本：

## 结言 ##

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

**作者简介**

**达叔**，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

![努力努力再努力Jeskson][Jeskson]

[Web_-JavaScript]: /images/20210724/859a9c26961c4e12b58f3355f261f560.png
[1240]: /images/20210724/52c052fcae234866bc98f129a30b0dcf.png
[1240 1]: /images/20210724/d1155a3c2f6c460db2d49b77b16f20e8.png
[1240 2]: /images/20210724/422d9e6772a0421bb136888807706469.png
[1240 3]: /images/20210724/de95066337bb4f9ba4d3198ce6d069cf.png
[1240 4]: /images/20210724/e88208538a6e4241a893b165426b8e37.png
[1240 5]: /images/20210724/1a9ae1f0c34640b2846b3a880e154c92.png
[1240 6]: /images/20210724/13963eab3ad541469d11f569112ac4f1.png
[1240 7]: /images/20210724/b26bdd262f7e4f30a0abf79e7b6f164a.png
[1240 8]: /images/20210724/fdf6cc4e59a44d97858d09a747c69ee0.png
[1240 9]: /images/20210724/b43d2fb8964548b38c808d5cfcbaae24.png
[1240 10]: /images/20210724/c34b3c14d9244e3d9515efbd7771f137.png
[1240 11]: /images/20210724/188db0d25a9e4c259896c4b266d35998.png
[1240 12]: /images/20210724/eb0a737b695d4e588ad2cd855ba378f7.png
[1240 13]: /images/20210724/0910fad1c50a4b6eaf1979033bb4663f.png
[1240 14]: /images/20210724/f7b75860116c42fe9c533c8938a13d38.png
[1240 15]: /images/20210724/d5f44f67335540bdb26b2acec8974286.png
[1240 16]: /images/20210724/2f475c1aa9a1416aa9237851ddd20e88.png
[1240 17]: /images/20210724/3e0f8ee918b1449486c67c573c31f3e0.png
[1240 18]: /images/20210724/9461a4f2998f4668aa6af44ec9e4badb.png
[1240 19]: /images/20210724/2bf3e6d0fac840e6a30a8d383a489a3c.png
[Jeskson]: /images/20210724/f786fdb58a2441119f75daa602713b7b.png