Javascript 学习

JavaScript 引入方式

放在body标签下面引入,原因是,它调用的内容必须先存在,才能调用
<script>
　console.log('骑士计划！')
  alert('骑士计划！')  #这个是浏览器窗口一打开咱们这个文件，就弹出一个窗口
</script>

注释

// 这是单行注释

/*
这是
多行注释
*/

结束符

JavaScript中的语句要以分号（;）为结束符。用来声明后面的代码跟前面的代码不是一句话了,和缩进没关系了

变量声明

[^1]声明变量使用 var 关键字; 语法: var aaa;

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

变量名是区分大小写的。
推荐使用驼峰式命名规则。首字母大写
保留字不能用做变量名

　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-only

打印

console.log(“xxx”)

内置的名称

2.5保留字

我 们在命名变量名时不能与JavaScript的保留字重名。下面是一些常见关键字：

abstract arguments boolean break byte
case catch char class* const
continue debugger default delete do
double else enum* eval export*
extends* false final finally float
for function goto if implements
import* in instanceof int interface
let long native new null
package private protected public return
short static super* switch synchronized
this throw throws transient true
try typeof var void volatile
while with yield

数据类型

查询数据类型

typeof "abc" // "string"

数值(Number)

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

逻辑运算符

and (&&)
not (!)
or (||)

字符串(String)

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

　　　　　　常用方法：

方法 说明
.length #不加括号的是属性 返回长度
.trim() #得到一个新值 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.charAt(n) #n类似索引，从0开始，超过最大值返回''空字符串 返回第n个字符
.concat(value, ...) #s1='hello';s.concat('xx');得到helloxx 拼接
.indexOf(substring, start) #这个start是从索引几开始找，没有返回-1 子序列位置
.substring(from, to) #不支持负数，所以一般都不用它，了解一下就行了 根据索引获取子序列
.slice(start, end) #var s1='helloworld';s1.slice(0,-5)看结果，就用它 切片
.toLowerCase() #全部变小写 小写
.toUpperCase() #全部变大写 大写
.split(delimiter, limit)#分隔,s1.splite(' '),后面还可以加参数s1.split(' '，2),返回切割后的元素个数 分割

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

slice和substring的区别：

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

布尔值(Boolean)

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

var a = true;
var b = false;

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

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

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

对象(Object)

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

　　　　JavaScript 提供多个内建对象，比如 Number、String、Date、Array 等等，通过new实例化的对象都是object类型(var s = new String('hello')，var n = new Number(12)等)，数组不需要new生命，类型就是object类型。

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

　　　　数组

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

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

　　　　 　　常用方法：

方法 说明
.length 数组的大小
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素
.slice(start, end) 切片
.reverse() #在原数组上改的 反转
.join(seq)#a1.join('+')，seq是连接符 将数组元素连接成字符串
.concat(val, ...) #连个数组合并,得到一个新数组，原数组不变 合并数组
.sort() 排序(有坑,需要自己写个排序函数)
.forEach() #讲了函数再说 将数组的每个元素传递给回调函数
.splice() #参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素) 删除元素，并向数组添加新元素。
.map() #讲了函数再说 返回一个数组元素调用函数处理后的值的新数组

关于sort()需要注意：

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

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

运算符

算数运算符
+ - * / % ++ --
解释:
i++,是i自加1; i--是i自减1; 
i++的这个加1操作优先级低，先执行逻辑，然后再自加1，
而++i，这个加1操作优先级高，先自加1，然后再执行代码后面的逻辑
比较运算符
> >= > >= != !== == ===

