JavaScript

来源：互联网发布：raphael.js 类似工具编辑：程序博客网时间：2024/06/08 20:08

一、快速入门

以Java为基础学习，只挑重点及不会的学习。

1.代码引入

1.JavaScript代码可以直接嵌在网页的任何地方，不过通常我们都把JavaScript代码放到<head>中2.把JavaScript代码放到一个单独的.js文件，然后在HTML中通过<script src="..."></script>引入这个文件3.有一个type 属性， type="text/javascript"，这是默认的属性，不用显式的指定

2.数据类型

NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity    2 / 0; // Infinity    0 / 0; // NaN

比较大小    JavaScript允许对任意数据类型做比较    第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；    第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。    另一个例外是NaN这个特殊的Number与所有其他值都不相等，包括它自己：    NaN === NaN; // false    唯一能判断NaN的方法是通过isNaN()函数：    isNaN(NaN); // true    最后要注意浮点数的相等比较：    1 / 3 === (1 - 2 / 3); // false    这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值    Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

null和undefinednull表示一个“空”的值，它和0以及空字符串''不同，0是一个数值，''表示长度为0的字符串，而null表示“空”。在其他语言中，也有类似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。但是，在JavaScript中，还有一个和null类似的undefined，它表示“未定义”。JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这并没有什么卵用，区分两者的意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。多行字符串，用反引号处理`这是一个多行字符串`;//WebStrom上会有红色的错误提示，但是不影响运行

3.变量

从变量看JS是动态语言，不要固定的数据类型var a = 'abs';strict模式如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量：i = 10; // i现在是全局变量，会导致错误在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误。全部采用strict模式模板字符串var name = '小明';var age = 20;var message = `你好, ${name}, 你今年${age}岁了!`;alert(message);

4.数组

Array给array赋予新的值会改变array的长度如果索引超出了array固有的大小会导致其长度变大JavaScript的数组可以包括任意数据类型[1, 2, 3.14, 'Hello', null, true];slice截取array如果不传递任何值，则相当于复制push()向Array的末尾添加若干元素，返回array新的长度pop()则把Array的最后一个元素删除掉unshift()方法头部添加若干元素shift()方法则把Array的第一个元素删掉sort()、reverse()和Java的一样splicesplice()方法是修改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连接起来concat()方法可以接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里var arr = ['A', 'B', 'C'];arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]join()方法是把当前的每个元素用指定的字符连接起来，返回连接后的字符串var arr = ['A', 'B', 'C', 1, 2, 3];arr.join('-'); // 'A-B-C-1-2-3'

5.对象

JavaScript的对象是一组由键-值组成的无序集合对象的键都是字符串类型，值可以是任意数据类型var xiaoming = {    name: '小明',    birth: 1990,    school: 'No.1 Middle School',    height: 1.70,    weight: 65,    score: null};访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用''括起来：var xiaohong = {    name: '小红',    'middle-school': 'No.1 Middle School'   //原来不含有这个属性，则访问的时候也会不一样};xiaohong['middle-school']; // 'No.1 Middle School'      必须以这种方式['XXX']来访问如果访问不存在的属性会返回underfined删除用delete xiaoming.school   //如果删除一个不存在的属性也不会报错访问是否是xiaoming的属性可以用 'name' in xiaoming; //true  不过要小心，小明是对象，继承于object，比如toString也是他的属性。判断是否是自身的属性可以用xiaoming.hasOwnProperty('name');   //true

6.Map 和 Set

Set和Map类似，但是不存value，不能存储重复的值。Set中有add(key)添加数据delete(key)删除数据

7.iterable

Array、Map和Set都属于iterable类型，都可以用for ... of循环来遍历。    var a = ['A', 'B', 'C'];    a.name = 'Hello';    for (var x of a) {        alert(x); // 'A', 'B', 'C'    }    //注意如果用for... in...会出现意向不到得效果，会把name给遍历出来，历史遗留问题，糟粕。

forEach遍历

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

var s = new Set(['A', 'B', 'C']);    s.forEach(function (element, sameElement, set) {        alert(element);    });    也可以    s.forEach(function (element) {        alert(element);    });

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);m.forEach(function (value, key, map) {    alert(value);});也可以m.forEach(function (value) {    alert(value);});

阅读全文

0 0