JavaScript常用内置对象使用

1.数组Array

数组的含义

数组对象是使用单独的变量名来存储一系列的值。
如果你有一组数据(例如:车名字),存在单独变量如下所示:

var car1="Saab";
var car2="Volvo";
var car3="BMW";

然而,如果你想从中找出某一辆车?并且不是3辆,而是300辆呢?这将不是一件容易的事!
最好的方法就是用数组。
数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。
数组中的每个元素都有自己的的ID,以便它可以很容易地被访问到。

创建数组

创建一个数组,有三种方法。
下面的代码定义了一个名为 myCars的数组对象:
1: 常规方式:

var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];

访问数组

通过指定数组名以及索引号码,你可以访问某个特定的元素。
以下实例可以访问myCars数组的第一个值:

var name=myCars[0];

以下实例修改了数组 myCars 的第一个元素:

myCars[0]="Opel";

注意:
[0] 是数组的第一个元素。[1] 是数组的第二个元素。

在一个数组中你可以有不同的对象

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。
因此,你可以在数组中有不同的变量类型。
你可以在一个数组中包含对象元素、函数、数组:

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

简单的数组方法和属性的使用方法

使用数组对象预定义属性和方法:

var x=myCars.length             // myCars 中元素的数量
var y=myCars.indexOf("Volvo")   // "Volvo" 值的索引值

数组属性

在这里插入图片描述

扫描二维码关注公众号,回复: 8875101 查看本文章

Array 对象方法

在这里插入图片描述
在这里插入图片描述

2.JavaScript for循环

遍历数组的方式

一般写法:

document.write(cars[0] + "<br>"); 
document.write(cars[1] + "<br>"); 
document.write(cars[2] + "<br>"); 
document.write(cars[3] + "<br>"); 
document.write(cars[4] + "<br>"); 
document.write(cars[5] + "<br>");

for循环:

for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}
``

### 不同类型的循环
JavaScript 支持不同类型的循环:
1. for - 循环代码块一定的次数
2. for/in - 循环遍历对象的属性
3. while - 当指定的条件为 true 时循环指定的代码块
4. do/while - 同样当指定的条件为 true 时循环指定的代码块

