JS入门到精通详解（5）

最新推荐文章于 2024-09-14 18:52:56 发布

zxpmoxo

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量428

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言 ecmascript Powered by 金山文档

本文链接：https://blog.csdn.net/zxpmoxi/article/details/128655416

版权

JS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

数组去重案例

function fnNoRepeatOfArray(arr){
    var list = [];
    arr.forEach(function(value){
        if(list.indexOf(value) === -1){
            list.push(value);
        }
    })
    return list;
}

function fn(arr){
    for(var i = 0,len = arr.length;i < len;i ++){
        for(var j = i + 1;j < len;j ++){
            if(arr[i] === arr[j]){
                arr.splice(j,1);
            }
        }
    }
    return arr;
}

function fn(arr){
    var list = [];
    arr.sort(function(a,b){return a - b;});
    arr.forEach(function(value,index){
        if(value !== arr[index + 1]){
            list.push(value);
        }
    })
    return list;
}

字符串常用方法

如何声明

字面量方式： '' ""

构造函数方式： new String()

属性

length : 长度

方法 (查、替、截、转)（所有的方法都不影响原串）

查

indexOf('字符串',start) : 查找子串在父串中第一次出现的下标位置，如果没有，则返回-1

var str = 'how do you do';
console.log(str.indexOf('do')); //4
console.log(str.indexOf('de')); //-1
console.log(str.indexOf('do'（找str这个元素）,5（从第几个下标开始找）)); //11
console.log(str.indexOf('do',4)); //4

lastIndexOf('字符串',start) : 查找子串在父串中从右向左查找第一次出现的下标位置，如果没有找到，返回 -1

var str = 'how do you do';
console.log(str.indexOf('do')); //4
console.log(str.indexOf('de')); //-1
console.log(str.indexOf('do',5)); //11
console.log(str.indexOf('do',4)); //4

console.log(str.lastIndexOf('do')); //11
console.log(str.lastIndexOf('de')); //-1
console.log(str.lastIndexOf('do',5)); //4
console.log(str.lastIndexOf('do',4)); //4

charAt(index) : 根据下标查找字符。

charCodeAt(index) : 根据下标查找字符编码。

替

replace(旧串，新串) : 替换字符串

//声明字符串
var str = 'how do you do';
console.log(str.replace('do','de')); //'how de you do'

// for(var i = 0;i < str.length;i ++){
//     str = str.replace('do','de');
// }

while(str.indexOf('do') !== -1){
    str = str.replace('do','de');
}
console.log(str);

截

substring(start,end) : 从哪截取到哪，支持参数互换、不支持负数

substr(start,length) ：从哪截至多少个

slice(start,end) ：从哪截取到哪，不支持参数互换、支持负数

var str = 'how do you do';
console.log(str.substring(4)); //do you do
console.log(str.substr(4)); //do you do
console.log(str.slice(4));//do you do

console.log(str.substring(4,6)); //do(第四个截取到第六个)
console.log(str.substr(4,6)); //do you（第四个开始向后截取六个数）
console.log(str.slice(4,6));//do

console.log(str.substring(6,4)); //do
console.log(str.slice(6,4));//''


console.log(str.substring(-6,-4)); //''
console.log(str.slice(-6,-4));//'yo'

转

toUpperCase() : 将小写转为大写字母

toLowerCase() : 将大写转为小写字母

split('切割符',length) : 将字符串切割为数组

var str = 'How Are You';
console.log(str.toUpperCase()); //HOW ARE YOU
console.log(str.toLowerCase()); //how are you
var arr = str.split(' ',2); //['How', 'Are']
console.log(arr);

拼

concat() : 合并字符串

var str = 'hello';
console.log(str.concat(' world')); // hello world

去空白

trim() ：删除字符串两端空白

var str = '     a     b    ';
console.log('(' + str.trim() + ')');  //(a     b)

trimStart() : 删除字符串左端空白

var str = '    a    b    ';
console.log('(' + str.trimStart() + ')');  //(a    b    )

trimEnd() : 删除字符串右端空白

var str = '    a    b    ';
console.log('(' + str.trimEnd() + ')');  //(    a    b)

静态方法

String.fromCharCode(编码) : 根据编码返回字符

Math对象（Math对象不能new!!!!)

Math.PI 圆周率

Math.abs() 求绝对值

Math.round() 四舍五入

如果负数时， > 0.5 进一 <=0.5 舍去

