1. 技术文章
  2. 50 前端--Javascript

50 前端--Javascript

由 拟墨画扇 提交于 2020-03-07 06:56:55

目录

Javascript

ECMAScript和JavaScript的关系

　　1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

　　该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。二是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。

　　因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

ES6就是指ECMAScript 6版本。

1. js代码引入

方式1:
    <script>
        alert('欢迎来到德玛西亚!')      # 浏览器弹框
    </script>
    
方式2:外部文件引入
    # src属性值为js文件路径
    <script src="test.js"></script>

2. 数据类型 var

JavaScript中的语句要以分号（;）为结束符。和缩进没关系。

注释：

// 单行注释
/*
    多行注释1
    多行注释2
*/

数值类型（number）

var a = 1;
var b = 1.1;
var c = 123e5;  #e5:10的5次方
var d = 123e-5;

var num = 2.379
var newNum = num.toFixed(2)     # 保留两位小数

typeod a;   # number
typeof b;   # number

字符串（string）

var a = '字符串'；
typeof a;   # string

字符串转数值类型

parseInt:
    var a = '111';
    var b = parseInt(a);
    typeof b;       //'number'
    
    
parseFloat:
    var a = '1.11';
    var b = parseFloat(a);
    
var a = 'aaa1';
var b = parseInt(a);
    b =NaN      NaN 是not a number
    typeof b;   # number类型 NaN和NaN不相等

字符串相关方法

字符串拼接 +:
    var a = "Hello"
    var b = "world"
    var c = a + b; 
    console.log(c); --- Helloworld


.length 查看字符串长度
    示例:  
        var c = 'hello';
        c.length; -- 5
.trim()  移除两端空格,得到一个新值,不会改变原来的值
    示例:
        var a = '   hello   ';
        var b = a.trim();
.trimLeft()     # 移除左边的空白
.trimRight()    # 移除右边的空白

.charAt(n)  找到索引为n的字符
var c = b.charAt(1);

.concat()  字符串拼接
    示例:
        var a = 'nihao';
        var b = 'girls';
        var c = a.concat(b);

.indexOf(元素) 查看元素的索引
    示例:
        var a = c.indexOf('a');
        var a = c.indexOf('i',3);  参数3的意思是从索引3的位置开始往后找,找到就返回对应的索引值,找不到就返回-1

.slice(n,m) 切片
    示例:
        var c = "nihaogirls";
        var a = c.slice(0,5); -- 'nihao'

.toLowerCase() #全部变小写
.toUpperCase()  #全部变大写
    示例:
        var c = "nihaogirls";
        var a = c.toUpperCase();
        
.split(分隔符,1) 字符串切割
    示例:
        var c = "nihaogirls";
        var a = c.split('g',1);  'g'是切割条件,1是切割后,返回结果的数量

布尔值（boolean）

var a = true;
var b = false;

数据类型布尔值：
    ""(空字符串)、0、null、undefined、NaN都是false。

null 和 undefined

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

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

Object类型

var b = new String('xx');
var a = 'oo'
typeof b;       # object
typeof a;       # string

数组 Array

可以放所有的数据类型。

var a = [1,2,3]
typeof a;       # object

var b = new Array([1,2,3])
typeof b;
"object"
数组常用方法
# 索引[]
var a = [1,2,3]
a[0];   // 1

# 切片slice(起始,终止)
var b = a.slice(0,2)    // [1,2]

# 长度length
a.length;       // 3

# 尾部增加push
a.push(元素);
a.push(4);      // [1,2,3,4]

# 尾部删除pop
var b = a.pop();
console.log(b);     // 4

# 首部插入unshift
a.unshift(元素)
a.unshift(0);   // [0,1,2,3]

# 首部删除shift
a.shift()   // [1,2,3]

# 反转 reverse()
a.reverse();    // [3,2,1]

# 字符串拼接 数组.join('连接符')
var a = ['a','b','c'];
var b = a.join('_');    // "a_b_c"

# 数组合并 数组1.concat(数组2)
var a = [1,2,3];
var b = ['a','b'];
var c = a.concat(b);    
    //[1, 2, 3, "a", "b"]

# 排序 sort
var b = a.sort()    // 转换成字符串，按ASCII码排序

# 真正的排序（冒泡）：
function sortNumber(a,b){
    return a-b          // a-b是升序   b-a是降序
};
var b = a.sort(sortNumber);
/*
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
*/

# 删除元素splice(开始位置，删除个数，替换值(可以多个))
var a = [1,2,3]
a.splice(1,1,4，5，6)     //a [1,4,5,6,3]

splice()

语法：

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

参数：

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

自定义对象----字典

var a ={'键1':'值1','键2':'值2'}    
// 键可以不加引号

// 取值的两种方法：
a['键'];     // 取值时要加引号
a.键;

示例：
var a = {'k1':'v1',k2:'v2'};
a["k1"]     // "v1"
a.k2        // "v2"

Symbol 类型

​ es6 新引入的一种新的原始数据类型，表示独一无二的值。

3. 类型查询 typeof

typeof 是一个一元运算符，不是一个函数、语句。

4. 运算符

算术运算符

+  -  *  /  %  ++  -- 

i++,是i自加1，i--是i自减1   
    i++的这个加1操作优先级低，先执行逻辑，然后再自加1，而++i，这个加1操作优先级高，先自加1，然后再执行代码后面的逻辑。

