首页 > 技术文章 > javascript简介、如何应用、数据类型及应用、变量

yyn120804 2017-02-10 22:36 原文

（一）javascript 简介

能在静态HTML页面上添加一些动态效果；事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。

（二）javascript在html中的应用

JavaScript代码可以直接嵌在网页的任何地方，不过通常我们都把JavaScript代码放到<head>中：

<head>

  <script>
    alert('Hello, world');
  </script>
</head>

第二种方法是把JavaScript代码放到一个单独的.js文件，然后在HTML中通过<script src="..."></script>引入这个文件：

<head>
  <script src="/static/js/abc.js"></script>
</head>

这样，/static/js/abc.js就会被浏览器执行。

把JavaScript代码放入一个单独的.js文件中更利于维护代码，并且多个页面可以各自引用同一份.js文件。

可以在同一个页面中引入多个.js文件，还可以在页面中多次编写<script> js代码... </script>，浏览器按照顺序依次执行。

（三）基本语法

  1，每个语句以;结束，语句块用{...} 比如语句块：

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

注意花括号{...}内的语句具有缩进，通常是4个空格。缩进不是JavaScript语法要求必须的，但缩进有助于我们理解代码的层次，所以编写代码时要遵守缩进规则。很多文本编辑器具有“自动缩进”的功能，可以帮助整理代码。

  2，注释：注释一行用／／；注释多行用／＊  ＊／

（四）数据类型
js中，数据具有属性和方法。例如string具有length属性和match方法。
   变量

    1.数字Number

JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型：

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

2.字符串

字符串是以单引号'或双引号"括起来的任意文本，比如'abc'，"xyz"等等。请注意，''或""本身只是一种表示方式，不是字符串的一部分，因此，字符串'abc'只有a，b，c这3个字符。

1.普通字符串：如果'本身也是一个字符，那就可以用""括起来，比如"I'm OK"包含的字符是I，'，m，空格，O，K这6个字符。如果字符串内部既包含'又包含"怎么办？可以用转义字符\来标识，比如：'I\'m \"OK\"!'(即：在一个字符串中，每个'或者"前面加一个\即可，例如'm前面加了\，\"OK\"中，前面的"和后面的"的前面都加了\);表示的字符串内容是：I'm "OK"!

2.多行字符串

由于多行字符串用\n写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方法，用` ... `表示：

`这是一个
多行
字符串`;

3.多个字符串串连成一个字符串：要把多个字符串连接起来，可以用+号连接：

var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
alert(message);

如果有很多变量需要连接，用+号就比较麻烦。ES6新增了一种模板字符串，表示方法和上面的多行字符串一样，但是它会自动替换字符串中的变量：

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);

4.操作字符串（对于字符串的操作是改变不了字符串的，即字符串是不可以改变的，均返回新的字符串）

<1>获取字符串的长度：var s="hello, world!";

var Length=s.length; //通过函数length返回s的长度值：13，将该返回值符给Length

<2>获取字符串中的某个指定位置的字符，则用数组下标的方式获取：var s="hello, world!";

s[0]; // 'H'

s[6]; // ' '

s[7]; // 'w' s[12]; // '!'

s[13]; // undefined 超出范围的索引不会报错，但一律返回undefined

要特别注意：若在上例中，我们将s［0］＝“w”；那么s字符串的值仍然为"hello, world!"

<3>JavaScript为字符串提供了一些常用方法，注意，调用这些方法本身不会改变原有字符串的内容，而是返回一个新字符串：

toUpperCase：将字符串全部变为大写字符串；

var s = 'Hello';

var t = s.toUpperCase(); //s.toUpperCase()返回'HELLO',将该返回值符给变量t；

toLowerCase：把一个字符串全部变为小写：

                           var s = 'Hello';
                           var lower = s.toLowerCase(); // 返回'hello'并赋值给变量lower

indexOf() 方法

:indexOf()会搜索指定字符串出现的位置：

                          var s = 'hello, world';
                          var t = s.indexOf('world'); // 返回7,t的值为7：即word字符串中的首字母w存在s［7］中 ，固返回数字7
                          var w = s.indexOf('World'); // w的值为－1:字符串没有找到指定的子串，返回-1

