变量命名

变量名：字母 数字 下划线 美元符$

jquery:  $     $.each()   $ === jQuery

underscore( js的一个函数库)  :   _     _.each()

关键字 :  if   for

保留字 :  class

推荐有意义的命名：

buttonCancel   button_cancel   btnCancel

数据类型和堆栈

基本类型（可以修改） :  4  str   true  undefined  null

引用类型（不能修改） :  { }  [ ]

var score = 40;

score = 50;

上面属于覆盖，不属于修改

var str = "hello";

var newStr = str.replace("h", "");

document.write( str + "/" + newStr);

字符串操作返回新的字符串，原字符串没有改变

        var obj = {};

        console.log(obj);

        obj.name = "cyy";

        obj.age = 25;

        obj.name = "cyy2";

        delete obj.age;

        console.log(obj);

引用类型的属性可以添加，可以修改，可以删除

        var name = "cyy";

        name.age = 25;

        console.log(name.age);//undefined

基本类型不能添加属性

str.replace()

1->Number

"str"->String

不是基本类型有属性和方法，而是通过基本类型找到其包装对象，包装对象会把属性和方法借给该基本类型的变量

基本类型保存在栈内存中，按值访问（直接访问）

引用类型保存在堆内存中，但是地址保存在栈内存中，按引用访问（需要中转）

变量比较和值的赋值

        var obj1 = {

            age: 24,

            num: 1

        }

        var obj2 = {

            age: 24,

            num: 1

        }

        console.log(obj1 === obj2);//false

基本类型的比较就是值的比较，只要值相等即为相等

引用类型，实际上是开辟了各自的内存空间，虽然内容相等，但是并不是一个地址

只有当指向同一个引用的时候，才为相等

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        var obj1 = {

            age: 24,

            num: 1

        }

        var obj2 = obj1;

        console.log(obj1 === obj2);//true

    </script>

</body>

</html>

此时obj2保存的是obj1的地址，因此相等

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        var obj1 = {

            age: 24,

            num: 1

        }

        var obj2 = {

            age: 24,

            num: 1

        }

        function equelObj(a, b){

            for(var i in a){

                if(a[i] !== b[i]) return false;

            }

            return true;

        }

        console.log(equelObj(obj1, obj2));//true

    </script>

</body>

</html>

以上方式可以比较两个对象的内容是否相等

        function equelArr(a, b){

            if(a.length !== b.length) return false;

            for(var i=0; i<a.length;i++){

                if(a[i] !== b[i]) return false;

            }

            return true;

        }

以上方式比较两个数组的内容是否相等

var name1 = "cyy";

var name2 = name1;

console.log(name2);//cyy

name2 = "cyy2";

console.log(name1);//cyy

基本类型复制是值的复制，两个变量互不干涉

var obj1 = {

    name: "cyy",

    age: 24

}

var obj2 = obj1;

obj2.age++;

console.log(obj2.age);//

console.log(obj1.age);//

引用类型复制是地址的复制，二者指向同一个地址，一个改变另一个也会发生改变

var obj1 = {

    name: "cyy",

    age: 24

}

function copyObj(a){

    var newObj = {};

    for(var i in a){

        newObj[i] = a[i];

    }

    return newObj;

}

console.log(copyObj(obj1));

以上方法是复制一个对象的内容，但不是引用的同一个地址

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

<script>

var obj1 = {

    name: "cyy",

    age: 24,

    hobby: []

}

function copyObj(a){

    var newObj = {};

    for(var i in a){

        newObj[i] = a[i];

    }

    return newObj;

}

console.log(copyObj(obj1));

</script>

</body>

</html>

该方式属于浅拷贝，如果对象中某个属性本身是引用类型，则复制时又会该属性又会指向同一个地址，需要用到递归解决

jquery 中的 $.extend 既可以进行浅拷贝，又可以进行深拷贝

不使用新的变量，来对换两个变量的值

var a = 3;

var b = 4;

a = a + b; //a=7

b = a - b; //b=3

a = a - b; //a=3

一个很奇葩的规则：赋值才会改变引用的地址，但是添加与修改内容不会改变地址

var a=[4];

var b=a;//此时b与a指向同一个空间 a=[4]  b=[4]

a=[4,44];//此处a被重新赋值，指向了另一个空间；b仍旧指向原来的空间

console.log(a);//(2) [4, 44]

console.log(b);//[4]

a=b;//此时a又指向了b的空间 a=[4] b=[4]

b.push(44);

console.log(a);//(2) [4, 44]

参数传递和类型检测

function add(a,b){

    return a+b;

}

console.log(add(3,4));//

a,b是形参，3,4是实参

function addName(obj){

    obj.name="cyy";

}

var me={};

addName(me);

console.log(me.name);//cyy

引用类型的参数传递（实质上也是值传递）

function addName(obj){

    obj.name="cyy";//me.name=cyy（值传递)

    obj={};//obj指向了一个新的地址，但是me依旧指向老的地址

    obj.name="cyy2";//对新的地址进行操作

}

var me={};

addName(me);

console.log(me.name);//cyy

以上证明：由于引用类型作为参数时，实质上也是值传递。因此当形参被指向新的地址时，并没有对实参进行操作，因为二者并不是指向同一个地址

typeof 检测数据类型，返回值都是字符串类型

数组和对象都是返回object

instanceof Array  判断是否是数组的实例

instanceof Object  判断是够是object的实例（数组也是Object的实例，所有东西都是object的实例）

console.log([] instanceof Array);//true

console.log({} instanceof Array);//false

