一、JavaScript概述

1、ECMAScript和JavaScript的关系

1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。

次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。

二是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。

因此ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现，在日常场合，这两个词是可以互换的。

javascript遵守ECMA指定的标准，换句话说javascript就是ECMAscript的方言。

2、ECMAScript的历史
年份 名称 描述
1997 ECMAScript 1 第一个版本
1998 ECMAScript 2 版本变更
1999 ECMAScript 3

添加正则表达式

添加try/catch
  ECMAScript 4 没有发布
2009 ECMAScript 5

添加"strict mode"严格模式

添加JSON支持
2011 ECMAScript 5.1 版本变更
2015 ECMAScript 6 添加类和模块
2016 ECMAScript 7

增加指数运算符（**）

增加Array.prototype.includes

 

3、JavaScript的组成

平常所说的ES6就是指ECMAScript 6

一个完整的JavaScript 实现是由以下 3 个不同部分组成的：

    1.核心（ECMAScript）

    2.文档对象模型（DOM） Document object model (整合js，css，html)

    3.浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

4、JavaScript的特点

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

二、JavaScript引入方式

1、行内JS

<input type="button" value="点击我" onclick="javascript:alert('我被点击了')">

<!--onclick:点击触发一个事件，alert：弹出一个对话框-->

2、内部JS：script里的程序整个页面都可以用

<head>

    <meta charset="UTF-8">

    <title>JS内部定义</title>

    <script type="text/javascript">

        function Example(){  /*函数*/

            alert('我喜欢你')

        }

    </script>

</head>

3、外部JS

外部样式就是将JS写在一个单独的文件(.js文件)中，然后在HTML页面进行引入。

<script type="text/javascript" src="MyJavascript.js"></script> 

三、JavaScript语言规范

1、注释

单行注释：//

2、多行注释：/*注释内容*/

/*

多行注释

*/

3、对比

HTML注释：<!--注释内容-->

CSS注释：/*注释内容*/    单行多行都是用这个

JavaScript注释：

    单行注释：//

    多行注释：/*注释内容*/

4、结束符

JavaScript中的语句要以分号    ;   为结束符。

四、JavaScript语言基础

1、变量声明

    JavaScript的变量名可以使用数字，字母，_和$组成，不能以数字开头。

    声明变量使用var关键字

var name = "mingzai";

var age = 18;

2、注意事项

    1.变量名是区分大小写的

    2.推荐使用驼峰式命名规则(python中则推荐使用下划线的形式命名)

    3.保留字(关键字)不能用做变量名

    4.javascript和python一样是动态的语言，即定义的变量不需要声明是什么类型，例如：

        var a = 'xiaoming'   //定义一个字符串变量

        a = 18  //可以直接修改成数字类型的变量

3、补充

1.ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

例如：

{

 let a = 100;

 var b = 50;

}

a // Uncaught ReferenceError: a is not defined

b //

for循环的计数器，就很合适使用let命令，例如：

for (let i = 0; i < 10; i++) {

    代码

}

2.ES6新增const用来声明常量。一旦声明，其值就不能改变。

const ID = 1

ID //

ID = 2 //VM602:1 Uncaught TypeError: Assignment to constant variable.

3.保留字列表
abstract

boolean

byte

char

class

const

debugger

double

enum

export

extends

final

float

goto

implements

import

int

interface

long

native

package

private

protected

public

short

static

super

synchronized

throws

transient

volatile

保留字




五、JavaScript数据类型

1、JavaScript动态类型

var x;  // 此时x是undefined

var x = 1;  // 此时x是数字

var x = "xiaoming"  // 此时x是字符串 

2、数值(Number)

JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 100   //

var b = 10.5   //10.5

var c = 12.13e3   //

还有一种NaN，表示不是一个数字（Not a Number）

就是说，如果你想把一个字符串转换成数字类型，那么这个字符串必须是全数字组成的才能转换，否则就不能转，

比如字符串'abc' 是不可以转成数字类型的，但是字符串'123'却可以转成数字类型。

常用方法：

parseInt(123)   //

parseInt('123')   //

parseFloat(123)   //

parseFloat('12.3')   //12.3

parseInt('abc')   //NaN

parseFloat('abc')   //NaN

3、字符串(String)

var a = "Hello"

var b = "world;

var c = a + b;

console.log(c);  // Helloworld

1.常用方法：






方法
说明






.length
返回长度




.trim()
移除空白




.trimLeft()
移除左边的空白




.trimRight()
移除右边的空白




.charAt(n)
返回第n个字符