### For 循环基本语法
for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法:
```javascript
for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 (代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行

实例:

for (var i=0; i<5; i++)
{
      x=x + "该数字为 " + i + "<br>";
}

For/In 循环

JavaScript for/in 语句循环遍历对象的属性:

var person={fname:"John",lname:"Doe",age:25}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

for-of的语法:

for…of 是 ES6 新引入的特性。它既比传统的for循环简洁,同时弥补了forEach和for-in循环的短板。
for-of的语法:

for (var value of myArray) {
  console.log(value);
}

for-of 的语法看起来跟 for-in 很相似,但它的功能却丰富的多,它能循环很多东西。
for-of 循环使用例子:
循环一个数组(Array):

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

我们可以使用const来替代let,这样它就变成了在循环里的不可修改的静态变量。

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

循环一个字符串:

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

循环一个类型化的数组(TypedArray):

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

循环一个Map:

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

循环一个 Set:

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

循环一个 DOM collection
循环一个DOM collections,比如NodeList,之前我们讨论过如何循环一个NodeList,现在方便了,可以直接使用for-of循环:

// Note: This will only work in platforms that have
// implemented NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

循环一个拥有enumerable属性的对象
for–of循环并不能直接使用在普通的对象上,但如果我们按对象所拥有的属性进行循环,可使用内置的Object.keys()方法:

for (var key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

循环一个生成器(generators)
我们可循环一个生成器(generators):

function* fibonacci() { // a generator function
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

3.Math(算数)对象

简单用法:

Math(算数)对象的作用是:执行普通的算数任务。
Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。
使用Math的属性/方法的语法:

var x=Math.PI;
var y=Math.sqrt(16);

注意: Math对象无需在使用这个对象之前对它进行定义。

算数值

JavaScript 提供 8 种可被 Math 对象访问的算数值:
你可以参考如下Javascript常量使用方法:

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

算数方法

除了可被 Math 对象访问的算数值以外,还有几个函数(方法)可以使用。
下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。

document.write(Math.round(4.7));

上面的代码输出为:

5

下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数:

document.write(Math.random());

上面的代码输出为:

0.15625646233229462

下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 11 之间的随机数:

document.write(Math.floor(Math.random()*11));

上面的代码输出为:

0

对于伪随机数,JS 有很多种玩法来生成我们所需要的伪随机数。

根据上下限生成随机数:

var rand = (min,max) => Math.round(Math.random()*(max-min))+min;
//Max为最大值,Min为最小值

根据概率随机生成 bool 值:

function randBool(percent=0.5){
  //percent为概率,默认0.5(50%)。
  if(Math.random()<percent)//如果随机数小于概率值,返回true,否则返回false。
    return true;
  else
    return false;
}

随机生成指定字符:

function randChar(length,characters="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"){
  //length为所需长度,characters为所包含的所有字符,默认为字母+数字。
  characters=characters.split("");//分割字符。
  result="";//返回的结果。
  while(result.length<length) result+=characters[Math.round(Math.random()*characters.length) - 1];
  return result;
}

随机生成字符的另一种玩法:

function randCharAnother(length,rangeMin=0x80,rangeMax=0x7FF){
  //length长度,rangeMin为最小Unicode码,rangeMax为最大Unicode码。
  result="";
  while(result.length<length) result+=String.fromCharCode(Math.round(Math.random()*(rangeMax-rangeMin))-rangeMin);
  return result;
}

随机从数组中取出一个东东:

Array.prototype.pick = function(){
  //不能为 ()=>{/*函数*/},否则this会指向Window。
  return this.length?Math.round(Math.random()*(this.length-1)):undefined;//如果长度为0,返回undefined。
}

4.Date对象

创建Date对象

Date 对象用于处理日期与时间。

创建 Date 对象: new Date()

以下四种方法同样可以创建 Date 对象:

var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Date 对象属性

在这里插入图片描述

Date 对象方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.几个Date对象的常用方法

getFullYear()

实例
返回一个年份

var d = new Date();
var n = d.getFullYear();

输出结果:

2019

getMonth() 方法

实例
返回月份:

var d = new Date();
var n = d.getMonth();

n 输出结果:

11

getDate()

实例
返回月份的某一天:

var d = new Date();
var n = d.getDate();

n输出结果:

var d = new Date() document.write(d.getDate())

getDay()

实例
返回一周的某一天数字。

var d = new Date();
var n = d.getDay();

n 输出结果

var d=new Date() document.write(d.getDay())

6.String 对象

创建String对象的语法
new String(s);
String(s);
参数

参数 s 是要存储在 String 对象中或转换成原始字符串的值。

返回值

当 String() 和运算符 new 一起作为构造函数使用时,它返回一个新创建的 String 对象,存放的是字符串 s 或 s 的字符串表示。
当不用 new 运算符调用 String() 时,它只把 s 转换成原始的字符串,并返回转换后的值。

String 对象属性

在这里插入图片描述

String 对象方法

在这里插入图片描述
在这里插入图片描述

String对象的描述,有一些注意点

字符串是 JavaScript 的一种基本的数据类型。

String 对象的 length 属性声明了该字符串中的字符数。

String 类定义了大量操作字符串的方法,例如从字符串中提取字符或子串,或者检索字符或子串。

需要注意的是,JavaScript 的字符串是不可变的(immutable),String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法,返回的是全新的字符串,而不是修改原始字符串。

在较早的 Netscape 代码基的 JavaScript 实现中(例如 Firefox 实现中),字符串的行为就像只读的字符数组。例如,从字符串 s 中提取第三个字符,可以用 s[2] 代替更加标准的 s.charAt(2)。此外,对字符串应用 for/in 循环时,它将枚举字符串中每个字符的数组下标(但要注意,ECMAScript 标准规定,不能枚举 length 属性)。因为字符串的数组行为不标准,所以应该避免使用它。

发布了136 篇原创文章 · 获赞 0 · 访问量 2967

猜你喜欢

转载自blog.csdn.net/weixin_42596275/article/details/103305480