JavaScript

一、JavaScript简介

JavaScript是前端的一门编程语言简称JS,需要说明的是JS和java没有关系,js也叫ecmascript,当前使用较多的版本是5.1版本。

特点:

  1. JS是一种轻量级的编程语言
  2. JS插入HTML后可由浏览器执行。

二、JS的语法

2.1注释

//单行注释

/*多行注释*/

2.2引入到HTML的方式

1.script标签内直接书写

<script>//这里书写代码</script>

2.通过script标签src引入外部JS文件

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

2.3JS的数据类型

2.3.1动态语言与静态语言

JS是动态类型语言,什么是动态类型、静态类型呢?

动态类型语言特点:

运行期间才做数据类型检查的语言,即动态类型语言编程时,不用给任何变量指定数据类型

该语言会在第一次赋值给变量时,在内部将数据类型记录下来,赋的值是什么数据类型,这个变量就是什么数据类型。动态类型语言有:JavaScript、Python、PHP等。

优点:方便阅读,不需要写非常多的类型相关的代码;

缺点:不方便调试,命名不规范时会造成读不懂,不利于理解等。

静态类型语言特点:

在编译期间检查变量的数据类型,也就是在定义变量时需要先声明变量是什么数据类型,静态类型的语言有:C、C++、C#、JAVA等。

优点:结构非常规范,便于调试,方便类型安全

缺点:为此需要写更多类型相关代码,较复杂。

2.3.2JS变量声明

1.JS的变量名可以使用数字、$、字母和下划线组成,不能以数字开头。

2.声明时变量使用var声明全局变量,使用let声明局部变量(let是ES6新增加的变量声明方式)。

var a = 1;
undefined
let b = 2;
undefined
a
1
b
2

2.3.3结束符

JS以分号为一句的结束符,JS中的好些地方是和c类似的。

2.3.4number(数值)

JS不区分整型和浮点型,他们的数据类型都是number。

当一个字符串中没有数字开头时用如果用parseint()取出字符串中的数据时会得到返回值NaN,NaN指not a number。

var x1 = 'abc123shfuis'
undefined
parseInt(x1);
NaN
var x2 = '123asd'
parseInt(x2);
123
var x3 = 'asd123';
parseInt(x3);
NaN

parseInt得到数据的整型,parseFloat得到数据的浮点型。

x1 = '123.123';
parseInt(x1);
123
x1 = '123.123';
parseFloat(x1);
123.123

2.3.5字符串(String)

常用的字符串类型内置方法:

方法

说明

.length

返回长度

.trim()

移除空白

.trimLeft()

移除左边的空白

.trimRight()

移除右边的空白

.charAt(n)

返回第n个字符

.concat(value, ...)

拼接

.indexOf(substring, start)

子序列位置

.substring(from, to)

根据索引获取子序列

.slice(start, end)

切片

.toLowerCase()

小写

.toUpperCase()

大写

.split(delimiter, limit)

分割

字符串的拼接:

字符串的拼接可以用字符串的内置方法concat,也可用“+”号,这里推荐使用“+”号。

var x2 = 'hello'
x3 = 'World'
x2 + x3;
"helloWorld"
x2.concat(x3)
"helloWorld"

去除前后两端的空白:

var x4 = '  millenni um   '
x4.length
16
x4.trim()
"millenni um"
x4.trim('m')
"millenni um"

可以看到,这里的trim只能清楚空白,不能清除两端的字母元素,这与Python的strip是不同的。

索引取值:

x5
"millenni um"
x5.charAt('1')
"i"
x5.indexOf('e')
4
x5.substring(2,6)
"llen"
x5.slice(2,6)
"llen"
x5.substring(0,-2)
""
x5.slice(0,-2)
"millenni "
x5.slice(2)
"llenni um"

这里对slice和substring进行了取值的对比,当取值的范围为一个正数到一个负数时substring无法取值,当slice的参数只有一个时,默认从当前数字一直取到头。

大小写:

x5.toUpperCase()
"MILLENNI UM"
x6 = x5.toUpperCase()
"MILLENNI UM"
x6.toLowerCase()
"millenni um"

这里的大小写转换和Python的upper、lower类似。

2.3.6布尔值(Boolean)

JS的布尔值和Python不同,这里的true和false都是小写,另外空字符串、0、null、undefined、NaN都是false。

null和undefined的区别

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

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

2.3.7数组

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

方法

说明

.length

数组的大小

.push(ele)

尾部追加元素

.pop()

获取尾部的元素

.unshift(ele)

头部插入元素

