1.概念

现实生活：对象就是东西，是一个具体的事物。万物皆对象

程序角度: 对象是一组无序的数据的集合。包含属性与方法

2.对象的创建

方式1：字面量

var person = {
name:"jack",
age:18,
sex:'男',
showFilm:function(){
console.log("I can showFilm");
},
liaoMei:function(){
return "I can liaoMei"
}
}

//属性输入打印
console.log(person.name); //jack
//关联数组的写法
console.log(person['age']); //18
//如果属性不加引号就是变量名
var gender = 'sex'
console.log(person[gender]); //男

//方法调用
person.showFilm()
//方法调用关联数组写法
var res = person['liaoMei']()
console.log(res)

方式2: new Object()

var obj = new Object() //相当于创建了一个空的对象 var obj = {}

//对象的动态特性
obj.name = "小明";
obj.age = 21;
obj.type = "海王"
obj.dance = function(){
console.log("I can dance")
}

// 属性输入
console.log(obj.name)
console.log(obj['type'])
// 方法调用
obj.dance()
obj['dance']()

方式3：构造函数

以上的两种方式都只能创建一个对象，如何多次创建对象呢？批量的生产对象

工厂函数:

function person(name,age,gender){
var obj = {};
obj.name = name;
obj.age = age;
obj.gender = gender;
return obj
}

var p1 = person('jack',18,"男")
console.log(p1);
var p2 = person('rose',21,"女")
console.log(p2);

构造函数:

function Mario(name,color,height){ //模板模具类class
this.name = name
this.color = color
this.height = height
this.smallJump = function(){
console.log("smallJupm");
}
this.bigJump = function(){
console.log("bigJupm");
}
this.attack = function(){
console.log("attack");
}
}

var m1 = new Mario("redMario",'red',"100cm") // new构造函数的过程也叫实例化
console.log(m1);
var m2 = new Mario("greenMario",'green',"100cm")
console.log(m2);

//m1,m2可以称为实例

构造函数的注意事项：

1.构造函数的函数首字母一般建议大写

2.构造函数的返回值如果没有写return 默认返回this

3.构造函数调用时前面要用关键词 new

new关键词执行的过程

1.在内存中开辟了一个空间

2.this变量指向了这个空间

3.进入函数体执行代码

4.有一个看不见的return this

3.对象的遍历 for...in

var obj = {
name: "jack",
age: 18,
gender: "male",
fn:function(){}
}

for(var k in obj){
console.log(k)
console.log(obj[k])
console.log(k,obj[key]);
}

六.内置对象

学习内置对象： Math 数学 Date 日期 String字符串 Array 数组

怎么学：多写，多记方法名，后期多练

Math 数学

属性：Math.PI

方法：

//1.最大值
Math.max(1,2,4,9) //9

//Math.max() 不能求数组的最大值
Math.max([3,65,76,2,9]) //NaN
//求数组的最大值解决方案，后期学
Math.max.apply(null,[3,65,76,2,9]) //76
Math.max(...[3,65,76,2,9]) //76

//2.求绝对值
Math.abs(-1) //1
Math.abs(1) //1
//3.向下取整
Math.floor(1.3) //1
Math.floor(1.9) //1
//4.向上取整
Math.ceil(1.2) //2
Math.ceil(1.9) //2
//5.四舍五入
Math.round(1.1) //1
Math.round(1.8) //2
Math.round(-1.1) //1
Math.round(-1.5) //1 负数时, .5往大了取整

//6.取随机数 [0,1) 从0到1,包括0，不包括1
Math.random()
//获取两个数之间的整数，包括两个整数的算法
Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值

Date 日期

var date = new Date() //获取当天时间对象
var date = new Date('2021-4-17') //取参数时间对象
//date不好用

date.getFullYear() //年
date.getMonth()+1 //月份注意date.getMonth()要加1才能得到正确的月份
date.getDate() //日期
date.getDay() //星期几注意date.getDay()得到的值是[0-6] 星期日是0

date.getHours() //时
date.getMinutes() //分
date.getSeconds() //秒

时间戳：

解释：从1970年1月1日到一个时间点经过了多少毫秒

//方式1：valueOf getTime
var date = new Date() //从1970年1月1日到现在经过了多少毫秒
cosole.log(date.valueOf())
console.log(date.getTime())

//方式2： +new Date
var date = +new Date('2000-01-01') //从1970年1月1日到 '2000-01-01' 经过了多少毫秒
console.log(date)

//方式3： Date.now() //从1970年1月1日到现在经过了多少毫秒
var date = Date.now()
console.log(date)

