前端学习笔记10：JavaScript数组、函数，作用域、域解析、对象

1、数组（Array）

• 概念：数组可以将一组相关的数据一起存放，并提供方便的访问（获取）方式。每个数据被称作元素，数据中可以存放任意类型的元素，一个数组的所有元素存储在单个变量名下。
• 数组的创建：

方式一:
var arr = new Array();  //这里创建了一个空数组
方式二：
var arr = [];

• 数据元素的获取：根据数组的索引下标取出。（下标从0开始)
• 数组的长度获取：数组名.length
• 数组添加元素：
  方法一：修改数组的长度，会自动补齐元素，元素内容为undefined
  方法二：直接对超过数组索引的部分进行赋值。
• 数组的冒泡排序：

<script>
    // 冒泡排序
    // var arr = [5, 4, 3, 2, 1];
    var arr = [4, 1, 2, 3, 5];
    for (var i = 0; i < arr.length - 1; i++) { // 外层循环管趟数 
        for (var j = 0; j < arr.length - i - 1; j++) { // 里面的循环管 每一趟的交换次数
            // 内部交换2个变量的值 前一个和后面一个数组元素相比较
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }

        }
    }
    console.log(arr);
</script>

2、函数

• 用途：将重复率很高的代码封装到一起，直接调用。
• 使用：声明+调用

<script>
	//声明方式一：
	function 函数名(形参1,形参2...) {
		//函数体
	}
	// 声明方式二：
	var fn = function() {};
	//调用
	函数名(实参1，实参2...);
</script>

• 形参和实参个数不匹配问题：
  个数一致：对应位置传递数据，正常执行；
  实参个数>形参个数：按照形参个数为准；
  实参个数<形参个数：未接收到值得变量为默认值，即undefined，结果为NaN
  PS:如果函数没有return，那么返回undefined

3、JavaScript作用域与预解析

arguments

• 定义：当不确定有多少个参数传递时，用arguments获取。所有函数都内置了一个arguments对象，存储了传递的所有实参。
• arguments实际上是一个伪数组：可以获取length属性；按照索引存储；但是没有pop()和push()等方法

function fn() {
	console.log(arguments); // [1,2,3]
}
fn(1,2,3)

作用域

• 定义：限定某个名字或变量的可用性范围就是某个名字或变量的作用域。目的是为了提高程序的可靠性，减少命名冲突。
• 分类：JS作用域分为全局作用域（整个script标签，或者一个外部js文件）和局部作用域（在函数内部）。（es6新增块级作用域）
• 变量的分类：全局变量和局部变量。(1)全局变量只有浏览器关闭后才会销毁，比较消耗内存；(2)局部变量当程序执行完毕就会销毁，比较节约资源。
• 全局变量特殊情况：在全局作用域中声明并使用；在函数内部没有声明直接赋值的变量。

作用域链：当内部函数需要使用变量时，需要一层层向上查找相关变量。

预解析
JavaScript代码是由浏览器中的JavaScript解析器执行的。运行时分为两步:预解析和代码执行。
预解析：JS引擎会吧js里边所有的var 和function提升到当前作用域的最前面。然后按照代码书写的顺序从上往下执行。

• 其中变量预解析：把变量声明提升到当前作用域前，但是不提升赋值操作；
• 函数预解析：把所有的函数声明提升到当前作用域的前面，但不调用函数。

4、JavaScript对象

定义：是具体的实物，是一组无序的相关属性和方法的集合，所有的事物都是对象。例如：字符串、数组、数值、函数等。

• 属性：事物的特性；
• 方法：事物的行为；

创建对象的三个方法
1、对象自面量：花括号 { }包含对象的属性(键值对形式)和方法。
调用属性：对象名.属性名 或 对象名[‘属性名’]
调用方法：对象名.方法名

