前端之JS变量、数组

变量 – 存储信息

• 变量能够存储任何的东西 – 不只是字符串和数字。变量可以存储更复杂的数据，甚至是函数。
• 变量的独特之处在于它存放的数值可变.

声明变量

使用变量的第一步就是创建它 – 也就是声明一个变量。
声明一个变量的语法是在 var 或 let 关键字之后加上这个变量的名字：

let myName;
let myAge;

在JavaScript中，所有代码指令都会以分号结尾 ( ; )

两个变量并没有数值，他们是空的容器。当你输入变量名并回车后，你会得到一个undefined的返回值。如果是不存在的变量, 会报错.

初始化 =

你定义了一个变量后，就能够初始化它 – 赋值

myAge = 18;

let 和 var 的区别

var的变量提升:

function do_something() {
  console.log(bar); // undefined
  var bar = 111;
  console.log(bar); // 111
}

// is implicitly understood as:
function do_something() {
  var bar;
  console.log(bar); // undefined
  bar = 111;
  console.log(bar); // 111
}

除上述以外,大抵可以归纳为:
1.作用域不同:
var是函数作用域，let是块作用域。
2.let不能在定义之前访问该变量，但是var可以。

更新变量

myAge = 19;

变量命名的规则

• 建议使用拉丁字符(0-9,a-z,A-Z)和下划线字符.
• 不要以下划线开头.
• 不要以数字开头.
• 可靠的命名约定叫做 “小写驼峰命名法”.
• 变量名要描述了所包含的数据.

变量类型

Number

整数, 浮点数(也叫小数)
数值不带引号, 带引号的叫字符串.
typeof 变量名;返回值是类型.

let myAge = 17;
myAge=17.1;

算术运算符大同小异, 要注意的是
** 是幂

3*3; // 是两个3 相乘
3**4; // 是4个 3 相乘

写算式的时候还要注意运算符优先级, 其实记不清的话, 可以用括号括起来, 指明先算的部分.

String

字符串是文本的一部分。
当你给一个变量赋值为字符串时，你需要用单引号或者双引号把值给包起来，否则JavaScript将会把这个字符串值理解成别的变量名。
如果是字符串建议用单引号, 双引号会先查找它是不是变量.

转义字符 \ 反斜杠

let bigmouth = 'I\'ve got no right to take my place...';
bigmouth;

字符串拼接 +

let joined = one + two; //joined;

数字和字符串

字符串 -> 数字

let myString = '123';
let myNum = Number(myString);
typeof myNum;//Number

数字 -> 字符串

let myNum = 123;
let myString = myNum.toString();
typeof myString;//String

字符串 (对象)

在javascript中，一切东西都可以被当作对象。

字符串长度

let browserType = 'mozilla';
browserType.length;

返回字符串指定下标的字母

下标从0开始.

提取下标

//mozilla
browserType.indexOf('zilla');//2

返回字符串的起始下标; 不存在返回 -1 .

提取子串

browserType.slice(0,3);

从下标0开始, 到 3 结束, 不含 3 .

要在某个字符之后的所有字符, 含起点字符.

browserType.slice(2);

字符串转换大小写

let radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase();

字符串替换

browserType.replace(‘被替换的字符串部分’,‘要换上的部分’);

browserType.replace('moz','van');

Boolean

Boolean 的值有2种：true或false。

let iAmAlive = true;
iAmAlive = false;
let test = 6 < 3;//等价于 let test = false;

Array

数组是单个对象，包含很多值，用方括号括起来，以逗号隔开.

let myNameArray = ['Chris', 'Bob', 'Jim'];
let myNumberArray = [10,15,40];

取数时, 下标是以零开始的.

什么是数组

将一组数据存储在单个变量名下的数据类型就是数组.

• 数组是一个包含了多个值的对象。
• 数组可以存放任何类型的元素, 不限于 字符串，数字，对象，另一个变量，甚至另一个数组。

创建数组

• 数组由方括号构成，其中包含用逗号分隔的元素列表。

        let shopping = ['bread', 1, 'hummus', 'noodles'];
        document.write(shopping);

访问和修改数组元素

根据下标进行访问, 修改:

• 访问:

