【不斷更新】JavaScript 各種 demo

---------------------------------------------- 尊重原創，轉載請註明出處。----------------------------------------------

1.數組去重

let arr = [1, 3, 3, 5];

// 方法1
// Array.from(): 將其他對象轉化爲數組
// set數據結構：ES6，類似於數組，但其成員值都是唯一的

let method1 = array => Array.from(new Set(array));
console.log(method1(arr)); // [1,3,5]

// 方法2（類似方法1）
const method2= arr => [...new Set(arr)];
console.log(method2(arr)); // [1,3,5]

// 方法3
let method3 = array => {
    let newArr = [];
    for(let i = 0; i < array.length; i++){
        if(!newArr.includes(array[i])){
            newArr.push(array[i]);
        }
    }
    return newArr;
}
console.log(method3(arr)); // [1,3,5]

2.多種語言打印 Hello, world!

console.log('Hello, world!');             // JavaScript
std::cout<<"Hello, world!"<<std::endl;    // C++
System.out.printIn("Hello, world!");      // Java
printf("Hello, world!");                  // C
Console.WriteLine("Hello, world!");       // C#
print "Hello, world!";                    // python
echo "Hello, world!";                     // php

3.取得數組中最大和最小值

let arr = [2, 3, 6, 1, 3];

// 方法1
// 依次比較
let max = min = arr[0];
for(let i = 0; i < arr.length; i++){
    max < arr[i] ? max = arr[i] : null;
    min > arr[i] ? min = arr[i] : null;
}
console.log(`max: ${max}, min: ${min}`);

// 方法2
// 對數組排序（小 > 大）,第一個是最小值，最後一個是最大值
arr.sort((a,b) => a-b);
let min = arr[0];
let max = arr[arr.length-1];

// 方法3
// Math.max(a,b..) 方法返回參數中較大的值
let max = Math.max.apply(null, arr);
let min = Math.min.apply(null, arr);
// ES6的寫法
let max = Math.max(...arr);
let min = Math.min(...arr);

// 多維數組，則先轉化爲一維數組
// join方法：將數組裏所有元素放入一個字符串
// split方法：把一個字符串分割爲字符串數組
let newArr = arr.join(',').split(',');

4.數組排序

let arr = [3, 1, 7, 5, 9];

// 方法1
// sort方法會改變數組本身
arr.sort((a,b) => a-b); // 從小到大
console.log(`從小到大：${arr}`);
arr.sort((a,b) => b-a); // 從大到小
console.log(`從大到小：${arr}`);

5.顛倒數組

let arr = [1, 2, 3, 4, 5];

// 方法1
// reverse()方法會改變原數組，不會返回新數組
arr.reverse();
console.log(arr);

// 方法2 
// 前後交換
let val, len = arr.length;
for(let i = 0; i < len / 2; i++){
    val = arr[i];
    arr[i] = arr[len-i - 1];
    arr[len-i - 1] = val;
}
console.log(arr);

// 顛倒字符串
let str = 'hello';
let newStr = [...str].reverse().join('');
console.log(newStr);  // olleh

6.在canvas 上繪製一個圓和一個長方形（假設不重疊），且點擊圓的時候控制檯可以
輸出Circle,點擊長方形的時候控制檯可以輸出Rect。

 

7.合併數組

let arr1 = [1, 2, 3],
    arr2 = [4, 5, 6],
    arr3 = [7];

// m1
let aaa = arr1.push(...arr2, ...arr3);    // 放在 arr1的末尾, 並返回新的長度
console.log(aaa);  // 7
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7]
// 放在開頭則使用 unshift() 方法

// m2
for(let i of arr2){
    arr1.push(i);
}
for(let i of arr3){
    arr1.push(i);
}
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7]

// m3 es5
let newArr = arr1.concat(arr2, arr3);
console.log(newArr);

// m4
let newArr = [...arr1, ...arr2, ...arr3];
console.log(newArr);

8.依次打印數組元素

// method1
for(let i = 0; i < arr.length; i++){
    console.log(arr[i]);
} 

// method2
// i is the value of arr
for(let i of arr){
    console.log(i);
}

// method3
// i is the index
for(let i in arr){
    console.log(arr[i]);
}

// method4
arr.forEach((value, index, arr) => {
    console.log(value);
});

// method5
let newArr = arr.map((val, index, arr) => {
    console.log(val);
    return val + 1;
});
console.log("map newArr +1: " + newArr);
// foreach 中 return 無效，map 中 return 會返回一個新的被改變後的數組
// map 中不用 return 的話，和 foreach 一樣
// map 的目的是改變值，filter 的目的是篩去不需要的值

// method6
let newArr6 = arr.filter((val, i, arr) => {
    console.log(val);
    if(val === 2){
        return false;
    } else {
        return true;
    }
});
console.log("filter newArr delete 2: " + newArr6);

9.將字符串轉化爲數組，數組轉化爲字符串

let str = 'h,e,l,l,o';

// m1
let arr1 = [...str];
let arr2 = str.split('');
let arr3 = str.split(',');
let arr4 = Array.from(str);
console.log(arr1); // ["h", ",", "e", ",", "l", ",", "l", ",", "o"]
console.log(arr2); // ["h", ",", "e", ",", "l", ",", "l", ",", "o"]
console.log(arr3); // ["h", "e", "l", "l", "o"]
console.log(arr4); // ["h", ",", "e", ",", "l", ",", "l", ",", "o"]


let arr = ['h','e','l','l','o'];
let str1 = arr.join('');
console.log(str1); // hello

10.找出數組中所有小於0的數 

let arr = [2, 8, -5, 3, -9];

// m1
for(let i of arr){
    i < 0 ? console.log(i) : null;  // -5
                                    // -9
}

// m2
// find 方法只能找到第一個符合條件的值, 不存在就返回 undefined
// findIndex 返回第一個符合條件的值的 index，不存在就返回 -1

for(let i of arr){
    let num = arr.find((val) => val < 0);
    num === undefined ? null : console.log(num);
    let index = arr.findIndex((val) => val < 0);
    arr.splice(index, 1);
}

11.將一維數組轉化爲二維數組

let arr =  [0, 1, 2, 3, 4, 5]
let newArr = []; // [[0, 1], [2, 3], [4, 5]

function fn(arr, num){
    let newArr = [];
    for(let i = 0; i < arr.length/num; i++){
        for(let j = 0; j < arr.length; j++){
            if(i * num <= j < (i+1) * num){
                newArr[i].push(arr[i]);
            }
        }
    }
    return newArr;
}

12.判斷一個變量是數組還是對象

            let arr = [1, 2, 3];
            let obj = {
                name: 'Turing',
            }
            function judgeVar(variable){
                // 方法1，instanceof 與 typeof 運算符相似，用於識別正在處理的對象的類型
                return typeof variable === 'object' &&  variable instanceof Array ? '數組' : '對象';
                // 方法2，constructor 屬性返回對創建此對象的數組函數的引用
                return typeof variable === 'object' &&  variable.constructor === Array ? '數組' : '對象';
            }
            console.log(judgeVar(arr));  // 數組
            console.log(judgeVar(obj));  // 對象