js基础总结---内容较多,喜欢的点个赞

javascript的组成(3部分)

  • ECMAScript : ES5 ES6 用于对语法的一种规范
  • DOM: 对元素或样式的操作
  • BOM: 对浏览器进行操作

输入框的介绍(promopt confirm)

  • 类属于python中的 input输入,但是在js中是在浏览器中挑出输入框
    1 prompt(‘请输入你输入的内容’) -----------作用:用于输入文本

    通过 = 来赋值; var num = parseInt(prompt(‘输入的字符串数字’))

    如果点击取消, 返回的num = null

    2 confirm(‘是男的吗?’) ------作用:用于判断是true还是false

变量

var num = 10;

  • var : 用于浏览器在内存中开辟一个空间
  • var num : 对开辟的空间命名
  • num = 10; 将内容存放到内存中去
  • 1.其实真正在运算的时候,使用的是内存的地址
  • 2.只能是数字 字母 下划线 $ 组成 且不能以数字开头!

简单知识点补充

i++ 与 ++i

  • i++先运行后加减

  • i++ 或者 ++i 能够进行隐式数据类型转换

    var num = 1;
    console.log(num++ + ++num);    //4
    console.log(num);              //3
    
    var num1 = 1;
    console.log(++num1 + num1++); //4
    console.log(num1);            //3  
    
    var num2 = 1;
    console.log(++num2 + ++num2);  //5
    console.log(num2);             //3
    
    var num3 = 1;
    console.log(num3++ + num3++);  // 3
    console.log(num3);             // 3
    

== 和 ===的区别

  • == 只关心值 1 == ‘1’ (true)
  • === 还关心数据类型

与或非

/*  都为真时取后者  */
console.log(111 && 222)   //结果: 222
console.log(0 && 222)   //结果: 0

/*  都为真时取前者  */

console.log(111 || 222)   //结果: 111
console.log(0 || 222)   //结果: 222

分支结构

  • switch(表达式的值一定是 === 的关系)
 var month = +prompt("请输入月份");
    switch (month){
        case 12:
        case 1:
        case 2:
            alert("冬季");
            break;
        case 3:
        case 4:
        case 5:
            alert("春季");
            break;
        case 6:
        case 7:
        case 8:
            alert("夏季");
            break;
        case 9:
        case 10:
        case 11:
            alert("秋季");
            break;
        default:
            alert("你来自火星吧?");
            break;
    }

调试

  • js在控制台报错只有两种可能
    1. 语法错误, (比如没有这个api 但是你却调用了, 或者缺少括号)
    2. 数据不识别 (好比打印一个没有定义的变量)

内置对象

Math内置对象

  • Math.abs() 绝对值

  • Math.ceil() 上取整

  • Math.floor() 下取整

  • Math.random() 取0-1的随机数

  • Math.round() 四舍五入

date事件对象

  • 使用必须先声明 var date = new Date() 必须为大写
 /*时间日期打印*/
    //2.打印当前完整时间:  (1)默认显示当前电脑的时区时间 (2)打印date时会自动转为字符串

    //1.打印当前年份
    console.log ( date.getFullYear () );//2018
    //2.打印当前月份  范围:0-11 代表 1-12月
    console.log ( date.getMonth () );//2 代表下标2  也就是3月
    //3.打印当前日
    console.log ( date.getDate () );//23
    //4.打印当前星期  范围0-6 代表星期天-星期六
    console.log ( date.getDay () );//5
    //5.打印时
    console.log ( date.getHours () );
    //6.打印分
    console.log ( date.getMinutes () );
    //7.打印秒
    console.log ( date.getSeconds () );

    /**创建自定义日期*/
    var date1 = new Date(2020,0,1,12,3,5);//依次传入 年,月,日,时,分,秒
    console.log ( date1 );//Wed Jan 01 2020 12:03:05 GMT+0800 (中国标准时间)
    var date2 = new Date("2022-05-06 12:03:35");
    console.log ( date2 );//Fri May 06 2022 12:03:35 GMT+0800 (中国标准时间)
