第三章、前端之JavaScript

有些话、适合烂在心里 提交于 2019-12-01 08:52:46

第三章、前端之JavaScript

一、javaScript的引入方式

##Script标签内写代码
<script> // 在这里写你的JS代码 </script>
 
##引入额外的JS文件
<script src="myscript.js"></script>

二、JavaScript语言的规范

注释(注释是代码之母)
// 这是单行注释 /* 这是
多行注释 */
 
结束符
JavaScript中的语句要以分号(;)为结束符。

三、语言基础

变量声明

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

  2. 声明变量使用 var 变量名; 的格式来进行声明

    var name = "Alex";
    var age = 18;

    注意:

    变量名是区分大小写的。

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

    保留字不能用做变量名。

四、数据类型

##JavaScript拥有动态类型
var x; // 此时x是undefined 
var x = 1; // 此时x是数字 
var x = "Alex" // 此时x是字符串
数值(Number)
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
字符串(String)
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) 分割
补充:
// 字符串中嵌入变量
var name = "cxw",time = "today";
`Hello ${name}, how are you ${time}?`
----------------------------------------
"Hello cxw, how are you today?"//模板字符串

//如果模板字符串中需要使用反引号,则在其前面要用反斜杠转义。
-------------------------------------------------------
`Hello ${name}, \`how are you ${time}?`
"Hello cxw, `how are you today?"
布尔值(Boolean)
区别于Python,true和false都是小写。

var a = true;
var b = false;
//区别:null和undefined
null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
null表示变量的值是空(null可以手动清空一个变量的值,使得该变量变为object类型,值为null),undefined则表示只声明了变量,但还没有赋值。

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

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。

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

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

常用方法:

方法 说明
.length 数组的大小
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素
.slice(start, end) 切片
.reverse() 反转
.join(seq) 将数组元素连接成字符串;.join()每个元素逗号隔开 ;.join(""):每个元素无缝连接
.concat(val, ...) 连接数组
.sort() 排序
.forEach() 将数组的每个元素传递给回调函数
.splice(a,b,c) 删除元素,并向数组添加新元素。a参数:从第几个开始,b:要删几个元素,c:后面新增什么元素
.map() 返回一个数组元素调用函数处理后的值的新数组
  • .forEach()

    var arr=[11,22,33]
    arr.forEach(function(value,index,arr){
        console.log(value,index)
    })
    ---------------------
    11 0
    22 1
    33 2
    for循环和foreach方法也能一样的效果
    var a = [11,22,33];
    for (var i=0;i<a.length;i++)
    {
       console.log(a[i],i);
    }
  • .splice 语法:

    splice(index,howmany,item1,.....,itemX)

    参数 描述
    index 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
    howmany 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。 如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
    item1, ..., itemX 可选。要添加到数组的新元素
  • .map()

    语法:

    map(function(currentValue,index,arr), thisValue)

    参数:

    参数 描述
    function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数 函数参数: 参数描述currentValue必须。当前元素的值index可选。当期元素的索引值arr可选。当期元素属于的数组对象
    thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 如果省略了 thisValue ,"this" 的值为 "undefined"
typeof 是一种一元运算符
对变量或值调用 typeof 运算符将返回下列值之一:

undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
算数运算符
+ - * / % ++ --

自增
var x=10;
var res1=x++;
var res2=++x;

res1;
10
res2;
12

这里由于的x++和++x在出现赋值运算式,x++会先赋值再进行自增1运算,而++x会先进行自增运算再赋值!

注意:

1 == “1” // true 弱等于 1 === "1" // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型),所以当你用两个等号进行比较时,JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较,所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误
逻辑运算符
&& || !
赋值运算符
= += -= *= /=

五、流程控制

if -else
if-else if-else 
while
switch
for
三元运算:var c = a > b ? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用;

六、函数

// 普通函数定义
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;这里的return只能返回一个值,如果想返回多个值需要自己手动给他们包一个数组或对象中
}
sum(1, 2);
 
// 立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱
(function(a, b){
   return a + b;
})(1, 2);

补充:

var f = v => v; // 等同于
var f = function(v){
   return v;
}

函数的argument

function add(a,b){
   console.log(a+b);
   console.log(arguments.length);//由调用函数传入的实参的个数决定
   console.log(arguments[0]);//arguments相当于将出传入的参数全部包含,这里取得就是第一个元素1
}
add(1,2)
---------------
3
2
1
//函数只能返回一个值,如果要返回多个值比如return a,b,c,只能将其放在数组或对象中返回。

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

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

全局变量:

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

变量生存周期:

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

作用域
首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。与python作用域关系查找一模一样!
var city = "BeiJing";
function f() {
   var city = "ShangHai";
   function inner(){
     var city = "ShenZhen";
     console.log(city);
   }
   inner();
}
------------
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 a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);
var person=new Object(); // 创建一个person对象 
person.name="Alex"; // person对象的name属性 
person.age=18; // person对象的age属性
person['name']
------------
"Alex"
####################
person['age']
--------------
18
Date对象
//方法1:不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2:参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3:参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4:参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒并不直接显示

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 星期三”格式输出。
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();
JOSN对象
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
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('jason666')
reg2.test('jason666')

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

// 全局匹配
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();
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!