lastIndexOf() 方法

substring：substring()返回指定索引区间的子串：

                        var s = 'hello, world'
                        s.substring(0, 5); // 从索引0开始到5（不包括5），返回'hello'
                        s.substring(7); // 从索引7开始到结束，返回'world'

charAt() 方法

定义和用法

charAt() 方法可返回指定位置的字符。

请注意，JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为 1 的字符串。

concat() 方法

定义和用法

concat() 方法用于连接两个或多个字符串。

match() 方法

匹配指定的字符串

正则表达式的匹配

replace() 方法

定义和用法

split() 方法

定义和用法

split() 方法用于把一个字符串分割成字符串数组。

这里第一句话，有空格来分，结果在输出中，空格变成了，字符串数组中不存在空格。

以什么来分，什么就不在字符数组中显示。例如，以a来分

也就是说，以什么来分，什么就变为字符串中的逗号，即字符串数组中没有该字符串。

substr() 方法

定义和用法

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

语法

stringObject.substr(start,length)

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

3.布尔值

一个布尔值只有true、false两种值，要么是true，要么是false，可以直接用true、false表示布尔值，也可以通过布尔运算计算出来：两种运算符可以产生布尔值：比较运算符与逻辑运算符

逻辑运算符（&&，｜｜，！）：&&：a&&b，只有a和b均为true，该表达式结果才为true否则为false；｜｜：a｜｜b，只要a、b中有一个为true，该表达结果就为true否则为 false；！：！若a为true，则！a结果为false否则相反；

比较运算符（>、<、==、===、!= ）：＝＝与＝＝＝的区别：

第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较

另一个例外是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

4. 数组

定义数组

数组对象用来在单独的变量名中存储一系列的值。

我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象：

var myArray=new Array()

有两种向数组赋值的方法（你可以添加任意多的值，就像你可以定义你需要的任意多的变量一样）。

数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。例如：[1, 2, 3.14, 'Hello', null, true];

上述数组包含6个元素。数组用[]表示，元素之间用,分隔。

另一种创建数组的方法是通过Array()函数实现：new Array(1, 2, 3); // 创建了数组[1, 2, 3]

然而，出于代码的可读性考虑，强烈建议直接使用[]。

数组的元素可以通过索引来访问。请注意，索引的起始值为0：

               var arr = [1, 2, 3.14, 'Hello', null, true];
               arr[0]; // 返回索引为0的元素，即1
               arr[5]; // 返回索引为5的元素，即true
               arr[6]; // 索引超出了范围，返回undefined

操作数组

<1> 获取数组的长度：数组名.length //返回数组长度如：6

var arr=[0,'hello',true,null,7,9];

var len=arr.length; //arr.length将会返回一个值即6，并且将arr.length的值赋给len

document.write(len);

<2> 修改数组的长度（变长和缩短）

变长： var arr=[0,'hello',true,null,7,9];

arr.length=7; ／／将数组arr的长度变为7，此时arr数组为［0,'hello',true,null,7,9，undefined］;

var arr=［0,'hello',true,null,7,9］;／／

arr[6]=6;//这相当于将arr的长度变为7，此时arr数组为［0,'hello',true,null,7,9，6］;

变短： var arr=[0,'hello',true,null,7,9];

arr.length=3;//将数组的长度变为3，此时arr数组为［0,'hello',true］

<3> 修改数组元素的值（Array可以通过索引把对应的元素修改为新的值，因此，对Array的索引进行赋值会直接修改这个Array）

var arr=[0,'hello',true,null,7,9];

arr[0]=1;//此时arr数组为 [1,'hello',true,null,7,9]

<4> 搜索一个指定的元素的位置：indexOf() 用法：数组名.indexOf(某元素值)；

var arr=[0,'hello',true,null,7,9,0];

arr.indexOf(0);//返回值为0的元素的下表值，即0；

arr.indexOf('hello');//返回值为‘hello’的元素的下表值，即1;

indexOf总是返回第一个元素的位置，数组最后一个0，返回的元素位置不是6，而是0；

<5> 截取Array的部分元素，然后返回一个新的Array：slice() 用法：数组名.slice(开始下标值，截止下标值) 不会改变原数组