</script>

数据类型

隐式类型转换

数字 (+ - * %) 字符串
  • 10 + ‘10’ ==== > 10 + Number(‘10’) ==== > 20
  • 10 + ‘10px’ === > 10 + Number(‘10px’) ==== > 10 + NAN ==== > NAN
    • 注意点 : 并不是用parseInt()来包裹字符串,而是用Number来包裹

数据类型4种判断方法

typeOf — 数字/ 字符串/布尔/函数 (不推荐)
// 只可以判断 字数 布尔类型  字符串( 简单的判断方法 )    不推荐
console.log(typeof 1);              //number
console.log(typeof '你好');          //string
console.log(typeof true);            //boolean
console.log(typeof [1,2,3]);            //object    判断数组或者对象的时候,直接返回的是O
Object.prototype.toString.call() --所有
// 可以判断所有!!!!!
Object.prototype.toString.call('');   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局对象 global 的引用
instanceof – 判断原型链上…
// A instanceof B
// 是用来判断 A 是否为 B 的实例
let  arr = [1,2,2,11,55,44,33,77,44,22,66,33,55,878,33];
arr instanceof Array; // true
判断注意事项
  • **typeof 只能作用: 数字, 字符串, 布尔类型

数值

最大最小值

  • 最大值 : Number.MAX_VALUE
  • 最小值 : Number.MIN_VALUE

toFixed()

  • 作用保留小数点几位数
let num = 12.256;
console.log(num.toFixed(2));  //12.26

NAN

  • NAN : not a number

  • 是一个特殊值: 代表一个 **非数值 ** 用来表示错误的数学计算结果

    数字和字符串科学计算 或者NAN和任何数字计算 或者判断NAN个任何数字判断是否相等(包括NAN本身) 结果都是NAN

  • isNAN(num) 来判断是否是NAN

    let  num = 10;
    console.log( isNaN(num) )   //flase
    

数据类型转换(转数字)

  • Number parseInt parseFloat
  • parseInt
    • parseInt(‘9.1’) ==> 9
    • parseInt(‘abc’) ==> NAN
    • parseInt(‘9anb’) ==> 9
    • parseInt(‘100 200 a’) ==> 100
    • parseInt(’ 99’) {有空格} ==> 99
    • 和parseFloat的区别仅仅是 9与9.1的区别
  • 字符串之间的加减乘除,一个数字一个字符串时,自动会用String()去包裹字符串.

布尔

  • 0, -0, NaN, ‘’, null, undefined, document.all 等7种全部转换成 false

字符串

转义符

  • 通过 \ 来转义 \t 空格

数据类型转换(转字符串)

1. String(num)
2. num.toString()
  • 直接常量 / null / undefined 不能直接toString()
 111.toString()       //报错    会默认当成小数
null.toString()           //报错  null的原型链上没有这个方法
undefined.toString()       //报错   underfined不是对象更没有原型链
3. + 号连接
let str = 112 + '你好!'

字符串恒定性

  • 字符串是不可以被修改的 (也就是不能类似于数组的下标修改)
  • 在内存中有一个专门的地方(字符串常量区)存储字符串
    1. 通过变量赋值新的字符串 那么先会在字符串常量区去找,如果有这个字符串则加载速度变快,如果没有这个字符串,那么会开辟一段新的内存空间来存储. 并且旧的字符串并不会删除,会保存在字符串常量区中,下次有新的变量赋值这个字符串的时候,会直接找到这个旧的字符串,不用开辟新的空间
    2. 这也是为啥不建议使用innerText来进行Dom来操作的原因 太多的字符串存储在字符串常量区,导致加载速度变慢

模板字符串 ES6

  • 用 `` 来把字符串包裹起来,不用单引号或者双引号了
  • 可以使用 ${变量} 来包裹变量了
let name1 = '龚利明';
let from1 = '福建';
let str = `
	你好,我叫 ${name1},来自${from1}
我也可以换行哦
`

