zoukankan      html  css  js  c++  java
  • js es6 数组方法整合

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    //Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例
    // const bar=["a","b","c"]
    // alert(Array.from(bar));
    // alert(Array.from('foo'));

    //Array.isArray() 用于确定传递的值是否是一个 Array
    // alert(Array.isArray([1, 2, 3])); //true
    // alert(Array.isArray({foo: 123})); // false
    // alert(Array.isArray("foobar")); // false
    // alert(Array.isArray(undefined)); // false

    //Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
    //Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个包含 7 个 undefined 元素的数组。

    // alert(Array.of(7)); // [7]
    // alert(Array.of(1, 2, 3)); // [1, 2, 3]
    // alert(Array(7)); // [ , , , , , , ]
    // alert(Array(1, 2, 3)); // [1, 2, 3]

    //concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组
    //copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,而不修改其大小。

    //alert(["alpha", "beta", "copy", "delta"].copyWithin(1, 2, 3));
    // 0:"alpha" 1:"beta" 2:"copy" 3:"delta"
    // ["alpha", "copy", "copy", "delta"]
    // 0:"alpha" 1:"copy" 2:"copy" 3:"delta"

    // target === 1:"beta"
    // start === 2:"copy",
    // end === 3:"delta"

    // 1:"beta" => 1:"copy"
    //alert(['alpha', 'bravo', 'charlie', 'delta'].copyWithin(2, 0));
    // results in ["alpha", "bravo", "alpha", "bravo"]

    //entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对
    //var arr = ["a", "b", "c"];
    //var iterator = arr.entries();
    // undefined
    //console.log(iterator);
    // Array Iterator {}
    //console.log(iterator.next().value);
    // [0, "a"]
    //console.log(iterator.next().value);
    // [1, "b"]
    //console.log(iterator.next().value);
    // [2, "c"]

    //every() 方法测试数组的所有元素是否都通过了指定函数的测试。

    //fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
    //var array1 = [1, 2, 3, 4];
    // fill with 0 from position 2 until position 4
    //console.log(array1.fill(0, 2, 4));
    // expected output: [1, 2, 0, 0]
    // fill with 5 from position 1
    //console.log(array1.fill(5, 1));
    // expected output: [1, 5, 5, 5]
    //console.log(array1.fill(6));
    // expected output: [6, 6, 6, 6]

    //filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
    // function isBigEnough(value) {
    // return value >= 10;
    // }
    // var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
    // console.log(filtered);
    // filtered is [12, 130, 44]
    // ES6 way

    // const isBigEnough = value => value >= 10;
    // let [...spread]= [12, 5, 8, 130, 44];
    // let filtered = spread.filter(isBigEnough);
    // console.log(filtered);
    // filtered is [12, 130, 44]

    //find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
    // function isBigEnough(element) {
    // return element >= 15;
    // }
    // var ret1 = [12, 5, 8, 130, 44].find(isBigEnough);
    // console.log(ret1);
    // // 130
    // var objArr = [{id:1, name:'jiankian'}, {id:23, name:'anan'}, {id:188, name:'superme'}, {id:233, name:'jobs'}, {id:288, name:'bill', age:89}, {id:333}] ;
    // var ret2 = objArr.find((v) => {
    // return v.id == 233;
    // });
    // console.log(ret2);

    //findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1
    // function isBigEnough(element) {
    // return element >= 15;
    // }
    // var ret1 = [12, 5, 8, 130, 44].findIndex(isBigEnough);
    // console.log(ret1);
    // // index of 4th element in the Array is returned,
    // // so this will result in '3'
    // var objArr = [{id:1, name:'jiankian'}, {id:23, name:'anan'}, {id:188, name:'superme'}, {id:233, name:'jobs'}, {id:288, name:'bill', age:89}, {id:333}] ;
    // var ret2 = objArr.findIndex((v) => {
    // return v.id == 233;
    // });
    // console.log(ret2);
    // // return 3

    //forEach() 方法对数组的每个元素执行一次提供的函数
    // const arr = ['a', 'b', 'c'];
    // arr.forEach(function(element) {
    // console.log(element);
    // });
    // arr.forEach( element => console.log(element));

    // a
    // b
    // c

    //includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false
    // let a = [1, 2, 3];
    // alert(a.includes(2));
    // // true
    // alert(a.includes(4));
    // // false

    //indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
    // let a = [2, 9, 7, 8, 9];
    // a.indexOf(2); // 0
    // a.indexOf(6); // -1
    // a.indexOf(7); // 2
    // a.indexOf(8); // 3
    // a.indexOf(9); // 1
    // if (a.indexOf(3) === -1) {
    // // element doesn't exist in array
    // }
    // var numArr1 = [1,3,4,56,66,78,90];
    // var objArr1 = [[1,3,4,6,8],{id: 1,name:'jiankian',url:'http://www.anline.cn'},{id:2,name:'google'},{id:34,name:'jobs'},10,24,{id:88,name:'papa'}];
    // var ret1 = objArr1.indexOf(10);
    // console.log(ret1);
    // //output 4
    // var ret2 = objArr1.indexOf({id:34,name:'jobs'});
    // console.log(ret2);
    // //output -1 a fail result
    // objArr1.push(numArr1);
    // var ret3 = objArr1.indexOf(numArr1);
    // console.log(ret3);
    // //output 7 a success result
    // var numArr2 = [1,3,4,56,66,78,90];
    // var ret4 = objArr1.indexOf(numArr2);
    // console.log(ret4);
    // //output -1 a fail result
    // var ret5 = objArr1.lastIndexOf(numArr1);
    // console.log(ret5);
    // //output 7 a success result
    // var ret6 = objArr1.lastIndexOf([1,3,4,56,66,78,90]);
    // console.log(ret6);
    // //output -1 a fail result
    // //so ,the indexOf params have to a point value

    //join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串
    // let a = ['Wind', 'Rain', 'Fire'];
    // console.log(a.join());
    // // 默认为 ","
    // // 'Wind,Rain,Fire'
    // console.log(a.join(""));
    // // 分隔符 === 空字符串 ""
    // // "WindRainFire"
    // console.log(a.join("-"));
    // // 分隔符 "-"
    // // 'Wind-Rain-Fire'

    //keys() 方法返回一个新的Array迭代器,它包含数组中每个索引的键
    // let arr = ["a", "b", "c"];
    // let iterator = arr.keys();
    // // undefined
    // console.log(iterator);
    // // Array Iterator {}
    // console.log(iterator.next());
    // // Object {value: 0, done: false}
    // console.log(iterator.next());
    // // Object {value: 1, done: false}
    // console.log(iterator.next());
    // // Object {value: 2, done: false}
    // console.log(iterator.next());
    // // Object {value: undefined, done: true}

    //lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始

    //map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果
    // ES6
    // let numbers = [1, 5, 10, 15];
    // let doubles = numbers.map( x => x ** 2);
    // console.log(doubles);
    // doubles is now [1, 25, 100, 225]
    // numbers is still [1, 5, 10, 15]
    // const numbers = [2, 4, 8, 10];
    // let halves = numbers.map(x => x / 2);
    // console.log(halves);
    //let numbers = [1, 4, 9];
    // let roots = numbers.map(Math.sqrt);
    // console.log(roots);
    // roots is now [1, 2, 3]
    // numbers is still [1, 4, 9]

    //pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度
    // let a = [1, 2, 3];
    // alert(a.length); // 3
    // alert(a.pop()); // 3
    // console.log(a); // [1, 2]
    // alert(a.length); // 2

    //push() 方法将一个或多个元素添加到数组的末尾,并返回新数组的长度
    // var numbers = [1, 2, 3];
    // numbers.push(4);
    // console.log(numbers);
    // // [1, 2, 3, 4]
    // numbers.push(5, 6, 7);
    // console.log(numbers);
    // // [1, 2, 3, 4, 5, 6, 7]

    //reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值

    //reduceRight() 方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值
    // let flattened = [
    // [0, 1],
    // [2, 3],
    // [4, 5]
    // ].reduceRight((a, b) => {
    // return a.concat(b);
    // }, []);
    // console.log(flattened);
    // // flattened is [4, 5, 2, 3, 0, 1]

    //reverse() 方法将数组中元素的位置颠倒。
    //第一个数组元素成为最后一个数组元素,最后一个数组元素成为第一个。

    //shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度
    // let a = [1, 2, 3];
    // let b = a.shift();
    // console.log(a);
    // // [2, 3]
    // console.log(b);
    // // 1

    //slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。
    // var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
    // console.log(animals.slice(2));
    // // expected output: Array ["camel", "duck", "elephant"]
    // console.log(animals.slice(2, 4));
    // // expected output: Array ["camel", "duck"]
    // console.log(animals.slice(1, 5));
    // // expected output: Array ["bison", "camel", "duck", "elephant"]

    //some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试
    // const isBiggerThan10 = (element, index, array) => {
    // return element > 10;
    // }
    // console.log([2, 5, 8, 1, 4].some(isBiggerThan10));
    // // false
    // console.log([12, 5, 8, 1, 4].some(isBiggerThan10));
    // // true

    //sort() 方法用就地( in-place )的算法对数组的元素进行排序,并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点
    // var fruit = ['cherries', 'apples', 'bananas'];
    // console.log(fruit.sort());
    // // ['apples', 'bananas', 'cherries']

    // var scores = [1, 10, 21, 2];
    // console.log(scores.sort());
    // // [1, 10, 2, 21]
    // // 注意10在2之前,
    // // 因为在 Unicode 指针顺序中"10"在"2"之前

    // var things = ['word', 'Word', '1 Word', '2 Words'];
    // console.log(things.sort());
    // // ['1 Word', '2 Words', 'Word', 'word']
    // // 在Unicode中, 数字在大写字母之前,
    // // 大写字母在小写字母之前.

    //splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容
    // var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
    // console.log(myFish.splice(2, 0, 'drum')); // 在索引为2的位置插入'drum'
    // // myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"]
    // console.log(myFish.splice(2, 1)); // 从索引为2的位置删除一项(也就是'drum'这一项)
    // // myFish 变为 ["angel", "clown", "mandarin", "sturgeon"]

    //toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开
    //toString() 返回一个字符串,表示指定的数组及其元素

    //unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度
    // let a = [1, 2, 3];
    // a.unshift(4, 5);
    // console.log(a);
    // // [4, 5, 1, 2, 3]

    //@@iterator 属性和 values() 属性的初始值均为同一个函数对象

    </script>
    </head>
    <body>

    </body>
    </html>

  • 相关阅读:
    HTML5项目笔记7:使用HTML5 WebStorage API构建与.NET对应的会话机制 Hello
    论设计模式和分析模式
    昨天我做了点什么事情啊?
    时间,时间,还是时间
    人生需要规划
    突然想起今天的博客汇报没写
    昨天看了熊猫大侠
    双休日往往会忘了写日志
    老婆说我是缺心眼!
    要下班了才想起没写报告
  • 原文地址:https://www.cnblogs.com/lulublog/p/8525637.html
Copyright © 2011-2022 走看看