console.log(Math.round(4.5)); //5
console.log(Math.round(4.4)); //4
console.log(Math.round(-4.5)); // -4
console.log(Math.round(-4.5000001)); // -5
console.log(Math.round(-4.4)); //-4
console.log(Math.round(-4.6)); //-5

Math.ceil() 向上取整

console.log(Math.ceil(4.1)); //5
console.log(Math.ceil(4.9)); //5
console.log(Math.ceil(-4.1)); //-4
console.log(Math.ceil(-4.9)); // -4

Math.floor() 向下取整

console.log(Math.floor(4.1)); //4
console.log(Math.floor(4.9)); //4
console.log(Math.floor(-4.1)); //-5
console.log(Math.floor(-4.9)); // -5

Math.max() 最大值

求数组中最大值： Math.max.apply(null,数组) Math.max( ... 数组名)

求数组中最小值： Math.min.apply(null,数组) Math.min( ... 数组名)

var arr = [2,3,1,4,5,3,4];
console.log(Math.max(2,3,1,4,5,3,4));
console.log(Math.min(2,3,1,4,5,3,4));
console.log(Math.max.apply(null,arr));
console.log(Math.min.apply(null,arr));

Math.pow(m,n) 求m的n次方

Math.sqrt(n) 求n的开方

Math.random() 随机数 0 <= n < 1

Math.floor(Math.random() * (max - min + 1) + min) 推荐
Math.round(Math.random() * (max - min) + min)

function random(min,max){
    if(min > max){
        var t = min;
        min = max;
        max = t;
    }
    return Math.floor(Math.random() * (max - min + 1) + min);
}

练习

实现猜数字游戏（1~10，三次机会）

封装一个随机颜色的函数（至少封装三种）

封装一个4位验证码的函数（包含数字大写字母小写字母）

- **扁平化数组如：[1,2,[3,[4,5],[6,7],8],9] [1,2,3,4,5,6,7,8,9]**面试题

计时器

timer = setInterval(函数,毫秒数) : 间歇性计时器

clearInterval(timer) : 取消计时器

timer = setTimeout(函数,毫秒数) : 一次性计时器、延时器、定时器

clearTimeout(timer);

练习

数码时钟

倒计时

Date对象

如何创建日期对象？

var date = new Date();

var date = new Date(2002,2,5); //0~11

var date = new Date(2002,2,5,18,30,50); //0~11

var date = new Date('2002-3-5'); //1~12

var date = new Date('2002-3-5 18:30:50'); //1~12

var date = new Date('2002/3/5'); //1~12

var date = new Date('2002/3/5 18:30:50'); //1~12

如何访问日期对象中的信息？（括号里不需要写参数）

date.getFullYear() //年

date.getMonth() //月 0~11

date.getDate() //日

date.getDay() //星期

date.getHours() 时

date.getMinutes() 分

date.getSeconds() 秒

date.getMilliseconds() 毫秒

date.getTime() 时间戳

如何设置日期对象中的信息？（括号里需要写参数）

date.setFullYear() 年

date.setMonth() 0~11

date.setDate() 日

date.setHours() 时

date.setMinutes() 分

date.setSeconds() 秒

date.setMilliseconds() 毫秒

date.setTime() 时间戳

如何以本地格式的字符串输出日期对象？

date.toLocaleString() 本地格式的日期时间字符串

date.toLocaleDateString() 本地格式的日期字符串

date.toLocaleTimeString() 本地格式的时间字符串

练习

求出自己已生活了多少天零多少小时零多少分钟零多少秒钟？

写出距当前日期7天后的日期时间（注，使用日期对象的方法实现，不允许自己计算）

简单的代码异步执行机制

同步：按步骤执行

异步：同时进行

计算机程序执行分为同步执行,和异步执行:

所谓的异步执行,是一种特殊的程序的执行方式，常见的异步程序有:
定时器（setInterval），延时器（setTimeou），各种事件的绑定（onclick......），ajax请求

异步程序的执行过程

从第一行代码开始执行

同步程序开始执行

遇到异步程序了，暂时不执行，将异步程序暂时存储在“异步池”中

所有的同步程序执行完毕

开始执行“异步池”中的异步程序

若有设定了时间的程序，就会先执行到点了的程序

若有设定的时间是相同的程序，则依照书写顺序执行

setTimeout(function(){ 
    console.log('我是异步执行的程序1'); 
} , 2000);
setTimeout(function(){ 
    console.log('我是异步执行的程序2'); 
} , 1000);
console.log('我是同步执行的程序')

//结果依次是：
//我是同步执行的程序
//我是异步执行的程序2
//我是异步执行的程序1