.concat(value, ...)
拼接




.indexOf(substring, start)
子序列位置




.substring(from, to)
切片




.slice(start, end)
切片




.toLowerCase()
小写




.toUpperCase()
大写




.split(delimiter, limit)
分割







2.例子：

//长度

var s1 = 'hello world';

s1.length;  //11(length是属性，不是方法)

//去除空白

var s2 = '  hello  ';

s2;  //"  hello  "

s2.trim();  //"hello"(相当于python的strip())

s2.trimLeft();  //"hello  "(相当于python的lstrip())

s2.trimRight();  //"  hello"(相当于python的rstrip())

//返回第n个字符

var s3 = 'hello girl';

s3.charAt(0);   //"h"   相当于python的按索引找值

s3.charAt(11);   //""    没有值则返回空字符串

//拼接

var s4 = 'hello';

s4.concat('boy','girl');  //"helloboygirl"

//找元素的索引位置，跟python的index相似，但有不同

//indexOf接收两个参数，第一个参数是要找的元素，第二个参数是表示从哪里开始找，找不到就返回-1

var s4 = 'hello';

s4.indexOf('e',0);   //1   从索引为0开始找，找到元素e，e的索引是1

s4.indexOf('e',1);   //1   从索引为1开始找，找到元素e，e的索引是1

s4.indexOf('e',2);   //-1  从索引为2开始找，找不到元素e，返回-1

//切片的两种方式

substring：不支持负数，因为若第一个参数大于第二个参数，则会把两个参数互换，若参数是负数会把这个负数变成0

例如：substring(1,-5)  -->  substring(-5,1)  -->  substring(0,1)

slice：跟我们python中的切片一样，也支持负数

var s5 = 'hello world';

s5.substring(0,5);   //"hello"

s5.substring(0,-5);   //""   从0到0

s5.substring(1,-5);   //"h"  从0到1

s5.slice(1,-5);   //"ello "

//大小写

var s6 = 'Hello World';

s6.toLowerCase();   //"hello world"

s6.toUpperCase();   //"HELLO WORLD"

//分割

var s7 = 'hello world';

s7.split();  //["hello world"]  没有默认参数，不写参数不分割，但是还是生成了列表

s7.split(' ');  //["hello", "world"]   按照空格分割

s7.split(' ',1);   //["hello"]   第二个参数是代表返回的列表的长度

s7.split(' ',2);   //["hello", "world"]

s7.split(' ',3);   //["hello", "world"]   超出列表的长度，也相当于把整个列表的长度都返回

//拼接字符串一般使用“+”

var name = 'xiaoming';

var age = 18;

msg = name + age;   //"xiaoming18"

3.注意：slice和substring的区别

string.slice(start, stop)

string.substring(start, stop)：

两者的相同点：

如果start等于end，返回空字符串

如果stop参数省略，则取到字符串末

如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：

如果 start > stop ，start和stop将被交换

如果参数是负数或者不是数字，将会被0替换

silce()的特点：

如果 start > stop 不会交换两者

如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)

如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

4.模板字符串

ES6中引入了模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识（就是ESC下面那个键），用${}取值

它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。

JavaScript模板字符串

var name = '明哥';

var msg = `I am ${name}`;  //"I am 明哥"

var msg2 = `I am ${name}

I am 18 year old`;

结果：

`I am 明哥

I am 18 year old`;

//直接定义多行字符串

var msg3 = 'I am ${name}

I am 18 year old';

结果：Uncaught SyntaxError: Invalid or unexpected token

python模板字符串

f'xxx' 或 F'xxx'  且以大括号 {} 表明被替换的字段，{}里面可以是字符串或者表达式

name = '小白'

msg = f'我叫{name}，今年{18}岁，性别{"男"}'

print(msg)  # 我叫小白，今年18岁，性别男

4、布尔值(Boolean)

区别于Python，JavaStript的true和false都是小写。

var a = true;

var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

5、null和undefined

null表示有值的，但是值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;

undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

var name    //此时声明了变量，但未初始化，默认值是undefined

6、对象(Object)

1.概念

JavaScript和python一样都是一切皆对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

2.数组

数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

var a = [1234, "heiheihei"];

console.log(a[1]);   // "heiheihei"

3.数组的常用方法：






方法
说明






.length
数组的大小




.push(ele)
在尾部追加元素




.pop()
删除尾部的元素并返回删除的元素




.unshift(ele)
在头部插入元素




.shift()
在头部移除元素




.slice(start, end)
切片




.reverse()
反转




.join(seq)
将数组元素连接成字符串




