JavaScript

扫码查看

1. JavaScript引入方式

Script标签内写代码

<script> 'JS代码' </script>

引入额外的JS文件

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

2. JavaScript语言规范

注释(注释是代码之母)

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

结束符

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

3. JavaScript语言基础

变量声明:

  1. JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。
  2. 声明变量使用 var 变量名; 的格式来进行声明
var name = 'aa'
var age = 18

注意:

​ 变量名是区分大小写的

​ 推荐使用驼峰式命名规则

​ 保留字不能用做变量名

补充:

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

arr = [1,2,3,4,5]
for (let i=0;i<arr.length;i++){
    console.log(arr[i])
}

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

const PI = 3.1415;
PI=3.14
/*VM2654:1 Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:1:3
(anonymous) @ VM2654:1*/

4. JavaScript数据类型

JavaScript拥有动态类型

var x;    // 此时x是undefined
var x = 1;    // 此时x是数字
var x = "Alex"    // 此时x是字符串

4.1 数值(Number)

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

var a = 12.34
var b=20
typeof(a)
// "number"
typeof(b)
// "number"
var c = 123e2
typeof(c)
// "number"
var d = 'abc'
parseInt(c)
// 12300
parseInt(d)
// NaN      // NaN,表示不是一个数字
parseFloat(c)
// 12300

4.2 字符串(String)

c+d
"12300abc"

var a = 'Hello'
var b = 'World'
var c = a+b
console.log(c);
// VM3217:1 HelloWorld

// 常用方法
// c = 'HelloWorld'

