JavaScript

作者: 小眼睛的露鹿酱 | 来源:发表于2019-08-27 18:34 被阅读0次

JavaScript-01
锋利的 jQuery | 第1章_认识 jQuery
javascript学习思维导图
javaScript 基础知识
JavaScript 基础
JS——Hoisting(提升)
2018-06-22
JavaScript基础
JavaScript 学习脑图
JavaScript学习指南

JS来源（10天设计出来的语言）

在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。

由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。

为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。

基本语法

JS放在<script>...</script>或者保存在.js
的文件中，在<script src="/static/js/abc.js"></script>中src包含信息

<html>
<head>
  <script>      
    alert('Hello, world');
  </script>
<script src="/static/js/abc.js"></script>
</head>
<body>
  ...
</body>
</html>

如果想debug 需要借助浏览器的开发者模式，在consolo界面就能直接debug，另外注意F12中点击source就能看到具体的JS文件

变量定义使用var；数据类型包含number， string（单引号双引号都可以），字符串操作也跟java差不多

var x = 1;
注意如果一个变量没有被var声明， 自动被理解为全局变量

判断使用if{}其实跟java差不多

if (2 > 1) {
    x = 1;
    y = 2;
    z = 3;
}

数组

var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6

var arr = ['A', 'B', 'C'];
arr[1] = 99;

arr; // arr现在变为['A', 99, 'C']
var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); //截取类似substring

//push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉：
var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']

//如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉：
var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]

//sort()可以对当前Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认顺序排序：
var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']

//reverse()把整个Array的元素给掉个个，也就是反转：
var arr = ['one', 'two', 'three'];
arr.reverse(); 
arr; // ['three', 'two', 'one']

//splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：
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()方法把当前的Array和另一个Array连接起来
var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']
//请注意，concat()方法并没有修改当前Array，而是返回了一个新的Array。


//join()方法是一个非常实用的方法，它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串：
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

//多维数组
如果数组的某个元素又是一个Array，则可以形成多维数组，
var arr = [[1, 2, 3], [400, 500, 600], '-'];

对象

var xiaoming = {
    name: '小明',
    birth: 1990,
    school: 'No.1 Middle School',
    height: 1.70,
    weight: 65,
    score: null
};

循环

var x = 0;
var i;
for (i=1; i<=10000; i++) {
    x = x + i;
}
x; // 50005000


var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    console.log(key); // 'name', 'age', 'city'
}


var x = 0;
var n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}
x; // 2500

集合Map和Set

var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95


var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);

//SET 不重复的数组
var s1 = new Set(); // 空Set:
var s2 = new Set([1, 2, 3]); // 含1, 2, 3


//iterable
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    console.log(x);
}
for (var x of s) { // 遍历Set
    console.log(x);
}
for (var x of m) { // 遍历Map
    console.log(x[0] + '=' + x[1]);
}
for ... of循环则完全修复了这些问题，它只循环集合本身的元素：
更好的方式是直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
});
输出：
A, index = 0
B, index = 1
C, index = 2

函数的定义
使用function关键字

function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}
如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined。

或者：

var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};

JavaScript还有一个免费赠送的关键字arguments，它可以代替传入的参数，如果参数, 当传入的参数很多的时候最后的一些可以使用rest来指代

// foo(a[, b], c)
// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null：
function foo(a, b, c) {
    if (arguments.length === 2) {
        // 实际拿到的参数是a和b，c为undefined
        c = b; // 把b赋给c
        b = null; // b变为默认值
    }
    // ...
}

高阶函数
高阶函数就是 function名作为另外一个function的参数

function add(x, y, f) {
    return f(x) + f(y);
}
其中的f就是一个function

高阶函数中比较有意思的是map和reduce这两个function

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);

function pow(x) {
    return x * x;
}
其中array.map(pow) 其中的pow函数作用在array中的每一个元素中 并生成一个新的array

reduce
就是每一个元素与下一个元素进行f的计算后结果再与下一个元素进行计算
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); /

filter
用于过滤array中的一些元素

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

sort:
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]

find()
foreach()

generator

function* foo(x) {
    yield x + 1;
    yield x + 2;
    return x + 3;
}

斐波那契数列

function* fib(max) {
    var
        t,
        a = 0,
        b = 1,
        n = 0;
    while (n < max) {
        yield a;
        [a, b] = [b, a + b];
        n ++;
    }
    return;
}

var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}

RegExp正则表达式
var re2 = new RegExp('ABC\-001');
创建对象跟函数是一样的就是在创建的时候写 new

function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}
var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

function Student(props) {
    this.name = props.name || '匿名'; // 默认值为'匿名'
    this.grade = props.grade || 1; // 默认值为1
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

function createStudent(props) {
    return new Student(props || {})
}

原型继承
class继承

class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('Hello, ' + this.name + '!');
    }
}

class Student {
class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name); // 记得用super调用父类的构造方法!
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

JavaScript-01
A 什么是JavaScript JavaScript 定义JavaScript JavaScript基础语法常用...
锋利的 jQuery | 第1章_认识 jQuery
一、JavaScript和JavaScript库 JavaScript简介 JavaScript是Netscape...
javascript学习思维导图
JavaScript 数据类型 JavaScript 变量 Javascript 运算符 JavaScript 流...
javaScript 基础知识
javaScript 基础知识一 JavaScript概述 JavaScript概述 JavaScript是客户...
JavaScript 基础
JavaScript基础 JavaScript简介JavaScript对象 JavaScript简介为什么使用j...
JS——Hoisting(提升)
Javascript Hoisting的概念 Javascript Hoisting：In javascript,...
2018-06-22
javascript之路 01-认识JavaScript 初始JavaScript JavaScript是一种直译...
JavaScript基础
JavaScript简介JavaScript变量JavaScript对象、函数JavaScript数字，字符串Ja...
JavaScript 学习脑图
javascript数据类型 javascript变量 javascript运算符 javascript数组 ja...
JavaScript学习指南
1.1 JavaScript基础概念： JavaScript (ECMAScript) ：JavaScript 是...