let shopping = ['bread', 1, 'hummus', 'noodles'];
        document.writeln(shopping + "<br/>");
        document.writeln("<br/>");

        for (let i = 0; i < shopping.length; i++)
            document.writeln(shopping[i] + "<br/>");

• 修改:

for (let i = 0; i < shopping.length; i++)
    shopping[i] = i;

document.writeln(shopping + "<br/>");

获取数组长度 – length

let shopping = ['bread', 1, 'hummus', 'noodles'];
document.writeln(shopping + "<br/>");
document.writeln("<br/>");

document.writeln('数组长度: ' + shopping.length + "<br/>");

常用的数组方法

字符串 => 数组 split()

split()分割字符串

let 数组 = 字符串.split(分隔符);

let aString = "你好,未知的旅行者,愿蒙的的风庇护你";
document.write(aString + "<br/>");
document.write("<br/>");

let aArr = aString.split(',');
for (let i = 0; i < aArr.length; i++) {
    document.write(aArr[i] + "<br/>");
}

多维数组

数组中包含数组的话称之为多维数组。

数组 => 字符串

方法一: join();

        let aString = "你好,未知的旅行者,愿蒙的的风庇护你";
        document.write(aString + "<br/>");
        document.write("<br/>");

        let aArr = aString.split(',');
        for (let i = 0; i < aArr.length; i++) {
            document.write(aArr[i] + "<br/>");
        }
        document.write("<br/>");

        let aNewString = aArr.join(',');
        document.write(aNewString);

方法二: toString();

let aString = "你好,未知的旅行者,愿蒙的的风庇护你";
document.write(aString + "<br/>");
document.write("<br/>");

let aArr = aString.split(',');
for (let i = 0; i < aArr.length; i++) {
    document.write(aArr[i] + "<br/>");
}
document.write("<br/>");

let aNewString = aArr.join(',');
document.write(aNewString + '<br/>');

document.write("<br>" + aArr.toString() + '<br/>');

末尾的 添加和删除

这让我想起了java的队列:

push() 在数组末尾添要添加一个或多个
pop() 在数组末尾删除一个数据

let aArr = ['你好', '未知的旅行者', '愿蒙的的风庇护你'];
document.write(aArr + '<br/>');

// 删除一个末尾元素, 并输出结果
let removeItem = aArr.pop();
document.write('<br/>' + 'removeItem: ' + removeItem + '<br/>');

document.write('结果: ' + aArr + '<br/>' + '<br/>');

// 添加一个末尾元素, 并输出结果
let addItem = ',我是风之歌者温蒂';
aArr.push(addItem);
document.write('addItem:' + addItem + '<br>');
document.write(aArr + '<br/>');

开头的 添加和删除

unshift() 和 shift() 从头部添加一个或多个数据
或删除一个

let aArr = ['你好', '未知的旅行者', '愿蒙的的风庇护你'];
document.write(aArr + '<br/>');

// 删除一个开头元素, 并输出结果
let removeFirstItem = aArr.shift();
document.write('<br/>' + 'removeFirstItem: ' + removeFirstItem + '<br/>');

document.write('结果: ' + aArr + '<br/>' + '<br/>');

// 添加一个开头元素, 并输出结果
let addFirstItem = '我是风之歌者温蒂';
aArr.unshift(addFirstItem);
document.write('addFirstItem:' + addFirstItem + '<br>');
document.write(aArr + '<br/>');

Object

在编程中，对象是现实生活中的模型的一种代码结构。
您可以有一个简单的对象，代表一个停车场，并包含有关其宽度和长度的信息，
或者您可以有一个代表一个人的对象，并包含有关他们的名字，身高，体重，他们说什么语言，如何说 你好，他们，等等。
对象可分为两个部分:

1. 属性: 人的身高, 体重等;
2. 行为(也叫方法): 唱, 跳, rap等;

动态类型

声明一个变量并给它一个带引号的值，浏览器就会知道它是一个字符串：

let myString = 'Hello';
myString = '5000';//还是字符串

网页实例: 热笑话生成器

网页实例: 求一个数的平方,立方,阶乘

== 与 ===

双等号比较： 先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较。

三等号比较时， 如果类型不同，直接就是false.