c.length   // 返回长度
// 10
var d = '  aa '
d.trim();   // 移除空白
// "aa"
d.trimLeft();   // 移除左边的空白
// "aa "
d.trimRight();   // 移除右边的空白
// "  aa"
c.charAt(3);   // 返回第n个字符
// "l"
c.concat(c)   // 拼接
// "HelloWorldHelloWorld"
c.indexOf('l');   // 子序列位置
// 2
c.indexOf('l',8);
// 8
c.indexOf('p');   // 不存在返回-1
// -1
c.substring(0,5);   // 根据索引获取子序列
// "Hello"
c.substring('o',-3);
""
c.slice(0,5);   // 切片
// "Hello"
c.slice('o',-3);
// "HelloWo"
c.toLowerCase();   // 小写
// "helloworld"
c.toUpperCase();   // 大写
// "HELLOWORLD"
d = 'a|b|C|D|e';
// "a|b|C|D|e"
d.split('|');     // 分割
// (5) ["a", "b", "C", "D", "e"]
d.split('|',3);
// (3) ["a", "b", "C"]
d.split('|',10);
// (5) ["a", "b", "C", "D", "e"]
d.split('|',-3);
// (5) ["a", "b", "C", "D", "e"]
d.split('|',0);
// []
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)是增强版的字符串,用反引号(`)标识。它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量

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

// 普通字符串
`普通字符串`
// 多行文本
`多行的文本`
// 字符串中嵌入变量
var name = "cxw",
time = "today";
`Hello ${name}, how are you ${time}?`

4.3 布尔值(Boolean)

区别于Python,true和false都是小写

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

var a = true;
var b = false;

null和undefined比较:

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

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

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

4.4 对象(Object)

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

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

4.4.1 数组

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

var a = [123,'abc'];
console.log(a[1]);
// VM4441:1 abc

常用方法

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

// .map():
a.map(function(val,i,a){
    return val+'p'
});
// (4) ["123p", "12p", "45p", "abcp"]
console.log(a);
/*VM5168:1 (4) [123, 12, 45, "abc"]0: 1231: 122: 453: "abc"length: 4__proto__: Array(0)*/

4.5 类型查询

typeof是一个一元运算符(就像++,--,!,- 等一元运算符),不是一个函数,也不是一个语句

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

  • undefined - 如果变量是 Undefined 类型的
  • boolean - 如果变量是 Boolean 类型的
  • number - 如果变量是 Number 类型的
  • string - 如果变量是 String 类型的
  • object - 如果变量是一种引用类型或 Null 类型的
typeof "abc"   // "string"
typeof null   // "object"
typeof true   // "boolean"
typeof 123   // "number"

4.6 运算符

算数运算符:+ - * / % ++ --

注:x++会先赋值再进行自增1运算,++x会先进行自增运算再赋值

比较运算符:> >= < <= != == === !==

1 == "1"   // true 弱等于
1 === "1"   // false 强等于

/*JS是一门弱类型语言(会自动转换数据类型),所以当你用两个等号进行比较时,JS内部会自动先将
数值类型的1转换成字符串类型的1再进行比较,所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误*/

逻辑运算符:&& || !

赋值运算符:= += -= *= /=

4.7 流程控制

var a=13

// if
if (a>2){
    console.log(123)
}
// VM5728:2 123

// if...else
if (a>22){
    console.log(123)
}else{
    console.log(456)
};
// VM5788:4 456

// if...else if...else
if (a>22){
    console.log(123)
}else if(a>10){
    console.log(789)
}
else{
    console.log(456)
};
// VM5849:4 789


// switch
// switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句
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++;
}

4.8 三元运算

先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b

三元运算可以嵌套使用

var a = 1;
var b = 2;
var c = a > b ? a : b
c
// 2

var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;
x
// 10

4.9 函数

4.9.1 函数定义

JavaScript中的函数和Python中的非常类似,只是定义方式有点区别

// 普通函数定义
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 =>console.log(v);
// 等同于
function f(v){
    console.log(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 fuc(){
    console.log(arguments);
    console.log(arguments[0])
}
fuc(123,123,23);
// VM6214:2 Arguments(3) [123, 123, 23, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// VM6214:3 123


// 函数只能返回一个值(返回最后一个值),如果要返回多个值,只能将其放在数组或对象中返回
function foo1(){
    return 1,3
}
var a=foo1()
a
// 3
function foo1(){
    return [1,3]
}
var a=foo1()
a
// (2) [1, 3]

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

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

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

变量生存周期:JavaScript变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除,全局变量会在页面关闭后被删除

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

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

var city = "ShangHai";
function f() {
   console.log(city);
}
function f1() {
   var city = "BeiJing";
   return f;
}
var res = f1();
res();
// ShangHai

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

4.11 Date对象

创建Date对象

var d1 = new Date()   //方法1:不指定参数
d1.toLocaleString()
// "2019/10/14 下午7:18:34"
var d1 = new Date('2012/3/20 12:12:12');   //方法2:参数为日期字符串
d1.toLocaleString()
// "2012/3/20 下午12:12:12"
var d1 = new Date(5000);     // //方法3:参数为毫秒数
d1.toLocaleString()
// "1970/1/1 上午8:00:05"

d1.toUTCString()
// "Thu, 01 Jan 1970 00:00:05 GMT"
var d1 = new Date();
undefined
d1.toUTCString()
// "Mon, 14 Oct 2019 11:21:42 GMT"

Date对象的方法

d1.getDate();   // 获取日
// 14
d1.getDay();   // 获取星期
// 1
d1.getMonth();   // 获取月(0-11)
// 9
d1.getFullYear();   // 获取完整年份
// 2019
d1.getYear();   // 获取年
// 119
d1.getHours();   // 获取小时
// 19
d1.getMinutes();   // 获取分钟
// 21
d1.getSeconds();   // 获取秒
// 42
d1.getMilliseconds();   // 获取毫秒
// 129
d1.getTime();   // 返回累计毫秒数(从1970/1/1午夜)
// 1571052102129

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

const WEEKMAP = {
    0:"星期天",
    1:"星期一",
    2:"星期二",
    3:"星期三",
    4:"星期四",
    5:"星期五",
    6:"星期六"
};
function showtime(){
    var d1 = new Date();
    var year = d1.getFullYear();
    var mothon = d1.getMonth()+1;
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();
    var week = WEEKMAP[d1.getDay()];
    var strTime = `${year}-${mothon}-${day} ${hour}:${minute} ${week}`;
    console.log(strTime)
};
showtime();
// VM8087:10 2019-10-14 19:45 星期一

4.12 JSON对象

var str1 = '{"name":"aa","age":3}';
var obj = JSON.parse(str1);
obj
// {name: "aa", age: 3}
var str = JSON.stringify(obj);
str
// "{"name":"aa","age":3}"

4.13 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('regexp234');
// true
reg2.test('regexp234');
// true
reg2.test();
// true
reg2.test(undefined);
// true
var reg3 = /undefined/;
reg3.test();
// true


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

// 全局匹配
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();
02-12 02:05
查看更多