JS简介

核心知识点:

第一部分:

1.ES6/7标准的意思

2.JS的两种引入方式、两种注释方式(单行注释和多行注释)、变量的命名、语言规范(以分号结尾)

3.数字类型

  a.parseInt()

  b.parseFloat()

4.字符串类型

  方法:length() trim() trimLeft() trimRight() concat() indexOf() charAt() substring() slice() split() tolowerCase() toupperCase() 

5.数组

  方法:length() concat() join() push() pop() unshift() shift() sort() reverse() slice()

6.布尔类型(true、false)

7.对象(类似python中的字典)

8.undefined和null的区别

9.typeof 类型判断

10.运算符:算术运算符、比较运算符、逻辑运算符、赋值运算符、三元运算符(表达式?值1:值2)

11.流程控制

  a.if-else 如果-否则

  b.if-else if-else 如果-或-否

  c.switch多选一

  d.for循环

  e.while循环

 第二部分:

1.函数

  a.常规函数 function 函数名(参数1,参数2...) {  函数体 }

  b.匿名函数 var 函数名 = function(参数1,参数2..){函数体}

  c.自执行函数(function(参数1,参数2...){函数体}(要传入参数))

  d.闭包

2.Date对象

3.JSON序列化

  a.序列化(将对象转化为字符串)——》json.stringify(obj)

  b.发明序列化(把字符串转化为对象)——》json.parse(str)

4.正则表达式

  a.两种创建方式

    (1)var 变量名 = new RegExp(正则表达式, 模式);

    (2)var 变量名 = /正则表达式/模式;  #直接使用//包裹起来

  b.与正则结合在一起的4个方法

    (1)match():查找字符串中符合正则的内容

    (2)search():查找字符串中符合正则表达式的内容位置,只显示第一个匹配到的

    (3)split():按照正则表达式对字符串进行切割

    (4)replace():对字符串按照正则进行替换

  c.正则的三种模式:不写(匹配第一个)、g(匹配全局)、gi(不区分大小写)

5.Math对象

  a.常见方法:abs() pow() floor() round() random() min() max()

一、概论

1.JavaScript的历史

1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名ScriptEase(客户端执行的语言)。

Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator2.0产品中开发出一套livescript的脚本语言。Sun和Netscape共同完成,后改名叫Javascript。

微软随后模仿在其IE3.0的产品中搭载了一个Javascript的克隆版叫Jscript。

为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范,国际标准化组织及国际电工委员会(ISO/IEC)也采纳ECMAScript作为标准(ISO/IEC-16262)。从此Web浏览器就开始努力将ECMAScript作为JavaScript实现的基础,EcmaScript就是规范。

2.ECMAScript

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

  • 核心(ECMAScript)
  • 文档对象模型(DOM)Document object model(整合js,css,html)
  • 浏览器对象模型(BOM)Broswer object model(整合js和浏览器)
  • Javascript在开发中绝大多数情况是基于对象的,也是面向对象的

简单的说,ECMAScript描述了以下内容:

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 运算符
  • 对象(封装、继承、多态)基于对象的语言使用对象

二、JavaScript的基础知识

1.JavaScript引入方式

一般来说JavaScript有两种引入方式:

(1)Script标签内写代码

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

(2)引入额外的JS文件

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

2.JavaScript的注释方式

注释同样有两种方式,一种是单行注释,一种是多行注释。

// 这是单行注释

/*
这是
多行注释
*/

3.JavaScript的语言规范

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

4.JavaScript的变量规范

JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。

声明变量使用var 变量名;格式来进行声明。

#先声明变量然后赋值
var name; 
name = "kebi";

#直接赋值
 var name2 = "maoxian";

注意:变量名是区分大小写的,推荐使用驼峰式命名规则。

三、JavaScript数据类型

JavaScript拥有动态类型

var user;   //属于undefined,就没没有值
var name3 = "xiaoniao";  //字符串类型
var age = 18;  //数字类型

1.数字类型

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

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

常用方法:

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

2.字符串

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) 分割
search(reEXP) 返回正则表达式匹配到的第一个字符串的位置
match() 查找字符串中特定的字符
//1.length  //长度
var s = "kebi shaibi"
s.length
11

//2.trim()  //去空格
var s = "  kebi shaibi  "
s.trim()
"kebi shaibi"

//3.trimLeft()  //去左边空格
s.trimLeft()
"kebi shaibi  "

