js(数组，对象)

1.js中的最重要的类型就是对象
1.对象是名/值对的集合，或字符串到值映射的集合

var book = {
   topic:"js";     //属性"topic"的值是"js"
   fat:true        //属性"fat"的值是true
};

2.通过"."或"[]"来访问对象属性

book.topic                   //"js"
book["fat"]                  //另一种获取属性的方式
book.author = "Flanagan";    //通过赋值创建一个新的属性
book.contents = {}           //{}是个空对象，它没有属性

3.js同样支持数组（以数组为索引的列表）

primes[primes.length -1]    //数组的最后一个元素
var empty = []              //[]是空数组，它具有0个元素
empty.length                //输出为0

4.数组和对象都可以包含一个数组或对象

var points = [            //具有俩个元素的数组
  {x: 0,y: 0},            //每个元素都是一个对象
  {x: 1,y: 1}             
];
var data = [              //一个包含俩个属性的对象
  trial1: [[1,2],[3,4]],  //每一个属性都是数组
  trial2: [[2,3],[4,5]]   //数组的元素也是数组
]

5.js中最常见的表达式写法:

3+2                          // 5  加法
3-2                          // 1  减法
3*2                          // 6  乘法
3/2                          // 1.5 除法
points[1].x - points[0].x    // 1 更复杂的操作数也能正常工作
"3"+"2"                      // 32  字符串链接
var count = 0;               //定义一个变量
count += 2;                  //自增2： 和"count = count + 2;"写法一样
count *= 3;                  //自增3： 和"count = count * 2;"写法一样

6.用二维数组做一个9*9表格

var table = new Array(10);                        //表格有10行
for(var i=0;i<table.length;i++){
    table(i) = new Array(10);                     //每行有10列
    for(var row=0;row<table.length;row++){
        for(var col=0;col<table.length;col++){
            table[row][col] = row*col;
        }
    }
}

7.使用多维数组来计算
var product = table5; //35

8.JavaScript 数组方法
js方法tostring()把数组转换为数组值（逗号分隔）的字符串

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  document.getElementById("demo").innerHTML = fruits.toString();
  输出结果是：
             Banana,Orange,Apple,Mango

jion()方法也可以将所有数组元素结合为一个字符串
它的行为类似tostring()，还可以规定分隔符

   var fruits = ["Banana", "Orange","Apple", "Mango"];
   document.getElementById("demo").innerHTML = fruits.join(" * "); 
   结果：
       Banana * Orange * Apple * Mango

13.Popping和Pushing
Popping和Pushing指的是：
从数组弹出项目，或向数组推入项目
Popping:
pop()方法从数组中删除最后一个元素

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）
  document.getElementById("demo").innerHTML = fruits;
  结果:
      Banana,Orange,Apple

pop()方法返回“被弹出”的值

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  document.getElementById("demo").innerHTML = fruits.pop();  
  结果: 
      Mango

pushing:
push()方法（在数组结尾处）向数组添加一个新的元素

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 document.getElementById("demo").innerHTML = fruits;
 function myFunction() {
   fruits.push("Kiwi");
   document.getElementById("demo").innerHTML = fruits;
 }
 结果:   
     Banana,Orange,Orange,Mango,Kiwi

push()方法返回新数组的长度（新加一个数组并返回长度）：

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 document.getElementById("demo1").innerHTML = fruits;    
 function myFunction() {
   document.getElementById("demo2").innerHTML = fruits.push("Lemon");
   document.getElementById("demo1").innerHTML = fruits;
 }
 结果:
      Banana,Orange,Orange,Mango,Kiwi
      5

位移元素
位移与弹出等同，但处理首个元素而不是最后一个。
shift()方法会删除首个数组元素，并把所有其他元素"位移"到更低的索引

   var fruits = ["Banana", "Orange", "Apple", "Mango"];
   fruits.shift();            // 从 fruits 删除第一个元素 "Banana"
   document.getElementById("demo").innerHTML = fruits;
   结果: 
       Orange,Apple,Mango

shift()方法返回“被移除”的字符串（首个元素）

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  document.getElementById("demo").innerHTML = fruits.shift();  
  结果:
      Banana

