JavaScript基础1

JavaScript是一种运行在浏览器中的解释型的编程语言。HTML控制页面的内容，CSS控制页面的样式，JavaScript主要控制页面的行为。

1、引入

• 内部引用
  通过HTML文档内的script标签加载JavaScript代码。示例如下：

<script type="text/javascript">
  document.write("Hello World!");
</script>

• 外部引用
  也是使用HTML文档的script标签，但是要使用script标签的src属性，指向外部JavaScript文件的路径。示例如下：

<script src="./main.js" ></script>

• 外部引用的优点：
  • 可维护性：遍及不同HTML页面的JavaScript会造成维护问题。但把所有JavaScript文件都放在一个文件夹中，维护起来就轻松多了。而且开发人员因此也能够在不触及HTML标签的情况下，集中精力编辑JavaScript代码。
  • 可缓存：浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。也就是说，如果有两个页面都使用同一个文件，那么这个文件只需下载一次。因此，最终结果就是能够加快页面加载的速度。
  • 适应未来：统一定义JavaScript代码，方便查看，同时使代码更安全，可以压缩，也可以加密某个JavaScript文件。

2、变量

变量就是存储信息的容器。变量就相当与一个”盒子“，用来存储信息。变量在使用前通常有两个步骤：声明和初始化。声明就相当于拿了一个"盒子"说这个"盒子"就用来存储姓名了，即指定变量名；初始化相当于将信息放在这个"盒子"中存储，比如将“Bob”放在"盒子"中存储。

• 变量名必须是合法的标识符，包含：大小写字母，数组，下划线‘_’，美元符号‘$’，但不能以数字开头。

3、数据类型

最新的JavaScript标准定义了 7 种数据类型，它们分别是：

• 6种原始类型（值本身无法被改变）：
  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol
• 引用数据类型：
  • Object

（1）布尔类型（Boolean）

布尔表示一个逻辑实体，意为真、假，可以有两个值：true和false。使用 否 操作符两次，可以把一个值转换为布尔型。0, '', null, undefined, NaN，{}, [], Infinity求布尔值，分别是false false false false false true true true。

（2）Null类型（null）

Null 类型只有一个值：null，表示空值，表示没有被呈现。

（3）Undefined类型（Undefined）

一个没有被赋值的变量会有个默认值undefined。

（4）数字类型（Number）

在JavaScript里，数字类型能够代表的范围是 -(2的63次方-1) ~ (2的63次方-1) 。除了具体的数值，在JavaScript中还有一些带符号的值：+Infinity，-Infinity和NaN；分别代表正无穷、负无穷和非数值。

（5）字符串类型（String）

JavaScript的字符串类型用于表示文本数据。

• 在字符串中的每个元素占据了字符串的位置。第一个元素的索引为0，下一个是索引1，依此类推。字符串的长度是它的元素的数量。
• 在JavaScript中的字符串需要使用单引号'abc'或双引号"abc"括起来，表示该值是一个字符串。
• JavaScript 字符串是不可更改的。这意味着字符串一旦被创建，就不能被修改。但是，可以基于对原始字符串的操作来创建新的字符串。例如：
  • 获取一个字符串的子串可通过选择个别字母或者使用String.substr()。
  • 两个字符串的连接使用连接操作符 (+) 或者String.concat()。

（6）符号类型（Symbol）：

符号(Symbols)是ES6新定义的。符号类型是唯一的并且是不可修改的。

（7）对象（Object）

对象是拥有属性和方法的数据。

• JavaScript 对象是键值对的容器，键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为对象属性。
• 获取对象全部属性的方法：Object.keys(obj);, Object.values(obj);

var obj = {
    a:4,
    b:5,
    c:6,
};
console.log(Object.keys(obj));//输出[ 'a', 'b', 'c' ]
console.log(Object.values(obj));//输出[ 4, 5, 6 ]

• 对象的方法定义了一个函数，并作为对象的属性存储。
  eg.

var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
    {
       return this.firstName + " " + this.lastName;
    }
};

4、作用域

作用域被用来描述在某个代码块可见的所有实体（或有效的所有标识符）。当变量定义在一个函数中时，变量就在局部作用域中，而定义在函数之外的变量则从属于全局作用域。每个函数在调用的时候会创建一个新的作用域。块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。

<script type="text/javascript">
        
    if (ture) {
        var a = 1;
        let b = 2;
        const c = 3;
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
        
    }
    console.log(a); // 1; 可见，通过var定义的变量可以跨块作用域访问到。
    console.log(b); //报错; 可见，通过let定义的变量不可以跨块作用域访问到。
    console.log(c); // 报错; 可见，通过const定义的变量不可以跨块作用域访问到。


    function() {
        var d = 4;
        let e = 5;
        const f = 6;
        console.log(d); // 4
        console.log(e); // 5
        console.log(f); // 6
    }
    console.log(d); // 报错，可见，通过var定义的变量不能跨函数作用域访问到
    console.log(e); // 报错，可见，通过let定义的变量不能跨函数作用域访问到
    console.log(f); // 报错，可见，通过const定义的变量不能跨函数作用域访问到

</script>

• 作用域链：JavaScript需要查询一个变量x时，首先会查找作用域链的第一个对象，如果以第一个对象没有定义x变量，JavaScript会继续查找有没有定义x变量，如果第二个对象没有定义则会继续查找，以此类推
• 函数中声明的变量在整个函数中都有定义
• 未使用var、let、const关键字声明的变量都是全局变量
• 全局变量都是window对象的属性
• var, let, const 的区别
  • var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
  • let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
  • const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