== 弱等于,不计较数据类型
=== 强等于,比较数值类型以及值
!= 弱不等于,不计较数据类型
!== 强不等于,比较数值类型以及值
逻辑运算符
&& || !  注释: and，or，非（取反）!null返回true
赋值运算符
= += -= *= /=  注释:n += 1其实就是n = n + 1,其他同理
流程控制
if ... else if... else... #多条件
if (a>1){
    console.log('a大于1');
}
else if (a<1){
    console.log('a小于1');
}
else{
    console.log('a=1');
};
switch
var day = new Date().getDay(); //示例化一个今天的日期对象，getDay()是获取天数的编号，0表示星期日
switch (day) { //这里day这个参数必须是一个值或者是一个能够得到一个值的算式才行，这个值和后面写的case后面的值逐个比较，满足其中一个就执行case对应的下面的语句，然后break.
  case 0: //如果day是0
  console.log("Sunday"); //执行它
  break; //然后break跳出
  case 1:
  console.log("Monday");
  break;
default:  //如果没有任何满足条件的，就执行它
  console.log("...")

for 循环

for (var i=0;i<10;i++){console.log(i)};
//声明一个变量，变量小于10，变量每次循环自增1;

循环数组：
var l2 = ['aa','bb','dd','cc']
-------------------------------------------------------
方式1
for (var i in l2){
   console.log(i,l2[i]);
}
-------------------------------------------------------
方式2
for (var i=0;i<l2.length;i++){
　　console.log(i,l2[i])
}

循环自定义对象：
var d = {aa:'xxx',bb:'ss',name:'小明'};
for (var i in d){
    console.log(i,d[i],d.i)
}
#注意循环自定义对象的时候，打印键对应的值，只能是对象[键]来取值，不能使用对象.键来取值。
while
var i=0;
while (i<10){
    console.log(i);
    i++;
}
注意后面的分号
三元运算
var a = 1;
var b = 2;
var c = a>b ? a:b;  //如果满足a>b这个条件,返回:号前面的值,否则返回后面的
console.log(c)

函数

[^1]函数只能有一个返回值,如果要返回多个值,只能将其放在数组或者对象中返回

自执行函数(页面加载到这里，这个函数就直接执行了，不需要被调用执行)
(function(a,b){return a+b;})(1,2);  
//python中写可以这么写：ret=(lambda x,y:x+y)(10,20) 然后print(ret)
匿名函数(多和其他函数配合使用)
var sum = function(a, b){return a + b;}  //在es6中，使用var，可能会飘黄，是因为在es6中，建议你使用let来定义变量，不过不影响你使用
使用匿名函数:sum(1, 2);
普通、返回值、箭头函数
普通函数定义
function f2(a.b){
    console.log(arguments); //内置的arguments对象,传入的参数都存放在该数组里
	console.log(arguments.length); //统计这个数组里面的元素个数
	console.log(a,b);
}

带返回值的函数
function sum(a, b){
  return a + b;  //在js中，如果你想返回多个值是不行的，比如return a ，b；只能给你返回最后一个值，如果就想返回多个值，你可以用数组包裹起来 return [a,b]；
}

箭头函数(了解即可)
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;
}
全局和局部变量

局部变量：

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

全局变量：

　　　在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。

作用域

　　首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。