字符串API

includes()
// 查询字符串, 如果有,返回true 没有返回 false
let str = '123456';
console.log(str.includes('123'));  // true
indexOf()
// 查询字符串, 如果有,所在位置 没有返回 -1
let str = '123456';
console.log(str.indexOf('123'));  // 0
lastIndexOf()
// 从后开始查询字符串, 如果有,所在位置 没有返回 -1
let str = '123456';
console.log(str.indexOf('123'));  // 0
startsWith()
//查询开头是否包含查询内容, 有返回true 没有返回false
let str = '123456';
console.log(str.startsWith('123'));  //true
endsWith()
//查询结尾是否包含查询内容, 有返回true 没有返回false
let str = '123456';
console.log(str.endsWith('123'));  //false
substr() 截取(起始位置,个数)
  • 如果第二个参数不给值,那么和substring一样 会截取起始位置到最后一个
//substr(a,b)
// 第一个参数 : 起始位置
// 第二个参数 : 截取个数
let str = '123456';
console.log(str.substr(0,2));
substring() 截取(起始位置头,尾)
  • 如果第二个参数不给值,那么和substr一样 会截取起始位置到最后一个
let str = '123456789';
console.log(str.substring(0,2));
split() 变成数组
  • 如果不给值会默认挨个元素分开来
// split('a')   
// a : 代表的是分割的中点
let str = '123456789';
console.log(str.split('5')); // ===>   ['1234','6789']
toLowerCase() 变成小写
let str = 'aaaeeeDEFF';
console.log(str.toLowerCase());   //aaaeeedeff
toUpperCase() 变成小写
let str = 'aaaeeeDEFF';
console.log(str.toUpperCase()); // AAAEEEDEFF
padStart() 填充开头
//padStart(a,b)
// 第一个参数  : 字符串个数
// 第二个参数 : 需要填充的内容
let str = '1';
console.log(str.padStart(2,'0'));  // 01
padEnd() 填充末尾
//padStart(a,b)
// 第一个参数  : 字符串个数
// 第二个参数 : 需要填充的内容
let str = '1';
console.log(str.padEnd(2,'0'));    //10
trim() 去除多余字符串
let str = '  1   ';
console.log(str.trim());   //1
replace() 替换
// replace(a, b)
// 第一个参数 : 字符串中要替换的值   ======   //g   全局的意思
// 第二个参数 : 替换成啥
let str1 = '2018-10-10';
console.log(str1.replace(/-/g,'/'))    //2018/10/10

数组

判断数组方法

Array.isArray() (ES6)
let ary = [1,3,5,66,8,99];

let a = Array.isArray(ary);
console.log(a);        // true
Object.prototype.toString.call()
instanceof

数组AIP

sort( ) 排序
let  arr = [1,2,2,11,55,44,33,77,44,22,66,33,55,878,33];

// 降序
arr.sort(function (a,b) {
    return b-a;
});
// 升序
arr.sort(function (a,b) {
    return a-b;
});
console.log(arr);

splice() 替换
  • 从第一个参数这来时换,并不是第一个参数之后开始换
num.splice(a,b,c);    
//第一个参数: 起始位置
// 第二个参数: 删除个数
// 第三个参数以后: 添加的元素

let  arr = [1,2,2,11,55,44,33,77,44,22,66,33,55,878,33];

num.splice(0,0,11111);
console.log(arr);
slice() 截取
slice(a, b) 
//第一个参数 :  起始位置   左闭右开!!!!!!
// 第二个参数 : 结束位置  

let arry1 = ['1', 2, 3,4,5,6,7,8];
console.log(arry1.slice(0,3));
push() 末尾增加
let  arr = [1,2,3];
arr.push(2,3,4);
console.log(arr);
pop() 末尾删除
  • 通过a = arr.pop() 可以获取删除的值
let  arr = [1,2,3];
arr.pop();      //自动删除结尾
console.log(arr);
unshift() 开头添加
let  arr = [1,2,3];
arr.unshift(2,3,4);
console.log(arr);
shift() 开头删除
  • 通过a = arr.shift() 可以获取删除的值
