码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript概述

时间:2020-04-10 22:35:19      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:blank   cond   c99   校验   bst   保留   back   查找   dom   

引用1

引用2

一、JS(JavaScript)

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

    核心(ECMAScript) 
    文档对象模型(DOM) Document object model (整合js,css,html)
    浏览器对象模型(BOM) Broswer object model(整合js和浏览器)
            简单地说,ECMAScript 描述了JavaScript语言本身的相关内容。

JavaScript 是脚本语言,是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
①注释:
    // 这是单行注释

    /*
    这是多行注释
    */

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

③变量声明
    JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。
    声明变量使用 var 变量名; 的格式来进行声明
    var name = "Alex";
    var age = 18;
④注意:
    变量名是区分大小写的。
    推荐使用驼峰式命名规则。
    保留字不能用做变量名。

补充:

ES6新增了let命令,用于声明变量。其用法类似于var,但是所声明的变量只在let命令所在的代码块内有效。例如:for循环的计数器就很适合使用let命令。

for (let i=0;i<arr.length;i++){...}

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

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-onl

二、引入JS的两种方式

1、Script标签内写代码

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

2、引入额外的JS文件

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

三、数据类型

JavaScript拥有动态类型

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

1、数值

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

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

还有一种NaN,表示不是一个数字(Not a Number)。

常用方法:

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

拼接字符串一般使用“+”

技术图片 

技术图片 

技术图片
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)个字符结束(不包含该位置字符)

slice和substring的区别
slice和substring的区别 

技术图片

   技术图片 

 3、布尔值

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

var a = true;
var b = false;

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

4、null和undefined

  • null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
  • undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。

  null表示变量的值是空,undefined则表示只声明了变量,但还没有赋值

5、数组

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

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

技术图片 

技术图片 

关于sort()需要注意:

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。

示例:

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

关于遍历数组中的元素,可以使用下面的方式:

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

6、foreach

 技术图片

7、splice

技术图片 

 技术图片

8、typeof类型查询

 技术图片

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

四、运算符

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

 技术图片

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

  技术图片

 3、逻辑运算符:&& || !

 技术图片

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

 五、流程控制

 if-else

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

 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");
}

 switch

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

 switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。 

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

 技术图片python中的三元运算

六、函数

 1、函数的定义

 ①带参函数

 技术图片

 ②带返回值的函数 

技术图片

 ③匿名函数

 技术图片

 ④立即执行函数

 技术图片

 ⑤箭头函数

  技术图片

 2、函数中的arguments参数

  技术图片

3、函数的全局变量和局部变量

局部变量

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

全局变量:

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

作用域:

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

 几个例子: 

1.

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

f();  //输出结果是?----------ShenZhen

2.

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是?--------------BeiJing

3.闭包

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

七、内置对象和方法

1、自定义对象

技术图片

2、date对象

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

技术图片

作业:编写代码,将当前日期按‘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 month = d1.getMonth() + 1;  //注意月份是从0~11
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元运算

    var week = WEEKMAP[d1.getDay()];  //星期是从0~6

    var strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week}
    `;
    console.log(strTime)
};

showTime();

结果为: 2019-5-31 22:17 星期五
程序代码 

3、JSON对象

技术图片

4、RegExp对象

技术图片
//RegExp对象

//创建正则对象方式1
// 参数1 正则表达式(不能有空格)
// 参数2 匹配模式:常用g(全局匹配;找到所有匹配,而不是在第一个匹配后停止)和i(忽略大小写)

// 用户名只能是英文字母、数字和_,并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。

// 创建RegExp对象方式(逗号后面不要加空格)
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");

// 匹配响应的字符串
var s1 = "bc123";

//RegExp对象的test方法,测试一个字符串是否符合对应的正则规则,返回值是true或false。
reg1.test(s1);  // true

// 创建方式2
// /填写正则表达式/匹配模式(逗号后面不要加空格)
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

reg2.test(s1);  // true


// String对象与正则结合的4个方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容
s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换

// 关于匹配模式:g和i的简单示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写


// 注意事项1:
// 如果regExpObject带有全局标志g,test()函数不是从字符串的开头开始查找,而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 该属性值默认为0,所以第一次仍然是从字符串的开头查找。
// 当找到一个匹配时,test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 当再次执行test()函数时,将会从该索引位置处开始查找,从而找到下一个匹配。
// 因此,当我们使用test()函数执行了一次匹配之后,如果想要重新使用test()函数从头开始查找,则需要手动将regExpObject.lastIndex的值重置为 0。
// 如果test()函数再也找不到可以匹配的文本时,该函数会自动把regExpObject.lastIndex属性重置为 0。

var reg3 = /foo/g;
// 此时 regex.lastIndex=0
reg3.test(‘foo‘); // 返回true
// 此时 regex.lastIndex=3
reg3.test(‘xxxfoo‘); // 还是返回true
// 所以我们在使用test()方法校验一个字符串是否完全匹配时,一定要加上^和$符号。

// 注意事项2(说出来你可能不信系列):
// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

RegExp相关
RegExp相关

 

JavaScript概述

标签:blank   cond   c99   校验   bst   保留   back   查找   dom   

原文地址:https://www.cnblogs.com/zh-xiaoyuan/p/12672995.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!