unshift()方法（在开头）向数组添加新元素，并"返回位移"旧元素

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  document.getElementById("demo").innerHTML = fruits;
  function myFunction() {
    fruits.unshift("Lemon");
    document.getElementById("demo").innerHTML = fruits;
  }
  结果：
      Lemon,Banana,Orange,Apple,Mango

unshift()方法返回新数组的长度

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 document.getElementById("demo2").innerHTML = fruits.unshift("Lemon");
 结果：
     5

更改元素
通过使用它们的索引号来访问数组元素：
数组索引（下标）以 0 开始。[0] 是第一个数组元素，[1] 是第二个，[2] 是第三个 ...

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Lemon";
document.getElementById("demo2").innerHTML = fruits;

结果：

   Banana,Orange,Apple,Mango
   Lemon,Orange,Apple,Mango

length 属性提供了向数组追加新元素的简易方法：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;    
function myFunction() {
  fruits[fruits.length] = "Lemon";
  document.getElementById("demo").innerHTML = fruits;
}
结果：
   Banana,Orange,Apple,Mango,Lemon

删除元素
既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除：

<p id="demo1"></p>
<p id="demo2"></p>    
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML =
"第一种水果是：" + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML =
"第一种水果是：" + fruits[0];
</script>
结果：
    第一种水果是：Banana
    第一种水果是：undefined

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

拼接数组
splice() 方法可用于向数组添加新项：

<button onclick="myFunction()">试一试</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "原数组：<br>" + fruits;
function myFunction() {
   fruits.splice(2,0, "Lemon", "Kiwi");
   document.getElementById("demo2").innerHTML = "新数组：<br>" + fruits;
}
</script>
结果：
    原数组：
    Banana,Orange,Apple,Mango        
    新数组：
    Banana,Orange,Lemon,Kiwi,Apple,Mango

第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组：

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>    
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "原数组：<br> " + fruits;    
function myFunction() {
  var removed = fruits.splice(2, 2, "Lemon", "Kiwi"); 
  document.getElementById("demo2").innerHTML = "新数组：<br>" + fruits;
  document.getElementById("demo3").innerHTML = "已删除项：<br> " + removed; 
}
结果：
    原数组：
    Banana,Orange,Apple,Mango        
    新数组：
    Banana,Orange,Lemon,Kiwi        
    已删除项：
    Apple,Mango

使用splic()来删除元素
通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo").innerHTML = fruits;
    function myFunction() {
      fruits.splice(0, 1);
      document.getElementById("demo").innerHTML = fruits;
    }
    结果：
        Orange,Apple,Mango

合并（连接）数组
concat() 方法通过合并（连接）现有数组来创建一个新数组：
实例（合并两个数组）

 var myGirls = ["Emma", "Isabella"];
 var myBoys = ["Jacob", "Michael", "Ethan"];
 var myChildren = myGirls.concat(myBoys);    
 document.getElementById("demo").innerHTML = myChildren;
 结果：
     Emma,Isabella,Jacob,Michael,Ethan

concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数：

实例（合并三个数组）

var arr1 = ["Emma", "Isabella"];
var arr2 = ["Jacob", "Michael", "Ethan"];
var arr3 = ["Joshua", "Daniel"];    
var myChildren = arr1.concat(arr2, arr3);     
document.getElementById("demo").innerHTML = myChildren;
结果：
   Emma,Isabella,Jacob,Michael,Ethan,Joshua,Daniel

concat() 方法也可以将值作为参数：
实例（将数组与值合并）

var arr1 = ["Emma", "Isabella"];
var myChildren = arr1.concat(["Jacob", "Michael", "Ethan"]); 
document.getElementById("demo").innerHTML = myChildren;
结果：
    Emma,Isabella,Jacob,Michael,Ethan

裁剪数组
slice()用数组的某个片段切出新的数组
本例从数组元素 1 （"Orange"）开始切出一段数组：

    var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
    var citrus = fruits.slice(1);
    document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
    结果：
        Banana,Orange,Lemon,Apple,Mango
        Orange,Lemon,Apple,Mango

slice()创建新数组，它不会从原数组中删除任何元素：
本例从数组元素 3 （"Apple"）开始切出一段数组：

   var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
   var citrus = fruits.slice(3);
   document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
   结果：
       Banana,Orange,Lemon,Apple,Mango
       Apple,Mango

