javascript入门

JavaScript入门

简介

  • js是一门编程语言，它也可以写后端代码（node.js）。
  • js和java没有关系，仅仅是当时为了蹭Java的热度。
  • ECMAScript和JavaScript的关系。
1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。
而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
  • JavaScript 是脚本语言
  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
  • JavaScript 很容易学习。

js的注释

"""
// 单行注释

/*
多行注释1
多行注释2
多行注释3
*/
"""

html引入js代码的方式

  • script标签内部直接书写js代码
  • script标签src属性引入外部js代码

js的主要知识点

  • 变量
  • 数据类型
  • 流程控制
  • 函数
  • 对象
  • 内置方法/模块

变量

js中，变量的声明需要使用关键词，关键词有两个：var、let(es6推出的新语法)。

var name = 'xliu'
var new_name = 'the3times'

补充：var和let的区别

  • var在局部作用域里面定义使用(如for循环)，也会影响全局的同名变量。
  • let在局部定义则只会在局部生效，和全局的同名变量没有关系。

常量

  • js中常量通过关键词 const 定义，定义后就不能被修改。如，const pi = 3.14

变量命名规范

  • 变量名组成元素：数字、字母、下划线、$
  • 变量名推荐命名风格：驼峰体
  • 不能使用关键字作为变量名

数据类型

  • js也是一门面向对象 的编程语言 即一切皆对象!!!

  • js/python是一门拥有动态类型的编程语言（变量名可以指向任意数据类型的值，可以修改）。

数值类型：number
字符串类型：string
布尔型：bollean
空：null & undefined
对象：object
  • 查看当前数据类型的方法：typeof

数值类型

  • 特殊的 NaN数值类型，表示的意思是“不是一个数字” not a number

  • 数字类型转换方法：parseINT()、parseFloat()

  • 注意：只要首字符是数字，就可以parseINT，parseFloat只保留整数部分

字符串类型

  • 三种方式定义字符串：单引号、双引号、模版字符串

  • 模版字符串有两个功能：支持定义多行字符串；支持字符串插值。

  • 模版字符串语法：反引号+$+{}

    let info = `welcome to ${park_name}`

  • js中，字符串拼接推荐方式：var info = name + age

字符串常用方法

注意：

  • .trim()，不能加括号指定去除的内容
  • .slice(0,-1)，支持负数，但不是顾头不顾尾，只取至倒数第二个。
  • .substring(0,4)，不支持负数，推荐使用.slice()
  • .split('|', 2)，第二个参数不是限制切割字符的个数还是获取切割之后元素的个数。
  • .concat()，可以直接拼接字符串和数字，内部自动转化。

布尔值

1.在python中布尔值是首字母大写的
	True
	False
2.但是在js中布尔值是全小写的
	true
	false
# 布尔值是false的有哪些
	空字符串、0、null、undefined、NaN

null & undefined

null
	表示值为空 一般都是指定或者清空一个变量时使用
		name = 'jason'
		name = null
undefined
	表示声明了一个变量 但是没有做初始化操作(没有给值)
	函数没有指定返回值的时候 返回的也是undefined

数组Array

var nums = [1,2,3,4,5,6]  // ps:支持多种数据类型在一个数组中

nums[0]			//支持索引取值，从0开始，但不支持索引为负数

数组对象方法

  • sort()排序，默认按照字符编码表顺序排序，而不是数字的大小。
  • forEach()方法，对数组中每个元素调用传入的函数。

  • splice()方法，删除数组中指定元素并添加新元素

  • map()方法，类似forEach()方法。

运算符

算术运算符

  • ++表示自增，加号在前，先加再赋值；加号在后，先赋值再加

比较运算符

  • ==，弱等于，仅仅比较数值，不比较类型；同理有不等于 ！=
  • ===，强等于，比较数值和类型；同理有不等于 ！==

逻辑运算符

  • 与&&、或||、非!

  • 遵循短路运算

三元运算符

  • var res = 条件 ? 条件true结果 ： 条件false结果

  • 三元运算符支持嵌套

  • 三元运算符，一般用于简单的逻辑表达上，不要写的过于复杂，得不偿失。

流程控制

if判断

完整语法：js中没有缩进，采用{}的方式划分代码层级区域。

if(条件1){
    // 代码块1
}else if(条件2){
    // 代码块2
}else{
    // 代码块3
};

