对象（值传递、引用传递、对象、严格模式）创建，使用

01.值传递引用传递

基本数据类型:string、number、boolean、null、undefined；

引用类型（复合类型)：object对象！

基本数据类型：存储在栈

引用类型：堆

1.值传递：

值传递：传递的是基本数据类型的数据（数据不会发生改变）

原理：因为常量不可改变

2.引用类型：

引用传递：传递的对象（数组、对象）

原理：对象存储在堆空间中，自身可以发生改变

3.如果想copy整个数组：（有两种方法）

1：for循环

2：slice();

1.值传递：
var a = 10;
var b = a;
var b = 20;
console.log(a,b);    //10 20
2.引用类型（数组）：
var arr1 = [1,2,3,4,5];
var arr2 = arr1;
arr2[0] = 2;
console.log(arr1);  //(5) [2,2,3,4,5] (对象存储在堆空间中，自身可以发生改变）
//第一种copy数组的方法（for循环）
for(var i = 0 ; i < arr1.length ; i++){
    arr2.push(arr1[i]);
}
arr2[0] = 2222;
console.log(arr2);    //(5) [2222, 2, 3, 4, 5]
console.log(arr1);    //(5) [1, 2, 3, 4, 5]
​
//第二种copy数组的方法（slice()，截取数据， start和end都不写，返回整个数组arr，常用来快速复制到数组.)
var arr2 = arr1.slice();
arr2[0] = 22;
console.log(arr2);   //(5) [22, 2, 3, 4, 5]
console.log(arr1);    //(5) [1, 2, 3, 4, 5]

02.对象

1.对象

js里面的一个数据类型，引用类型

引用类型是一种数据结构，用于将数据和功能组织在一起

2.对象 ——> 属性和方法

属性就相当于对象内部的私有变量

3.创建对象的方法

(1)构造函数：

var people = new Object();

(2)字面量：

var obj = {};

4.给对象添加属性和方法

people.name = 'xiaoming';
people.age = '20',
people.sex = 'nan',
people.play = function(){
    console.log("玩耍");
}

5.删除属性和方法：

delete obj.name;

6.JSON

JSON是一种轻量级的数据存储格式！键值对 json规定属性和属性值必须放在引号里面

{
    'name' : 'wang',
    'sex' : 'nan',
    'age' : 20
}

注：如果一个对象的属性是一个变量的情况下，怎么添加属性？？？

obj[变量名称] = 值

怎么遍历对象？？？ for in 循环

for(var key in obj){
​
}

简单操作：
//json格式
var xiaodingdang = {
    age : 20,
    sex : "nan",
    height : 180,
    weight : 100,
    play : function(){
        console.log("玩耍");
    }
}
//console.log(xiaodingdang);
xiaodingdang.play();
​
//对象遍历，i为键
for(i in xiaodingdang){
    console.log(xiaodingdang[i]);
}

03.数据渲染

把数据渲染在页面上

循环遍历整个数组

根据数组的下标获取的是某个对象，然后从里面获取对应的属性值

<style>
    *{
    margin : 0; 
    padding : 0;
}
    .goodBox{
        margin:10px auto;
        1200px;
        overflow:hidden;  /*防止高度塌陷*/
    }
.goods{
    200px;
    height:350px;
    border:1px solid red;
    margin:10px;
    float:left;
}
.goods a{
     190px;
    height:250px;
    display:block;
    margin:4px auto;
}
.goods a img{
    display:block;
    100%;
    height:100%;
}
.goods h2{
    font-size:20px;
    color:red;
    text-align:center;
}
.goods p{
    padding:5px;
    font-size:12px;
    color:#ccc;
    line-height:20px;
}
</style>
​
<section class="goodBox" id="box">
    <!-- <div class="goods">
            <a href="#"><img src="" alt=""></a>
            <h2>price</h2>
            <p></p>
        </div> -->