slice()可以接受俩个参数，比如(1,3)
该方法会从开始参数选取元素，直到结束参数（不包括）为止：

  var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
  var citrus = fruits.slice(1,3);
  document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
  结果：
      Banana,Orange,Lemon,Apple,Mango
      Orange,Lemon

如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分：

 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
 var citrus = fruits.slice(2);
 document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
 结果：
     Banana,Orange,Lemon,Apple,Mango
     Lemon,Apple,Mango

自动 toString()
如果需要原始值，则 JavaScript 会自动把数组转换为字符串。下面两个例子将产生相同的结果：

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo").innerHTML = fruits.toString();
    
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo").innerHTML = fruits;
    俩个结果相同：
       Banana,Orange,Apple,Mango

js中for Eash ,for in, fou of循环用法
一.一般的遍历数组的方法:

  var array = [1,2,3,4,5,6,7];  
  for (var i = 0; i < array.length; i) {  
      console.log(i,array[i]);  
  }

二、用for in的方遍历数组

for(let index in array) {  
    console.log(index,array[index]);  
};

三、forEach

array.forEach(v=>{  
  console.log(v);

});
array.forEach（function(v){

 console.log(v);

});

四、用for in不仅可以对数组,也可以对enumerable对象操作

var A = {a:1,b:2,c:3,d:"hello world"};  
for(let k in A) {  
    console.log(k,A[k]);  
}

五、在ES6中,增加了一个for of循环,使用起来很简单

for(let v of array) {  
    console.log(v);  
};  
  let s = "helloabc"; 
  for(let c of s) {  
  console.log(c); 
 }

总结来说:for in总是得到对像的key或数组,字符串的下标,而for of和forEach一样,是直接得到值
结果for of不能对象用
对于新出来的Map,Set上面

var set = new Set();  
set.add("a").add("b").add("d").add("c");  
var map = new Map();  
map.set("a",1).set("b",2).set(999,3);  
for (let v of set) {  
    console.log(v);  
}  
console.log("--------------------");  
for(let [k,v] of map) {  
    console.log(k,v);  
}

javascript遍历对象详细总结
1.原生javascript遍历
（1）for循环遍历

let array1 = ['a','b','c'];
for (let i = 0;i < array1.length;i++){
  console.log(array1[i]);  // a  b  c 
}

（2）JavaScript 提供了 foreach() map() 两个可遍历 Array对象的方　　　　

forEach和map用法类似，都可以遍历到数组的每个元素，而且参数一致； 

Array.forEach(function(value , index , array){ //value为遍历的当前元素，index为当前索引，

array为正在操作的数组

  //do something
},thisArg)      //thisArg为执行回调时的this值

不同点：
forEach() 方法对数组的每个元素执行一次提供的函数。总是返回undefined；
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。返回值是一个新的数组；
例子如下：

var array1 = [1,2,3,4,5];     
var x = array1.forEach(function(value,index){     
    console.log(value);   //可遍历到所有数组元素    
    return value + 10
});
console.log(x);   //undefined    无论怎样，总返回undefined     
var y = array1.map(function(value,index){     
    console.log(value);   //可遍历到所有数组元素    
    return value + 10
});
console.log(y);   //[11, 12, 13, 14, 15]   返回一个新的数组

对于类似数组的结构，可先转换为数组，再进行遍历

let divList = document.querySelectorAll('div');   //divList不是数组，而是nodeList
 
//进行转换后再遍历
[].slice.call(divList).forEach(function(element,index){
  element.classList.add('test')
})
 
 
Array.prototype.slice.call(divList).forEach(function(element,index){
  element.classList.remove('test')
})
 
[...divList].forEach(function(element,index){   //<strong>ES6写法</strong>
  //do something
})

复制代码
（3）for ··· in ··· / for ··· of ···

for...in 语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。每次迭代时，分配的是属性名　　

补充 : 因为迭代的顺序是依赖于执行环境的，所以数组遍历不一定按次序访问元素。因此当迭代那些访问次序重要的 arrays 时用整数索引去进行 for 循环 (或者使用 Array.prototype.forEach() 或 for...of 循环) 。

    let array2 = ['a','b','c']
    let obj1 = {
      name : 'lei',
      age : '16'
    }
     
    for(variable  in array2){   //variable  为 index
      console.log(variable )   //0 1 2
    }
     
    for(variable  in obj1){   //variable 为属性名
      console.log(variable)   //name age
    }

