前端JavaScript

目录

• JavaScript 简介
• JavaScript引入方式
• JavaScript语言规范
• JavaScript语言基础
  • 变量声明
  • js数据类型
  • 数值（number）
  • 字符串（string）
  • 布尔值（boolean）
  • null和undefined
  • 对象（object）
• js运算符
  • 算术运算符
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符
• js流程控制
  • if 判断
  • swith
  • for
  • while
  • 三元运算
• 函数
  • arguments参数
  • js中函数的全局变量和局部变量
  • js中函数作用域
• js中内置对象和方法
  • 自定义对象
  • Date对象
  • JSON对象
  • Match 对象

JavaScript 简介

js全称（javascript）中文是java脚本的意思 。它的由来（在互联网刚兴起的时候，网络速度比较慢，而体验又是放在服务器端的，所以用户体验度非常差，为了了解这一难题，网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端，因为不依赖网络，所以用户体验比较好。但是由于知名度比较差，知道的人很少，后来由于sum公司的java语言一飞冲天，爆红编程世界，为了跟风，博取知名度，网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就，就发明了jscript。但是正因为此，导致了js的标准不同，所以给个大浏览器厂家带来了很大的麻烦。为了有一个统一的标准，js被提交到一个ecma组织，也正因为此，后来的js都是采用ecma标准（ECMAScript））

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

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

其次js的作用“增强页面的趣味性，响应用户的行为”； 特点（弱解释脚本语言，可以被浏览器直接解析 不需要编译）

我们现在用的最多的js版本是ECMAScript 5.1，也有用ECMAScript 6（ES6）的

js的输出，有两种：

控制台输出（console.log()）不会堆文档造成影响

文档中输出 document.write("xxxx") 会对文档造成影响

JavaScript引入方式

• 在script标签内写代码

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

• 在标签内引入额外的 js 文件

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

JavaScript语言规范

• 注释

  // 这是单行注释
  
  /*
  这是
  多行注释
  */
  

• 结束符

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

JavaScript语言基础

变量声明

1. js中的变量名可以使用 _，数字，字母，$组成，也不能以数字开头
2. 声明变量使用 var/let 变量名; 的格式来进行声明

var name = "qinyj"
var age = 18

注意：

在js中变量名也是区分大小写的。

推荐使用驼峰体命名规范

保留字（关键字）不能用作变量名

保留字（关键字）列表：

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

在ES6中才新增了let、const 声明变量的关键字，他们之间的区别：

• let：声明局部变量。只能用在let命令所在的代码块内有效，例如for循环的计数器就适合用let命令
• var：声明全局变量。
• const：声明常量，一旦声明，其值不能改变。

js数据类型

js中有以下数据类型：

• 数值（number）
• 字符串（string）
• 布尔值（boolean）
• null和undefined
• 对象（object）

typeof 用来查看js的数据类型

数值（number）

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

var a = 1;
var b = 12.34;
console.log(a);
console.log(b);


typeof a		//"number"
typeof b		//"number"

常用方法：

parseInt、parseFloat 就类似于python中的str、float，数据类型强转。

parseInt("123")		//123
parseInt("ABC")		//NaN
parseFloat("123.22")	//123.22
parseFloat("ABC")		//NaN

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

返回NaN，就表示这个值不是数字

字符串（string）

字符串定义和python中定义一样，也是加 ""

字符串的拼接，python中推荐使用格式化，js推荐直接用 "+"

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)	分割

在js中拼接字符串我们一般使用 "+"。

substring 和 slice 的区别

两者都可以传一个参数，默认从传的参数的索引位置开始取到最后的字符串

但是如果传两个参数，第二个参数如果为负数，substring返回空，slice返回从第一个参数索引开始到最后的所有值

补充：

ES6中引入了模板字符串，用来定义多行字符串，在字符串中嵌入变量的

var name = "jack",time = "today"
test = `hello ${name}`
console.log(test)	//hello jack
注意：如果模板字符串中有需要使用反引号的，则需要在其前面用反斜杠转义。

