JavaScript

2019-08-27 本文已影响0人小眼睛的露鹿酱

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

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

基本语法

猜你喜欢

热点阅读