JavaScript入门笔记6

2019-11-22  本文已影响0人  David_Rao

写在前面

本文是我通过在网易云课堂上学习 叶建华 老师的 撩课-零基础玩转JavaScript 视频教程,整理、精炼其配套笔记总结而来的。附上视频教程地址:

https://study.163.com/course/courseMain.htm?courseId=1005973001

以下是我的所有js入门笔记
JavaScript入门笔记1:https://www.jianshu.com/p/ab044eb35c56
JavaScript入门笔记2:https://www.jianshu.com/p/348805d50b77
JavaScript入门笔记3:https://www.jianshu.com/p/2146931d6706
JavaScript入门笔记4:https://www.jianshu.com/p/e95f00b53343
JavaScript入门笔记5:https://www.jianshu.com/p/97a241434881
JavaScript入门笔记6:https://www.jianshu.com/p/fc091ce8924e
JavaScript入门笔记7:https://www.jianshu.com/p/ea33bfb83da1

本章节内容
1、Math对象
---1.1、概念
---1.2、静态成员和实例成员
---1.3、Math.ceil(),Math.floor()
---1.4、Math.random()
2、String对象
---2.1、charAt()
---2.2、charCodeAt()
---2.3、substr()
---2.4、toLowerCase(),toUpperCase()
---2.5、trim()
---2.6、split()
---2.7、实例:URL转化为对象

1、Math对象

https://www.w3school.com.cn/jsref/jsref_obj_math.asp

1.1、概念

Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),它的属性和方法,都是以静态成员的方式提供。

1.2、静态成员和实例成员

1.2.1、静态成员

不需要将类实例化就能直接调用的属性和方法

https://blog.csdn.net/songlf521/article/details/60144182

function UJ(age, gender) {
        this.age = age;
        this.gender = gender;
    }
UJ.hobby = "Basketball";  // 设置静态成员
console.log(UJ.hobby);  // basketball
console.log(UJ.age);  // 构造函数UJ(即UJ类)没有实例化为一个对象,其实例成员age返回undefined

1.2.2、实例成员

需要将类实例化为对象,再通过该对象才能调用的属性和方法

function Dog(name, gender) {
    this.name = name;
    this.gender = gender;
}
//需要先将类Dog实例化为对象myDog
var myDog = new Dog("旺财", "雄");
//调用myDog对象的属性name
console.log(myDog.name);  // 旺财
// 创建字面量对象tool
var tool = {
    height: 300,
    eat: function () {
        console.log("I can eat");
    }
};
// tool本来就是实例化的对象,其属性和方法都能被调用
console.log(tool.height);  // 300

1.3 Math.ceil() Math.floor()

Math.ceil()向上取整,Math.floor()向下取整

console.log(Math.ceil(Math.PI));  // 4
console.log(Math.floor(Math.PI));  // 3

1.4Math.random()

  1. 生成0——1之间的随机数
  2. 生成a——b之间的随机数公式Math.random() * (b - a) + a
console.log(Math.random());
//生成0——10之间的随机数
console.log(Math.random()*10);
//生成3——8之间的随机数
console.log(Math.random() * (8-3) + 3);

2、String对象

https://www.w3school.com.cn/jsref/jsref_obj_string.asp

2.1、charAt()

输出字符串中第几个字符

var str = "David Rao";
console.log(str.charAt(3));  // i

也可以用字符串索引的方式

var str = "David Rao";
console.log(str[3]);  // i

2.2、charCodeAt()

输出字符串中第几个字符的编码

var str = "David Rao";
console.log(str.charCodeAt(3));  // 105

2.3、substr()

  1. 作用:截取字符串
  2. 使用方法:substr( 从第几个字符开始截取,截取多少个(默认截取到末尾) )
// 提取后缀
var str = "baidu.com";
var newStr = str.substr(str.lastIndexOf('.')+1);
console.log(newStr);  // com

2.4、toLowerCase() toUpperCase()

toLowerCase()字母全变成小写,toUpperCase()字母全变成大写

var str = "David Rao";
console.log(str.toLowerCase());  // david rao
console.log(str.toUpperCase());  // DAVID RAO

2.5、trim()

去掉字符串首尾空格

var str = '            JS is my favorite programming language.            ';
console.log(str.trim());  // JS is my favorite programming language.

2.6、split()

作用:以指定的分隔符分割字符串,得到一个字符串数组
使用:split( 以什么符号进行分割(可以是正则表达式), 分割多少个出来 )

var str="How are you doing today?";
str.split(" ");  // ["How","are","you","doing", "today?"]
str.split(" ", 3);  // ["How","are","you"]

2.7、案例:URL转化为对象

function getUrlParams(url) {
    var index = url.indexOf("?") + 1;
    var params = url.substr(index);
    console.log(params);
    var paramsArr = params.split("&");
    console.log(paramsArr);
    var obj = {};  //创建空的字面量对象
    paramsArr.forEach(function (value, index, array) {
        var tempArr = value.split("=");
        console.log(tempArr);
        var key = tempArr[0];
        obj[key] = tempArr[1];
        console.log(obj);
    });
    return obj;
}
var url = "https://study.163.com/my?from=study&name=David";
obj = getUrlParams(url);
console.log(obj);

写在最后

如果您觉得文章对您有帮助,不要吝惜您的“点赞”呀!

上一篇下一篇

猜你喜欢

热点阅读