JavaScript简介

标签：function console 函数简介 JavaScript var log

JavaScript概述

全称JavaScript，但是与Java一毛钱关系都没有，之所以这么叫是为了蹭Java的热度。

它是一门前端工程师的编程语言，但是它本身有很多逻辑错误(不是很严谨)。

IT行业鄙视链: 后端 > 前端、运维、测试、产品、老板
前端想一统天下:node.js

JavaScript发展史

JavaScript因互联网而生，紧跟浏览器的发展而发展。

1990年，欧洲核能研究所（CERN）科学家在互联网（Internet）基础上，发明了万维网（World Wide Web），从此可以再网上浏览网页文件。（互联网是线路、协议以及通过TCP、IP协议实现数据电子传输的硬件和软件的集合体。Internet提供的主要服务有万维网WWW、文件传输FTP、电子邮件E-mail、远程登录Telnet等。万维网则存在于互联网之上，是由无数个网络站点和网页集合而成，构成了因特网主要的部分。如果把互联网看成是基础，万维网就可以被看成是对互联网的应用）

1992年，美国国家超级电脑应用中心（NCSA）开发了人类历史上第一个浏览器Mosaic。

1994年，NCSA的程序员联合一个风投家成立Mosaic通信公司，后来更名为Netscape。开发面向普通用户的新一代浏览器Netscape Navigator1.0版，市场份额一举超过90%。

Netscape公司很快发现，浏览器需要一种可以嵌入网页的脚本语言来控制页面行为。因为那时网速很慢而且网费很贵，有些操作不需要在服务端完成，可以把这些操作在浏览器端完成，从而提高效率。他们对这项脚本语言的设想是：功能不需要太强，语法简单，容易学习和部署。恰逢Sun公司java问世，两家公司强强联合，NetScript公司希望借助Java语言的声势，Sun公司则将自己的影响力扩展到浏览器，1995年，他们雇佣程序员十天时间就设计完成了这种语言的第一版，命名为JavaScript，对外宣称JavaScript是Java的补充。

ECMAScript和JavaScript的关系

1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

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

注：ES6就是指ECMAScript 6。

尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

核心（ECMAScript）
文档对象模型（DOM） Document object model (整合js，css，html)
浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

JS基础

1.注释语法

// 单行注释
/*多行注释*/

2.引入js的多种方式

1）head内script标签内编写

<script>
  // 在这里写你的JS代码
</script>

2）head内script标签src属性引入外部js资源

<script src="myscript.js"></script>

3）body内最底部通过script标签src属性引入外部js资源(最常用)

ps:注意页面的下载是从上往下的，所以操作标签js代码一定要等待标签加载完毕再执行才可以正常运行

3.结束符号

分号(很多时候不写也没问题)

变量与常量

编写JS代码的环境：
1.pycharm创建js文件或者html文件(适合编写较为复杂的js代码)
2.浏览器提供编写js代码的环境

在js中声明变量的关键字

1）var

var name = 'jason';

2) let

let name = 'tony';

ps：let是ECMA6新语法，可以在局部定义变量不影响全局

在js中声明常量的关键字——const

const pi = 3.14;

基本数据类型

JavaScript拥有动态类型

1. 数值(Number)

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

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

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

常用方法：

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

2. 字符串(String)

单引号 'jason'
双引号 "jason"
模板字符串 `jason`

字符串拼接：

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

常用方法：

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

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)个字符结束(不包含该位置字符)

补充：

ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`这是普通字符串！`

// 多行文本
`这是多行的
文本`

格式化输出：

let name1 = 'jason'
let age1 = 18

let desc = `my name is ${name1} my age is ${age1}`

//my name is jason my age is 18

3.布尔类型(Boolean)

JS里面的布尔值与Python不同
JS是纯小写的，而Python是首字母大写

var a = true;
var b = false;

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

4. null和undefined

null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

null表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null)，undefined则表示只声明了变量，但还没有赋值。

还不明白，上图吧！

5. 对象(Object)

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

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

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

5.1 对象之数组（类似于Python中的列表）

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

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

常用方法：

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素
.map()	返回一个数组元素调用函数处理后的值的新数组

forEach()

语法：

forEach(function(currentValue, index, arr), thisValue)

参数

描述

function(currentValue, index, arr)

必需。数组中每个元素需要调用的函数。
函数参数:

参数	描述
currentValue	必需。当前元素
index	可选。当前元素的索引值。
arr	可选。当前元素所属的数组对象。

thisValue

可选。传递给函数的值一般用 "this" 值。
如果这个参数为空， "undefined" 会传递给 "this" 值

splice()

语法：

splice(index,howmany,item1,.....,itemX)

参数：

参数	描述
index	必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	必需。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX	可选。要添加到数组的新元素

map()

语法：

map(function(currentValue,index,arr), thisValue)

参数：

参数

描述

function(currentValue, index,arr)

必须。函数，数组中的每个元素都会执行这个函数
函数参数:

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

thisValue

可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"

5.2 对象之自定义对象（类似于python的字典）

产生字典的2种方式：

方式1：直接定义一个字典

方式2：产生一个对象（默认是字典的形式）

运算符

算数运算符