var city = "BeiJing";
function f(){
    var city = "shanghai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret=f();
ret();
结果:shanghai
词法分析
函数调用加载前的瞬间,会先形成一个激活对象：Avtive Object（AU）,看函数内有木有变量的声明,当扫描到一个变量声明时,则会在AU空间生成该对象且值为undefined,发现第二次再次声明该对象时,会把值改为它声明的内容,例如:在函数内部var a=1,后面又用a声明了一个内层函数,那么此时的AU空间里a对应值就经历了2次赋值,第一次等于undefined,第二次被赋值为function,它不会执行function里面的内容;

function fo(a,b){
console.log(a,b);
var a =1;
var b=2;
console.log(a,b);
function a(){
console.log("呵呵");}
console.log(a);} 
结果：
　　ƒ a(){
console.log("呵呵");}, 22
	1, 2
	1,
创建对象
var person=new Object();  // 创建一个person对象
person.name="Mrli";  // person对象的name属性
person.age=18;  // person对象的age属性

在es5中没有类概念,只有构造函数,命名的首字母要大写,实例化的时候使用new关键字进行实例化(了解即可)

function Person(name){
    this.name=name
}
console.log(Person.name)  
Person.prototype.func1 = function(){  //添加一些方法，使用prototype，叫做原型链 方法
    console.log(this.name,'爱编程！')
}
var p1 = new Person('chao');
p1.func1() //方法和属性只能通过对象来调用，不能使用类名来调用

map(了解即可)

map类似于对象,也是键值对的集合,但是"键"的范围不限于字符串,各种类型的值(包括对象都可以当做键。

var m = new Map();
var o = {p: "Hello World"};

m.set(o, "content");
m.get(o)  // "content"

关于继承(了解即可)

// 父类构造函数
var Car = function (loc) {
  this.loc = loc;
};

// 父类方法
Car.prototype.move = function () {
  this.loc ++;
};

// 子类构造函数
var Van = function (loc) {
  Car.call(this, loc);
};

// 继承父类的方法
Van.prototype = Object.create(Car.prototype);
// 修复 constructor
Van.prototype.constructor = Van;
// 扩展方法
Van.prototype.grab = function () {
  /* ... */
};

Date对象(时间对象)

Date不指定参数是,返回的值是24小时记时格式,👇
new Date(); //2019 17:46:17 GMT+0800 (中国标准时间)

方法2：参数为日期字符串,将24小时转换成12小时
var d2 = new Date();
console.log(d2.toLocaleString());  //2004/3/20 下午1:12:00

var d3 = new Date("04/03/2020 11:12");  //月/日/年
console.log(d3.toLocaleString());

Date对象的方法

var d = new Date(); 
//toLocaleString()			将24小时转换成12小时
//getDate()                 获取日
//getDay ()                 获取星期 ，数字表示（0-6），周日数字是0
//getMonth ()               获取月（0-11,0表示1月,依次类推）
//getFullYear ()            获取完整年份
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()  				返回累计毫秒数(从1970/1/1午夜),时间戳

RegExp对象

有2种方法--详见下面实示例

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

匹配用户名是只能字母开头后面是字母加数字加下划线的5到11位的(注意:逗号后面不要加空格)
方法一:
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
var s1 = "bc123";  // 匹配响应的字符串  {5,11}意思时给内容设置长度(最低5,最多10的长度)
reg1.test(s1);  // true(测试一个字符串是否符合对应的正则规则)

方法二:(简写的方式)
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; 
reg2.test(s1);  // true

注意，此处有坑：如果你直接写一个reg2.test()，test里面啥也不传并执行，会返回一个true;是因为，test里面什么也不传，默认传的是一个undefined，并且给你变成字符串undefined，所以能够匹配undefined的规则，就能返回true，不然返回false

String对象与正则结合的4个方法

  1. obj.match(/o/g) #obj是查找的对象,查找字符串中符合正则的内容 ;g的意思是匹配所有的o,

  2. obj.search(/h/g); # 返回符合正则表达式的字符串元素位置(找到一个就停止寻找)

  3. obj.split(/o/g); #对字符串进行切割，得到一个新值，原数据不变

  4. obj.replace(/o/gi, "s"); #将字符串中的o(不区分大小写)替换成s

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()方法校验一个字符串是否完全匹配时，一定要加上^和$符号，把匹配规则写的确定一些，尽量不用上面这种的写法/xxx/。

// 注意事项2(说出来你可能不信系列)：
// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test(undefined)，然后将这个undefined又转为字符串"undefined",去进行匹配了, 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

1552902573926

Math对象（类似于python的内置函数）

Math：不需要new来创建对象，直接使用Math.下面的方法

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)      返回角的正切。
posted @ 2019-03-21 20:50  Tank-Li  阅读(193)  评论(0)  编辑  收藏  举报