JavaScript是一门世界上最流行的脚本语言
一个合格的后端人员,必须要精通JavaScript
内部标签
<script>
alert("Hello World!");
</script>
外部引入
<script src="js/keleJs.js"></script>
定义:
var score= 1;
条件控制:
if(){
}else{
}
数值,文本,图形,音频,视频
变量
var来定义js的变量
number
js不区分小数和整数
123//整数123
123.1//浮点数123.1
1.2332e4//科学计数法
-99//负数
NaN// not a number
Infinity//表示无限大
字符串
'abc' "abc"
比较运算符!!!
= 赋值
== 等于(类型不一样,值一样,也会判断为true)
=== 绝对等于(类型一样,值一样,才会判断为true)
须知
浮点数问题
console.log(1/3) === (1-2/3) //false
尽量避免使用浮点数进行运算,存在精度问题
console.log(Math.abs(1/3-(1-2/3))<0.00000001) //true
null和undefined
null:空
undefined:未定义
数组
java的数组必须是相同类型的对象,js中不需要这样
var arr = [1, 2, 3, 4, 5, 'hello', null, true];
取数组下标,如果越界了,就会undefined
对象
对象是大括号{ },数组是中括号[ ]
每个对象之间使用逗号隔开,最后一个不需要添加
var Person = {
name :"kele",
age:3,
tags:['js', 'web','java']
}
取对象的值:
Person.name
kele
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript">
'use strict';
let i = 1;
//es6 let
script>
head>
<body>
body>
html>
\' 字符串
\n 换行
\t tab
\u4e2d 中
//波浪键包裹可以写多行字符串
// ``
var msg = `
hello
world
hihaoa
nihai`
let name = "kele";
let age = 18;
let m1 = `nihao a, ${name}`
console.log(str.length)
//注意这是方法,不是属性
student.toUppercase()
student.toLowercase()
student.subString(1,3)//1-2
//含头不含尾 [1,3)
Array可以包含任意数据类型
var arr = [1,2,3,4,5]//通过下标取值和赋值
arr.length
//注意:假如给arr.length赋值,数组长度就发生变化
arr.indexOf(2)
1
字符串的”1“和数字1是不同的
push();压入到尾部
pop():弹出尾部的一个元素
unshift();压入到头部
shift():弹出头部的一个元素
(3) ["b", "c", "a"]
arr.sort();
(3) ["a", "b", "c"]
(3) ["a", "b", "c"]
arr.reverse()
(3) ["c", "b", "a"]
arr
(3) ["c", "b", "a"]
arr.concat('1', '2','3')
(6) ["c", "b", "a", "1", "2", "3"]
arr
(3) ["c", "b", "a"]
//注意:concat()并没有修改数组,只是会返回一个新的数组
(3) ["c", "b", "a"]
arr.join('-')
"c-b-a"
//打印拼接数组,使用特定的字符串连接
arr = [[1,2], [3,4], ["kele", "20"]]
arr[2][1]
"20"
数组:存储数据(知道如何存,如何取,剩下的方法都可以自己实现)
若干个键值对
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//定义一个person对象,有三个属性
var Person = {
name :"kele",
age : 3,
score : "good"
}
//js中的对象,{...}表示一个对象,键值对描述属性xxxx:xxxx,
//多个属性之间用逗号隔开,最后一个不加逗号
JS中所有的键都是字符串,值是任意对象
Person.name
"kele"
Person.name = "kele2"
"kele2"
Person.haha
undefined
delete Person.name
true
Person
{
age: 3, score: "good"}
Person.haha = "haha"
"haha"
Person
{
age: 3, score: "good", haha: "haha"}
Person
{
age: 3, score: "good", haha: "haha"}
'age' in Person
true
'toString' in Person
true
Person.hasOwnProperty('age')
true
Person.hasOwnProperty('toString')
false
if()else
while()
for()
forEach()循环
var arr = [1,232,14,43,34,34,314,];
arr.forEach(function (value){
console.log(value)
})
for…in
for(var index in object)
for (var number in arr) {
if (arr.hasOwnProperty(number)){
console.log("存在");
console.log(arr[number])
}
}
ES6的新特性
var map = new Map([['tom', 100], ['jerry', 90], ['haha', 80]]);
var name = map.get(`tom`)//通过Key获得value
map.set('admin', 12356)//新增,修改
map.delete('tom');//删除
console.log(name);
map
Map(4) {
"tom" => 100, "jerry" => 90, "haha" => 80, "admin" => 12356}
无序不重复的集合
var set = new Set([3,1,1,1,1,1]);
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含有些元素
ES6新特性
//通过for of 实现输出数组内的值 for in实现输出数组下标
var arr = [1,2,3,4,5,66,4223];
for (var x of arr) {
console.log(x)
}
遍历map
var map = new Map([['tom', 100], ['jerry', 90], ['kele', 80]])
for (let x of map) {
console.log(x)
}
遍历set
var set = new Set([5,6,7])
for (let x of set) {
console.log(x)
}
定义方式一
绝对值函数
function abs(x){
if(x>=0){
retun x;
}else{
return -x;
}
}
一旦执行到return,代表函数结束,返回结果!
如果没有执行return,函数执行完也会返回结果,结果就是undefined
定义方式二
var abs = function(x){
if(x>=0){
retun x;
}else{
return -x;
}
}
//这是一个匿名函数,但是可以把结果赋值给abs
//通过abs就可以调用函数!
方式一和方式二等价
调用函数
abs(10) // 10
abs(-10) // -10
参数问题:JS可以传任意个参数,也可以不传参数。
假设不存在参数,如何规避
function abs(x){
if (typeof x != 'number'){
throw 'Not a Number'
}
if(x>=0){
return x;
}else{
return -x;
}
}
参数存在多个问题
arguments
arguments是JS免费赠送的一个关键字
代表传递进来的所有的参数是一个数组
function abs(x){
console.log("x>= " + x);
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
问题:arguments包含所有的参数,我们有时候想使用多余的参数来进行附加操作,需要排除已有的参数
rest
以前:
if(if (arguments.length>2){
for (let i = 2; i < arguments.length; i++) {
......
}
})
ES6引入的新特性,获取除了已定参数外的其他参数
现在:
function aaa(a,b,...rest) {
console.log("a>=" +a);
console.log("b>=" +b);
console.log(rest);
}
在JS中,var定义的变量实际是有作用域的
假设在函数体内声明,则在函数体外不可调用
function kele() {
var x = 1;
x = x + 1;
}
x = x + 2;//x is not defined
如果两个函数使用了相同的变量名,只要在函数内,就不冲突
function kele() {
var x = 1;
x = x + 1;
}
function kele2() {
var x = 1;
x = x + 1;
}
内部函数可以调用外部函数的成员,反之则不行
function kele() {
var x = 1;
function kele2() {
var y = x + 1;
}
var z = y + 1;// z is not defined
}
假设,内部函数变量和外部函数变量重名!
function kele() {
var x = 1;
function kele2() {
var x = 'A';
console.log('inner' + x);
}
console.log('outer' + x);
kele2()
}
kele();
假设在JavaScript中,函数查找变量从自身函数开始,由内向外查找,假设外部存在同名的函数变量,则内部函数会屏蔽外部函数的变量。
提升函数的作用域
function kele() {
var x = 'x' + y;
console.log(x);
var y = 'y';
}
kele();
//xundefined
说明JS执行引擎,自动提升了y的声明,但是不会提升y的赋值。
function kele() {
var y;
var x = 'x' + y;
console.log(x);
y = 'y';
}
这个是在JS建立之初就存在的特性。养成规范:所有的变量定义都放在头部,不要乱放,便于代码维护。
全局函数
var x = 1;
function kele() {
console.log(x);
}
kele();
console.log(x);
//1
//1
全局对象***window***
var x = 'xxx';
alert(x);
alert(window.x)//默认所有的全局变量都会自动绑定在window下
alert()函数本身也是一个***window***的变量
规范
由于我们所有的全局变量都会绑定到我们的window上,如果不同的JS文件,使用了相同的变量,就会发生冲突—>如何减少冲突
//唯一全局变量
var KeleApp = {
};
//定义全局变量
KeleApp.name = 'kele';
KeleApp.add = function (a,b) {
return a + b;
}
把自己的代码全部放在自己定义的唯一空间名字中,降低全局命名冲突的问题
JQuery
局部作用域 let
function aaa() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//101 i 出了这个作用域还可以使用
}
aaa();
ES6 let关键字解决局部作用域冲突问题
function aaa() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//Uncaught ReferenceError: i is not defined
}
aaa();
建议都是用let去定义局部作用域的变量
常量 const
在ES6之前,定义常量:只要是用全部大写字母命名的都是常量,建议不要修改
var PI = '3.14';
console.log(PI);//3.14
PI = '213';
console.log(PI);//213
在ES6引入了常量关键字 const
const PI = '3.14';//只读变量
console.log(PI);
PI = '213';
console.log(PI);
//Uncaught TypeError: Assignment to constant variable.
定义方法
方法就是把函数放在对象里面,对象只有两个东西:属性,方法
var kele = {
name : 'kele',
birth: 2019,
age : function () {
//今年-出生的年份
var now= new Date().getFullYear();
return now - this.birth;
}
}
//属性 kele.name;
//方法 kele.age();
function getAge() {
var now= new Date().getFullYear();
return now - this.birth;
}
var kele = {
name : 'kele',
birth: 2019,
age : getAge
}
this是无法指向的,默认指向调用他的那个对象
apply
在JS中可以控制this的指向
function getAge() {
var now= new Date().getFullYear();
return now - this.birth;
}
var kele = {
name : 'kele',
birth: 2019,
age : getAge
};
getAge.apply(kele,[]);//this指向了kele对象,参数为空
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof NaN
"number"
typeof true
"boolean"
typeof []
"object"
typeof {
}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
var now = new Date();//Tue Nov 10 2020 17:49:16 GMT+0800 (中国标准时间)
now.getFullYear()//年份
now.getMonth()//月份0-11
now.getDate()//日期
now.getDay()//星期几
now.getHours()//时
now.getMinutes()//分
now.getSeconds()//秒
now.getTime()//时间戳 1970年1月1号0:00到现在的毫秒数
console.log(new Date(1605002232224));//时间戳转时间
转换
now = new Date(1605002232224)
Tue Nov 10 2020 17:57:12 GMT+0800 (中国标准时间)
now.toLocaleString//注意:这是一个方法,不是属性
ƒ toLocaleString() {
[native code] }
now.toLocaleString()
"2020/11/10 下午5:57:12"
now.toGMTString()
"Tue, 10 Nov 2020 09:57:12 GMT"
JSON是什么
在JS中,一切皆为对象,任何JS支持的类型都可以用JSON来表示
格式:
JSON和JS对象的转化
var user = {
name : "kele",
age : 3,
sex : "男"
}
//把对象转化为字符串 {"name":"kele","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);
//把JSON字符串转化为对象
var obj = JSON.parse(jsonUser);
JSON和JS对象的区别
var obj = {
a:"hello", b:"hellob"};
var json = '{"a": "hello", "b":"hellob"}'