算数运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	*x=y2**	10	5
/	除法	x=y/2	2.5	5
%	取模（余数）	x=y%2	1	5
++	自增1（i++，先赋值，后加加)	x=y++	5	6
++	(++i，先加加，后赋值）	x=++y	6	6
--	自减1	x=--y	4	4
--		x=y--	5	4

比较运算符

运算符名称	说明	案例	结果
<	小于号	1<2	true
>	大于号	1>2	false
>=	大于等于号（大于或等于）	2>=2	true
<=	小于等于号（小于或等于）	3<=2	false
==	值相等（不考虑数据类型）	17==‘17’	true
!=	不等号	17!=17	false
=== !==	全等，要求值和数据类型都一致

逻辑运算符

逻辑运算符	说明	案例
`&&`	"逻辑与"，简称“与”and	true `&&`false
`\|\|`	"逻辑或"，简称“或”or	true \|\| false
`!`	"逻辑非"，简称“非”not	`!`true

流程控制

1.单if分支

if (条件){
    //条件成立执行的代码
    }

2.if...else分支

if(条件){
        //条件成立执行的代码
    }else{
        //条件不成立执行的代码
    }

3.if...else if...else分支

if(条件1){
        //条件1成立执行的代码
    }else if(条件2){
        //条件1不成立条件2执行的代码
    }
    else{
        //条件1和2都不成立执行的代码
    }

4.如果分支结构中else if很多还可以考虑使用switch语法

switch(条件){
        case 条件1:
            条件1成立执行的代码;
            break;  如果没有break会基于某个case一直执行下去
        case 条件2:
            条件2成立执行的代码;
            break;
        case 条件3:
            条件3成立执行的代码;
            break;
        case 条件4:
            条件4成立执行的代码;
            break;
        default:
            条件都不满足执行的代码
    }

循环

for循环

for(起始条件;循环条件;条件处理){
        循环体代码
    }

for 里面是可以添加其他语句的

for (var i = 1; i <= 100; i++) {
 if (i == 1) {
    console.log('这个人今年1岁了， 它出生了');
 } else if (i == 100) {
    console.log('这个人今年100岁了，它死了');
  } else {
       console.log('这个人今年' + i + '岁了');
  }
}

while循环

while(循环条件){
        循环体代码
    }

执行思路：

1.先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
2.执行循环体代码
3.循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

注意：

使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

三元表达式

三元表达式也能做一些简单的条件选择。有三元运算符组成的式子称为三元表达式

python中的语法结构:

值1 if 条件 else 值2

//条件成立执行值1，条件不成立执行值2

JS中的语法结构:

条件?值1:值2

//条件成立执行值1，条件不成立执行值2

函数

python中函数的定义

def 函数名(形参):
        '''函数注释'''
        函数体代码
        return 返回值

JS中函数的定义

function 函数名(形参){
    // 函数注释
    函数体代码
    return 返回值
}

案例

// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
(function(a, b){
  return a + b;
})(1, 2);

补充：

ES6中允许使用“箭头”（=>）定义函数。

var f = v => v;
// 等同于
var f = function(v){
  return v;
}

如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：

var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

函数中的arguments参数

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);　console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}

add(1,2)

输出：

3
2
1

注意：

函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

1.JS中函数的形参与实参个数可以不对应，传少了就是undefined，传多了不用

2.函数体代码中有一个关键字arguments用来接收所有的实参

3.函数的返回值如果有多个需要自己处理成一个整体

函数的全局变量和局部变量

局部变量：

在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();   //输出结果是ShenZhen

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是BeiJing

3.闭包

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();    //打印结果为ShangHai

内置对象

JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。

我们在学习基本数据类型的时候已经带大家了解了，JavaScript中的Number对象、String对象、Array对象等。

注意var s1 = "abc"和var s2 = new String("abc")的区别：typeof s1 --> string而 typeof s2 --> Object

内置对象之日期对象

创建Date对象

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

Date对象的方法：

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年（从1900年至今）
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

JSON对象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

RegExp对象

// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')

/*第一个注意事项，正则表达式中不能有空格*/ 

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/

// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();

RegExp

参考博客：

https://www.cnblogs.com/Dominic-Ji/p/9111021.html

https://blog.csdn.net/qq_44243059/article/details/113954486?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-113954486-blog-127103330.pc_relevant_multi_platform_whitelistv4&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-113954486-blog-127103330.pc_relevant_multi_platform_whitelistv4&utm_relevant_index=3

标签：function,console,函数,简介,JavaScript,var,log
From： https://www.cnblogs.com/chen-ao666/p/16952633.html

JavaScript概述

JavaScript发展史

ECMAScript和JavaScript的关系

ECMAScript的历史

JS基础

1.注释语法

2.引入js的多种方式

3.结束符号

变量与常量

在js中声明变量的关键字

在js中声明常量的关键字——const

基本数据类型

1. 数值(Number)

2. 字符串(String)

3.布尔类型(Boolean)

4. null和undefined

5. 对象(Object)

5.1 对象之数组（类似于Python中的列表）

forEach()

splice()

map()

5.2 对象之自定义对象（类似于python的字典）

运算符

算数运算符

比较运算符

逻辑运算符

流程控制

1.单if分支

2.if...else分支

3.if...else if...else分支

4.如果分支结构中else if很多还可以考虑使用switch语法

循环

for循环

while循环

三元表达式

python中的语法结构:

JS中的语法结构:

函数

python中函数的定义

JS中函数的定义

案例

补充：

函数中的arguments参数

函数的全局变量和局部变量

作用域

内置对象

内置对象之日期对象

JSON对象

RegExp对象

相关文章

赞助商

阅读排行