js基础

最新推荐文章于 2024-06-24 14:30:19 发布

CrazyDemo

最新推荐文章于 2024-06-24 14:30:19 发布

阅读量292

点赞数

分类专栏： web前端 # js

原文链接：https://www.cnblogs.com/clschao/articles/10092896.html

版权

web前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

js引入

方式1:
    <script>
        // js代码
        alert('澳门皇家赌场上线啦!!!')
    </script>
方式2:外部文件引入 xx.js文件
    <script src="js文件路径"></script>

注释

// 这是单行注释

/*
这是
多行注释
*/

声明变量var

var a = 10;
声明变量时可以先不赋值
var a;此时a的值为undefined

基本数据类型

数值类型 Number

var a;         
a = 10;        
var b = 10;    
typeof b;        // 查看数据类型 number

字符类型

var a = "hello";
var b = "js";
var c = a + b;

类型转换

var a = "123";
var b = parseInt(a);
typeof b;     // number

var c = parseFloat(a);
typeof c;     // number

var d = "luffy";
var e = parseInt(d); 
e;            // number
typeof e;     // NaN
var f = parseFloat(d); 
f;            // number
typeof f;     // NaN

字符串常用方法

1.length属性，查看字符串长度
var a = "hello";
a.length;            // 5

2.trim()移除空白    trimLeft()移除左侧空白    trimRight()移除右侧空白
var a = "    hello    ";
a.trim();            // "hello"

3.charAt(n) 返回索引为n的那个字符
var a = "hello";
a.charAt(1);         // e

4.concat() 字符串拼接
var a = "hello";
var b = "js"; 
a.concat(b);         // hellojs

5.indexOf() 通过元素找索引，可设置索引起始位置参数，找不到返回-1
var a = "hello";
a.indexOf('l');      // 2
a.indexOf('l',3);    // 3
a.indexOf('b');      // -1

6.slice() 切片，顾头不顾尾
var a = "hello";
a.slice(2,4);        // "ll"

7.toLowerCase() 全部小写    toUpperCase() 全部大写
var a = "heLLo";
a.toLowerCase();     // "hello"
a.toUpperCase();     // "HELLO"

8.split 字符串分割，第二个参数是返回多少个数据
var a = "hello";
a.split('e');        // (2) ["h","llo"]
a.split('e',1);      // ["h"]

布尔值

var a = true;
var b = false;

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

null和undefined

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

对象类型object

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
比如声明一个字符串对象
var a = new String('bb')

复杂数据类型或者应用数据类型

数组Array

创建数组:
var a = [11,22,33];
var b = new Array([22,33])
typeof a;  //object类型

数组常用方法和属性

1. 索引取值
var a = [123,"abc"];
a[1];                    // "abc"

2. length 求元素个数
a.length;                // 2

3. push()尾部追加    pop()尾部删除
var a = [1,2,3,4];
a.push(5);               // 5
a.pop();                 // 5
a;                       // [1,2,3,4]

4. unshift(ele)头部追加    shift()头部删除
var a = [1,2,3,4];
a.unshift("abc");        // 5
a;                       // ["abc",1,2,3,4]
a.shift();               // "abc"
a;                       // [1,2,3,4]

5.sort 排序    会对元素的一个字符按照ASCII码大小排序，数字想排序需要写方法
var a = [11,55,2,78,20];
function sortNumber(a,b){
    return a-b;          // 降序变成b-a
}
a.sort(sortNumber);      // (5) [2, 11, 20, 55, 78]       

6.splice() 删除元素,可接收三个参数，第一个是索引(从哪里开始删除)，第二参数是删除几个,第三个是删除位置替换的新元素
var a = [84, 73, 11, 4];  
a.splice(1,2,'aa','bb','cc');
a;                       // (5) [84, "aa", "bb", "cc", 4]

自定义对象{}

var a = {"name": "Alex", "age": 18};
var d = {'name':'chao',age:18}; 键可以不加引号
console.log(a.name);
console.log(a["age"]);
// for循环遍历自定义对象
var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

运算符

算数运算符

+ - * / % ++ --  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

var a = 10;
if (a > 5){   
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch 切换

var a = 10;
switch (a){    //switch (a++){}
    case 9:
        console.log('999');
    break;
    case 10:
        console.log('101010');
    break;
    case 11:
        console.log('111111');
    break;
}

加上default示例:

    var a = 20;

    switch (a){
        case 9:
            console.log('999');
        break;
        case 10:
            console.log('101010');
        break;
        case 11:
            console.log('111111');
        break;
        default :  //上面的条件都不成立的时候,走default
            console.log('啥也不对!!')

    }

for循环

for (var i=0;i<10;i++) {  
  console.log(i);
}

循环数组：
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

函数

// 普通函数定义
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;  //在js中，如果你想返回多个值是不行的，比如return a ，b；只能给你返回最后一个值，如果就想返回多个值，你可以用数组包裹起来 return [a,b]；
}

sum(1, 2);  // 调用函数  sum(1,2,3,4,5)参数给多了，也不会报错，还是执行前两个参数的和，sum(1)，少参数或者没参数也不报错，不过返回值就会是NAN

// 匿名函数方式，多和其他函数配合使用
var sum = function(a, b){  //在es6中，使用var，可能会飘黄，是因为在es6中，建议你使用let来定义变量，不过不影响你使用
  return a + b;  
}

// 立即执行函数，页面加载到这里，这个函数就直接执行了，不需要被调用执行
(function(a, b){
  return a + b;
})(1, 2);

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

局部变量：

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

全局变量：

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


变量生存周期：

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

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

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

作用域

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

闭包

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

面向对象

es5封装方式

function Person(name){
    this.name = name;
}
var p = new Person('luffy');
p.name    // "luffy"



Person.prototype.sum = function(a,b){return a+b;}    // ƒ (a,b){return a+b;}
p.sum(2,3);        // 5

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

json

var str1 = '{"name": "xxx", "age": 18}';
var obj1 = {"name": "yyy", "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,11}$/;

// test方法.测试某个字符串是否符合正则规则
var s = 'hello'
reg1.test(s)  符合返回True,不符合返回false
    
// 一个坑:
reg1.test() 里面什么也不写,会默认放一个"undefined"字符串
reg1.test("undefined")

其他正则方式

var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中符合正则的内容 ，/o/g后面这个g的意思是匹配所有的o,
s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置，返回第一个配到的元素的索引位置，加不加g效果相同
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割，得到一个新值，原数据不变
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换

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"  不区分大小写

坑:
    var reg = /a/g;
    var s = 'alex a sb';
    reg.test(s); //true
    reg.lastIndex; // 1
    reg.test(s); //true
    reg.lastIndex; // 6
    reg.test(s); //false
    
    reg.lastIndex = 0;重新赋值,让其归零

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)          返回角的正切。