JavaScript学习笔记(一)

参考:JavaScript全栈教程

快速入门

==会自动转换数据类型,然后再进行比较,不建议使用。
===不会自动转换数据类型,类型不一致就是false。
NaN与所有值都不相等,包括自己,用isNaN()判断。
浮点数比较大小看差值是否小于某个阈值。
null表示空,undefined表示未定义。
对象是键值对组成的无序集合。
不用var声明的变量是全局变量,用'use strict'模式限制。

字符串

反引号包裹的字符串支持换行,${name}支持替换字符串。
字符串不可变,允许修改不过无效,s.length是字符串长度,支持下标访问。

var s = 'hello, world!';
s.substring(0, 5); //'hello'
s.substring(7); //'world!'
s.indexOf('World'); // 7
s.toLowerCase(); //
s.toUpperCase(); //

数组

数组可越界访问,自动改变大小,不过不建议这样做。支持下标访问,可修改内容。

a.indexOf(内容); //找不到返回-1
a.sclice(0, 4); //就是substring,如果不传参数就是复制原数组
push和pop向数组最后添加或者删除元素,空数组仍可pop,返回undefined。
对应的头部操作是unshift和shift。
a.sort(); //对数组排序
a.reverse(); //反序
a.splice(pos, length, ...); //从pos开始删除length个元素,从pos添加...元素,返回值是删除的元素。
a.concat(...); //连接数组,参数可是元素或数组,不修改原数组,返回新数组。
a.join('-'); //用指定字符连接数组元素,返回字符串

对象

如果属性名包含特殊字符,要用引号扩住,且访问该属性时要用下标,不能用点运算符。
直接添加属性,用delete删除属性,用in检查是否拥有某一属性(含继承来的),用hasOwnProperty()检查是否拥有自己的属性。

delete xiaoming.age;
'name' in xiaoming; 
xiaoming.hasOwnProperty('name');

条件和循环

基本和c++一样…
JavaScript把nullundefined0NaN空字符串”视为false,其他值一概视为true
for(var o in array);这里如果array增加新的属性,也会输出,但是array.length却不变。

Map和Set

var m = new Map();
m.set('asdg', 345);
m.get('asdg');
m.delete('asdg');
var m1 = new Map(['das', 123], ['gfd', 234]);

var s1 = new Set();
var s2 = new Set([1, 2, 5]);
s2.add(6);
s2.delete(6);

Map和Set无法使用下标,用iterable
具有iterable类型的集合可以通过新的for(var o of set)循环来遍历。
还可以用forEach(),它接收一个函数作为参数。

var m = new Map();
n.forEach(function(value, key, m){
        //函数体
        //set没有key,前两个参数都是value
        //数组一次是值,下标,数组名
        //可以忽略一些参数
    }
);

函数

JavaScript函数可以像变量一样使用。

function func(x){
    //函数体
    return x;  //如果没有return,会返回undefined;
}

//func()是一个对象,func是指向该函数的变量
//也可这么写
var func = function(x){
    //函数体
    return x;
}

函数有默认参数arguments,代表传进来的所有参数,类似数组但不是数组,arguments.length可得到参数的数目。
rest参数要用...标识,代表匹配后剩下的参数。

扫描二维码关注公众号,回复: 2450836 查看本文章

JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部:

变量作用域:内层覆盖外层,从内向外查找,外不可访问内。

JavaScript默认有一个全局对象window,不在任何函数内的变量具有全局作用域,被绑定到window的一个属性,函数也是如此。

constlet声明的变量都具有块级作用域,var声明的具有函数级作用域。

解构赋值:注意层次对应,可用来提取需要的元素。

对象方法

this有点迷,可用call或者apply指定方法的this。

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空,apply第二个参数是数组,call按顺序传入参数

高阶函数

参数是函数的函数叫做高阶函数。
map定义在Array

function pow(x){
    return x * x;
}
var a = [1, 2, 3];
var b = a.map(pow); b = [1, 4, 9];

reduce接收两个参数,做累计运算。

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

filter接收一个函数用来过滤数组元素。

sort接收一个函数指定排序规则,会修改原数组。