<script>
	var obj = {
	        uname: '张三疯',
	        age: 18,
	        sex: '男',
	        sayHi: function() {
	            console.log('hi~');
	        }
	    }
	    //调用属性
	    console.log(obj.uname);
	    console.log(obj['uname'];
	    //调用方法
	    obj.sayHi()
</script>

2、用new Object();

<script>
    // 利用 new Object 创建对象
    var obj = new Object(); // 创建了一个空的对象
    obj.uname = '张三疯';
    obj.age = 18;
    obj.sex = '男';
    obj.sayHi = function() {
            console.log('hi~');
        }
        // (1) 利用 等号 = 赋值的方法 添加对象的属性和方法
        // (2) 每个属性和方法之间用 分号结束
    console.log(obj.uname);
    console.log(obj['sex']);
    obj.sayHi();
</script>

3、利用构造函数创建对象
ps：构造函数名字首字母要大写；写构造函数时，属性和方法一定要写 this.

<script>
	//基本语法
    function 构造函数名(形参) {
        this.属性 = 值;
        this.方法 = function() {}
    }
    var 对象名= new 构造函数名(实参);
	//实例
    function Star(uname, age, sex) {
        this.name = uname;
        this.age = age;
        this.sex = sex;
        this.sing = function(sang) {
            console.log(sang);

        }
    }
    var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
    console.log(typeof ldh);  //查看类型
    console.log(ldh.name);
    console.log(ldh['sex']);
    ldh.sing('冰雨');
    var zxy = new Star('张学友', 19, '男');
    console.log(zxy.name);
    console.log(zxy.age);
    zxy.sing('李香兰')
</script>

遍历对象中的属性

var obj = {
        name: 'pink老师',
        age: 18,
        sex: '男',
        fn: function() {}
    }
    // console.log(obj.name);
    // console.log(obj.age);
    // console.log(obj.sex);
    // for in 遍历我们的对象
    // for (变量 in 对象) {

// }
for (var k in obj) {
    console.log(k); // k 变量 输出  得到的是 属性名
    console.log(obj[k]); // obj[k] 得到是 属性值

}

5、JavaScript内置对象

• JavaScript对象分类
  自定义对象：自己书写属性和方法的对象。
  内置对象：指JS自带的对象，供开发者使用，并且提供了一些常用的或者基本的属性和方法
  浏览器对象
• 对于不容易记忆的内置对象，可以查阅文档（ MDN链接地址 ）

直接输入想要查找的函数

网站会展示这个函数具体的用法。如果该函数以后将被删除，也会提示替代的函数

Math内置对象

属性/方法	解释
Math.E	自然数e
Math.PI	圆周率
Math.abs(x)	返回一个数的绝对值
Math.ceil(x)	向上取整
Math.floor(x)	向下取整
Math.round(x)	四舍五入后的整数。
Math.random()	返回一个 0 到 1 之间的伪随机数

Date构造函数（需要用new调用日期对象）

new Date(); //返回系统的当前事件
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
Date.getFullYear(); //获取当前年份

Array内置函数

1、判断是否是数组 Array.isArray() 或者 instanceof
2、数据末尾添加元素 arr.push(“元素”)，返回的是新数组长度
3、数组第一个位置添加元素 arr.unshift(“元素”)，返回的是新数组长度
4、数组删除末尾元素 arr.pop(“元素”)，返回的是删除的元素
5、数组删除第一个元素 arr.shift(“元素”)，返回的是删除的元素
6、数组翻转 arr.reverse()
7、数组排序 arr.sort() 需要注意的是，排序是对字符串排序，如果对纯数字排序里边写一个function，return a-b实现升序排序
8、arr.indexOf(“元素”) 返回数组中该元素的第一个位置，否则返回-1
9、arr.toString() 会将数字转化为字符串 [1,2,3]=> 1，2，3
10、arr.join(“字符串”) 将数组元素用字符串连接起来
11、splice(start, end,需要添加或修改的元素]); //删除、添加、修改数组的元素

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]

months.splice(2, 1)
// Expected output: Array ["Jan", "Feb", "May"]

12、slice() //对数组进行截取，并且是浅拷贝

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

String内置函数

1、str.length 获取长度
2、string不可变，改变是指另外开辟一个空间，修改他的指向
3、str.charAt(i) 返回字符串下标为i的字符
4、str.charCodeAt(i) 返回下标为i的字符对应的ASCII码
5、str[index] html5新增
6、str1.concat(str2) //连接
7、str.replace(‘a’,‘b’) //将a替换为b，只会替换为一次
8、str.split(‘分隔符’) //将分隔符将字符串分各位数组

基本包装类型

将简单数据类型包装成为了复杂数据类型