let  arr = [1,2,3];
arr.shift();     //自动删除开头
console.log(arr);
reverse() 倒序
let  arr = [1,2,3];
arr.reverse();
console.log(arr);
join() 数组合并成字符串
// 需要有个变量来获得
// '' 里边为拼接内容
let  arr = [1,2,3];
let aaa = arr.join('');    
console.log(aaa);
concat() 拼接数组
let arry1 = [1, 2, 3]
let arry2 = [4, 5, 6]
arry1.concat(arry2)
console.log(arry1.concat(arry2)) // [ 1, 2, 3, 4, 5, 6 ]
includes() 查询有没有 (ES6语法)
// includes(a, b)
// 第一个参数 :  查找内容
// 第二个参数 :  起始位置
//返回内容: 存在返回true,没有返回  false
let arry1 = ['1', 2, 3,4,5,6,7,8];
console.log(arry1.includes(8,3));   //  ===> true
indexOf() 查找元素索引
//indexOf(a,b)    
// 第一个参数:  查找内容
// 第二个参数:  起始位置

//返回内容: 存在返回第一个的出现位置,没有返回  -1
let arry1 = ['1', 2, 3];
console.log(arry1.indexOf('1'));   //===> 0
lastIndexOf() 查找元素索引
//indexOf(a,b)    
// 第一个参数:  查找内容
// 第二个参数:  起始位置( 默认从后往前找)

//返回内容, 存在返回第一个的出现位置,没有返回  -1
let arry1 = ['1', 2, 3];
console.log(arry1.indexOf('1'));   //===> 0
forEach() 循环1
// 常规for循环遍历
let people = [
    {name: 'glm',age:18,sex:1},
    {name: 'jh',age:33,sex:0},
    {name: 'ljl',age:44,sex:1}
             ]
people.forEach((ele, index)=>{
    console.log( index + ':' + ele.name )
})
some() 循环2()
//作用:用于检测数组中的元素是否满足指定条件,参数也是函数如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。
let  arr = [1,2,3,3,2,1,3,5,666,7,1111,333,1111111,545];

function somea(arr){
   return  arr.some(function (ele, index) {
        return ele > 1111;
    });
}
console.log(somea(arr));   // true
every() 循环3
// 作用  :  用于检测数组中的所有元素是否满足指定条件,只有当数组中灭一个元素都满足条件时,表达式返回true , 否则返回false
let  arr = [1,2,3,3,2,1,3,5,666,7,1111,333,1111111,545];

function everya(arr){
   return  arr.every(function (ele, index) {
        return ele > 1111;
    });
}
console.log(everya(arr));   // false

map() 循环4
// 创建一个数组作为返回结果,内容的ele  满足时返回true   没问题的返回false
let numbers = [1, 2, 3, 3, 2, 1];
let everyRes = numbers.map(function(ele, index) {
    return ele > 2;
})
// >[false, false, true, true, false, false]
filter() 循环5
// 作用: 它创建一个新的数组,原数组不变,新数组中的元素是通过检查指定数组中符合条件的所有元素
let  arr = [1,2,3,1111,2,1,3,5,1111,7,1111,333,1111111,545];
function somea(arr){
   return  arr.filter(function (ele, index) {
        return ele >= 1111 ;
    });
}

console.log(somea(arr));    ==>  [1111,1111,1111,1111111]
find() 循环6
//返回数组中符合函数规则的第一个元素的值 
// 和filter的区别: 
//              1.find只返回第一个值  
//              2. find返回的是数值  不是数组 
let ary = [1,3,5,66,8,99]
let returnValue = ary.find(function(item,index){
    return item >= 66
})
console.log(returnValue) //  66 
findIndex() 循环7
//作用: 返回数组中符合函数规则的第一个元素的索引 
let ary = [1,3,5,66,8,99]
let returnValue = ary.findIndex(function(item,index){
    return item >= 66
})
console.log(returnValue) //3