布尔值（boolean）

js中的布尔值区别于python，true和false 都是小写。

a = true

在js中空、0、null、undefined、NaN都是false。

null和undefined

null值表示为空。可以手动清空一个变量的值

undefined表示只声明了变量，但还没有赋值。

var a = null
a		//null
var b = undefined
b		//undefined

对象（object）

js 中所有事物都是对象。对象是带有属性和方法的特殊数据类型。

数组对象：

类似于python中的列表

var a = [123,"abc"]
typeof a	//"object"
a[1]		//"abc"

a.push(666)
a			// [123, "abc", 666]
a.pop()		//删除一个元素
a			//[123, "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){console.log()}})

bb		//[1, 2, 3, 4, 5]
bb.forEach(function(bb,index,arr){console.log(bb,index,arr)})
1 0 [1, 2, 3, 4, 5]
2 1 [1, 2, 3, 4, 5]
3 2 [1, 2, 3, 4, 5]
4 3 [1, 2, 3, 4, 5]
5 4 [1, 2, 3, 4, 5]

bb，第一列是数组的每个元素
index，第二列是每个数组元素的索引
arr，第三列输出当前数组的所有值

splice()语法：

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

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

ll		//[11, 22, 33, 44, 55, 66]
ll.splice(1,2)
ll		//[11, 44, 55, 66]

map()：

js运算符

算术运算符

+ - * / % ++ --
var x=10;
var res1=x++;
var res2=++x;

res1;
10
res2;
12

这里由于的x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值！

比较运算符

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

1 == “1”  // true  弱等于
1 === "1"  // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误

逻辑运算符

&& || !

赋值运算符

= += -= *= /=

js流程控制

if 判断

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

swith

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

for

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

while

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

三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用；
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;

x
10

函数

python中定义函数关键字：def

js中定义函数关键字：function

// 普通函数定义
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;		// 第一个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)



function f(a,b) {
    if (arguments.length==2 ){
        console.log(a,b)
    }else if(arguments.length>2){
        console.log("参数传多了")
    }else {
        console.log("参数传少了")
    }
    
}

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

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

局部变量：

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

全局变量：

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

var abc = 100

function test() {
    /*var*/ abc = 10		//在函数内部使用var定义变量是局部变量，无法修改全局变量，如果要修改去掉var即可。
    console.log(abc)
}
test()
console.log(abc)

js中函数作用域

首先在函数内部查找变量，找不到去外层函数查找，逐步找到最外层。与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

js函数中的闭包，与python中一样

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

js中内置对象和方法

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

注意：

var s1 = "abc" 和 var s2 = new String("abc")的区别

typeof s1
"string"
typeof s2
"object"

自定义对象

js中的对象本质上是键值对的集合，但是只能用字符串作为key

var a = {"name": "qinyj", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍历对象中的内容：

for (var i in a){
  console.log(i, a[i]);
}

创建对象：

var person=new Object();  // 创建一个person对象
person.name="Alex";  // person对象的name属性
person.age=18;  // person对象的age属性

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());  //毫秒并不直接显示

编写代码，将当前日期按“2017-12-27 11:11 星期三”格式输出。

function showTime() {
    var d = new Date();
    var year = d.getFullYear();
    var month = d.getMonth();
    var day = d.getDate();
    var hour = d.getHours();
    var minute = d.getMinutes();
    var date = d.getDay();

    switch (date) {
        case 0:
        date = "星期日";
        break;
        case 1:
        date = "星期一";
        break;
        case 2:
        date = "星期二";
        break;

        case 3:
        date = "星期三";
        break;

        case 4:
        date = "星期四";
        break;

        case 5:
        date = "星期五";
        break;

        case 6:
        date = "星期六";
        break;
        }

    var info = `${year}-${month}-${day} ${hour}:${minute} ${date}`
    console.log(info)
}

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();

Match 对象

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。