.concat(val, ...)
连接数组




.sort()
排序




.forEach()
将数组的每个元素传递给回调函数




.splice()
删除元素，并向数组添加新元素。




.map()
返回一个数组元素调用函数处理后的值的新数组







4.数组的例子

//切片

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

a1[1];   // 2

a1[6];   // undefined   超出范围就返回undefined

//数组的大小

a1.length;   //4

//增加删除元素

var a2 = [1,2,3];

//在尾部追加

a2.push(4);   //[1, 2, 3, 4]

//在尾部删除

a2.pop();   // [1, 2, 3]

//在头部增加

a2.unshift(0);   //[0, 1, 2, 3]

//在头部删除

a2.shift();   //[1, 2, 3]

//切片

var a3 = [1,2,3,4,5];

a3.slice(1,3);   //[2, 3]

a3.slice(1,-1);   //[2, 3, 4]

//把数组反过来

a3.reverse();   //[5, 4, 3, 2, 1]

//将数组元素连接成字符串

a3.join('+')   //"5+4+3+2+1"

//Python中的join

list1 = [11, 22, 33, 44]

ret = '+'.join([str(i) for i in list1]))

//连接数组(形成新的数组)

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

new_a4 = a4.concat(5,6,7);   //[1, 2, 3, 4, 5, 6, 7]

new_a4_2 = a4.concat(['a','b','c']);   //[1, 2, 3, 4, "a", "b", "c"]

//关于sort()需要注意：

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。

要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。

比较函数应该具有两个参数 a 和 b，其返回值(sort有函数作为参数时会按返回值进行比较)如下：

若 a 小于 b，则返回一个小于 0 的值。

若 a 等于 b，则返回 0。

若 a 大于 b，则返回一个大于 0 的值

var a5 = [11,2,12,19,13];

a5.sort();   // [11, 12, 13, 19, 2]   默认按ASCII排序

function sortNumber(a,b){

return a -b }  // 定义一个排序函数

a5.sort(sortNumber);   // [2, 11, 12, 13, 19]

数组的删除splice接收三个参数：

第一个参数：从哪个位置开始删

第二个参数：删除数组的个数

第三个参数：在删除的位置新增的元素(可多个)

var a6 = [1,2,3,4,5,6];

a6.splice(0,1);

a6;    //[2, 3, 4, 5, 6]

a6.splice(0,2);

a6;    // [4, 5, 6]

a6.splice(0,1,7);

a6;    // [7, 5, 6]

a6.splice(0,1,8,9,10);

a6;    // [8, 9, 10, 5, 6]

补充：

ES6新引入了一种新的原始数据类型（Symbol），表示独一无二的值。它是JavaScript语言的第7种数据类型。

5.JS中自定义对象，类似于python中的字典，key可以不加引号，key默认是字符串
var d1 = {'name':'小明',age:18};  //{name:'小明',age:18}

7、类型查询：typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句

对变量或值调用 typeof 运算符将返回下列值之一：

object - 如果变量是一种引用类型或 Null 类型的

undefined - 如果变量是 Undefined 类型的

boolean - 如果变量是 Boolean 类型的

number - 如果变量是 Number 类型的

string - 如果变量是 String 类型的

例如：

typeof [1,2,3];   //"object"

typeof null;   //"object"

typeof NaN;   //"number"

typeof 1;   //"number"

typeof undefined;   //"undefined"

typeof 'a';   //"string"

typeof true;   //"boolean"

六、运算符

1、算数运算符

+   -   *   /   %   ++   --

2、比较运算符

>     >=    <     <=     !=     ==    ===    !==

注意：双等号比较的是值是否相同，三等号比较的是值和类型是否都相同

1 == “1”  // true

1 === "1"  // false

3、逻辑运算符

and    or    not

&&    ||      !

4、赋值运算符