var a = 1;
a++ == 2;       # false 先执行判断==, 再加1
++a == 3;       # turn 先执行加1, 再判断==

比较运算符

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

==(弱等于)和===（强等于）区别：
    弱等于不区分数据类型。

var a=11;
var b='11';

a==b;           // true
a===b;          // false

逻辑运算符

&&  ||  !    // 与(and) 或(or) 非(not)

示例：
var a = 1;
var b = 0;
var c = 2;
a&&b    // 0
a&&c    // 2
a||c    // 1
a||b    // 1
!b      // true

赋值运算符

=  +=  -=  *=  /=   # n += 1其实就是n = n + 1

5. 流程控制

单条件

if (条件){
    语句1;
}
else{
    语句2;
};

多条件判断

if (条件1){
    语句1;
}
else if (条件2){
    语句2;
}
else{
    语句3;
};

示例：
var a = 5;
undefined
if (a>5){
    console.log("大于5");
}
else if (a<5){
    console.log("小于5");
}
else {
    console.log("等于5");
};
// 等于5

switch 切换 (case语句)

switch (参数){
    case 1:     // 如果=1，执行
        console.log('等于1');
        break;  //  跳出
    case 2:     // 如果=2，执行
        console.log('等于2')；
        break;
    default:        // 都不成立，执行
        console.log('都不是')
}

示例：
var a = 'good';
switch (a){
    case 'better':
        console.log('特别好');
        break;
    case 'best':
        console.log('非常好');
        break;
    case 'good':
        console.log('很好');
        break;
    default:
        console.log('很遗憾');
};

6. for循环

# 数组
var a = [11,22,33]

# 方式一：
for (var i in a){
    console.log(i,a[i]);
};

# 方式二：
for (var i=0;i<a.length;i++){
    console.log(i,a[i]);
}
# 自定义对象  不能使用 a.i 取值
var a ={"k1":'v1',k2:'v2'}

for (var i in a){
    console.log(i,a[i]);
};      // i取键，a[i]取值
/*
k1 v1
k2 v2
*/

7. while循环

有break、continue

var a = 10;
var i = 0;
while (i<a){
    console.log(i);
    i++;
};
// 执行后i=10

8. 三元运算

var a = 1;
var b = 2;
var c = a > b ? a:b;
//如果a>b这个条件成立，就把冒号前面的值给c，否则把冒号后面的值给c

9. 函数

普通函数

function 函数名(形参){
    语句；
    return v;   # 只能返回一个值，可加数组返回多个
}
函数名(实参);        # 执行函数

示例：
function fun(a,b){
    c = a + b;
    return c;
};

fun(1,2);   // 3

匿名函数

var 变量名(函数名) = function(形参){
    语句；
}；

变量名(实参);

示例：
var f1 = function(a){
    console.log(a);
};

f1('hello');    // hello

自执行函数

(function(形参) {
    语句；
})(实参)

伪数组：arguments
console.log(arguments);
console.log(arguments.length);  // 获取实参的个数
console.log(fn.length);         // 获取形参的个数

示例：
(function(a,b) {
    console.log(a);
    console.log(arguments.length);
})([1,2,3],4);
// [1, 2, 3]    2

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

局部变量：

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

全局变量：

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

变量生存周期：

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

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

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

作用域

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

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

f();        // ShenZhen


var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();      // BeiJing

闭包

和python一样，使用非全局变量

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

10. 构造函数(面向对象)

function Person(name){
    this.name = name;   // 封装属性
}；
var p = new Person('aaa'); //实例化对象
console.log(p.name);
// aaa


// 封装方法
Perso.prototype.sum = function(a,b){
    return a+b;
};

p.sum(1,2);     // 3

11. 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");  //  月/日/年(可以写成04/03/2020)
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();

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

12. JSON

var a = {'name':'alex','age':18};
var b = JSON.stringify(a);      
// 序列化"{"name":"alex","age":18}"

var c = JSON.parse(b);          
// 反序列化{name:"alex",age:18};

13. RegExp对象(正则)

# 两种方式：
// 1.
var reg = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
//2.
var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;   //常用这种方式

var s = 'abcdef';
reg.test(s);    // true  判断s是否符合定义的正则表达式。

注意事项：test() 空时
reg.test();     // 没有传参，如果undefined也符合表达式，也会返回true

正则结合的方法：

match：查找字符串中符合正则的内容 
s.match(/o/);
s.match(/o/g)   # g匹配所有

search:通过元素找索引,不能用g
s.search(/o/);

split:分割
s.split(/o/)

replace:替换
s.replace(/o/g,'xx');
s.replace(/o/gi,'xx');      # i不区分大小写

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


# 循环判断是否符合正则：
var s = 'alex is a xxx';
var reg = /a/g;
reg.test(s);        // true
reg.lastIndex;      // 1
reg.test(s);        // true
reg.lastIndex;      // 9
reg.test(s);        // true
reg.lastIndex;      // 12
reg.test(s);        // false

注意事项2：
在使用test()方法校验一个字符串是否完全匹配时，一定要加上^和$符号，把匹配规则写的确定一些，尽量不用/xxx/

var reg = /foo/g;
reg.test('foo');        // true
reg.test('xxxfoo');     // true

Math对象

不需要new来创建对象，直接使用Math。

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)      返回角的正切。
标签
var
python数组操作
前端开发
字符串函数
对象数组
python字符串
log
var方法
var函数
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!