特殊点

  • 当数组长度不够,却要给它添加元素结果是 在它之前的都是underfine
  • 设置length的大小
    • length过大,length之前的也都是undefined
    • length过小 会把length之后的删除

函数

函数作用域

变量函数 与 匿名函数作用域
  • 匿名函数作用域不会被提升
  • 变量函数预解析作用域会提升至全局

函数名有括号和没括号

  • 加括号 : 执行函数代码
  • 不加括号 : 不作用 – (如果打印的话,会把函数内容打印出来)
function hello(){
    console.log('hello world!');
    return 100;
}

return

无返回值情况
  • return 空时,返回的是undefined
  • 没有return时.默认 return 空
返回函数问题
let function ff(){
    console.log('1111111');
    return function(){
         console.log('2222222');
    }
}
var f1 = ff();    //此时对会执行ff()函数

所以  此时 f1  = function(){
         console.log('2222222');
    }


f1()     // 此时   f1() =   是执行上述函数    所以是打印   2222222   

// 总结 : ff()()   ===    f1()

自调用函数

  • 组成 : ( function(){} ) ()
  • 特点
    • 自己自动就会执行
    • 封闭作用域,只能自己使用
    • 括号内能够传参
(
    function (option) {
        console.log(option.name);      //  glm
        console.log(option.age);       //  18
        console.log(option.sex);       //  0
    }
)({name:'glm',age:18,sex:0});       //  () 括号内进行传参

结果:       glm
            18
            0  
选项卡例子
for (var i = 0; i < spans.length; i++){
                (function (i) {
                    spans[i].onclick=function () {
                        for(var j = 0; j < divs.length; j++){
                            spans[j].className = '';
                            divs[j].className = '';
                        }
                        this.className = 'current';
                        divs[i].className = 'current';
                    }
                })(i)
            }
//  ------------------------------------------------
for (var i = 0; i < spans.length; i++){
    			   spans[i].index = i;
                    spans[i].onclick=function () {
                        for(var j = 0; j < divs.length; j++){
                            spans[j].className = '';
                            divs[j].className = '';
                        }
                        this.className = 'current';
                        divs [i].className = 'current';
                    }
               
            }
//  ---------------------------------------------------
for (let i = 0; i < spans.length; i++){
    
                    spans[i].onclick=function () {
                        for(let j = 0; j < divs.length; j++){
                            spans[j].className = '';
                            divs[j].className = '';
                        }
                        this.className = 'current';
                        divs[i].className = 'current';
                    }
               
            }

回调函数

function f1( name,callback ){
    callback(name);
}

f1(22,function (data) {
    console.log(data);
});

结果:
     22 

箭头函数(ES6)

  • 注意点 :
    • 当只有一个形参时小括号可以省略, 当只有一个表达式时,大括号可以省略
    • this指向的是上下文
let makeLove ()=>{
    console.log('你好,世界!')
}
makeLove()

变量函数作用域

全局变量和局部变量

  • 局部变量都是通过 var来申明的;全局变量可以通过var a = 10来申明,或者通过直接赋值的隐式全局变量来赋值 a = 10,但是隐式全局变量不会预解析,在它上边的位置输出会报错;

    • 局部变量写在函数内部,或者对象内部,有大括号包裹着(有例外的下个小点点说)

    • 一个script标签内, if, for循环也是大括号包裹,但是通过 var 声明的变量都为全局变量

    • 全局变量可以作用于全局

    • 局部变量只作用于当前作用域

var a = 10;

function f1(){
    console.log(b)   
    var b = 10;
    console.log(a)     
}

f1();
console.log(b)       
 结果:  
第二个参数为: undefined     // 预解析var b 作用域提前了
第二个参数为: 10
第三个参数为: 报错

变量与函数预解析

变量预解析
console.log(a)      
if(true){
    var a = 10;                   
}
结果: 
    undefined

