JavaScript 快速入门

引入JavaScript

内部标签

写在标签里面

外部引入

基本语法注释：

单行注释：// 注释内容

多行注释：

JavaScript的输出

页面输出

document.write("Hello,World!");

控制台输出

console.log("输出一条日志");//最常用

console.info("输出一条信息");

console.warn("输出一条警告");

console.error("输出一条错误");

弹窗输出

alert("Hello,World!");

变量和数据类型数值型（Number）

js不区分小数和整数，都是Number

123        //整数

123.1        //浮点

1.123e3        //科学计数法

-99        //负数

NaN        //not a number

Infinity        //表示无限大

字符串型（String）

多行字符串编写

var msg =

`hello // `这个在~下

world

你好`

模板字符串

let name = "pzh"

let age = 19;

let msg = `你好呀，${name}`

方法

str.length 长度

str.toUpperCase() 大写

str.toLowerCase() 小写

str.indexOf('t') 指定字母下标

str.substring(0,3) 截取，包前不包尾

布尔型（Boolean）

Undefined null型（Null）比较运算符

= 赋值

== 等于，类型不一样，值一样也是true

=== 绝对等于，类型一样，值一样才true

所以推荐使用=== 不要用==

变量

变量类型变量名 = 变量值

var age = 18; //var无块可多次声明可在定义前调用（旧版）
let age = 18; //let有块（局部）禁止多次声明禁止在定义前调用（新版）

所以推荐使用let

常量

const PI = '3.14'； //类似于Java的final

数组

java数组必须相同类型，而js中不需要
var arr = [1,2,3,4,'hello',null,true];

new Array(1,2,3,4,'hello',null,true);
也可以通过下标来取值和赋值

如果数组下标越界了得到undefined

假如给数组arr.length赋值,数组的大小就会发生变化，变小就会丢失

常用方法

indexOf 通过元素获得下标索引字符串的"1"和数字的1是不一样的

slice() 截取返回一个新的数组

push() 加入元素到数组的尾部

pop() 弹出尾部的一个元素

unshift() 加入元素到数组头部

shift() 弹出数组头部一个元素

sort() 排序

reverse() 反转

concat() 拼接，并没有修改数组，返回一个新数组

对象

js用{....}表示一个对象，键值对描述属性xxxx：xxxx 多个属性用；隔开，最后的不用

var 对象名 = {

属性名：属性值；

属性名：属性值；

属性名：属性值

}

使用没定义的属性不会报错，会返回undefined

动增删属性

delete person.name 删除

person.age = 18 增加

判断属性是否在对象中

'age' in person

> true

判断一个属性是否是这个对象自身拥有的

hasOwnProperty() js也有继承机制

严格检查格式

前提：IDEA需要设置支持ES6语法

'use strict';

严格检查模式，预防js的随意性导致产生一些问题

必须写在js代码的第一行！

集合 Set

存储的元素是有序不重复的
创建set集合

var set = new Set([“a”,”b”,”c”]);
没有查找和修改的方法
set.add("a");
set.delete("a");
set.size
console.log(set.has({})); //has 判断有没有某个元素

Map

存储的是有序、key不能重复的键值对

var map = new Map([["name","xiaoming"],["age",18]])

map.set("set","女");
map.set("set","男"); //如果set的key值已经存在，则为修改，若不存在则是删除

map.get("name");
map.has("sex");
map.size;

map.delete("name") 删

遍历集合

for..of循环(ES6)
for..of循环修复了for..in存在的问题，他只遍历属于对象本身的属性值。
且这个对象必须是iterable可被迭代的。如Array, Map, Set

函数函数的定义

方式1

function 函数名(参数1, 参数2, ... , 参数3) {
// 需要执行的代码块
}
方式2

var fun = function(a, b) { //把匿名函数赋值给一个变量

console.log(a + b);

};

fun(12, 13);

函数的调用

js函数可以传任意多个参数，定义1个，也可以传多个不报错，要手动检测。

arguments

arguments对象以数组形式存传递进来的所有参数（本质上并不是数组很像数组）

function findMax() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (max < arguments[i]) max = arguments[i];
}
return max;
}
var max = findMax(12, 22, 9, 21, 6, 29, 2, 17);
console.log(max);

问题：arguments包含所有的参数，想用多余的参数需要附加操作。

rest

ES6引入新特性，获取除了已经定义的参数外的所有参数。

function aaa(a,b,...rest){

console.log(a);

console.log(b);

console.log(rest);

}

注意：rest参数只能写在最后面，必须用...表示

变量的作用域

js中，var定义的变量是有作用域的。在函数体中声明的变量，在函数体外不可用（局部）

内部函数可以访问外部函数的成员，反之则不信（java内部类有点像）

如果内部和外部的变量重名，会从自身函数开始往外找，先用内部的。

定义了全局变量，就会自动绑定到全局对象window

全局变量都会绑定到window下，很多的开发者都定义全局难免重名，所以为了防止重名，我们采用下面方式一种规范以后都这样用

//唯一全局变量

var pzh = {}； //定义一个对象把全局变量放对象里面引用

//定义全局变量

pzh.name = "pzh"；

pzh.add = function(a,b){ //把函数放到对象里面也叫：方法

return a+b;

}

pzh.name;

pzh.add(1,2);

方法

方法就是函数放在对象里面，对象有：属性和方法

This

this默认指向调用他的对象

直接调用函数时，里面的this指向的是全局对象（window）

apply

可以更改函数内this指向，第一个参数代表指向哪个对象，第二个表示函数传入的参数，通过数组的形式传递。

内部对象 Date

参数形式有以下５种：

new Date("month dd,yyyy hh:mm:ss");
new Date("month dd,yyyy");
new Date(yyyy,mth,dd,hh,mm,ss);
new Date(yyyy,mth,dd);
new Date(ms);

需要注意最后一种形式，参数表示的是需要创建的时间和GMT时间1970年1月1日之间相差的毫秒数。

获取当前时间 var date=new Date();
获取年date.getFullYear();
获取月date.getMonth();
获取日date.getDate();
获取星期date.getDay();
获取时date.getHours()
获取分date.Minutes();
获取秒date.getSeconds();
获取毫秒date.getMilliseconds();
获取当前时间距离1970-01-01的毫秒数date.getTime();

设置年date.setFullYear(2019);
设置月：date.setMonth(10);
设置日：date.setDate(10);
设置小时：date.setHours(08);
设置分钟:date.setMinutes(50);
设置秒钟:date.setSeconds(50);
设置秒钟:date.setSeconds(55);
设置距离1970/ 01/ 01的毫秒数:date.setTime(12145445123)

包含年月日时分秒:date.toLocalString();
包含年月日:date.toLocalDateString();
包含时分秒:date.toLocalTimeString();

JSON

JSON是一种轻量级的数据交换格式，简洁的层次结构使他成为理想的数据交换语言。

js中一切都是对象，任何js支持的类型都可用JSON来表示。

格式：

对象都用{}
数组都用[]
所有的键值对都是用key：value

JSON字符串和JS对象的转化

var user = {

name："pzh",

age:3,

sex:'男'

}

var jsonUser = JSON.stringify(user); //js对象转化为JSON字符串

var obj = JSON.parse('{"name":"pzh","age":3,"sex":"男"}; //JSON字符串转化为js对象

面向对象编程

在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。

类的声明和访问

class Person {
constructor(x, y) { //构造器
this.x = x
this.y = y
}
}

var person= new Person()

注意：

在类中声明方法的时候，方法前不加 function 关键字
方法之间不要用逗号分隔，否则会报错
类的内部所有定义的方法，都是不可枚举的（non-enumerable）
一个类中只能拥有一个 constructor 方法

静态方法

static修饰的方法，可以通过类名调用，不能通过实例对象调用，否则会报错

class Person {
static sum(a, b) {
console.log(a + b)
}
}
var p = new Person()
Person.sum(1, 2) // 3
p.sum(1,2) // TypeError p.sum is not a function

继承

class Person {
        constructor(name) {
        this.name = name
}
        // 原型方法
        // 即 Person.prototype.getName = function() { }
        // 下面可以简写为 getName() {...}
        getName = function () {
        console.log('Person:', this.name)
        }
}
class Gamer extends Person {
        constructor(name, age) {
        // 子类中存在构造函数，则需要在使用“this”之前首先调用 super()。
        super(name)
        this.age = age
        }
}
const asuna = new Gamer('Asuna', 20)
asuna.getName() // 成功访问到父类的方法

extend本质还是查对象原型 _proto_

待续更...

JavaScript 快速入门

Java相关栏目本月热门文章