闭包

闭包就是将函数作为函数的返回值,并且调用时才执行函数。

箭头函数

解决了this指向问题。

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

generator

generator和函数不同的是,generatorfunction*定义(注意多出的*号),并且,除了return语句,还可以用yield返回多次。

遇到yield x;就返回一个对象{value: x, done: true/false}
也可以用for of来遍历generator。

标准对象

可用typeof获取对象的类型,返回一个字符串,注意Arraynull{}都是object,因此只可区分numberbooleanstringfunctionundefined

包装对象:

var n = new Number(123); // 123,生成了新的包装类型
var b = new Boolean(true); // true,生成了新的包装类型
var s = new String('str'); // 'str',生成了新的包装类型

如果忘记加new,仅仅是进行类型转换。

不要使用new Number()、new Boolean()、new String()创建包装对象;
用parseInt()或parseFloat()来转换任意类型到number;
用String()来转换任意类型到string,或者直接调用某个对象的toString()方法;
通常不必把任意类型转换为boolean再判断,因为可以直接写if (myVar) {…};
typeof操作符可以判断出number、boolean、string、function和undefined;
判断Array要使用Array.isArray(arr);
判断null请使用myVar === null;
判断某个全局变量是否存在用typeof window.myVar === ‘undefined’;
函数内部判断某个变量是否存在用typeof myVar === ‘undefined’。

Date

JavaScript的Date对象月份值从0开始,牢记0=1月。

RegExp

正则表达式
\d:数字
\w:数字或字母
\s:空格
.:任意一个字符
*:任意个字符
+:表示至少一个
{n}:n个
{n,m}:[n,m]个
^\d:必须以数字开头
\d$:必须以数字结束

创建RegExp对象:

var re1 = /ABC\-001/;
var re2 = new RegExp('ABC\\-001');

re1; // /ABC\-001/
re2; // /ABC\-001/

re1.test('234-234'); // false;

字符串分割:

'a,b;; c  d'.split(/[\s\,\;]+/); // ['a', 'b', 'c', 'd']

分组提取子串:
如果正则表达式中定义了组,就可以在RegExp对象上用exec()方法提取出子串来。

贪婪匹配:
正则匹配默认是贪婪匹配,价格采用费贪婪匹配。

var re = /^(\d+?)(0*)$/;
re.exec('102300'); // ['102300', '1023', '00']

全局搜索:

var r1 = /test/g;
// 等价于:
var r2 = new RegExp('test', 'g');

每次匹配后从下一个位置开始下一轮匹配。

JSON

数据类型:

number:和JavaScript的number完全一致;
boolean:就是JavaScript的true或false;
string:就是JavaScript的string;
null:就是JavaScript的null;
array:就是JavaScript的Array表示方式——[];
object:就是JavaScript的{ … }表示方式。

字符串必须用双引号,且键也必须用双引号。

将JavaScript对象序列化:var s = JSON.stringify(Obj);
价格JSOn反序列化成JavaScript对象:var obj = JSON.parse('JSON');

面向对象编程

将对象的__proto__属性指向另一个对象,实现继承。
Object.create()方法可以传入一个原型对象,并创建一个基于该原型的新对象,但是新对象什么属性都没有。

原型继承

看得云里雾里,prorotype那些东西太烦了,可以参考这里
不过既然有更好的方式就不用学这个了吧。。。

class继承

就像是Java的语法,简单易懂。

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

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

浏览器

浏览器对象

  • window对象不但充当全局作用域,而且表示浏览器窗口。
  • navigator对象表示浏览器的信息。
  • screen对象表示屏幕的信息。
  • location对象表示当前页面的URL信息。
  • document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构,document对象就是整个DOM树的根节点。
    用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点:
    document对象还有一个cookie属性,可以获取当前页面的Cookie。
  • history对象保存了浏览器的历史记录,JavaScript可以调用history对象的back()或forward (),相当于用户点击了浏览器的“后退”或“前进”按钮。不建议再用了。

操作DOM

AJAX

Promise

Canvas

猜你喜欢

转载自blog.csdn.net/yijiull/article/details/81217151