</section>
<script>
                //模拟数据 
                var goods = [
                    {
                        id : 01,
                        price : '1000',
                        imgSrc : 'http://img13.360buyimg.com/n7/jfs/t1/26123/4/9617/119461/5c8082e6Eb533f3fc/f53c4b1b39676fa9.jpg',
                        title : '【特步正品官方】满199立减10，满299立减20，满399立减30，火爆开启，点击查看热卖尖货！'
                    },
                    {
                        id : 02,
                        price : '200',
                        imgSrc : 'http://img10.360buyimg.com/n7/jfs/t1/58638/8/6570/143338/5d4658d3Eeb186fc7/c979efb1c3cdc95a.jpg',
                        title : '范华尼 短袖t恤男2019夏季新款潮流修身半袖体恤男士休闲上衣打底衫POLO衫男 深灰 XL！'
                    },
                    {
                        id : 03,
                        price : '5000',
                        imgSrc : 'http://img10.360buyimg.com/n7/jfs/t1/41293/26/9137/126467/5d29665fEad149728/f5cb00de507f609f.jpg',
                        title : '范华尼 短袖t恤男2019夏季新款潮流修身9立减20，满399立减30，火爆开启，点击查看热卖尖货！'
                    },
                    {
                        id : 04,
                        price : '999',
                        imgSrc : 'http://img11.360buyimg.com/n7/jfs/t1/69679/40/5140/126743/5d32f0f5E7f69253a/37c4dcd5bb5ea2a2.jpg',
                        title : '【特步正品官方】热卖尖货！'
                    },
                    {
                        id : 05,
                        price : '1000',
                        imgSrc : 'http://img13.360buyimg.com/n7/jfs/t1/26123/4/9617/119461/5c8082e6Eb533f3fc/f53c4b1b39676fa9.jpg',
                        title : '【特步正品官方】满199立减10，满299立减20，满399立减30，火爆开启，点击查看热卖尖货！'
                    },
                    {
                        id : 06,
                        price : '200',
                        imgSrc : 'http://img10.360buyimg.com/n7/jfs/t1/58638/8/6570/143338/5d4658d3Eeb186fc7/c979efb1c3cdc95a.jpg',
                        title : '范华尼 短袖t恤男2019夏季新款潮流修身半袖体恤男士休闲上衣打底衫POLO衫男 深灰 XL！'
                    },
                    {
                        id : 07,
                        price : '5000',
                        imgSrc : 'http://img10.360buyimg.com/n7/jfs/t1/41293/26/9137/126467/5d29665fEad149728/f5cb00de507f609f.jpg',
                        title : '范华尼 短袖t恤男2019夏季新款潮流修身9立减20，满399立减30，火爆开启，点击查看热卖尖货！'
                    },
                    {
                        id : 08,
                        price : '999',
                        imgSrc : 'http://img11.360buyimg.com/n7/jfs/t1/69679/40/5140/126743/5d32f0f5E7f69253a/37c4dcd5bb5ea2a2.jpg',
                        title : '【特步正品官方】热卖尖货！'
                    },
                    {
                        id : 09,
                        price : '200',
                        imgSrc : 'http://img10.360buyimg.com/n7/jfs/t1/58638/8/6570/143338/5d4658d3Eeb186fc7/c979efb1c3cdc95a.jpg',
                        title : '范华尼 短袖t恤男2019夏季新款潮流修身半袖体恤男士休闲上衣打底衫POLO衫男 深灰 XL！'
                    },
                    {
                        id : 10,
                        price : '5000',
                        imgSrc : 'http://img10.360buyimg.com/n7/jfs/t1/41293/26/9137/126467/5d29665fEad149728/f5cb00de507f609f.jpg',
                        title : '范华尼 短袖t恤男2019夏季新款潮流修身9立减20，满399立减30，火爆开启，点击查看热卖尖货！'
                    }
                ];
​
//把数据渲染在页面上
/*
            循环遍历整个数组
            根据数组的下标获取的是某个对象，然后从对里面获取对应的属性值
        */
var str = '';//使用字符串，将它们拼接起来
for(var i = 0, k = goods.length ; i < k ; i++){
    str += '<div class="goods"><a href="#"><img src=" '+ goods[i].imgSrc + ' " alt=""></a><h2>'
        + goods[i].price +'</h2><p>' + goods[i].title + '</p></div>'
}
box.innerHTML = str;
</script>

04. 对象练习

以下是某班级一次考试的成绩表。请计算每个学生总成绩，并按总成绩排名。如果总成绩相同按照语文成绩排列。并输出。

var students = [
    {
        id : 01,
        stuName : '陈',
        yw : 88,
        sx : 100,
        yy : 90
    },
    {
        id : 02,
        stuName : '高',
        yw : 99,
        sx : 79,
        yy : 100
    },
    {
        id : 03,
        stuName : '王',
        yw : 100,
        sx : 77,
        yy : 50
    },
    {
        id : 04,
        stuName : '张',
        yw : 66,
        sx : 94,
        yy : 80
    },
    {
        id : 05,
        stuName : '孙',
        yw : 77,
        sx : 30,
        yy : 40
    }
]
//计算学员总成绩，并把总成绩放在对象里面
for(var i = 0 ; k = students.length ; i < k ; i++){
    stuents[i].zong = students[i].yw + students[i].sx + students[i].yy;
}
//根据总成绩排名
students.sort(function(a,b){   //sort(),排序，b-a为由大到小排序（a-b为由小到大排序）
    if(a.zong == b.zong){
        return b.yw - a.yw;
    }
    return b.zong - a.zong;
});
console.log(students);

05.严格模式

1.ES5增加“严格模式”:

1. 消除javascript语法的一些不合理、不严谨之处，减少一些怪异行为

2. 消除代码运行的一些不安全之处，保证代码运行的安全；

3. 提高编译器效率，增加运行速度

4. 为未来新版本的javascript做好铺垫

2.开启严格模式

'use strict';

3.做了哪些限制

1. 声明变量必须用var

2. 禁止删除window的属性

3. 函数this的指向不再指向window； //undefined;

4. 函数内部允许参数重名

5. 增加了保留字 implements、interface、let、package、private、protected、public、yield；

'use strict';  //开启严格模式
​
//window.a = 10;
//delete a;   //出现错误提示：Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.(在es5严格模式下，禁止删除window的属性)
​
function fn(){
    console.log(this);   //undefined;
}
fn();