.shift()

头部移除元素

.slice(start, end)

切片

.reverse()

反转

.join(seq)

将数组元素连接成字符串

.concat(val, ...)

连接数组

.sort()

排序

.forEach()

将数组的每个元素传递给回调函数

.splice()

删除元素,并向数组添加新元素。

.map()

返回一个数组元素调用函数处理后的值的新数组

var a = [2,3,5,[23,54,6,'sod'],6];
undefined
a.push(666)
6
a
(6) [2, 3, 5, Array(4), 6, 666]
var a = [2,3,5,6,[23,54,6,'sod']];
undefined
a.push(12)
6
a
(6) [2, 3, 5, 6, Array(4), 12]
a.pop()
12
a.pop()
(4) [23, 54, 6, "sod"]
a.unshift(666)
5
a
(5) [666, 2, 3, 5, 6]
a.shift();
666
a
(4) [2, 3, 5, 6]
a.slice(1,4)
(3) [3, 5, 6]
a
(4) [2, 3, 5, 6]
a.reverse()
(4) [6, 5, 3, 2]
a.join('?')
"6?5?3?2"
var b = [45,67,89]
undefined
a.concat(b)
(7) [6, 5, 3, 2, 45, 67, 89]
a.sort()
(4) [2, 3, 5, 6]
a.splice(1,2,3)//第一个参数是起始位,第二个参数是删除的数的个数,第三个数是添加进去的数字
(2) [3, 5]
a
(3) [2, 3, 6]

forEach()

语法:forEach(fuction(currentValue,index,arr),thisValue)

参数:

参数

描述

currentValue

当前元素,必须有

index

当前元素的索引值,可选

arr

当前元素所属的数组,可选

thisValue

对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined",thisValue是往定义的function(是自己定义的回调函数)中传的值。

var c = [1,2,3,4,5,6];
c.forEach(function(value){console.log(value)})
VM4997:2 1
VM4997:2 2
VM4997:2 3
VM4997:2 4
VM4997:2 5
VM4997:2 6

如这里段代码的value就是thisValue值,这个值传递给我们定义的function。

map()

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

参数

描述

currentValue

当前元素,必须有

index

当前元素的索引值,可选

arr

当前元素所属的数组,可选

thisValue

对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined",thisValue是往定义的function(是自己定义的回调函数)中传的值。

2.4对象

JS中遵循一切皆对象如字符串、数值、数组、函数...,JS还允许自定义对象。

JS还有内建对象(在JS中定义好的对象,可以直接使用)如String、Date、Array等,对象只是带有属性和方法的特殊数据类型。

2.4.1Date对象

创建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午夜)

2.4.2JSON对象

var str1 = '{"gender": "female", "age": 22}';
var obj1 = {"gender": "female", "age": 22};
// JSON字符串转换成对象,相当于Python中的loads
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串,相当于Python中的dumps
var str = JSON.stringify(obj1);

2.5格式化输出

类似于Python中的格式化输出,JS中也有对应的功能,如下程序:

var name = 'xiaoyu';
age = 10
10
var res = `my name is ${name} , my age is ${age}.`
undefined
res;
"my name is xiaoyu , my age is 10."
var res = `my name is ${name} , my age is ${age1}.`
VM2935:1 Uncaught ReferenceError: age1 is not defined
    at <anonymous>:1:45
(anonymous) @   VM2935:1
如果输入的花括号内的变量不存在就会报错。

2.6两种自加的区别

var x = 1;
var res1 = x++;//先赋值再自加
var res2 = ++x;//先自加再赋值
undefined
res1
1
res2
3

2.7弱等于(==)与强等于(===)

弱等于内部自动转换成相同的数据类型进行比较,强等于则不作数据类型的转换。

var x1 = 5;
undefined
var x2 = '5';
undefined
x1 == x2;
true
x1 === x2;
false

2.8运算符

2.8.1算术运算符

+ - * / % ++ --

2.8.2比较运算符

> >= < <= != == === !==

2.8.3逻辑运算符

&& || !

2.8.4赋值运算符

= += -= *= /=

2.9流程控制

2.9.1if ... else ... ,if ... else if ... else ...

var x = 20;
if (x > 18){
    console.log('yes');
} else{
    console.log('no');
}

VM187:3 yes
undefined
var x = 20;
if (x < 18){
    console.log('no');
} else if (x < 25){
    console.log('hello');
} else{
    console.log('bye')
}
VM192:5 hello

2.9.2switch