var arr=[0,'hello',true,null,7,9];

arr.slice(3,5);//从下标值为3开始即从arr[3]开始至arr[5]之前的元素，执行后，返回新的数组［null，7］

arr.slice(3);//截取从arr[3]开始的所有元素，执行后，返回新的数组［null,7,9］

arr.slice();//相当于复制整个数组

<6>向数组的尾部增加和删除元素：增加：push()；删除pop()； push和pop改变原数组

增加元素：push() 用法:数组名.push(元素值1，元素值2，元素值3......)

var arr=[0,'hello',true,null,7,9];

arr.push(3,11,'helloword','wo');//向数组arr的后面增加元素，然后， arr.push(3,11,'helloword','wo')返回arr现在的长度值，11

arr;//此时的arr为［0,'hello',true,null,7,9,3,11,'helloword','wo'］

删除元素：pop() 用法：数组名.pop();

var arr=[0,'hello',true,null,7,9];

arr.pop();//pop()返回被删除的元素即9

arr.pop(); arr.pop(); arr.pop(); // 再连续pop 3次

arr//此时arr为［0，'hello'］

<7>向数组的头部增加和删除元素：增加：unshift()和删除：shift()

var arr = [1, 2];

arr.unshift('A', 'B'); // 返回Array新的长度: 4

arr; // ['A', 'B', 1, 2]

arr.shift(); // 'A'

arr; // ['B', 1, 2]

arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次

arr; // []

arr.shift(); // 空数组继续shift不会报错，而是返回undefined

                    arr; // []

<8>给数组进行默认排序：sort() 用法：数组名.sort();特点：改变arr数组

var arr = [8,2,10,6];

arr.sort();//将arr重新排序，并将排序后的arr数组返回

<9>reverse：把整个Array的元素给掉个个，也就是反转：

var arr = ['one', 'two', 'three'];

arr.reverse();

                    arr; // ['three', 'two', 'one']
             <10>splice

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()  concat()方法并没有修改当前Array，而是返回了一个新的Array

用数组的元素组成字符串 - join() 和string的slipt相反。

      文字数组 - sort()

isArray() 方法

定义和用法

isArray() 方法用于判断一个对象是否为数组。

如果对象是数组返回 true，否则返回 false。

Math（算数）对象

floor（）：返回小于等于x的最大整数

reduce() 方法

定义和用法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

例:var numbers=[65,44,12,4];

numbers.reduce(function(x1,x2){

return x1+x2;

})

在这里，第一步，X1为65，x2为44.第二步：x1为（65+44） 109，x2为12；第三步：x1为(109+12)121,x2为4.第四步：最后return 125（121+4）

如果上述reduce中除了回调函数还有参数，则第一步X1为参数值，X2为65

js 数组 map方法

map
这里的map不是“地图”的意思，而是指“映射”。[].map(); 基本用法跟forEach方法类似：

array.map(callback,[ thisObject]);

callback的参数也类似：

[].map(function(value, index, array) {

　　　　// ...

});

map方法的作用不难理解，“映射”嘛，也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方：

var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function (item) {

　　return item * item;

});

alert(arrayOfSquares); // [1, 4, 9, 16]

callback需要有return值，如果没有，就像下面这样：

　　var data = [1, 2, 3, 4];

　　var arrayOfSquares = data.map(function() {});

　　arrayOfSquares.forEach(console.log);

结果可以看到，数组所有项都被映射成了undefined：

在实际使用的时候，我们可以利用map方法方便获得对象数组中的特定属性值们。例如下面这个例子（之后的兼容demo也是该例子）：

var users = [
  {name: "张含韵", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];

var emails = users.map(function (user) { return user.email; });

console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com

Array.prototype扩展可以让IE6-IE8浏览器也支持map方法：

if (typeof Array.prototype.map != "function") {
  Array.prototype.map = function (fn, context) {
    var arr = [];
    if (typeof fn === "function") {
      for (var k = 0, length = this.length; k < length; k++) {      
         arr.push(fn.call(context, this[k], k, this));
      }
    }
    return arr;
  };

1
2

推荐阅读