=   +=    -=   *=   /=


												


											
Javascript初识之数据类型的更多相关文章
	

    
								
  1. JavaScript 中的数据类型
		
    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...
    
		
    2. 
						
  2. 初识redis数据类型
		
    初识redis数据类型 1.String(字符串) string是redis最基本的类型,一个key对应一个value. string类型是二进制安全的.意思是redis的string可以包含任何数据 ...
    
		
    3. 
						
  3. javaScript中的数据类型
		
    一.综述 javaScript中的数据类型分为两类: 简单类型:Boolean,Number,String 引用类型:Object 其他:undefined代表变量没有初始化,null代表引用类型为空 ...
    
		
    4. 
						
  4. Javascript中的数据类型之旅
		
    虽然Javascript是弱类型语言,但是,它也有自己的几种数据类型,分别是:Number.String.Boolean.Object.Udefined.Null.其中,Object属于复杂数据类型, ...
    
		
    5. 
						
  5. JavaScript基础：数据类型的中的那些少见多怪
		
    原文:JavaScript基础:数据类型的中的那些少见多怪 Javascript共有6种数据类型,其中包括3个基本数据类型(string,number,boolean).2个特殊数据类型(undefi ...
    
		
    6. 
						
  6. 【译】Javascript中的数据类型
		
    这篇文章通过四种方式获取Javascript中的数据类型:通过隐藏的内置[[Class]]属性:通过typeof运算符:通过instanceof运算符:通过函数Array.isArray().我们也会 ...
    
		
    7. 
						
  7. ArcGIS API for JavaScript 中的数据类型【vs】GPServer的数据类型
		
    熟悉GPServer的同学肯定知道,GPServer在10.1的ArcMap后需要执行成功一次才能发布. 发布GPServer,可以是ArcMap的工具箱的工具,也可以是自己写的模型. 不管是ArcM ...
    
		
    8. 
						
  8. JavaScript 基本语法 -- 数据类型 & 变量
		
    JavaScript都有哪些数据类型呢? 在JavaScript里面,数据类型分为两类:原始类型(primitive type)和对象类型(object type) 1. 原始类型(我的理解,不可分割 ...
    
		
    9. 
						
  9. JavaScript中基本数据类型和引用数据类型的区别
		
    1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Fundebug后端Java异常监控插件更新至0.2.0，支持Spring及Maven
			
    摘要: 0.2.0支持监控Spring应用,并且支持使用Maven接入插件,请大家及时更新. 支持监控Spring应用 1. pom.xml配置fundebug-spring依赖 <depend ...
    
			
    2. 
						
  2. H5页面的高度宽度100%
			
    解决方案1: 设置如下:html,body{ min-height:100vh; background-color:#fff; }这样高度首先不会写死,而且满足最小高度是满屏 解决方案2: 可以用vh ...
    
			
    3. 
						
  3. PHP实现微信随机红包算法和微信红包的架构设计简介
			
    微信红包的架构设计简介: 原文:https://www.zybuluo.com/yulin718/note/93148 @来源于QCon某高可用架构群整理,整理朱玉华. 背景:有某个朋友在朋友圈咨询微 ...
    
			
    4. 
						
  4. 自然语言处理NLP快速入门
			
    自然语言处理NLP快速入门 https://mp.weixin.qq.com/s/J-vndnycZgwVrSlDCefHZA [导读]自然语言处理已经成为人工智能领域一个重要的分支,它研究能实现人与 ...
    
			
    5. 
						
  5. 通过ADB查看当前Activity
			
    cmd命令中输入:adb shell dumpsys activity activities 在一连串的输出中找到Runing activities com.android.settings是包名.  ...
    
			
    6. 
						
  6. gitbook 入门教程之插件介绍
			
    插件是 gitbook 的扩展功能,很多炫酷有用的功能都是通过插件完成的,其中插件有官方插件和第三方插件之分. 推荐官方插件市场 https://plugins.gitbook.com/ 寻找或下载相 ...
    
			
    7. 
						
  7. Kafka 特性
			
    Kafka 特性 标签(空格分隔): Kafka 支持多个生产者 多个生成者连接Kafka来推送消息,这个和其他的消息队列功能基本上是一样的 支持多个消费者 Kafka支持多个消费者来读取同一个消息流 ...
    
			
    8. 
						
  8. Github上如何查看当前最流行的开源项目
			
    先声明下:只针对初学者,大神的话勿喷. 针对题标的这个问题,按照如下步骤操作即可: 进入Github网站后,显示的页面如下所示: 点击"Explore"链接,进入如下页面: 页面上 ...
    
			
    9. 
						
  9. 持续代码质量管理-SonarQube-7.3简单使用
			
    安装了SonarQube以及Sonar Scanner之后,就需要那代码检测了.当然为了方便我们使用已有现成的demo,知道到对应的git地址下载即可. 1. sonar-examples下载 htt ...
    
			
    10. 
						
  10. 5.机器学习——DBSCAN聚类算法
			
    1.优缺点 优点: (1)聚类速度快且能够有效处理噪声点和发现任意形状的空间聚类: (2)与K-MEANS比较起来,不需要输入要划分的聚类个数: (3)聚类簇的形状没有偏倚: (4)可以在需要时输入过 ...
    
			
    11.