//案例:计算从你出生到现在活了多少天?
var nowTime = Date.now()
var birthTime = +new Date('2001-3-20')

var time = Math.ceil((nowTime-birthTime)/1000/60/60/24)
console.log(time);

//案例：倒计时效果
function countDown(time) {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var inputTime = +new Date(time); // 返回的是用户输入未来时间的总毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var d = parseInt(times / 60 / 60 / 24); // 天
var h = parseInt(times / 60 / 60 % 24); //时
var m = parseInt(times / 60 % 60); // 分
var s = parseInt(times % 60); // 当前的秒

return d + '天' + h + '时' + m + '分' + s + '秒';
}

Array数组

1.数组类型检测

var arr = [1,2,3]
console.log(typeof arr); //object

//arr 是否是 Array的实例
var arr = new Array()
console.log(arr instanceof Array); //true
console.log(Array.isArray(arr)); //true

2.数组元素的添加与删除

//push 在数组的后面添加元素
1.修改了原数组
2.参数：追加的元素
2.返回值：是追加后数组的长度
var arr= [1,2,3]
arr.push(4,5) //返回值是5 原数组变成了[1,2,3,4,5]
arr.push([4,5]) //返回值是4 原数组变成了[1,2,3,[4,5]]

//unshift 在数组的前面追加元素
1.修改了原数组
2.参数：追加的元素
2.返回值：是追加后数组的长度
var arr= [1,2,3]
arr.unshift(4,5) //返回值是5 原数组变成了[4,5,1,2,3]

//pop 删除数组的最后一个元素
1.修改了原数组
2.参数：无
2.返回值：删除的那个元素
var arr= [1,2,3]
arr.pop() //返回值是3 原数组变成了[1,2]

//shift 删除数组的第一个元素
1.修改了原数组
2.参数：无
2.返回值：删除的那个元素
var arr= [1,2,3]
arr.shift() //返回值是1 原数组变成了[2,3]

3.数组的反转

//数组.reverse() 反转数组

var arr = [1,2,3,4]
arr.reverse()
console.log(arr) //[4,3,2,1]

4.数组的排序

//数组.sort() 数组排序
var arr = [4,2,8,12,9]

arr.sort(function(a,b){
return a - b //数组升序
})
console.log(arr) //[2,4,8,9,12]

arr.sort(function(a,b){
return a -b //数组降序
})
console.log(arr) //[12，9，8，4，2]

5.数组的索引

//根据元素找下标 indexOf() lastIndexOf()
//indexOf() 从数组的左边向右边找，找到一个就马上返回下标没有找到返回-1
//lastIndexOf() 从数组的右边向左边找，找到一个就马上返回下标没有找到返回-1

var arr = [1,2,3,4,5,3]
console.log(arr.indexOf(3)) //2
console.log(arr.indexOf(8)) //-1

console.log(arr.lastIndexOf(3)) //5
console.log(arr.indexOf(7)) //-1

//案例数组去重
//方案1
var arr = [1,2,3,'a',"b",2,"c","a"]
var newArr = []
for(var i=0; i<arr.length; i++){
if(newArr.indexOf(arr[i])===-1){
newArr.push(arr[i])
}
}
console.log(newArr)

//方案2 暂时了解可以关注数组的includes方法
var arr = [1,2,3,'a',"b",2,"c","a"]
var newArr = []
for(var i=0; i<arr.length; i++){
if(!newArr.includes(arr[i])){
newArr.push(arr[i])
}
}
console.log(newArr)

//方案3 暂时了解可以关注数组的reduce方法
var arr = [1,2,3,'a',"b",2,"c","a"]
var newArr = arr.reduce(function(acc,value,index){
if(!acc.includes(value)){
acc.push(value)
}
return acc
},[])
console.log(newArr)

6.数组转换为字符串

//数组.join()
var arr =[1,2,3]
var str = arr.join()
console.log(str) //1,2,3

var str = arr.join("&")
console.log(str) //1&2&3

7.数组合并

//数组.concat()
var arr = [1,2,3];
var newArr = arr.concat([4,5,6]);
console.log(arr); //没有修改原数组
console.log(newArr); //[1,2,3,4,5,6]

8.数组的截取

//数组.slice(start,end)
var arr = ['red','blue','yellow','pink','purple'];
var newArr = arr.slice(1,3);
console.log(newArr); //['blue','yellow']
console.log(arr); //没有修改原数组