//4.trimRight()  //去右边空格
s.trimRight()
"  kebi shaibi"


//5.charAt()  //根据索引返回对应的元素
s2
"kebi shaibi"
s2.length
11
s2.charAt(0)
"k"
s2.charAt(10)
"i"

//6.concat()  //连接字符串
s2.concat("Ge")
"kebi shaibiGe"


//7.indexOf()  //返回某个元素匹配的第一个的索引位置
s2
"kebi shaibi"
s2.indexOf(" ")
4
s2.indexOf("i")
3
s2.indexOf("i",4)  //可以指定开始匹配的位置
8
s2.indexOf("bi")
2

//8.substring
s2.substring(2,4) //切片
"bi

//9.slice
s2.slice(2,4)
"bi"
s2.slice(-4,-1)
"aib
//slice和substring都可以用来切片,区别是substring不能使用负值


//10.toLowerCase()  //返回小写
s3.toLowerCase()
"kebi shuai ge ge



//11.toUpperCase() //返回小写
s3.toUpperCase()
"KEBI SHUAI GE GE"


//12.split()  //将一个字符串切割,返回列表类型
s3.split()
["kebi shuai ge ge"]
s3.split(" ",1)
["kebi"]
s3.split(" ",2)
(2) ["kebi", "shuai"]
s3.split(" ",8)
(4) ["kebi", "shuai", "ge", "ge"]
字符串常用方法举例

3.布尔类型

与python不同的是,true和false都是小写。

var a = true;
var b = false;

4.数组

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

数组常用的方法:

方法 说明
length() 数组的大小
push() 尾部追加元素
pop() 获取尾部的元素
unshift() 头部插入元素
shift() 头部移除元素
slice() 切片
reverse() 反转
join() 将数组元素连接成字符串
concat(val,...) 连接数组
sort() 排序
includes 判断数组是否包含指定的值
var a = [1,2,3,4];

//基本切片
a[0]
1
a[2]
3
var b = [12,34,"kebi"]
b[2]
"kebi"
a
(4) [1, 2, 3, 4]

//获取长度
a.length
4

//追加一个元素
a.push(666)
5
a
(5) [1, 2, 3, 4, 666]

//删除一个元素
a.pop()
666
a
(4) [1, 2, 3, 4]

//头部插入一个元素
a.unshift('one')
5
a
(5) ["one", 1, 2, 3, 4]

//从头部删除一个元素
a.shift()
"one"
a
(4) [1, 2, 3, 4]

//切片
a.slice(0,2)
(2) [1, 2]

//反转
a.reverse()
(4) [4, 3, 2, 1]

//拼接
a.join()
"4,3,2,1"
a
(4) [4, 3, 2, 1]
b

//将多个数组的元素放在一起
a.concat(b)
(7) [4, 3, 2, 1, 12, 34, "kebi"]
a
(4) [4, 3, 2, 1]

//排序
a.sort()
(4) [1, 2, 3, 4]
数组常用方法举例

遍历数组中的元素:

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(i);
}

5.对象

类似于python中的字段数据类型

var a = {"name":"kebi","age":25}
a.name
"kebi"
a.age
25

遍历对象中的内容:

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

6.null和undefined

  • undefined表示的是当声明的变量未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
  • null表示之不存在

undefuned表示声明了变量,但是还没有赋值。null声明了变量并且变量时空值。

7.类型查询

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof是一个一元运算符,不是一个函数,也不是一个语句。

四、运算符

1.算数运算符(+ - * / ++ --)

//加法
5+3
8

//减法
5-3
2

//乘法
5*3
15

//除法
5/3
1.6666666666666667

//取余
5%3
2

这里把++ -- 单独拿出来

var i = 1
i ++  //i++先取值,后运算,此次返回值是计算之前的结果
1
i   //计算之后的结果
2  //

++i  //先计算后取值,返回的就是计算后的结果
3
i
3

i--  //先取值在计算
3
i
2
--i  //先计算再取值
1
i
1

2.比较运算符(> >= < <= != == === !==)

1 > 2
false
1 >= 2
false
1 < 2
true
1 <= 2
true
1 != 2
true
1 == 2
false
1 === 2
false
1 == "1"
true
1 === "1"
false
1 !== "1"
true

注意:=== 和==的区别在于,==是比较值是否相同,===不仅要比较值还要比较类型。