switch是给出多个条件,满足哪个条件就执行哪条代码,但是每条语句之后必须加break,否则会将该代码下面的所有代码全都执行。

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

2.9.3while

var i = 0;
while (i < 3) {
    console.log(i);
    i ++;
}
VM576:3 0
VM576:3 1
VM576:3 2

2.9.4三元运算

js的三元运算先写判断条件,再写条件成立的返回值,条件不成立的返回值。

var a = 1;
var b = 2;
var c = a > b ? a : b;
c
2//条件成立返回a,条件不成立返回b

2.10函数的定义方式

//普通函数
function f1 () {
   console.log("Hello world!")
}
//有参函数
function f2(a,b) {
    console.log(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 = a => a;
//等同于
var f = function (a) {
    return a;
}
//箭头前面是需要传入的参数,箭头后面是返回值。

如果箭头函数不需要参数或者需要多个参数,则用括号将参数,括起来,如果没有参数则只写一个括号,若果有多个参数就用逗号将其隔开。

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

var s = (num1,num2) => num1 + num2
//等同于
var s = function (num1,num2) {
    return num1 + num2;
    /*与python不同,JS的return只能return
    一个值,如果想return多个值,需要将其
    存入一个数组中,然后将数组return出来*/
}

2.10.1函数中的arguments参数

arguments[a]表示第a个形参,arguments.lenth形参的个数。

function f3(a,b) {
    console.log(a+b);
    console.log(arguments.length);//传入参数的个数
    console.log(arguments[0]);//取出传入的第一个参数
}

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

局部变量

JS中,函数内部声明的变量是局部变量,只能在函数内部使用,函数运行结束变量也会被删除。

全局变量

在函数外面声明的变量是全局变量,全局和局部都可以使用这个变量。

变量的生命周期

  1. 局部变量会在函数运行以后被删除
  2. 全局变量会在页面关闭后被删除

作用域

先在函数内部找,如果找不到就去函数外部找,一层一层的找,这点与python的作用域很像。

var x = 1;
function f4() {
    var x = 2;
    function f5() {
        var x = 3;
        console.log(x)
    }
    f5()
}
f4();
3
var y = 1;
function f5() {
    console.log(y);
}

function f6() {
    var y = 2;
    return f5;
}

f6()();
1
var z = 1;
function f7() {
    var z = 2;
    function f8() {
        console.log(z)
    }
    return f8;
}
f7()();
2

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端之BOM和DOM

    BOM(Browser Object Model)浏览器对象模型,它使得JS能够与浏览器进行‘对话’(交互,通过JS对页面内容进行操作)。

    GH
  • vue2

    v-model="变量",变量值与表单的value相关,placeholder属性是input框的默认值,v-model可以实现数据的双向绑定,变量的值可以影响...

    GH
  • 计算机发展史与进程

    (单核情况下)多个用户使用CPU时是串行的,一个一个执行,只有一个程序执行完成才能执行下一个程序 。

    GH
  • Phantomjs+Nodejs+Mysql数据抓取(2.抓取图片)

    概要 这篇博客是在上一篇博客Phantomjs+Nodejs+Mysql数据抓取(1.抓取数据) http://blog.csdn.net/jokerko...

    九灵
  • Phantomjs+Nodejs+Mysql数据抓取(1.数据抓取)

    概要: 这篇博文主要讲一下如何使用Phantomjs进行数据抓取,这里面抓的网站是太平洋电脑网估价的内容。主要是对电脑笔记本以及他们的属性进行抓取,然后在使...

    九灵
  • JavaScript函数与对象

    函数 函数的定义 JavaScript中的函数和Python中的非常类似,只是定义方式有点区别。 // 普通函数定义 function f1() { ...

    人生不如戏
  • 不用中间变量交换两个数,各种骚操作,一次玩个够

    近来看见一些群里面多次出现讨论不用中间变量交换两个数怎么做。虽然这是很古老的问题,大家懂的也懂。但实际上,方法会有很多种,我们一起来看看

    lhyt
  • node+express使用multiparty实现文件上传

    文件上传在一个项目中是相对于比较基础的功能,今天分享一下自己是如何在nodejs中使用中间件multiparty实现文件上传的。nodejs环境的搭建就不赘述了...

    算法与编程之美
  • 我的写作工具链

    1)源文件持续修改中出现的回归编辑工作,互相引用的链接较多

    RiboseYim
  • 21道前端面试题,值得收藏~

    scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。clientWidth:对象内容的可视区的宽度,不包滚动条等边线,...

    王小婷

扫码关注云+社区

领取腾讯云代金券