console.log([] instanceof Object);//true

console.log({} instanceof Object);//true

不用第三个参数，对换两个引用类型的变量值

var a = {name: 'xm'}, b = [4];

a=[a,b];//[{name: 'xm'}, 4]

b=a[0];//b={name: 'xm'};

a=a[1];//a=[4]

null是Null类型，属于基本类型

console.log(typeof null);//object

console.log(null instanceof Object);//false

JS数据类型和堆栈+变量比较和值的复制+参数传递和类型检测的更多相关文章

  1. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  2. 前端面试:js数据类型

    js数据类型是js中的基础知识点,也是前端面试中一定会被考察的内容.本文旨在知识的梳理和总结,希望读者通过阅读本文,能够对这一块知识有更清晰的认识.文中如果出现错误,请在评论区指出,谢谢. js数据类 ...

  3. static 和 final 关键字 对实例变量赋初始值的影响

    static 和 final 关键字 对实例变量赋初始值的影响 最近一直在看<深入理解Java虚拟机>,在看完了对象内存分配.Class文件格式之后,想深扒一下实例变量是如何被赋上初始值的 ...

  4. js数据类型和变量

    Number JavaScript不区分整数和浮点数,统一用Number表示: 123 0．345 -99 NaN 当无法计算结果时用NaN表示 Infinity 表示无限大,当数值超过js的Numb ...

  5. 前端（十一）—— JavaScript基础：JS存在的位置、JS变量定义、调试方式、JS数据类型、运算符

    JS存在的位置.JS变量定义.调试方式.JS数据类型.运算符 一.JS语言介绍 1.概念 浏览器脚本语言 可以编写运行在浏览器上的代码程序 属于解释性.弱语言类型编程语言 2.组成 ES语法:ECMA ...

  6. 多动手试试，其实List类型的变量在页面上取到的值可以直接赋值给一个js的Array数组变量

    多动手试试,其实List类型的变量在页面上取到的值可以直接赋值给一个js的Array数组变量,并且数组变量可以直接取到每一个元素var array1 = '<%=yearList =>'; ...

  7. js 判断一个变量是否有值

    最近遇到一个面试题,判断一个变量是否有值,当时有点蒙,其实很简单,就是判断 变量是否为 undefined或者null function isFlag(val) { if(Object.prototy ...

  8. 由js apply与call方法想到的js数据类型（原始类型和引用类型）

    原文地址:由js apply与call方法想到的js数据类型(原始类型和引用类型) js的call方法与apply方法的区别在于第二个参数的不同,他们都有2个参数,第一个为对象(即需要用对象a继承b, ...

  9. JS函数 -- 功能，语法，返回值，匿名函数，自调用匿名函数，全局变量与局部变量，arguments的使用

    “JavaScript设计得最出色的就是它的函数的实现.” -- <JavaScript语言精粹> 函数包含一组语句,它们是JS的基础模块单元,用于指定对象的行为.一般来说,所谓编程,就是 ...

随机推荐

  1. kuangbin专题专题十一 网络流 Going Home POJ - 2195

    题目链接:https://vjudge.net/problem/POJ-2195 思路:曼哈顿距离来求每个人到每个房间的距离,把距离当作费用. 就可以用最小费用最大流来解决了,把每个房子拆成两个点,限 ...

  2. OpenResty学习指南（一）

    我的博客: https://www.luozhiyun.com/archives/217 想要学好 OpenResty,你必须理解下面 8 个重点: 同步非阻塞的编程模式: 不同阶段的作用: LuaJ ...

  3. 单点登陆（SSO）

    一.背景 在企业发展初期,企业使用的系统很少,通常一个或者两个,每个系统都有自己的登录模块,运营人员每天用自己的账号登录,很方便.但随着企业的发展,用到的系统随之增多,运营人员在操作不同的系统时,需要 ...

  4. Dwz/Jquery--使用Ajax提交表单时调用表单设置的校验

    案例 今天有一个需求就是点击按钮时,使用ajax方式提交表单,而且不是直接用form表单下的submit按钮提交,表单中用的校验是dwz 自带的校验方式,表单模板如下: <li><d ...

  5. apace访问403错误的解决方法汇总

    作为一个努力学习的实习生,遇到问题还是靠记录才能更好的学习. 首先附上故障图 翻译过来就是啥呢? 于是天真的我去百度了一下大神们的解决方法,目录没权限嘛,来个777就完事了.一开始还觉得挺合乎情理的, ...

  6. LoadIcon的使用

    LoadIcon msdn: Loads the specified icon resource from the executable (.exe) file associated with an ...

  7. python 中的反斜杠匹配的问题

    关于反斜杠的匹配问题可以参考: https://www.cnblogs.com/mzc1997/p/7689235.html 文章中提出了两个概念: 字符串转义和正则转义,我觉得是理解反斜杠的关键所在 ...

  8. 练习：等待用户输入input()

    等待用户输入 执行下面的程序在按回车键后就会等待用户输入: 实例(Python 3.0+) #!/usr/bin/python3 input("\n\n按下 enter 键后退出." ...

  9. socket实现文件上传（客户端向服务器端上传照片示例）

    本示例在对socket有了基本了解之后,可以实现基本的文件上传.首先先介绍一下目录结构,server_data文件夹是用来存放客户端上传的文件,client_data是模拟客户端文件夹(目的是为了测试 ...

  10. HDU 3068 最长回文 （Manacher最长回文串）

    Problem Description 给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度.回文就是正反读都是一样的字符串,如aba, abba等   Input 输 ...