3.逻辑运算符(&& || !)

4.赋值运算符(= += -= *= /=)

五、流程控制

1.if-else

if (a > 5) {
    console.log("yes");
}else {
    console.log("no");
}
yes

2.if-else if-else

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

3.switch

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

4.for

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

5.while

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

6.三元运算

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

六.函数

1.定义

Javascript中函数的定义和shell脚本中函数的定义非常类似

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

2.函数中的变量和作用域

全局变量:定义在函数外部,并且推荐使用var进行显示声明

局部变量:定义在函数内部,并且必须使用var进行显示声明

作用域:首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。

 作用域的例子:

//第一个例子
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

//第三个例子:闭包
var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();   // 打印结果是ShangHai

注意:一般定义变量的时候尽量应该加上var,使新定义的变量不要影响全局。

七、常用模块和方法

1.date

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

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

//将当前日期输出为 “2017-12-27 11:11 星期三”格式
function getNow() {
    var d = new Date();
    var dYear = d.getFullYear();
    var dMonth = d.getMonth();
    var dDate = d.getDate();
    var dHour = d.getHours();
    var dMinute = d.getMinutes();
    var dWeek = d.getDay();
    if  (dMinute < 10){
        dMinute = "0" + dMinute;
    }
    var weekStr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    console.log(dYear + "-"+ (dMonth+1)+"-"+dDate+" "+dHour+":"+dMinute+" "+weekStr[dWeek])
}
getNow()

2.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);

 示例:

var o = {"name":"kebi","age":25};
//序列化
var s = JSON.stringify(o);   //使用stringify转化
console.log(o,typeof o);    //数组类型
console.log(s,typeof s);  //字符串类型
//反序列化
var obj = JSON.parse(s);   //转回来
console.log(obj,typeof obj)

//结果输出:
{name: "kebi", age: 25} "object"
 {"name":"kebi","age":25} string

{name: "kebi", age: 25} "object"

3.RegExp

//RegExp对象
    // 在表单验证时使用该对象验证用户填入的字符串是否符合规则.
    //创建正则对象方式1  参数1 正则表达式  参数2 验证模式  g global / i 忽略大小写. //参数2一般填写g就可以,也有“gi”.
    // 用户名 首字母必须是英文, 除了第一位其他只能是英文数字和_ . 长度最短不能少于6位 最长不能超过12位
    //----------------------------创建方式1
    /* var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g");
    //
    //验证字符串
    var str = "bc123";
    alert(reg1.test(str));// true
    
    //----------------------------创建方式2  /填写正则表达式/匹配模式;
    var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
    
    alert(reg2.test(str));// true
     */
    //-------------------------------正则对象的方法-------------------
        //test方法  ==>  测试一个字符串是否复合 正则规则. 返回值是true 和false.
    
    //-------------------------String 中与正则结合的4个方法------------------.
    // macth search split replace
    var str = "hello world";
    
    //alert(str.match(/o/g)); //查找字符串中 复合正则的 内容.
    //alert(str.search(/h/g));// 0  查找字符串中符合正则表达式的内容位置
    //alert(str.split(/o/g)); // 按照正则表达式对字符串进行切割. 返回数组;
    alert(str.replace(/o/g, "s")); // hells wsrld  对字符串按照正则进行替换.

正则示例:

例一:

var r1 = RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g");
var r2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
var s = "kebi123";
var s2 = "1234567";
console.log(r2.test(s));
console.log(r2.test(s2));

//结果:
true
false

例二:

var s = "Kebi Is Butiful";
ret3 = s.replace(/i/,"哎");   //至匹配到第一个
ret4 = s.replace(/i/g,"哎");  //匹配到所有
ret5 = s.replace(/i/gi,"哎");  //不区分大小写

console.log(ret3);
console.log(ret4);
console.log(ret5);

结果:
Keb哎 Is Butiful
Keb哎 Is But哎ful
Keb哎 哎s But哎ful

4.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)    返回角的正切。 

示例:

Math.abs(-10)
10
Math.floor(1.2)
1
Math.floor(1.9)
1
Math.max(1,5,10)
10
Math.min(1,5,10)
1
Math.pow(3,2)
9
Math.round(1.4)
1
Math.round(1.5)
2
Math.random()
0.662504191125612
原文地址:https://www.cnblogs.com/yangmingxianshen/p/8119527.html