//代码解析:
var a
console.log(a)     所以输出为  undefined
a = 10;
实名函数预解析与匿名函数
  • 通过 function f1(){}来申明的函数是实名函数, 会进行预解析,类似于var a = 10;
  • 通过var a = function (){} 来申明的是匿名函数, 不会进行预解析,会按照顺序执行. 类似于 a = 10;
f1()            // 10
f2()            //报错
//实名函数:
funtion f1(){
    var a = 10;
    console.log(a)
}

// 匿名函数
var f2 = funtion (){
    var a = 10;
    console.log(a)
}

结果:

实名函数预解析,执行内部代码,输出 10
匿名函数报错
例子2
//  匿名函数作用域不会被提升

var nihao = function () {
    console.log('111');
};
nihao();                   ///   111

var nihao = function () {
    console.log('222222');
};
nihao();                   ///  222222



// 变量函数作用域会提升至全局

function nihao() {
    console.log('111');
};
nihao();                   ///   222222

 function nihao() {
    console.log('222222');
};
nihao();                   ///  222222

隐式全局变量

  • 不通过var来申明, 直接对变量赋值,就是隐式全局变量
  • 特点
    • 不会做变量预解析,按照顺序执行
    • 写在嵌套的函数内部时,a = 1000,被执行后,如果当前作用域没有申明var a,则a = 1000会逐级向上传递,如果连中间函数都没有申明var a 时会继续向上传递直至作用到全局.
