标签: destructuring

正如在JavaScript 1.7的Mozilla changlog中可以看到的,他们已经添加了解构分配.可悲的是,我不是很喜欢这种语法(为什么要写a和b两次？):

var a, b;  
[a, b] = f();

这样的事情会好很多:

var [a, b] = f();

这仍然是向后兼容的.类似Python的解构不会向后兼容.

无论如何,我能够想出的最好的JavaScript 1.5解决方案是:

function assign(array, map) {
    var o = Object();
    var i = 0;
    $.each(map, function(e, _) {
        o[e] = array[i++];
    });
    return o;
}

其工作方式如下:

var array = [1,2];
var _ = assign[array, { var1: null, var2: null });
_.var1; // prints 1
_.var2; // prints 2

但这真的很糟糕,因为_没有任何意义.它只是一个存储名称的空壳.但遗憾的是它需要因为JavaScript没有指针.在正面,您可以在值不匹配的情况下指定默认值.另请注意,此解决方案不会尝试切片阵列.所以你不能做类似的事情{first: 0, rest: 0}.但如果有人想要这种行为,那很容易做到.

什么是更好的解决方案？

我有以下数据结构:

{:file #<File /foo.bar>, :resolution {:width 1280, :height 1024}}

我想编写destructures的功能:resolution键进入width和height符号.就像是

(defn to-directory-name [{{:keys [width height]}} wallpaper]
  (str width "x" height))

这种可能与解构有关吗？

谢谢.

使用Babel转换为ES6时出现奇怪的错误,ng-annotate不喜欢解构.我将我的源码复制到在线babel编译器中,它运行正常.ng-annotate在我的gulp管道链中注释掉了错误.删除/* @ngAnnotate */文件中的注释并手动注入也不会改变任何内容.

Gulp部分:

return gulp.src(config.scripts.app)
    .pipe(changed(config.dist + '/scripts'))
    .pipe(plumber())
    .pipe(annotate())

    // Filter out and transpile only .es6.js files
    .pipe(es6)
    .pipe(babel({
        presets: ['es2015'],
        plugins: ['extensible-destructuring'],
        comments: false
    }))
    .pipe(es6.restore)

    .pipe(concat('scripts.js'))
    .pipe(gulp.dest(config.dist + '/scripts'))

有问题的来源:

var [min, max] = values.map(val => +val);
// let/var doesn't make a difference.

ngModelCtrl.$modelValue = [min, max];

错误来自依赖ng-annotate:

Error: StringMap expected string key
    at stringmap.set (/Users/macbookair/Places/app/places/frontend/node_modules/gulp-ng-annotate/node_modules/ng-annotate/node_modules/stringmap/stringmap.js:101:19)
    at Scope.add (/Users/macbookair/Places/app/places/frontend/node_modules/gulp-ng-annotate/node_modules/ng-annotate/build/es5/scope.js:102:17)
    at /Users/macbookair/Places/app/places/frontend/node_modules/gulp-ng-annotate/node_modules/ng-annotate/build/es5/scopetools.js:38:25
    at Array.forEach (native)
    .... more

stringmap.js 有问题的功能: …

在一个let形式(Clojure在这里)我可以做类似的事情

(let [[u s v] (svd A)] 
   (do-something-with u v))

其中svd返回长度为3的列表.这是一件很自然的事情,为什么我们不这样做呢？

(def [u s v] (svd A))

及其各种概括作为def表单的默认行为？我不知道这会如何干扰def已经在做的事情.理解Lisp或Clojure的Zen的人能解释为什么def不支持绑定(与解构)一样强大let吗？

示例:

const foo = {a: "A", b: "B"}
const {a, b} = foo

如果我想b成为变量使用let怎么办？

我有:

const section = cloneElement(this.props.children, {
  className: this.props.styles.section,
  ...this.props,
});

在里面this.props,我有一个styles我不想传递给克隆元素的属性.

我能怎么做？

我有:

const props = {
  gallery: [],
  select: () => null,
  one: 1,
  two: 2,
}

我可以用它来构造它:

const {gallery, select, ...other} = props

我现在有三个变量:

• gallery =[]
• 选择 =() => null
• 其他 ={one: 1,two: 2}

是否有可能选择指定分组？

这样的事情(这不会起作用,但我希望看到我想要做的事情很清楚):

const {{gallery, select}: specific, ...other} = props

所以我将有2个变量:

• 具体 ={gallery: [], select: () => null}
• 其他 ={one: 1,two: 2}

我可以在更高级别解决它并以这种方式构建道具:

const props = {
  specific: {
    gallery: [],
    select: () => null,
  },
  other: {
    one: 1,
    two: 2, …

我有一个排序过滤器,它采用一个数组来填充选项.试图看到该选项value等于数组中的文本,但我在标题中得到错误:

Invalid attempt to destructure non-iterable instance

我需要将文本作为选项标记中的值传递,以便在用户更新过滤器时,正确的文本显示给用户所做的选择.

这是我的代码:

function Sorting({by, order, rp}: SortingProps) {
    const opts = [
        ['Price (low)', 'price', 'asc'],
        ['Price (high)', 'price', 'desc'],
        ['Discount (low)', 'discount', 'asc'],
        ['Discount (high)', 'discount', 'desc'],
        ['Most popular', 'arrival', 'latest'],
        ['Most recent', 'arrival', 'latest'],
    ];

    const onChange = (i) => {
        const [text, by, order] = opts[i];
        refresh({so: {[by]: order}});
        /* GA TRACKING */
        ga('send', 'event', 'My Shop Sort By', text, 'Used');
    };

    return (
        <div className={cn(shop.sorting, rp.sorting.fill && …

ES6的新解构分配功能现在已经众所周知(Babel的REPL上的实时副本); 在已存在的变量的情况下:

let a, b;                 // Existing variables
let o = {a: "a", b: "b"}; // An object to get values from
// ...
({a, b} = o);             // Set them to the props from `o`
console.log(a);           // "a"
console.log(b);           // "b"

ES6中是否有简单的说法？基于具有相同名称的变量设置现有对象的属性？(除了显而易见的o.a = a; o.b = b;)

注意我不是在讨论创建对象时,我们可以使用美妙的新对象初始化器语法来实现这一点,这样我们就不会不必要地重复这些名称:

let a = "a";
let b = "b";
let o = {a, b};

但是如果我已经有了一个对象,我可以在ES6中进行某种结构分配吗？

我一直在阅读ES6中介绍的解构分配.

这种语法的目的是什么,它为什么被引入,以及它在实践中如何使用的一些例子？