html学习笔记3

html学习笔记3

• 可以把JS代码放到一个单独的js文件,通过<script src="\hello.js"></script>来引入文件

• 没有用var声明的变量自动变成全局变量,

  • 或者使用strict模式’use strict’;强制要求var

• 字符变量

  • \x41==A,\u4e2d\u6587==中文
  • 字符串是不可变的 a[0]=’a’没有意义
  • JavaScript把null、undefined、0、NaN和空字符串''视为false，其他值一概视为true，因此上述代码条件判断的结果是true。

• 数组

  • 在头部删除 shift,添加unshift

  • 在末尾删除pop,添加push

  • length

  • indexOf(),slice(),sort() revrese()

  • Array的sort()方法默认把所有元素先转换为String再排序，结果'10'排在了'2'的前面，因为字符'1'比字符'2'的ASCII码小。

  • 同样通过写function(x,y)来自定义函数

  • contact(),join(‘-‘),filter(function())

  • 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']

​

​

• 对象

  • JavaScript用一个{…}表示一个对象，键值对以xxx: xxx形式申明，用,隔开。

  • 也就是说 不是类

  • 类通过函数对象来实现

    //for in 遍历
    var o = {
        name: 'Jack',
        age: 20,
        city: 'Beijing'
    };
    for (var key in o) {
        if (o.hasOwnProperty(key)) {
            alert(key); // 'name', 'age', 'city'
        }
    }

Map&Set

Map是一组键值对的结构，具有极快的查找速度。

初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);

• for … of遍历

• var a = ['A', 'B', 'C'];
  a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    alert(element);
  });

函数

• arguments参数=>获取传入参数长度

• rest参数

• 变量提升

• 全局作用域

  • 不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性
  • apply call

• 高阶函数

  • map arr.map(pow)

  • reduce [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

  • 返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。

    //在没有class机制，只有函数的语言里，借助闭包，同样可以封装一个私有变量。我们用JavaScript创建一个计数器：
    'use strict';

    function create_counter(initial) {
        var x = initial || 0;
        return {
            inc: function () {
                x += 1;
                return x;
            }
        }
    }

​

​

​

• 箭头函数避免this之坑

• next()方法会执行generator的代码，然后，每次遇到yield x;就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值。

  • 
for (var x of fib(5)) {
console.log(x); // 依次输出0, 1, 1, 2, 3
}


  ​- 调用构造函数千万不要忘记写new。为了区分普通函数和构造函数，按照约定，构造函数首字母应当大写，而普通函数首字母应当小写，这样，一些语法检查工具如jslint将可以帮你检测到漏写的new。

• //我们还可以编写一个createStudent()函数，在内部封装所有的new操作。一个常用的编程模式像这样：
  
  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 || {})
  }

  ​

• 继承

  • 空函数F()

  function inherits(Child, Parent) {
      var F = function () {};
      F.prototype = Parent.prototype;
      Child.prototype = new F();
      Child.prototype.constructor = Child;
  }

  • class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name); // 记得用super调用父类的构造方法!
        this.grade = grade;
    }
    
    myGrade() {
        alert('I am at grade ' + this.grade);
    }
    }

这次笔记是对于廖雪峰的教程所学习