switch判断

  • 提前列举好可能出现的条件和解决方式
  • 从上往下匹配每个case，匹配成功开始执行case下的代码。
  • 每个case都需要配一个break，否则程序一直往下执行。

完整语法

var day = Sunday;
switch(day){
    case 'Monday':
        console.log('MoNday');
        break;
    case 'Tuesday':
        console.log('Tuesday');
        break;
    .....
    
    default:
        console.log('other');
}

for循环

完整语法，示例

for(var i=0; i<10; i++){
    consolg.log(i)
}
#简写
var i=0;
for(;;){
    if(i<10){
        i++;
        console.log(i);
    }else{
        break;
    }
}

while循环

完整语法

while(条件){
    代码快
};

函数

函数定义

function 函数名(形参1, 形参2, ...){
    函数体代码
}

函数调用：函数名加括号调用。

  • 调用时，实参个数不足或者实参个数过多，函数执行时都不会报错。只是结果不是预期的效果。
  • 函数内置参数 arguments接收传进来的参数。

  • 函数返回值使用关键词 return；注意：不支持返回多个返回值，如果返回多个则只有最后一个值被返回。
  • 返回多个数据时，使用数组等对象。

匿名函数

//定义匿名函数，并绑定给一个变量
var hello = function (){
    console.log('hello world');
}
// 调用函数
hello()

箭头函数

  • 主要用来处理简单的业务逻辑，类似于python中的匿名函数。

  • 箭头左边的是形参 右边的是返回值。

  • 多个参数时，用逗号隔开。

var func1 = v => v;

// 等价于

var func1 = function(v){
    return v
}

全局变量和局部变量、作用域的概念和python的一致。

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

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

自定义对象

自定义对象可以看成是python中的字典，但是js中的自定义对象要比python里面的字典操作起来更加的方便。

创建自定义对象的方式

  • 方式1：var d1 = {'name': 'xliu', 'age': 18};
  • 方式2：var d2 = new Object();

查

d1['name']
d1.name

增

d2['name'] = 'xliu'
d2.age = 18

改

d2.age = 17

删

delete d2.age

内置对象

Date对象

创建Date对象

//方法1：不指定参数
var d1 = new Date();

//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");

console.log(d1.toLocaleString()); // 2020/5/15 下午5:30:44

时间对象具体方法。详细Date对象方法

let d6 = new Date();
d6.getDate()  获取日
d6.getDay()		获取星期
d6.getMonth()		获取月份(0-11)
d6.getFullYear()		获取完整的年份
d6.getHours()			获取小时
d6.getMinutes()		获取分钟
d6.getSeconds()		获取秒
d6.getMilliseconds()  获取毫秒
d6.getTime()			时间戳

JSON对象

  • js的序列化：JSON.stringify()
  • js的反序列化：JSON.parse()

RegExp对象

创建正则对象

  • 方式1：let reg1 = new RegExp('^[a-z0-9A-Z][0-9]{1,10}')

  • 方式2：let reg2 = /^[a-z0-9A-Z][0-9]{1,10}/

匹配内容

  • reg1.test('the3times')

补充：字符串的match匹配

let sss = 'egondsb dsb dsb'
sss.match(/s/)  # 拿到一个就停止了
sss.match(/s/g)	# 全局匹配  g就表示全局模式

sss.match(/s/)
["s", index: 5, input: "egondsb dsb dsb", groups: undefined]
sss.match(/s/g)

全局匹配模式的吐槽点：全局模式有一个lastIndex属性。

let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg2.test('egondsb')

reg3.test('egondsb')  # 全局模式有一个lastIndex属性
true
reg3.test('egondsb')
false
reg3.test('egondsb')
true
reg3.test('egondsb')
false

reg3.lastIndex
0
reg3.test('egondsb')
true
reg3.lastIndex
7

吐槽点二 ：正则匹配test没有参数时，默认使用undefined

let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/

reg4.test()  # 什么都不传 默认传的是undefined
true
reg4.test()
true

reg4.test(undefined)
true
let reg5 = /undefined/
undefined
reg5.test('jason')
false
reg5.test()
true

Math对象

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)      返回角的正切。
posted @ 2020-05-14 15:59  the3times  阅读(171)  评论(0)    收藏  举报