//数组.splice(start,count)
var arr = ['red','blue','yellow','pink','purple'];
var newArr = arr.splice(1,3);
console.log(newArr); //['blue','yellow','pink']
console.log(arr); //原数组修改了，截取后剩下的元素

//面试题
var arr = ["小名",'小虎',"小龙","小泽","xiaosa"]; //=> [["小名",'小虎',"小龙"],["小泽","xiaosa"]]
var newArr = []
while (true) {
if (arr.length === 0) {
break
}
newArr.push(arr.splice(0, 3))
}

console.log(newArr);

String字符串

1.根据字符找索引

//str.indexOf() 从左向右根据字符找索引，如果没有找到就返回-1
//str.lastIndexOf() 从右向左根据字符找索引，如果没有找到就返回-1

2.根据索引找字符

//str.charAt(索引)

//求字符串'abcaba'出现次数最多的字符及次数
// 'abcaba' => (a 3)
// 第一步：'abcaba' => {a:3,b:2,c:1}
// 第二步：{a:3,b:2,c:1} => a 3
var str = "abcaba"
var obj = {}
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) in obj) {
obj[str.charAt(i)]++ //obj.a++ num++
} else {
obj[str.charAt(i)] = 1 //{a:1,b:1,c:1}
}
}
// console.log(obj);
var char = null
var max = 0

for (var k in obj) { //{a:3,b:2,c:1}
if (obj[k] > max) {
max = obj[k]
char = k;
}
}

console.log(`出现次数最多的字符是${char},次数是${max}`);

3.截取

// 字符串.substr(start,length)
var str = "小明，你在哪里？"
var str1 = str.substr(0,2)
console.log(str1); //小明

//字符串.substring(start,end)
var str = "小明,你在哪里？"
var str2 = str.substring(0,3)
console.log(str2); //小明,

4.替换

//字符串.replace(原字符|正则表达式,要替换的字符)

var str = "我爱武汉热干面和豆浆们";
var str1 = str.replace("热干面","炸酱面")
var str2 = str.replace(/热干面/g,"炸酱面") //正则表达式可以实现全部替换
console.log(str1); //我爱武汉热干面和豆浆
console.log(str2); //我爱武汉炸酱面和炸酱面们

5.分割

// 字符串.split(要分割的字符)
var str = "小苍×刘虎×小泽"
var arr = str.split("×")
console.log(arr); //["小苍", "刘虎", "小泽"]

6.大小写转换

//字符串.toUpperCase()
var str = "Hello World"
var upper = str.toUpperCase()
console.log(upper); //HELLO WORLD

//字符串.toUpperCase()
var str = "Hello World"
var lower = str.toLowerCase()
console.log(lower); //hello world

七.数据类型为什么分为值类型和引用类型

值类型：变量中存的是值本身

引用类型：变量中存的是地址

//练习
console.log(123===123) //true
console.log({}==={}) //false
console.log([]===[]) //false
console.log(function(){} ===function(){}) //false

//基本数据类型赋值操作传的值
//修改了其中的一个，另一个不变
var a = 100
var b = a
a=1000;
console.log(b) // 100

//复杂数据类型赋值操作传的地址
//修改了其中的一个，另一个也会变
var arr1 = [1,2,3]
var arr2 = arr1
arr1[1]=20;
console.log(b) //[1,20,3]

//案例
var c;
var changStuff = function (a,b,c){
   a = a*10;
   b.item = "changed";
   c = {item:"changed"};
}
var num = 10;
var obj1 = {item:"unchanged"};
var obj2 = {item:"unchanged"};

changStuff(num,obj1,obj2);
console.log(num); //10
console.log(obj1.item); //changed
console.log(obj2.item); //unchanged
console.log(c); //undefined

八.预解析

预解析：代码执行分为两个步骤：预解析阶段和执行阶段

预解析相当于是对代码的扫描

关注两个关键词： var 与 function (这个function不是匿名函数的function，而是声明式的function)

1.var 变量名

判断当前内存作用域中是否存在变量

a.如果不存在，在内存中开辟空间变量名指向该空间，这个空间此时的值是undefined

b.如果存在，忽略，不再在内存中开辟空间了。

2.function 函数名

判断当前内存作用域中是否存在函数名

a.如果不存在，在内存中开辟空间函数名指向该空间，并且这个空间保存的是函数体的地址

b.如果存在，在内存中不开辟空间但是这个空间也会指向函数体的地址

3.函数调用时，进入函数体内也会在函数内作用域进行预解析

//练习1
console.log(a); //undefined
var a = 8;
function fn() {
console.log(a); //undefined
var a = 15;
}
fn();
console.log(a); //8