5、字符串

（1）字符字面量

在JavaScript的中，字符串数据类型中包含一些特殊的字符字面量，也叫做转义字符，用于表示非打印字符，或者具有其他用途的字符常用的字符字面量如下所示：
\n：换行
\t：制表符
\b：退格
\r：回车
\\：斜杠（\）
\'：单引号（'）
\"：双引号（“）

（2）字符串常用方法

• charAt()：取出字符串中特定位置的字符

'cat'.charAt(1); // 'a'

• concat() ：将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。该方法并不影响原字符串

var hello = "Hello, ";
console.log(hello.concat("tws", " have a nice day.")); // Hello, tws have a nice day.
console.log(hello); // Hello,

• includes()用于判断一个字符串是否包含在另一个字符串中，根据情况返回真或假，且该方法是区分大小写的

'Blue Whale'.includes('blue'); // false (大小写不同)
'Blue Whale'.includes('Blue'); // true

• substr()：返回一个字符串中从指定位置开始到指定字符数的字符该方法在调用的时候需要传入两个参数分别为：开始提取字符的位置和提取的字符数长度（可选）

var str = 'abcdefghij';
str.substr(0,3); // 'abc'
str.substr(3,3); // 'def'
str.substr(3); // 'defghij'

• substring()：返回一个字符串在开始索引位置到结束索引位置之间的一个子集，或从开始索引直到字符串的末尾的一个子集。该方法也接受两个参数，第一个参数是开始提取字符的位置，第二参数是结束提取字符的位置且不包括该位置的字符（可选）

var str = 'abcdefghij';
str.substring(0,3); // 'abc'
str.substring(3,3); // ""  (因为从3到3，中间没有字符)
str.substring(3); // 'defghij'
str.substring(2,3); // 'c'

• endsWith()：用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回 true 或 false。该方法接受两个参数，第一个为要检索的子字符串，第二个为子字符串最后一个字符的位置，默认为字符串长度（可选）

var str = "To be, or not to be, that is the question.";

alert( str.endsWith("question.") );  // true
alert( str.endsWith("to be") );      // false
alert( str.endsWith("to be", 19) );  // true

• indexOf() ：返回调用String对象中第一次出现的指定值的索引。该方法接受两个参数，第一个为要检索的子字符串，第二个表示调用该方法的字符串中开始查找的位置。可以是任意整数。默认值为 0

"Blue Whale".indexOf("Blue");     // returns  0
"Blue Whale".indexOf("Blute");    // returns -1
"Blue Whale".indexOf("Whale", 0); // returns  5
"Blue Whale".indexOf("Whale", 5); // returns  5
"Blue Whale".indexOf("", 9);      // returns  9
"Blue Whale".indexOf("", 10);     // returns 10
"Blue Whale".indexOf("", 11);     // returns 10

更多字符串方法参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

6、数组

数组对象是使用单独的变量名来存储一系列的值。

• 创建数组有三种方式：

第一种
var myCars=new Array(); 
myCars[0]="Saab";       
myCars[1]="Volvo";
myCars[2]="BMW";
第二种
var myCars=new Array("Saab","Volvo","BMW");
第三种
var myCars=["Saab","Volvo","BMW"];

• 通过索引访问数组

myCars[0]="Opel";

• 数组中有不同的变量类型，可以在一个数组中包含对象元素、函数、数组（但最好只包含同一种变量）。
• 数组方法和属性
  • arr.length ：获取数组长度
  • arr.pop() ：删除数组的最后一个元素，并返回这个元素。
  • arr.reverse() ：颠倒数组中元素的排列顺序，即原先的第一个变为最后一个，原先的最后一个变为第一个。
  • arr.sort() : 对数组元素进行排序，并返回当前数组。
  • arr.splice() : 在任意的位置给数组添加或删除任意个元素。
  • arr.join() : 连接所有数组元素组成一个字符串.
  • arr.slice() : 抽取当前数组中的一段元素组合成一个新数组。
  • arr.indexOf() : 返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。
  • arr.forEach() : 为数组中的每个元素执行一次回调函数。
  • arr.map() : 返回一个由回调函数的返回值组成的新数组。
  • arr.reduce() : 从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。
  • arr.every() : 如果数组中的每个元素都满足测试函数，则返回 true，否则返回 false。

7、运算符

算术运算符（+、-、、/、++、--、%）、赋值运算符（+=、-=、=、/=、%=）和逻辑运算符（&&、||、！）；能够转换为 false 的表达式有：null , NaN , 0 , 空字符串("") , undefined。

• &&运算符的运算法则：
  • 遵循短路原则
  • 取布尔值进行运算，返回表达式的值而不是布尔值
  • 从左到右依次将表达式转换为布尔值然后进行&&运算，返回第一个遇到的布尔值为false的表达式或者如果表达式都为true，则返回最后一个表达式

1 && 'w' && 4 && 8 //返回8
1 && 'w' && 4 && 8 && 0 && 9 //返回0

• ||运算符的运算法则：
  只要||前面为false，则返回后面的值
  只要||前面为true，则返回后面的值

心得体会

在这周的学习中，学习了JavaScript的一些基础知识，在学习过程中遇到了很多数组和字符串方法，并且在完成作业中注意使用了这些方法。通过对这些方法的应用，提高了编程的效率，同时也提高了我的编程体验。这周的课程相比上周的在难度和数量上适中，经过课程学习和线下站会，我也基本上掌握了常用的方法，下周的学习再接再厉吧，加油！