function f1(){
    var a = b = c =10;
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();
console.log(b);
console.log(c);
console.log(a);

//代码解刨

function f1(){
    var a = 10
        b = 10
        c = 10;
    console.log(a);  //  10 
    console.log(b);  //  10
    console.log(c);   // 10
}
 
console.log(b);   // 10
console.log(c);   // 10
console.log(a);   // 报错



函数作用域链

  • 函数作用域链指的是函数内部嵌套函数,则变量的使用遵循就近原则,并且逐级向上请求.
  • 同级之间的变量毫无关系,因为都是局部作用域,
例子1
var a = 10;
function f1(){
    a = 20;
}
function f2(){
    var a = 30;
    f1();
    console.log(a)     //  30 ( f1内部执行的a=20是对var a = 10进行操作,因为f1和f2是同级,彼此之间互不影                          响,就算是调用了.也不影响.)
}
f2()
console.log(a)         // 20  (执行了f2,因此隐式全局变量会对var a = 10中的a进行覆盖.)


例子2
var a = 10;

function f1(){
     a = 20;
    function f2(){
        var a = 30;
        function f3(){
            console.log(a);       // 30  ( 向上级找,因为 a = 40不会进行预解析 )
            a = 40;
        }
        f3()
        console.log(a)           // 40  (因为执行f3(),已经让 a = 40作为隐式全局变量,来替代var a = 30,)
    }
    f2()
}
f1()
console.log(a)                     // 20  ( 道理和输出 40 一样)

作用域综合题目(自创)

例子1
var a = 10;
function f1(){
    a = 20;
}
function aaa(){
   var  a = 100;
    function f2(){
        a = 30;
        f1();
        console.log(a);
    }
    f2();
}
aaa();                //   30
console.log(a);       //   20
------------------------------------------------
 解析:  
 var a = 10;
function f1(){
    a = 20;
}
function aaa(){
   var  a = 100;
    function f2(){
        a = 30;            // 1.隐式变量,当前作用域没有申明var a,因此30会向上传递,直至修改var=100 为30
        f1();			  // 2.此时执行f1,修改的是var a=10变成a = 20
        console.log(a);    // 3.当前作用域没有申明值,会向上找,会找到(1)中的a = 30
    }
    f2();
}
aaa();         //30      
console.log(a);  //20          //4.在(2)中已经对var a = 10中进行了修改,所以输出会等于(2)修改的值 
例子2
var a = 10;
function f1(){
    a = 20;
}
function aaa(){
     a = 100;
    function f2(){
        a = 30;          // 1.隐式变量,当前作用域没有申明var a,因此30会向上传递,直至修改var=10 为30
        f1();            // 2.此时执行f1,修改的是(1)已经做修改的var a=30  变成 a = 20
        console.log(a);  // 3.当前作用域没有申明值,会向上找,会找到(1)中的a = 20
    }
    f2();
}  
aaa();                //   20        
console.log(a);       //   20    找到(3)中修改的值为 20

对象

对象的四种创建方式

  • 字面量 : 适合单个对象使用, 不适合多个对象的使用,建议使用
  • new Object(): 适合单个对象使用,不适合多个对象使用,系统默认的构造函数,建议不使用
  • 工厂模式: 在函数的包裹封装下,对字面量或者new Object()的创建 不建议使用
  • 自建构造函数 : 通过函数形式,在函数内部编写属性与方法,再通过 new 函数名(), 建议使用
字面量对象
let  obj = {
    name : 'glm',
    age : 18,
    sex : 1,
    move : function (who) {
        console.log(this.name + '要离开' + who + '了');
    }
};

obj.move('江华');
new Object()
  • 系统自带构造函数
let obj = new  Object();
obj.name = 'glm';
obj.age = 18;
obj.move = function () {
    console.log('你好');
};

console.log(obj);
工厂模式
  • 用函数来封装创建的字面量对象或者系统自带构造函数,然后返回创建的对象来使用.
function makeObj(name, age, word) {

    let obj = new  Object();
    obj.name = name;
    obj.age = age;
    obj.move = function (word) {
        console.log(word);
    };
    return obj
}

let obj1 =  makeObj('glm',18, 'hello');
console.log(obj1.name);
构造函数模式
function Dog(option){
    this.init(option);
}
Dog.prototype = {
    _init : function(option){
        this.name = option.name;
        this.age = option.age;
        this.sex = option.sex;
    },
    move(who){
        console.log(this.name + '和' + who + '一起跑步');
    }
}

//调用
let dog1 = new Dog({ name: '龚利明', age : 18, sex : 1});
dog1.move('刘诗诗');

[’’]访问方式

  • 使用地点 : 用于for in 遍历的时候,不能通过点语法来获取属性的值.
let  obj = {
    name : 'glm',
    age : 18,
    sex : 1,
    move : function (who) {
        console.log(this.name + '要离开' + who + '了');
    },
    run(who){                                        
        console.log(this.name + '跑到' + who + '了');
    }
};
console.log(obj.name)
obj.move('江华');
console.log(obj['name'])
obj['move']('江华');

去掉冒号的方法写法

  • 调用方法和不去掉冒号是一样的
let  obj = {
    move : function (who) {
        console.log(this.name + '要离开' + who + '了');
    },
    run(who){                                        
        console.log(this.name + '跑到' + who + '了');
    }
};
obj.move('江华');
obj['run']('新桥');

for in

for (var key in dog1){
    console.log(key + ":" + dog1[key]);
}

堆和栈(值类型与引用类型)

  • 堆 : 存放对象内容的盒子
  • 栈 : 存放堆区对象内容盒子的地址
  • 注意点
    • number String 布尔类型 undefined null五种(值类型)简单数据类型 的内容都存放在栈中
    • 数组 函数 对象三种复杂数据类型(引用数据类型)内容都存放在堆中. 地址名字存在栈中

[外链图片转存失败(img-hgZIFDme-1568794216490)(C:\Users\shen\Desktop\markdown\4.JavaScript\my_img\堆和栈.png)]

var arr = [1,2,3,4,5,6];
var arr2 = arr ;

arr2.push(10);

console.log(arr2);    // [ 1, 2, 3, 4, 5, 6, 10 ]
console.log(arr);     // [ 1, 2, 3, 4, 5, 6, 10 ]


var str = '12345';
var str1 = str;

str1 += '11111';

console.log(str);      // 12345
console.log(str1);     // 1234511111
发布了6 篇原创文章 · 获赞 23 · 访问量 1224

猜你喜欢

转载自blog.csdn.net/gongliming_qd/article/details/100986997