// 练习2
console.log(a); //undefined
var a = 8;
function fn() {
console.log(a); //8
a = 15;
}
fn();
console.log(a); //15

// 练习3 预解析时，只有函数的{}才能限定作用域
var a = true;
function fn() {
if (!a) {
var a = 10;
}
console.log(a); //10
}
fn();

// 练习4
var num = 123;
function f1() {
console.log(num);
}
function f2() {
console.log(num);
var num = 456;
f1();
console.log(num);
}
f2();

// 练习5
var num = 123;
function f1() {
console.log(num);
}
function f2() {
console.log(num);
num = 456;
f1();
console.log(num);
}
f2();

// 练习6 预解析时，函数有参数时是预解析在前还是参数赋值在前？答：赋值在前
function fn(a) { //var a = 100
console.log(a);
var a = 10;
console.log(a);
}
fn(100);

// 练习7 当变量名与函数名冲突时
function fn(a) { // var a = 100
console.log(a);
var a = 10;
console.log(a);
function a() {
console.log(a);
}
a();
}
fn(100);

JS基础 -- 大复习(阶段六:对象和内置对象及预解析)相关推荐

JS基础 -- 大复习(阶段一)
一:编程基础编程语言(了解) 编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 从事编程的人员:就是我们程序员(程序猿)计算机是指任何能够执行代码的设备:A ...
JS基础 -- 大复习(阶段二)
数据类型转换数据类型转换:就是把一种数据类型的变量转换成另外一种数据类型. 显示转换:程序员利用一些JS给我们提供的工具函数进行数据类型的转换隐式转换:程序在运行的过程中,根据上下文的环境将变量的 ...
【 js基础 Day4】面向过程，面向对象，自定义对象，内置对象
01 复习函数:把一些重复的代码封装在一个地方,在需要的时候直接调用这个地方的代码就可以了函数作用:代码重用函数的参数: 1.形参:函数定义的时候,函数名字后面的小括号里的变量 2.实参:函数调 ...
JavaScript内置对象（内置对象、查文档（MDN）、Math对象、日期对象、数组对象、字符串对象）
目录 JavaScript内置对象内置对象查文档 MDN Math对象 Math概述案例一:封装自己的对象随机数方法 random() 案例一:猜数字游戏日期对象 Date 概述 Date( ...
JavaScript中本地对象、内置对象和宿主对象
http://www.jianshu.com/p/a52e6e183427 http://blog.csdn.net/weiyastory/article/details/52837466 http: ...
JS的对象与内置对象详细介绍
感谢内容提供者:金牛区吴迪软件开发工作室文章目录前言一.基本对象Object: 二.内置对象之Array: 三.内置对象之Math: 四.内置对象之Number: 五.内置对象之String: ...
JavaScript对象与内置对象——内置对象（二）
内置对象 JavaScript中的对象分为3种:自定义对象.内置对象,浏览器对象前两种对象是js基础内容,属于ECMAScript;的三个浏览器对象属于我们JS独有的. JavaScript提供多个 ...
JavaScript 的自定义对象、内置对象、浏览器对象(window对象以及子对象)、Dom对象
JS 中的 Object从本质上看,Object 是一个构造函数,用于创建对象. console.dir(Object); //ƒ Object() var obj = new Object(1); ...
javascript对象分类（原生对象，内置对象）
<!-- javascript对象分类 javascript的对象大致可以分为以下几种: --原生对象:又名本地对象.native object.独立于宿主环境的ECMAScript实现提供的对 ...

JS基础 -- 大复习(阶段六:对象和内置对象及预解析)

1.概念

2.对象的创建

方式1：字面量

方式2: new Object()

方式3：构造函数

构造函数的注意事项：

3.对象的遍历 for...in

六.内置对象

Math 数学

Date 日期

Array数组

String字符串

七.数据类型为什么分为值类型和引用类型

八.预解析

JS基础 -- 大复习(阶段六:对象和内置对象及预解析)相关推荐

最新文章

热门文章

JS基础 -- 大复习(阶段六:对象和内置对象及预解析)

1.概念

2.对象的创建

方式1：字面量

方式2: new Object()

方式3： 构造函数

构造函数的注意事项：

3.对象的遍历 for...in

六.内置对象

Math 数学

Date 日期

Array数组

String字符串

七.数据类型为什么分为值类型和引用类型

八.预解析

JS基础 -- 大复习(阶段六:对象和内置对象及预解析)相关推荐

最新文章

热门文章

方式3：构造函数