JavaScript基础第04天笔记
1 - 数组
1.1 数组的概念
- 数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。
- 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。
1.2 创建数组
JS 中创建数组有两种方式：
- 利用 new 创建数组
var 数组名 = new Array() ；
var arr = new Array(); // 创建一个新的空数组
注意 Array () ，A 要大写
-
利用数组字面量创建数组
//1. 使用数组字面量方式创建空的数组 var 数组名 = []； //2. 使用数组字面量方式创建带初始值的数组 var 数组名 = ['小白','小黑','大黄','瑞奇'];- 数组的字面量是方括号 [ ]
- 声明数组并赋值称为数组的初始化
- 这种字面量方式也是我们以后最多使用的方式
-
数组元素的类型
数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。
var arrStus = ['小白',12,true,28.9];
1.3 获取数组中的元素
索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。
数组可以通过索引来访问、设置、修改对应的数组元素，可以通过“数组名[索引]”的形式来获取数组中的元素。
// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);
注意：如果访问时数组没有和索引值对应的元素，则得到的值是undefined
1.4 遍历数组
-
数组遍历
把数组中的每个元素从头到尾都访问一次（类似学生的点名），可以通过 for 循环索引遍历数组中的每一项
var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
console.log(arrStus[i]);
}
-
数组的长度
数组的长度：默认情况下表示数组中元素的个数
使用“数组名.length”可以访问数组元素的数量（数组长度）。
var arrStus = [1,2,3]; alert(arrStus.length); // 3注意：
- 此处数组的长度是数组元素的个数 ，不要和数组的索引号混淆。
-
当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化
- 数组的length属性可以被修改：
-
如果设置的length属性值大于数组的元素个数，则会在数组末尾出现空白元素；
- 如果设置的length属性值小于数组的元素个数，则会把超过该值的数组元素删除
1.5 数组中新增元素
数组中可以通过以下方式在数组的末尾插入新元素：
数组[ 数组.length ] = 新数据;
1.6操作数组
[JS中数组的操作方法大全]
常见的一些数组操作
push 、 pop、unshift、 shift
push
- 语法: array.push(item1, item2, …, itemX)
- push( )方法：可以将一个或者更多的参数添加在数组的尾部；返回添加后的数组的长度，原数组发生改变。
- 代码示例如下：
var arr=[1,2,3,4];
var a=arr.push(9,8,7);
console.log(a,arr);//1,2,3,4,9,8,7；
unshift
- 语法: array.unshift(item1,item2, …, itemX)
- unshift( )方法：可以将一个或者更多的参数添加在数组的头部；返回添加后的数组的长度，原数组发生改变。
- 代码示例如下：
var arr=[1,2,3,4];
var a=arr.unshift(9,8,7);
console.log(a,arr);//9,8,7,1,2,3,4；
pop
- 语法：array.pop()
- pop( )方法：从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变。
- 代码示例如下：
var arr=[1,2,3,4];
var a=arr.pop();
console.log(a,arr)//4；1,2,3，
shift
- 语法：array.shift()
- shift( ) 方法：从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。
- 代码示例如下
var arr = [1,2,3,4];
var a = arr.shift();
console.log(a,arr)//1；2,3,4，
slice
- 语法：array.slice(start, end)
- slice（）方法：如果不传参数，会返回原数组；如果一个参数，从该参数表示的索引开始截取，直至数组结束，返回这个截取数组，原数组不变；两个参数，从第一个参数对应的索引开始截取，到第二个参数对应的索引结束，但包括第二个参数对应的索引上的值，原数组不改变 最多接受两个参数
- 代码示例如下：
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
console.log(citrus )//Orange,Lemon
splice
- 语法：array.splice(index,howmany,item1,…,itemX)
- splice( ) 方法：没有参数，返回空数组，原数组不变；一个参数，从该参数表示的索引位开始截取，直至数组结束，返回截取的数组，原数组改变；两个参数，第一个参数表示开始截取的索引位，第二个参数表示截取的长度，返回截取的 数组原数组改变；三个或者更多参数，第三个及以后的参数表示要从截取位插入的值。
- 代码示例如下：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);
console.log(fruits )//Banana,Orange
reverse
- 语法：array.reverse()
- reverse( )方法：用于颠倒数组中元素的顺序。。
- 代码示例如下：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
console.log(fruits)//Mango,Apple,Orange,Banana
sort
- 语法：array.sort(sortfunction)
- sort( ) 方法：用于对数组的元素进行排序。
- 代码示例如下：
var Array = [1,2,3,4,5];
var fruits = Array.sort(function(a,b){
//return a - b; //从小到大
return b-a; //从大到小
})
join
- 语法：array.join(separator)
- join( ) 方法：于把数组中的所有元素转换一个字符串,元素是通过指定的分隔符进行分隔的。
- 代码示例如下：
var arr = [1,2,3,4]
var bbc = arr.join()
console.log(bbc)//1,2,3,4
concat
- 语法：string.concat(string1, string2, …, stringX)
- concat( ) 方法：属于字符串的方法，数组也可以用，接受一个或多个参数，将参数中的值放到操作的数组后边，返回拼接的数组，原数组不变。如果参数是一个数组，则先把值提取出来再操作。
- 代码示例如下：
var arr = [1,2,3,4];
arr.concat([5,6,7])//[1,2,3,4,5,6,7]
ES5新增的一些数组方法
indexOf（）
- 语法：string.indexOf(searchvalue,start)
- indexOf( ) 方法：字符串的方法，数组也可适用，此方法可返回某个指定的字符串值在字符串中首次出现的位置；若一个参数，返回这个参数在数组里面的索引值，如果参数不在操作的数组中，则返回 -1。
- 代码示例如下：
var arr = [1,2,3,4];
arr.indexOf(1) // 0
arr.indexOf(5) // -1
forEach（）
- 语法：array.forEach(function(currentValue, index, arr), thisValue)
- forEach( ) 方法：数组遍历，且只能够遍历数组，不接受返回值或返回值为 undefined。
- 如果数组只有长度没有初始化是不会迭代元素的
- 代码示例如下：
var arr = [1,2,3,4,5];
arr.forEach((item,index,arr)=>{
//item 为当前数组元素
// index 为当前索引
// arr 为数组名字
})
map（）
- 语法：array.map(function(currentValue,index,arr), thisValue)
- map( ) 方法：数组的遍历，用来接收一个返回值，创建一个新数组，不改变原数组。
- 代码示例如下：
var arr = [1,2,3,4,5,6];
arr.map(function(item,index,arr){
return item * 2
})
//输出 [2,4,6,8,10,12]
filter（）
- 语法：array.filter(function(currentValue,index,arr), thisValue)
- filter( ) 方法：过滤出一些符合条件的元素，返回一个新数组。
- 代码示例如下：
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
//返回数组 ages 中所有元素都大于 18 的元素:
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
//输出结果为：32,33,40
some（）
- 语法：array.some(function(currentValue,index,arr),thisValue)
- some( ) 方法：检测数组中是否含有某一个值，返回一个布尔值，如果数组中有任意一个元素满足给定的条件，结果就为 true否则则为false。
- 代码示例如下：
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
//输出结果为：true
every（）
- 语法：array.every(function(currentValue,index,arr), thisValue)
- every( ) 方法：方法用于检测数组所有元素是否都符合指定条件（通过函数提供）,返回一个布尔值,结果为 true或false。
- 代码示例如下：
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
//检测数组 ages 的所有元素是否都大于等于 18
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.every(checkAdult);
}
//输出结果为：false
reduce（）
- 语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
- reduce( ) 方法：对数组中的所有元素调用指定的回调函数，该回调函数的返回值为累计结果。并且把返回值在下一次回调函数时作为参数提供。
- 代码示例如下：
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
//计算数组相加的总和
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
//输出结果为：125
ES6新增的数组方法
Array.from( )
- 语法：Array.from(arrayLike[, mapFn[, thisArg]])
- Array.from( ) 方法：将类数组对象或可迭代对象转化为数组，比如arguments，js选择器找到dom集合和对象模拟的数组。
- 代码示例如下
// 参数为数组,返回与原数组一样的数组
console.log(Array.from([1, 2])); // [1, 2]
// 参数含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]
Array.of( )
- Array.of( ) 方法：数组创建，将参数中所有值作为元素形成数组，如果参数为空，则返回一个空数组。
- 代码示例如下：
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
// 参数值可为不同类型
console.log(Array.of(1, '2', true)); // [1, '2', true]
// 参数为空时返回空数组
console.log(Array.of()); // []
find( )
- find( ) 方法：查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。
- 代码示例如下：
let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 2)); // 3
// 数组空位处理为 undefined
console.log([, 1].find(n => true)); // undefined
findIndex( )
- 查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。
- 代码示例如下：
let arr = Array.of(1, 2, 1, 3);
// 参数1：回调函数
// 参数2(可选)：指定回调函数中的 this 值
console.log(arr.findIndex(item => item == 1)); // 0
// 数组空位处理为 undefined
console.log([, 1].findIndex(n => true)); //0
includes( )
- includes( ) 方法：检测数组中是否包含一个值。
- 注意：与 Set 和 Map 的 has 方法区分；Set 的 has 方法用于查找值；Map 的 has 方法用于查找键名。
- 代码示例如下：
// 参数1：包含的指定值
[1, 2, 3].includes(1); // true
// 参数2：可选，搜索的起始索引，默认为0
[1, 2, 3].includes(1, 2); // false
// NaN 的包含判断
[1, NaN, 3].includes(NaN); // true
fill( )
- fill( ) 方法：将一定范围索引的数组元素内容填充为单个指定的值。如果传入的是对象则每个元素都指向同一个元素
- 代码示例如下：
let arr = Array.of(1, 2, 3, 4);
// 参数1：用来填充的值
// 参数2：被填充的起始索引
// 参数3(可选)：被填充的结束索引，默认为数组末尾
console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]
entries( )
- entries( ) 方法：遍历键值对。
- 代码示例如下：
for(let [key, value] of ['a', 'b'].entries()){
console.log(key, value);
}
// 0 "a"
// 1 "b"
// 不使用 for... of 循环
let entries = ['a', 'b'].entries();
console.log(entries.next().value); // [0, "a"]
console.log(entries.next().value); // [1, "b"]
// 数组含空位
console.log([...[,'a'].entries()]); // [[0, undefined], [1, "a"]]
keys( )
- keys( ) 方法：遍历键名。
- 代码示例如下：
for(let key of ['a', 'b'].keys()){
console.log(key);
}
// 0
// 1
// 数组含空位
console.log([...[,'a'].keys()]); // [0, 1]
values( )
- values( ) 方法：遍历键值。
- 代码示例如下：
for(let value of ['a', 'b'].values()){
console.log(value);
}
// "a"
// "b"
// 数组含空位
console.log([...[,'a'].values()]); // [undefined, "a"]
flat( )
- 嵌套数组转一维数组
- 代码示例如下：
console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
// 指定转换的嵌套层数
console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]
// 不管嵌套多少层
console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]
// 自动跳过空位
console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]
at( )
- 接受一个整数作为参数，返回对应位置的成员，并支持负索引
- 代码示例如下：
console.log([1 ,2, 3].at(-1)); // 3
console.log([1 ,2, 3].at(1)); // 2
// 超出
console.log([1 ,2, 3].at(100)); //undefined
复制数组
- …：扩展运算符
- 代码示例如下：
let arr = [1, 2],
arr1 = [...arr];
console.log(arr1); // [1, 2]
// 数组含空位
let arr2 = [1, , 3],
arr3 = [...arr2];
console.log(arr3); [1, undefined, 3]
//合并数组
console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]
原文链接：https://www.cnblogs.com/ctxb/p/16424891.html
2 - 函数
2.1 函数的概念
在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。
函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
2.2 函数的使用
声明函数
// 声明函数
function 函数名() {
//函数体代码
}
-
function 是声明函数的关键字,必须小写
-
由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum
调用函数
// 调用函数
函数名(); // 通过调用函数名来执行函数体代码
-
调用的时候千万不要忘记添加小括号
-
口诀：函数不调用，自己不执行
注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。
函数的封装
-
函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
-
简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）
例子：封装计算1-100累加和
/* 计算1-100之间值的函数 */ // 声明函数 function getSum(){ var sumNum = 0;// 准备一个变量，保存数字和 for (var i = 1; i <= 100; i++) { sumNum += i;// 把每个数值 都累加 到变量中 } alert(sumNum); } // 调用函数 getSum();
2.3 函数的参数
函数参数语法
-
形参：函数定义时设置接收调用时传入
-
实参：函数调用时传入小括号内的真实数据
参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。
函数参数的运用：
// 带参数的函数声明 function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔 // 函数体 } // 带参数的函数调用 函数名(实参1, 实参2, 实参3...);- 调用的时候实参值是传递给形参的
- 形参简单理解为：不用声明的变量
- 实参和形参的多个参数之间用逗号（,）分隔
函数形参和实参数量不匹配时
注意：在JavaScript中，形参的默认值是undefined。
小结：
- 函数可以带参数也可以不带参数
- 声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
- 调用函数的时候，函数名括号里面的是实参
- 多个参数中间用逗号分隔
- 形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配
2.4 函数的返回值
return 语句
返回值：函数调用整体代表的数据；函数执行完成后可以通过return语句将指定数据返回 。
// 声明函数
function 函数名（）{
...
return 需要返回的值；
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值
-
在使用 return 语句时，函数会停止执行，并返回指定的值
-
如果函数没有 return ，返回的值是 undefined
//return的小细节 function fn() { return alert("1") } console.log(fn()) //求一个数字最大最小值 //求一个数字最大最小值 function getArrMaxAndMin(arr) { let max = arr[0] let min = arr[0] for (let i = 1; i < arr.length; i++) { if(max < arr[i]){ max = arr[i] } if(min > arr[i]){ min = arr[i] } } return [max,min] } let maxplus = getArrMaxAndMin([1,4,6,8,9]) console.log(maxplus) // 利用函数翻转任意数组 reverse 翻转 function reverse(arr) { var newArr = []; for (var i = arr.length - 1; i >= 0; i--) { newArr[newArr.length] = arr[i]; } return newArr; } var arr1 = reverse([1, 3, 4, 6, 9]); console.log(arr1); var arr2 = reverse(['red', 'pink', 'blue']); console.log(arr2);
break ,continue ,return 的区别
- break ：结束当前的循环体（如 for、while）
- continue ：跳出本次循环，继续执行下次循环（如 for、while）
- return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码
2.5 arguments的使用
当不确定有多少个参数传递的时候，可以用 arguments 来获取。JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
-
具有 length 属性
-
按索引方式储存数据
-
不具有数组的 push , pop 等方法
注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。
// arguments 的使用 只有函数才有 arguments对象 而且是每个函数都内置好了这个arguments
function fn() {
// console.log(arguments); // 里面存储了所有传递过来的实参 arguments = [1,2,3]
// console.log(arguments.length);
// console.log(arguments[2]);
// 我们可以按照数组的方式遍历arguments
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
fn(1, 2, 3);
fn(1, 2, 3, 4, 5);
// 伪数组 并不是真正意义上的数组
// 1. 具有数组的 length 属性
// 2. 按照索引的方式进行存储的
// 3. 它没有真正数组的一些方法 pop() push() 等等
2.6 函数案例
函数内部可以调用另一个函数，在同一作用域代码中，函数名即代表封装的操作，使用函数名加括号即可以将封装的操作执行。
function fn1() {
console.log(111);
fn2();
console.log('fn1');
}
function fn2() {
console.log(222);
console.log('fn2');
}
fn1();
//小技巧
//x ,y 可以看作两个函数内部的局部变量
//有参数传过来，则执行，实参赋值
//没有参数传过来，则执行 x，y=0
function fn(x = 0,y = 0) {
return(x+y)
}
console.log(fn()) //
console.log(fn(1,2));
2.7 函数的两种声明方式
-
自定义函数方式(命名函数)
利用函数关键字 function 自定义函数方式
// 声明定义方式 function fn() {...} // 调用 fn();- 因为有名字，所以也被称为命名函数
- 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面
-
函数表达式方式(匿名函数）
利用函数表达式方式的写法如下：
// 这是函数表达式写法，匿名函数后面跟分号结束 var fn = function(){...}； // 调用的方式，函数调用必须写到函数体下面 fn();- 因为函数没有名字，所以也被称为匿名函数
- 这个fn 里面存储的是一个函数
- 函数表达式方式原理跟声明变量方式是一致的
- 函数调用的代码必须写到函数体后面
JavaScript基础第05天笔记
1 - 作用域
1.1 作用域概述
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
JavaScript（es6前）中的作用域有两种：
- 全局作用域
- 局部作用域（函数作用域）
1.2 全局作用域
作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
1.3 局部作用域
作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。
1.4 JS没有块级作用域
-
块作用域由 { } 包括。
-
在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码：
java有块级作用域：
if(true){ int num = 123; system.out.print(num); // 123 } system.out.print(num); // 报错以上java代码会报错，是因为代码中 { } 即一块作用域，其中声明的变量 num，在 “{ }” 之外不能使用；
而与之类似的JavaScript代码，则不会报错：
Js中没有块级作用域（在ES6之前）
if(true){ var num = 123; console.log(123); //123 } console.log(123); //123
2 - 变量的作用域
在JavaScript中，根据作用域的不同，变量可以分为两种：
- 全局变量
- 局部变量
2.1 全局变量
在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。
- 全局变量在代码的任何位置都可以使用
- 在全局作用域下 var 声明的变量 是全局变量
- 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）
2.2 局部变量
在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
- 局部变量只能在该函数内部使用
- 在函数内部 var 声明的变量是局部变量
- 函数的形参实际上就是局部变量
2.3 全局变量和局部变量的区别
- 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
- 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间
3 - 作用域链
只要是代码都一个作用域中，写在函数内部的局部作用域，未写在任何函数内部即在全局作用域中；如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；根据在**[内部函数可以访问外部函数变量]**的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
案例分析1：
function f1() {
var num = 123;
function f2() {
console.log( num );
}
f2();
}
var num = 456;
f1();
作用域链：采取就近原则的方式来查找变量最终的值。
var a = 1;
function fn1() {
var a = 2;
var b = '22';
fn2();
function fn2() {
var a = 3;
fn3();
function fn3() {
var a = 4;
console.log(a); //a的值 ?
console.log(b); //b的值 ?
}
}
}
fn1();
4 - 预解析
4.1 预解析的相关概念
JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。
-
预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
-
代码执行： 从上到下执行JS语句。
预解析会把变量和函数的声明在代码执行之前执行完成。
4.2 变量预解析
预解析也叫做变量、函数提升。
变量提升（变量预解析）： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。
console.log(num); // 结果是多少？
var num = 10; // ？
结果：undefined
// 相当于执行了以下代码
// var num;
// console.log(num);
// num = 10;
注意：**变量提升只提升声明，不提升赋值**
4.3 函数预解析
函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。
fn();
function fn() {
console.log('打印');
}
结果：控制台打印字符串 ”打印“
注意：函数声明代表函数整体，所以函数提升后，函数名代表整个函数，但是函数并没有被调用！
4.4 函数表达式声明函数问题
函数表达式创建函数，会执行变量提升，此时接收函数的变量名无法正确的调用：
fn();
var fn = function() {
console.log('想不到吧');
}
结果：报错提示 ”fn is not a function"
解释：该段代码执行之前，会做变量声明提升，fn在提升之后的值是undefined；而fn调用是在fn被赋值为函数体之前，此时fn的值是undefined，所以无法正确调用
预解析案例
预解析：变量预解析、函数预解析
1 、JS引擎运行js 分为两步： 预解析 代码执行
(1) 、JS引擎会把 里面所有的 var function 提前到当前[作用域]的最前面
(2)、代码执行 按照代码书写的顺序 从上到下执行
2、预解析分为 变量预解析(变量提升) 和 函数预解析 (函数提升)
(1) 变量提升 所有的变量声明提升到当前作用域最前面 不提升赋值操作
(2) 函数提升 把所有的[函数声明]提升到当前作用域的最前面 不调用函数
<script>
//--------------------------------------------------
//eg 1 预解析案例---->仔细分析-----结果是：undefined
var num = num;
fun();
function fun() {
console.log(num);
var num=20
}
//相当于执行如下
var num; // 1、
function fun() { // 2、
console.log(num);
var num=20
}
num=10; // 3、
fun(); // 4、
var num // 5、
function fun(){
var num;
console.log(num); //此处的num 是当前函数作用域内的num ,运行此处只定义还未赋值
num=20;
}
num =10;
fun(); //最后结果undefined
//-------------------------------------------------------
//eg 2 预解析案例---->仔细分析-----结果是：undefined 20
var num=10;
function fn(){
console.log(num);
var num=20;
console.log(num);
}
fn();
//相当于执行如下
var num; // 1、
function fun() { // 2、
console.log(num);
var num=20;
console.log(num)
}
num=10; // 3、
fn(); // 4、
var num // 5、
function fun(){
var num;
console.log(num); //此处的num 是当前函数作用域内的num ,运行此处只定义还未赋值 即undefined
num=20;
console.log(num); //此处 num 是当前作用域内num=20 ,即 20
}
num =10;
fun();
//------------------------------------------------------
//eg 3 预解析案例---->仔细分析-----结果是：undefined 9
var a=18;
f1();
function f1(){
var b=9;
console.log(a);
console.log(b);
var a='123';
}
//相当于执行如下
var a; // 1、
function f1(){ // 2、
var b=9;
console.log(a);
console.log(b);
var a='123';
}
a=18; // 3、
f1(); // 4、
var a; // 5、
function f1(){
var b;
var a;
b=9;
console.log(a); //此处 a 只声明未定义 即undefined
console.log(b); //此处 b=9 即 9
a='123';
}
a=18;
f1();
//-----------------------------------------------------
//eg 4 预解析案例---->仔细分析-----结果是： 9 9 9 9 9 undefined
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a=b=c=9;
console.log(a);
console.log(b);
console.log(c);
}
//相当于执行如下
function f1() { // 1、
var a=b=c=9; //这里var a=9,b=9,c=9 其中只有 a 声明了 b、c 并没有声明(b、c当全局变量)
console.log(a);
console.log(b);
console.log(c);
}
f1() // 2、
console.log(c); // 3、
console.log(b); // 4、
console.log(a); // 5、
function f1() { // 6、
var a;
a=9;
b=9;
c=9;
console.log(a);
console.log(b);
console.log(c);
}
f1()
console.log(c);
console.log(b);
console.log(a);
</script>
注意：
（1）函数表达式不会被提升
下面的例子执行时会报错
<script type="text/javascript"> f1(); var f1 = function(){ console.log('函数表达式'); } </script>错误如下：
。错误提示是f1不是一个函数。
为什么这里的f1没有被提升呢？因为f1是个函数表达式。
如果深究，f1也被提升了，但是它没有被当成函数提升，而是当成变量了。因为这个时候f1是通过var声明的变量，只不过它指向了一个函数对象。所以它提升过后的结果等价于如下带代码
<script type="text/javascript"> var f1; f1(); f1 = function(){ console.log('函数表达式'); } </script>这里f1被当成变量提升的，而f1又没有赋初值，所以f1在调用的时候还是undefined，那当然会报错了。
（2）预解析不会跨越代码块。函数和变量的提升，只在自己所在的块之内提升。
扩展
//扩展-1 function f() {} var f; console.log(f); //上述代码：解析过程 function f() {} //第一步：预解析整个函数 var f; //第二步：预解析 console.log(f); //第三步：打印结果-->function f() {} 原因：预解析时，当变量和函数同名时，优先留下函数的值（不管谁前或后，函数优先级更高）//例3 var f = function() { console.log(1) } function f() { console.log(2) } f(); //上述代码：解析过程 var f; //第一步：预解析 function f() { console.log(2)} //第二步：预解析--f整个函数 f = function() { console.log(1)}//第三步：f赋值整个函数 f(); //第四步：执行函数f-->输出1//例5 f(); var f = function(){ console.log('k') } //上述代码：解析过程 var f; //第一步：预解析 f(); //第二步：执行f函数，报错 f = function(){ console.log('k')} //第三步：f赋值整个函数 f(); function f(){ console.log('k') } //上述代码：解析过程 function f(){console.log('k')} //第一步：预解析 f(); //第二步：执行f函数，报错 原因：调用一个未赋值的函数，当然会报错， 注意：这个例子，将函数表达式换成函数声明就不会报错了，因为函数声明会提升，这也是我们常用函数声明的一个原因，可以在任何位置调用。//例6 var num = 2; function f() { num = 1; console.log(num) return var num = 3; } f(); console.log(num); //上述代码：解析过程 var num; //第一步：预解析 function f() { //第二步：预解析--f整个函数 //解析过程 var num; //此处提升的变量是return后面的 num = 1; //num赋值 console.log(num) //执行时，会输出1 return //后面的代码不会执行 num = 3; } num = 2; //第三步：num赋值 f(); //第四步：执行f函数-->输出1 console.log(num); //第五步：输出结果-->2 说明：return后面的语句虽然不会执行，但是变量还是会提升，所以f函数执行时，会输出1
5 - 对象
5.1 对象的相关概念
-
什么是对象？
在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的。-
属性：事物的特征，在对象中用属性来表示（常用名词）
-
方法：事物的行为，在对象中用方法来表示（常用动词）
-
-
为什么需要对象？
保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。
如果要保存一个人的完整信息呢？
例如，将“张三疯”的个人的信息保存在数组中的方式为：
var arr = [‘张三疯’, ‘男', 128,154];上述例子中用数组保存数据的缺点是：数据只能通过索引值访问，开发者需要清晰的清除所有的数据的排行才能准确地获取数据，而当数据量庞大时，不可能做到记忆所有数据的索引值。
为了让更好地存储一组数据，对象应运而生：对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。
使用对象记录上组数据为：
var obj = { "name":"张三疯", "sex":"男", "age":128, "height":154 }JS中的对象表达结构更清晰，更强大。
5.2 创建对象的三种方式
-
1.利用字面量创建对象
使用对象字面量创建对象：
就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示-
键：相当于属性名
-
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）
代码如下：
var star = { name : 'pink', age : 18, sex : '男', sayHi : function(){ alert('大家好啊~'); } };上述代码中 star即是创建的对象。
-
-
对象的使用
-
对象的属性
- 对象中存储具体数据的 "键值对"中的 "键"称为对象的属性，即对象中存储具体数据的项
-
对象的方法
- 对象中存储函数的 "键值对"中的 "键"称为对象的方法，即对象中存储函数的项
-
访问对象的属性
-
对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ”
-
对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号
示例代码如下：
console.log(star.name) // 调用名字属性 console.log(star['name']) // 调用名字属性
-
-
调用对象的方法
-
对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号
示例代码如下：
star.sayHi(); // 调用 sayHi 方法,注意，一定不要忘记带后面的括号
-
-
变量、属性、函数、方法总结
属性是对象的一部分，而变量不是对象的一部分，变量是单独存储数据的容器 -
变量：单独声明赋值，单独存在
-
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
方法是对象的一部分，函数不是对象的一部分，函数是单独封装操作的容器
-
函数：单独存在的，通过“函数名()”的方式就可以调用
-
方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。
-
-
2.利用 new Object 创建对象
-
创建空对象
var andy = new Obect();通过内置构造函数Object创建对象，此时andy变量已经保存了创建出来的空对象
-
给空对象添加属性和方法
-
通过对象操作属性和方法的方式，来为对象增加属性和方法
示例代码如下：
andy.name = 'pink'; andy.age = 18; andy.sex = '男'; andy.sayHi = function(){ alert('大家好啊~'); }注意：
- Object() ：第一个字母大写
- new Object() ：需要 new 关键字
- 使用的格式：对象.属性 = 值;
-
-
-
3.利用构造函数创建对象
-
构造函数
-
构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
-
构造函数的封装格式：
function 构造函数名(形参1,形参2,形参3) { this.属性名1 = 参数1; this.属性名2 = 参数2; this.属性名3 = 参数3; this.方法名 = 函数体; } -
构造函数的调用格式
var obj = new 构造函数名(实参1，实参2，实参3)以上代码中，obj即接收到构造函数创建出来的对象。
-
注意事项
- 构造函数约定首字母大写。
- 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
- 构造函数中不需要 return 返回结果。
- 当我们创建对象的时候，必须用 new 来调用构造函数。
-
其他
构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化
-
-
-
new关键字的作用
- 在构造函数代码开始执行之前，创建一个空对象；
- 修改this的指向，把this指向创建出来的空对象；
- 执行函数的代码
- 在函数完成之后，返回this---即创建出来的对象
5.3 遍历对象
for...in 语句用于对数组或者对象的属性进行循环操作。
其语法如下：
for (变量 in 对象名字) { // 在此执行代码 }语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。
for (var k in obj) { console.log(k); // 这里的 k 是属性名 console.log(obj[k]); // 这里的 obj[k] 是属性值 }
JavaScript基础第06天笔记
1 - 内置对象
1.1 内置对象
JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发
JavaScript 提供了多个内置对象：Math、 Date 、Array、String等
1.2 查文档
查找文档：学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN:https://developer.mozilla.org/zh-CN/
1.3 Math对象
Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。
| 属性、方法名 | 功能 |
|---|---|
| Math.PI | 圆周率 |
| Math.floor() | 向下取整 |
| Math.ceil() | 向上取整 |
| Math.round() | 四舍五入版 就近取整 注意 -3.5 结果是 -3 |
| Math.abs() | 绝对值 |
| Math.max()/Math.min() | 求最大和最小值 |
| Math.random() | 获取范围在[0,1)内的随机值 |
注意：上面的方法使用时必须带括号
获取指定范围内的随机整数：
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
1.4 日期对象
Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间
-
使用Date实例化日期对象
- 获取当前时间必须实例化：
var now = new Date();- 获取指定时间的日期对象
var future = new Date('2019/5/1');注意：如果创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象
-
使用Date实例的方法和属性
-
通过Date实例获取总毫米数
-
总毫秒数的含义
基于1970年1月1日（世界标准时间）起的毫秒数
-
获取总毫秒数
// 实例化Date对象 var now = new Date(); // 1. 用于获取对象的原始值 console.log(date.valueOf()) console.log(date.getTime()) // 2. 简单写可以这么做 var now = + new Date(); // 3. HTML5中提供的方法，有兼容性问题 var now = Date.now();
-
1.5 数组对象
创建数组的两种方式
-
字面量方式
-
示例代码如下：
var arr = [1,"test",true];
-
-
new Array()
-
示例代码如下：
var arr = new Array(); 注意：上面代码中arr创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数
参数传递规则如下：
-
如果只传入一个参数，则参数规定了数组的长度
-
如果传入了多个参数，则参数称为数组的元素
-
-
检测是否为数组
-
instanceof 运算符
-
instanceof 可以判断一个对象是否是某个构造函数的实例
var arr = [1, 23]; var obj = {}; console.log(arr instanceof Array); // true console.log(obj instanceof Array); // false
-
-
Array.isArray()
-
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法
var arr = [1, 23]; var obj = {}; console.log(Array.isArray(arr)); // true console.log(Array.isArray(obj)); // false
-
添加删除数组元素的方法
-
数组中有进行增加、删除元素的方法，部分方法如下表
注意：push、unshift为增加元素方法；pop、shift为删除元素的方法
数组排序
-
数组中有对数组本身排序的方法，部分方法如下表
注意：sort方法需要传入参数来设置升序、降序排序
- 如果传入“function(a,b){ return a-b;}”，则为升序
- 如果传入“function(a,b){ return b-a;}”，则为降序
数组索引方法
-
数组中有获取数组指定元素索引值的方法，部分方法如下表
数组转换为字符串
-
数组中有把数组转化为字符串的方法，部分方法如下表
注意：join方法如果不传入参数，则按照 “ , ”拼接元素
其他方法
-
数组中还有其他操作方法，同学们可以在课下自行查阅学习
1.6 字符串对象
基本包装类型
为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
// 下面代码有什么问题？
var str = 'andy';
console.log(str.length);
按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为
js 会把基本数据类型包装为复杂数据类型，其执行过程如下 ：
// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;
字符串的不可变
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。
由于字符串的不可变，在大量拼接字符串的时候会有效率问题
根据字符返回位置
字符串通过基本包装类型可以调用部分方法来操作字符串，以下是返回指定字符的位置的方法：
案例：查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
- 先查找第一个o出现的位置
- 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
- 因为indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找
根据位置返回字符
字符串通过基本包装类型可以调用部分方法来操作字符串，以下是根据位置返回指定位置上的字符：
在上述方法中，charCodeAt方法返回的是指定位置上字符对应的ASCII码，ASCII码对照表如下：
案例：判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数
-
核心算法：利用 charAt(） 遍历这个字符串
-
把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
-
遍历对象，得到最大值和该字符
注意：在遍历的过程中，把字符串中的每个字符作为对象的属性存储在对象总，对应的属性值是该字符出现的次数
字符串操作方法
字符串通过基本包装类型可以调用部分方法来操作字符串，以下是部分操作方法：
replace()方法
replace() 方法用于在字符串中用一些字符替换另一些字符，其使用格式如下：
字符串.replace(被替换的字符串， 要替换为的字符串)；
split()方法
split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
其使用格式如下：
字符串.split("分割字符")
2 - 简单数据类型和复杂数据类型
2.1 简单数据类型
简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null
2.2 复杂数据类型
复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；
2.3 堆栈
- 堆栈空间分配区别：
1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
简单数据类型存放到栈里面
2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
-
简单数据类型的存储方式
值类型变量的数据直接存放在变量（栈空间）中
-
复杂数据类型的存储方式
引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中
)
2.4 简单类型传参
函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。
function fn(a) {
a++;
console.log(a);
}
var x = 10;
fn(x);
console.log(x)；
运行结果如下：
2.5 复杂数据类型传参
函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。
function Person(name) {
this.name = name;
}
function f1(x) { // x = p
console.log(x.name); // 2. 这个输出什么 ?
x.name = "张学友";
console.log(x.name); // 3. 这个输出什么 ?
}
var p = new Person("刘德华");
console.log(p.name); // 1. 这个输出什么 ?
f1(p);
console.log(p.name); // 4. 这个输出什么 ?
运行结果如下：