ES6新增了遍历器(Iterator)机制，为不同的数据结构提供统一的访问机制。只要部署了Iterator的数据结构都可以使用 for ··· of ··· 完成遍历操作 ( Iterator详解： http://es6.ruanyifeng.com/#do... )，每次迭代分配的是属性值

原生具备 Iterator 接口的数据结构如下：

Array Map Set String TypedArray 函数的arguments对象 NodeList对象

    let array2 = ['a','b','c']
    let obj1 = {
      name : 'lei',
      age : '16'
    }
     
    for(variable  of array2){   //<strong>variable  为 value</strong>
      console.log(variable )   //'a','b','c'
    }
     
    for(variable  of obj1){  //<strong>普通对象不能这样用</strong>
      console.log(variable)   // 报错 ： main.js:11Uncaught TypeError: 
     obj1[Symbol.iterator] is not a function
    }<br><br>let divList = document.querySelectorAll('div');<br><br>for(element of 
     divlist){  //可遍历所有的div节点<br>　　//do something <br>}

　　除了迭代时分配的一个是属性名、一个是属性值外，for in 和 for of 还有其他不同 (MDN文档： https://developer.mozilla.org...

　　for...in循环会遍历一个object所有的可枚举属性。

　　for...of会遍历具有iterator接口的数据结构

　　for...in 遍历（当前对象及其原型上的）每一个属性名称,而 for...of遍历（当前对象上的）每一个属性值

    Object.prototype.objCustom = function () {};
    Array.prototype.arrCustom = function () {};
     
    let iterable = [3, 5, 7];
    iterable.foo = "hello";
     
    for (let i in iterable) {
      console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
    }
     
    for (let i of iterable) {
      console.log(i); // logs 3, 5, 7
    }

创建第一个 Vue 应用

    <body>
    <div id="app">
      {{ message }}
    </div>
    <!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
    <script>
    new Vue({
        el:'#app',
        data: {
            message:'Hello World!'
        }
    });
    </script>

笔记

<div id="app">
  <p>{{* message}}</p>
  <p>{{ message }}</p>
  <!-- 字符串连接 -->
  <p>{{ message + '官网地址：www.runoob.com' }}</p>
  <!-- 字符串反转 -->
  <p>{{ message.split('').reverse().join('') }}</p>
  <input v-model="message">
</div>

列表输出
v-for

div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '菜鸟教程' },
      { text: 'www.runoob.com' },
      { text: 'www.w3cschool.cc' }
    ]
  }
})
</script>

多维数组实例

<div id="app">
  <ul id="example-2">
  <li v-for="item in items">
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  </li>
</ul>
</div>
<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: '菜鸟教程官网',
    items: [
      { message: 'www.runoob.com' },
      { message: 'www.runoob.com' }
    ]
  }
})
</script>

条件判断
在字符串模板中，如 Handlebars，我们得像这样写一个条件块：

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

在 Vue.js，我们使用 v-if 指令实现同样的功能：

<h1 v-if="ok">Yes</h1>

也可以用 v-else 添加一个 "else" 块：

<div id="app">
    <div v-if="Math.random() > 0.5">
      随机数大于 0.5
    </div>
    <div v-else>
      随机数不大于 0.5
    </div>
</div>
<script>
new Vue({
  el: '#app'
})
</script>

输出结果：随机数不大于 0.5

因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show
v-show作用与v-if类似，不同的是v-show的元素会始终渲染并保持在 DOM 中,且v-show不支持<template>标签。

<h1 v-show="ok">Hello!</h1>

过滤器
与Linux中的管道类似，vue.js也使用的是|:

{{message | uppercase}}

这样就能输出message的大写了,过滤器也能串联在一起使用:

{{message | reverse | uppercase}}

这里reverse并不是内建的过滤器，我们可以用Vue.filter自定义:

 Vue.filter('reverse', function (value) {
      return value.split('').reverse().join('')
 })

js(数组，对象)

张东红

引用和评论

作用域

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

原生JS大揭秘—JS代码执行原理解刨

原生electron起步-从零到一完成构建和打包